{% extends "base.html" %}
{% block content %}
{% load humanize %}

<div class="max-w-7xl mx-auto px-4 py-10">

    <!-- =============================
         HEADER
    ============================== -->
    <div class="mb-10">
        <h1 class="text-3xl font-bold text-[color:var(--color-text)]">Dashboard</h1>
        <p class="mt-2 text-[color:var(--color-text-muted)]">
            Bookkeeping Overview for Tax Year {{ tax_year }}
        </p>
    </div>
    
        <!-- =============================
        ROW 1 — QUARTER CARDS (3 per row)
    ============================== -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">

        <!-- Quarter Income -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl p-6 shadow-sm">
            <p class="text-sm text-[color:var(--color-text-muted)]">Quarter Income</p>
            <p class="text-3xl font-bold">£{{ quarter_income|intcomma }}</p>
            <p class="text-xs text-[color:var(--color-text-muted)] mt-1">
                Quarter: {{ current_quarter }}
            </p>
        </div>

        <!-- Quarter Expenses -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl p-6 shadow-sm">
            <p class="text-sm text-[color:var(--color-text-muted)]">Quarter Expenses</p>
            <p class="text-3xl font-bold">£{{ quarter_expenses|intcomma }}</p>
            <p class="text-xs text-[color:var(--color-text-muted)] mt-1">
                Quarter: {{ current_quarter }}
            </p>
        </div>

        <!-- Quarter Profit -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl p-6 shadow-sm">
            <p class="text-sm text-[color:var(--color-text-muted)]">Quarter Profit</p>
            <p class="text-3xl font-bold {% if quarter_profit >= 0 %}text-green-700{% else %}text-red-600{% endif %}">
                £{{ quarter_profit|intcomma }}
            </p>
            <p class="text-xs text-[color:var(--color-text-muted)] mt-1">Income – Expenses</p>
        </div>

    </div>

    <!-- =============================
        ROW 2 — YEAR SUMMARY (3 per row)
    ============================== -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">

        <!-- Total Income -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl p-6 shadow-sm">
            <p class="text-sm text-[color:var(--color-text-muted)]">Total Income</p>
            <p class="text-3xl font-bold">£{{ total_income|intcomma }}</p>
            <p class="text-xs text-[color:var(--color-text-muted)] mt-1">
                Tax Year: {{ tax_year }}
            </p>
        </div>

        <!-- Total Expenses -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl p-6 shadow-sm">
            <p class="text-sm text-[color:var(--color-text-muted)]">Total Expenses</p>
            <p class="text-3xl font-bold">£{{ total_expenses|intcomma }}</p>
            <p class="text-xs text-[color:var(--color-text-muted)] mt-1">
                Tax Year: {{ tax_year }}
            </p>
        </div>

        <!-- YTD Profit -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl p-6 shadow-sm">
            <p class="text-sm text-[color:var(--color-text-muted)]">YTD Profit</p>
            <p class="text-3xl font-bold {% if ytd_profit >= 0 %}text-green-700{% else %}text-red-600{% endif %}">
                £{{ ytd_profit|intcomma }}
            </p>
            <p class="text-xs text-[color:var(--color-text-muted)] mt-1">
                Year-to-date ({{ tax_year }})
            </p>
        </div>

    </div>



    <!-- =============================
         QUICK ACTIONS
    ============================== -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-14">

        <a href="{% url 'businesses:business_list' %}"
           class="block bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                  rounded-xl p-6 hover:bg-[color:var(--color-bg-muted)] transition shadow-sm">

            <h3 class="text-lg font-semibold text-[color:var(--color-text)] mb-2">
                Manage Business
            </h3>
            <p class="text-sm text-[color:var(--color-text-muted)]">
                View, edit or add your business.
            </p>
        </a>

        <a href="{% url 'bookkeeping:income_list' %}"
           class="block bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                  rounded-xl p-6 hover:bg-[color:var(--color-bg-muted)] transition shadow-sm">

            <h3 class="text-lg font-semibold text-[color:var(--color-text)] mb-2">
                View Income
            </h3>
            <p class="text-sm text-[color:var(--color-text-muted)]">
                Review income records or add new entries.
            </p>
        </a>

        <a href="{% url 'bookkeeping:expense_list' %}"
           class="block bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                  rounded-xl p-6 hover:bg-[color:var(--color-bg-muted)] transition shadow-sm">

            <h3 class="text-lg font-semibold text-[color:var(--color-text)] mb-2">
                View Expenses
            </h3>
            <p class="text-sm text-[color:var(--color-text-muted)]">
                Review expenses and supplier information.
            </p>
        </a>

    </div>

    <!-- =============================
         TWO-COLUMN LAYOUT
    ============================== -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">

        <!-- =============================
             RECENT INCOME
        ============================== -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl shadow-sm">
            <div class="flex items-center justify-between px-6 py-4 border-b border-[color:var(--color-border)]">
                <h2 class="text-xl font-semibold text-[color:var(--color-text)]">Recent Income</h2>
                <a href="{% url 'bookkeeping:income_list' %}"
                   class="text-sm text-[color:var(--color-primary)] hover:underline">View All</a>
            </div>

            <table class="w-full text-sm">
                <thead class="bg-[color:var(--color-bg-muted)]">
                    <tr class="text-left text-[color:var(--color-text-muted)]">
                        <th class="px-6 py-3">Date</th>
                        <th class="px-6 py-3">Description</th>
                        <th class="px-6 py-3">Amount</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in recent_income %}
                    <tr class="border-b border-[color:var(--color-border)]">
                        <td class="px-6 py-3">{{ item.date }}</td>
                        <td class="px-6 py-3">{{ item.description }}</td>
                        <td class="px-6 py-3 text-green-700">£{{ item.amount|intcomma }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="3"
                            class="px-6 py-4 text-center text-[color:var(--color-text-muted)]">
                            No income records available.
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <!-- Downloads FOR INCOME -->
            <div class="px-6 py-4 border-t border-[color:var(--color-border)] flex space-x-4">
                <a href="{% url 'bookkeeping:income_export_csv' %}" class="text-sm underline text-[color:var(--color-primary)]">Download CSV</a>
                
            </div>
        </div>

        <!-- =============================
             RECENT EXPENSES
        ============================== -->
        <div class="bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                    rounded-xl shadow-sm">
            <div class="flex items-center justify-between px-6 py-4 border-b border-[color:var(--color-border)]">
                <h2 class="text-xl font-semibold text-[color:var(--color-text)]">Recent Expenses</h2>
                <a href="{% url 'bookkeeping:expense_list' %}"
                   class="text-sm text-[color:var(--color-primary)] hover:underline">View All</a>
            </div>

            <table class="w-full text-sm">
                <thead class="bg-[color:var(--color-bg-muted)]">
                    <tr class="text-left text-[color:var(--color-text-muted)]">
                        <th class="px-6 py-3">Date</th>
                        <th class="px-6 py-3">Description</th>
                        <th class="px-6 py-3">Amount</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in recent_expenses %}
                    <tr class="border-b border-[color:var(--color-border)]">
                        <td class="px-6 py-3">{{ item.date }}</td>
                        <td class="px-6 py-3">{{ item.description }}</td>
                        <td class="px-6 py-3 text-red-600">£{{ item.amount|intcomma }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="3"
                            class="px-6 py-4 text-center text-[color:var(--color-text-muted)]">
                            No expense records available.
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <!-- Downloads FOR EXPENSES-->
            <div class="px-6 py-4 border-t border-[color:var(--color-border)] flex space-x-4">
                <a href="{% url 'bookkeeping:expense_export_csv' %}" class="text-sm underline text-[color:var(--color-primary)]">Download CSV</a>
                
            </div>
        </div>

    </div>

</div>

{% endblock %}
