{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard | {{ project_name }}{% endblock %}

{% block content %}
<div class="container py-5">
    <!-- Hero / Market Overview -->
    <div class="row mb-5">
        <div class="col-lg-8">
            <h1 class="display-5 fw-bold mb-3">Track Parliament's Portfolio</h1>
            <p class="lead text-muted">Real-time reconnaissance of investment disclosures by Canadian Members of Parliament. See what they know, when they know it.</p>
        </div>
        <div class="col-lg-4 d-flex align-items-center justify-content-lg-end">
            <div class="stats-card p-4 rounded-4 w-100">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Total Disclosures</span>
                    <span class="text-success fw-bold">Live</span>
                </div>
                <h2 class="mb-0">{{ total_trades }}</h2>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Live Trade Feed -->
        <div class="col-lg-8">
            <div class="card bg-card border-0 rounded-4 p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="h5 mb-0">Live Disclosure Feed</h3>
                    <div class="dropdown">
                        <button class="btn btn-dark btn-sm dropdown-toggle" type="button" id="partyFilterBtn" data-bs-toggle="dropdown">
                            {% if selected_party %}{{ selected_party }}{% else %}All Parties{% endif %}
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item party-filter" href="#" data-party="">All Parties</a></li>
                            <li><a class="dropdown-item party-filter" href="#" data-party="Liberal">Liberal</a></li>
                            <li><a class="dropdown-item party-filter" href="#" data-party="Conservative">Conservative</a></li>
                            <li><a class="dropdown-item party-filter" href="#" data-party="NDP">NDP</a></li>
                        </ul>
                    </div>
                </div>

                <div id="trade-feed-container">
                    {% include 'core/partials/trade_feed.html' %}
                </div>
                
                <div class="mt-4 text-center">
                    <a href="{% url 'mp_list' %}" class="btn btn-dark rounded-pill px-4">View All {{ total_mps }} MPs</a>
                </div>
            </div>
        </div>

        <!-- Sidebar: Trending / Watchlist -->
        <div class="col-lg-4">
            <div class="card bg-card border-0 rounded-4 p-4 mb-4">
                <h3 class="h5 mb-4">Trending Assets</h3>
                <div class="list-group list-group-flush bg-transparent">
                    {% for asset in trending_assets %}
                    <a href="{% url 'ticker_detail' asset.ticker %}" class="list-group-item bg-transparent border-secondary border-opacity-25 px-0 py-3 d-flex justify-content-between align-items-center text-decoration-none text-white transition-hover">
                        <div class="d-flex align-items-center">
                            <div class="ticker-icon bg-primary-subtle text-primary me-3">{{ asset.ticker|slice:":1" }}</div>
                            <div>
                                <div class="fw-bold">{{ asset.ticker }}</div>
                                <div class="small text-muted text-truncate" style="max-width: 150px;">{{ asset.company_name }}</div>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold">{{ asset.trade_count }} Trades</div>
                            <div class="small text-success">Active</div>
                        </div>
                    </a>
                    {% empty %}
                    <p class="text-muted small">No trending data yet.</p>
                    {% endfor %}
                </div>
                <a href="{% url 'ticker_list' %}" class="btn btn-dark w-100 mt-3 rounded-3">View All Markets</a>
            </div>

            <div class="card bg-primary-custom border-0 rounded-4 p-4 text-dark shadow-lg">
                <h3 class="h5 mb-3 fw-bold">Start Your Portfolio</h3>
                <p class="small mb-4 opacity-75">Connect your account to set alerts and follow specific MPs or tickers.</p>
                {% if not user.is_authenticated %}
                <a href="{% url 'signup' %}" class="btn btn-dark w-100 rounded-3 fw-bold">Create Free Account</a>
                {% else %}
                <p class="fw-bold mb-0 text-dark">Welcome back, {{ user.username }}!</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
    .bg-card {
        background-color: var(--card-bg) !important;
    }
    .stats-card {
        background: linear-gradient(135deg, #1e2126 0%, #0a0b0d 100%);
        border: 1px solid var(--border-color);
    }
    .bg-primary-custom {
        background-color: var(--accent-green) !important;
    }
    .custom-table {
        border-collapse: separate;
        border-spacing: 0 10px;
    }
    .custom-table tr {
        background-color: rgba(255, 255, 255, 0.02);
        transition: background-color 0.2s ease;
    }
    .custom-table tr:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    .custom-table td, .custom-table th {
        border: none;
        padding: 1.25rem 1rem;
    }
    .avatar {
        width: 40px;
        height: 40px;
        background-color: var(--border-color);
        color: var(--accent-green);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 700;
        font-family: 'Lexend', sans-serif;
    }
    .ticker-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
        background-color: rgba(255,255,255,0.05) !important;
    }
    .transition-hover:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
        padding-left: 5px !important;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterLinks = document.querySelectorAll('.party-filter');
    const container = document.getElementById('trade-feed-container');
    const filterBtn = document.getElementById('partyFilterBtn');

    filterLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const party = this.getAttribute('data-party');
            const url = party ? `/?party=${party}` : '/';

            // Update button text
            filterBtn.innerText = party ? party : 'All Parties';

            // Show loading state
            container.style.opacity = '0.5';

            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                container.innerHTML = html;
                container.style.opacity = '1';
            })
            .catch(error => {
                console.error('Error fetching filtered data:', error);
                container.style.opacity = '1';
            });
        });
    });
});
</script>
{% endblock %}