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

{% block content %}
<div class="container py-5">
    <div class="row mb-4">
        <div class="col">
            <h1 class="display-5 fw-bold text-white">Portfolio Overview</h1>
            <p class="text-muted">Tracking your followed politicians and assets.</p>
        </div>
    </div>

    <!-- Performance Summary Cards -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm bg-primary text-white h-100">
                <div class="card-body p-4">
                    <h6 class="text-uppercase opacity-75 small fw-bold mb-3">Avg Success Rate</h6>
                    <div class="d-flex align-items-baseline">
                        <h2 class="display-6 fw-bold mb-0">{{ performance.avg_success }}%</h2>
                    </div>
                    <div class="mt-3 small">
                        <span class="badge bg-white text-primary">High Accuracy</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100" style="background-color: var(--card-bg); border: 1px solid var(--border-color) !important;">
                <div class="card-body p-4">
                    <h6 class="text-uppercase text-muted small fw-bold mb-3">Est. Annual ROI</h6>
                    <div class="d-flex align-items-baseline">
                        <h2 class="display-6 fw-bold mb-0 text-success">+{{ performance.estimated_roi }}%</h2>
                    </div>
                    <div class="mt-3 small text-muted">
                        Based on historical signals
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100" style="background-color: var(--card-bg); border: 1px solid var(--border-color) !important;">
                <div class="card-body p-4">
                    <h6 class="text-uppercase text-muted small fw-bold mb-3">Trades Tracked</h6>
                    <div class="d-flex align-items-baseline">
                        <h2 class="display-6 fw-bold mb-0 text-white">{{ performance.total_trades }}</h2>
                    </div>
                    <div class="mt-3 small text-muted">
                        Active disclosure monitoring
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100" style="background-color: var(--card-bg); border: 1px solid var(--border-color) !important;">
                <div class="card-body p-4">
                    <h6 class="text-uppercase text-muted small fw-bold mb-3">Portfolio Status</h6>
                    <div class="d-flex align-items-baseline">
                        <h2 class="h3 fw-bold mb-0 text-info">{{ performance.portfolio_health }}</h2>
                    </div>
                    <div class="mt-3 small text-muted">
                        Market sensitivity index
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Market Comparison -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="background-color: var(--card-bg); border: 1px solid var(--border-color) !important;">
                <div class="card-header bg-transparent border-bottom border-secondary py-3">
                    <h5 class="mb-0 fw-bold text-white">Market Comparison (Est. Annual ROI)</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        {% for item in market_comparison %}
                        <div class="col-md-3 mb-4 mb-md-0">
                            <div class="mb-2 d-flex justify-content-between">
                                <span class="text-white small fw-bold">{{ item.name }}</span>
                                <span class="fw-bold {% if item.roi > 0 %}text-success{% else %}text-danger{% endif %}">{{ item.roi }}%</span>
                            </div>
                            <div class="progress" style="height: 10px; background-color: #2d333b; border-radius: 10px;">
                                <div class="progress-bar {{ item.class }} {% if item.name == 'Your Portfolio' %}progress-bar-striped progress-bar-animated{% endif %}" 
                                     role="progressbar" 
                                     style="width: {{ item.roi|floatformat:0 }}%; min-width: 5%; border-radius: 10px;" 
                                     aria-valuenow="{{ item.roi }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Followed Politicians -->
        <div class="col-lg-7 mb-4">
            <div class="card border-0 shadow-sm" style="background-color: var(--card-bg); border: 1px solid var(--border-color) !important;">
                <div class="card-header bg-transparent border-bottom border-secondary py-3">
                    <h5 class="mb-0 fw-bold text-white">Watchlist: Politicians</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-dark table-hover align-middle mb-0" id="mp-watchlist-table" style="--bs-table-bg: transparent;">
                            <thead class="bg-dark">
                                <tr style="border-bottom: 2px solid var(--border-color);">
                                    <th class="ps-4 text-muted small text-uppercase">Member of Parliament</th>
                                    <th class="text-muted small text-uppercase">Success Rate</th>
                                    <th class="text-muted small text-uppercase">Est. ROI</th>
                                    <th class="text-end pe-4 text-muted small text-uppercase">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in followed_mps %}
                                <tr id="mp-row-{{ item.mp.id }}" style="border-bottom: 1px solid var(--border-color);">
                                    <td class="ps-4 py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3">
                                                <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center text-white fw-bold" style="width: 40px; height: 40px;">
                                                    {{ item.mp.name|slice:":1" }}
                                                </div>
                                            </div>
                                            <div>
                                                <a href="{% url 'mp_detail' item.mp.id %}" class="text-white fw-bold text-decoration-none">{{ item.mp.name }}</a>
                                                <div class="small text-muted">{{ item.mp.party }} • {{ item.trade_count }} trades</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="fw-bold me-2 text-white">{{ item.success_rate }}%</span>
                                            <div class="progress flex-grow-1" style="height: 4px; max-width: 60px; background-color: #2d333b;">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ item.success_rate }}%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="text-success fw-bold">+{{ item.roi }}%</span></td>
                                    <td class="text-end pe-4">
                                        <button class="btn btn-sm btn-outline-danger follow-btn" data-mp-id="{{ item.mp.id }}">Unfollow</button>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">
                                        <i class="bi bi-people h1 d-block mb-3 opacity-25"></i>
                                        No politicians followed yet.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Followed Tickers -->
        <div class="col-lg-5 mb-4">
            <div class="card border-0 shadow-sm" style="background-color: var(--card-bg); border: 1px solid var(--border-color) !important;">
                <div class="card-header bg-transparent border-bottom border-secondary py-3">
                    <h5 class="mb-0 fw-bold text-white">Watchlist: Assets</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush" id="ticker-watchlist-list">
                        {% for item in ticker_data %}
                        <li class="list-group-item bg-transparent p-3" id="ticker-row-{{ item.ticker }}" style="border-bottom: 1px solid var(--border-color);">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <a href="{% url 'ticker_detail' item.ticker %}" class="fw-bold text-info text-decoration-none">{{ item.ticker }}</a>
                                    <div class="small text-muted">{{ item.company_name }}</div>
                                    <div class="mt-1">
                                        <span class="badge bg-dark text-muted border border-secondary small">{{ item.trade_count }} Signals</span>
                                        <span class="text-success small fw-bold ms-2">+{{ item.roi }}% Est.</span>
                                    </div>
                                </div>
                                <button class="btn btn-sm btn-outline-secondary follow-btn" data-ticker="{{ item.ticker }}">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </div>
                        </li>
                        {% empty %}
                        <li class="list-group-item bg-transparent text-center py-5 text-muted">
                            <i class="bi bi-graph-up h1 d-block mb-3 opacity-25"></i>
                            No assets followed yet.
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Listen for the custom event dispatched in base.html
    document.addEventListener('followToggled', function(e) {
        const data = e.detail.data;
        if (data.status === 'unfollowed') {
            const type = data.type;
            let elementId;
            if (type === 'mp') {
                elementId = `mp-row-${data.mp_id}`;
            } else {
                elementId = `ticker-row-${data.ticker}`;
            }
            
            if (elementId) {
                const el = document.getElementById(elementId);
                if (el) {
                    el.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
                    el.style.opacity = '0';
                    el.style.transform = 'translateX(30px)';
                    setTimeout(() => {
                        el.remove();
                    }, 400);
                }
            }
        }
    });
});
</script>
{% endblock %}