{% extends "dashboard/base.html" %}

{% block title %}Dashboard - Command Center{% endblock %}

{% block content %}
<!-- Clickable Card Styles & Handler -->
<style>
    .card-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }
    .card-link:hover .kpi-card,
    .card-link:hover .card {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--brand-500);
    }
    .kpi-card, .card {
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .card-clickable {
        cursor: pointer;
        position: relative;
    }
    .card-clickable:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--brand-500);
    }
    .card-clickable a,
    .card-clickable button {
        position: relative;
        z-index: 1;
    }
</style>

<!-- Page Header -->
<div class="page-header flex justify-between items-center">
    <div>
        <h1 class="page-title">Dashboard</h1>
        <p class="page-description">
            {% if company %}
                {{ company.name }} · Revenue overview and key metrics
            {% else %}
                Get started by adding your first company
            {% endif %}
        </p>
    </div>
    {% if companies %}
    <div class="flex items-center gap-2">
        <select class="form-input" style="width: auto;" onchange="window.location.href='?company_id=' + this.value">
            {% for c in companies %}
                <option value="{{ c.id }}" {% if c.id == company.id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
        </select>
        <a href="{{ url_for('dashboard.companies_route') }}" class="btn btn-outline btn-sm">+ Add Company</a>
    </div>
    {% endif %}
</div>

{% if company %}
<!-- KPI Cards -->
<div class="grid grid-4 mb-6">
    <a href="{{ url_for('dashboard.forecast') }}" class="card-link">
        <div class="kpi-card">
            <div class="kpi-label">Annual Target</div>
            <div class="kpi-value">
                ${% if company.target_revenue %}{{ "{:,.0f}".format(company.target_revenue) }}{% else %}—{% endif %}
            </div>
            {% if run_rate.ytd_revenue %}
            <div class="kpi-trend {% if run_rate.pace == 'on_track' %}up{% else %}down{% endif %}">
                ${% if run_rate.ytd_revenue %}{{ "{:,.0f}".format(run_rate.ytd_revenue) }}{% endif %} YTD
            </div>
            {% endif %}
        </div>
    </a>
    <a href="{{ url_for('dashboard.forecast') }}" class="card-link">
        <div class="kpi-card">
            <div class="kpi-label">Run Rate</div>
            <div class="kpi-value">
                ${% if run_rate.run_rate %}{{ "{:,.0f}".format(run_rate.run_rate) }}{% else %}—{% endif %}
            </div>
            <div class="kpi-trend {% if run_rate.pace == 'on_track' %}up{% else %}down{% endif %}">
                {% if run_rate.pace == 'on_track' %}✓ On track{% else %}⚠ Behind{% endif %}
            </div>
        </div>
    </a>
    <a href="{{ url_for('dashboard.projects') }}" class="card-link">
        <div class="kpi-card">
            <div class="kpi-label">Active Projects</div>
            <div class="kpi-value">{{ active_projects or '0' }}</div>
            <div class="kpi-trend">
                <span style="color: var(--info);">View all →</span>
            </div>
        </div>
    </a>
    <a href="{{ url_for('dashboard.goals') }}" class="card-link">
        <div class="kpi-card">
            <div class="kpi-label">Active Goals</div>
            <div class="kpi-value">{{ active_goals|length or '0' }}</div>
            <div class="kpi-trend">
                <span style="color: var(--info);">View all →</span>
            </div>
        </div>
    </a>
</div>

<!-- Main Grid -->
<div class="grid grid-2" style="grid-template-columns: 2fr 1fr;">
    <!-- Recent Forecasts -->
    <div class="card card-clickable" data-redirect="{{ url_for('dashboard.forecast') }}">
        <div class="card-header flex justify-between items-center">
            <div>
                <h2 class="card-title">Revenue Forecast</h2>
                <p class="card-description">Projected vs actual by month</p>
            </div>
            <a href="{{ url_for('dashboard.forecast') }}" class="btn btn-outline btn-sm">View Full →</a>
        </div>
        <div class="card-content" style="padding: 0;">
            {% if recent_forecasts %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Period</th>
                        <th>Projected</th>
                        <th>Actual</th>
                        <th>Variance</th>
                    </tr>
                </thead>
                <tbody>
                    {% for f in recent_forecasts %}
                    <tr>
                        <td>{{ f.period_start.strftime('%b %Y') }}</td>
                        <td>
                            ${% if f.projected_value %}{{ "{:,.0f}".format(f.projected_value) }}{% else %}—{% endif %}
                        </td>
                        <td>
                            ${% if f.actual_value %}{{ "{:,.0f}".format(f.actual_value) }}{% else %}—{% endif %}
                        </td>
                        <td>
                            {% if f.variance_pct %}
                                <span class="badge {% if f.variance_pct >= 0 %}badge-success{% else %}badge-destructive{% endif %}">
                                    {{ '%+.1f%%'|format(f.variance_pct) }}
                                </span>
                            {% else %}
                                —
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div style="padding: 2rem; text-align: center;">
                <p class="text-muted">No forecast data yet</p>
                <a href="{{ url_for('dashboard.forecast') }}" class="btn btn-outline btn-sm mt-2">Add Forecasts</a>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Right Column -->
    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
        <!-- Active Goals -->
        <div class="card card-clickable" data-redirect="{{ url_for('dashboard.goals') }}">
            <div class="card-header flex justify-between items-center">
                <div>
                    <h2 class="card-title">Active Goals</h2>
                    <p class="card-description">{{ active_goals|length }} goals in progress</p>
                </div>
                <a href="{{ url_for('dashboard.goals') }}" class="btn btn-outline btn-sm">View →</a>
            </div>
            <div class="card-content">
                {% if active_goals %}
                    {% for goal in active_goals %}
                    <div style="margin-bottom: 0.75rem; padding-bottom: 0.75rem; {% if not loop.last %}border-bottom: 1px solid var(--border);{% endif %}">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
                            <span style="font-size: 0.875rem; font-weight: 500;">{{ goal.name }}</span>
                            <span class="badge badge-default">{{ goal.category }}</span>
                        </div>
                        <div class="text-xs text-muted">
                            Target: {{ goal.end_date.strftime('%b %d') if goal.end_date else '—' }}
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div style="text-align: center; padding: 1rem;">
                        <p class="text-muted text-sm">No active goals</p>
                        <a href="{{ url_for('dashboard.goals') }}" class="btn btn-outline btn-sm mt-2">Set Goals</a>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Recent Coaching -->
        <div class="card card-clickable" data-redirect="{{ url_for('dashboard.coaching') }}">
            <div class="card-header flex justify-between items-center">
                <div>
                    <h2 class="card-title">Coaching</h2>
                    <p class="card-description">Recent sessions</p>
                </div>
                <a href="{{ url_for('dashboard.coaching') }}" class="btn btn-outline btn-sm">View →</a>
            </div>
            <div class="card-content">
                {% if recent_sessions %}
                    {% for session in recent_sessions %}
                    <div style="margin-bottom: 0.5rem; padding-bottom: 0.5rem; {% if not loop.last %}border-bottom: 1px solid var(--border);{% endif %}">
                        <div style="font-size: 0.875rem; font-weight: 500;">{{ session.title }}</div>
                        <div class="text-xs text-muted">
                            {{ session.start_date.strftime('%b %d, %Y') }} · {% if session.duration_minutes %}{{ session.duration_minutes }} min{% else %}60 min{% endif %}
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div style="text-align: center; padding: 1rem;">
                        <p class="text-muted text-sm">No recent sessions</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% else %}
<!-- Empty State -->
<div class="card" style="margin-top: 2rem;">
    <div class="card-content" style="text-align: center; padding: 3rem;">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" stroke-width="1.5" style="margin-bottom: 1rem;">
            <path d="M3 21h18M5 21V7l8-4v18M13 21V3l8 4v14"/>
        </svg>
        <h2 class="card-title mb-2">Welcome to Command Center</h2>
        <p class="text-muted mb-4">Get started by adding your first company</p>
        <a href="{{ url_for('dashboard.companies_route') }}" class="btn btn-primary btn-lg">Add Your Company</a>
    </div>
</div>
{% endif %}

<!-- Clickable Card Handler -->
<script>
document.querySelectorAll('.card-clickable').forEach(function(card) {
    card.addEventListener('click', function(e) {
        // Don't redirect if clicking an inner link, button, or form element
        if (e.target.closest('a, button, [role="button"], input, select, textarea')) return;
        var url = card.getAttribute('data-redirect');
        if (url) window.location.href = url;
    });
});
</script>
{% endblock %}