@extends('layouts.app')

@section('title', 'Finance Dashboard')
@section('heading', 'Finance Dashboard')

@section('content')

@php
    $currency = config('app.currency_symbol', '₹');
    $formatMoney = fn ($amount) => $currency . number_format((float) $amount, 2);
@endphp

@include('finance.top-submenu')

{{-- Quick actions --}}
<div class="mb-5 flex flex-wrap items-center justify-between gap-3">
    <div>
        <h1 class="font-semibold uppercase tracking-[0.18em] text-primary">Finance Operations</h1>
        <p class="mt-1 text-sm text-slate-500">Cash position, approvals, and month-to-date flow at a glance.</p>
    </div>
    <div class="flex flex-wrap gap-3">
        <a href="{{ route('expenses.create') }}"
           class="inline-flex items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3.5 py-1.5 text-sm font-medium text-rose-800 shadow-sm transition hover:bg-rose-100">
            <i class="bi bi-receipt text-sm"></i> Record expense
        </a>
        <a href="{{ route('deposits.create') }}"
           class="inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-3.5 py-1.5 text-sm font-medium text-sky-800 shadow-sm transition hover:bg-sky-100">
            <i class="bi bi-plus-lg text-sm"></i> Add deposit
        </a>
    </div>
</div>

{{-- KPI row --}}
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="group relative flex items-center gap-4 overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-emerald-50/40 to-slate-50 p-5 pl-6 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-emerald-500" aria-hidden="true"></span>
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-emerald-100">
            <i class="bi bi-wallet2 text-xl text-emerald-600"></i>
        </div>
        <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Total cash balance</p>
            <p class="mt-1 truncate text-xl font-bold {{ $totalCashBalance >= 0 ? 'text-slate-800' : 'text-rose-700' }}">{{ $formatMoney($totalCashBalance) }}</p>
            <p class="mt-0.5 text-xs text-slate-400">
                {{ $accountCount }} {{ Str::plural('account', $accountCount) }}
                · {{ $formatMoney($accountCashBalance ?? $totalCashBalance) }} in accounts
                · {{ $formatMoney($mtdExpenses) }} MTD expenses deducted
            </p>
        </div>
    </div>

    <div class="group relative flex items-center gap-4 overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-sky-50/40 to-slate-50 p-5 pl-6 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-sky-500" aria-hidden="true"></span>
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-sky-100">
            <i class="bi bi-arrow-down-circle text-xl text-sky-600"></i>
        </div>
        <div>
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Deposits (MTD)</p>
            <p class="mt-1 text-xl font-bold text-sky-700">{{ $formatMoney($mtdDeposits) }}</p>
            <p class="mt-0.5 text-xs text-slate-400">Money in this month</p>
        </div>
    </div>

    <div class="group relative flex items-center gap-4 overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-rose-50/30 to-slate-50 p-5 pl-6 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-rose-500" aria-hidden="true"></span>
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-rose-100">
            <i class="bi bi-arrow-up-circle text-xl text-rose-600"></i>
        </div>
        <div>
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Expenses (MTD)</p>
            <p class="mt-1 text-xl font-bold text-rose-600">{{ $formatMoney($mtdExpenses) }}</p>
            <p class="mt-0.5 text-xs text-slate-400">Approved &amp; paid only</p>
        </div>
    </div>

    <div class="group relative flex items-center gap-4 overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-amber-50/40 to-slate-50 p-5 pl-6 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-amber-500" aria-hidden="true"></span>
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-amber-100">
            <i class="bi bi-hourglass-split text-xl text-amber-600"></i>
        </div>
        <div>
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Pending approval</p>
            <p class="mt-1 text-xl font-bold text-amber-700">{{ $pendingExpensesCount }}</p>
            <p class="mt-0.5 text-xs text-slate-400">{{ $formatMoney($pendingExpensesAmount) }} awaiting review</p>
        </div>
    </div>
</div>

{{-- Net cash flow banner --}}
@php
    $netPositive = $netCashFlowMtd >= 0;
@endphp
<div class="mb-6 rounded-2xl border px-5 py-4 {{ $netPositive ? 'border-emerald-200 bg-emerald-50/60' : 'border-rose-200 bg-rose-50/60' }}">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="flex items-center gap-3">
            <span class="flex h-10 w-10 items-center justify-center rounded-full {{ $netPositive ? 'bg-emerald-100 text-emerald-600' : 'bg-rose-100 text-rose-600' }}">
                <i class="bi {{ $netPositive ? 'bi-graph-up-arrow' : 'bi-graph-down-arrow' }}"></i>
            </span>
            <div>
                <p class="text-sm font-semibold text-slate-800">Net cash flow (month to date)</p>
                <p class="text-xs text-slate-500">Deposits minus approved/paid expenses</p>
            </div>
        </div>
        <p class="text-xl font-bold {{ $netPositive ? 'text-emerald-700' : 'text-rose-700' }}">
            {{ $netPositive ? '+' : '' }}{{ $formatMoney($netCashFlowMtd) }}
        </p>
    </div>
</div>

{{-- Charts row --}}
<div class="mb-6 grid gap-5 lg:grid-cols-2">
    <x-card class="rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-teal-50/20 to-slate-50/80 p-5 shadow-sm">
        <div class="mb-4">
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Cash flow</p>
            <h3 class="mt-1 text-base font-semibold text-slate-900">Deposits vs expenses</h3>
            <p class="mt-1 text-sm text-slate-500">Last 6 months — approved/paid expenses only.</p>
        </div>
        <div class="rounded-xl border border-slate-200/70 bg-white/90 p-3 shadow-sm">
            <div class="h-64 w-full">
                <canvas id="financeCashFlowChart" class="h-full w-full"></canvas>
            </div>
        </div>
    </x-card>

    <x-card class="rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-indigo-50/20 to-slate-50/80 p-5 shadow-sm">
        <div class="mb-4 flex items-start justify-between gap-3">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">Expenses</p>
                <h3 class="mt-1 text-base font-semibold text-slate-900">Approval pipeline</h3>
                <p class="mt-1 text-sm text-slate-500">Current status distribution.</p>
            </div>
            <a href="{{ route('expenses.index', ['status' => 'pending']) }}"
               class="shrink-0 rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100">
                Review pending
            </a>
        </div>
        <div class="rounded-xl border border-slate-200/70 bg-white/90 p-3 shadow-sm">
            <div class="h-52 w-full">
                <canvas id="financeStatusChart" class="h-full w-full"></canvas>
            </div>
        </div>
        <div class="mt-4 grid grid-cols-2 gap-2">
            @php
                $statusMeta = [
                    'pending'  => ['bg' => 'bg-amber-100',  'dot' => 'bg-amber-500',  'text' => 'text-amber-800'],
                    'approved' => ['bg' => 'bg-sky-100',    'dot' => 'bg-sky-500',    'text' => 'text-sky-800'],
                    'paid'     => ['bg' => 'bg-emerald-100','dot' => 'bg-emerald-500','text' => 'text-emerald-800'],
                    'rejected' => ['bg' => 'bg-rose-100',   'dot' => 'bg-rose-500',   'text' => 'text-rose-800'],
                ];
            @endphp
            @foreach($statusMeta as $status => $colors)
                <div class="flex items-center justify-between rounded-lg {{ $colors['bg'] }} px-3 py-1.5">
                    <div class="flex items-center gap-2">
                        <span class="h-2.5 w-2.5 rounded-full {{ $colors['dot'] }}"></span>
                        <span class="text-xs font-medium {{ $colors['text'] }} capitalize">{{ $status }}</span>
                    </div>
                    <span class="text-sm font-bold {{ $colors['text'] }}">{{ $byStatus[$status] }}</span>
                </div>
            @endforeach
        </div>
    </x-card>
</div>

{{-- Accounts + category breakdown --}}
<div class="mb-6 grid gap-5 lg:grid-cols-2">
    <x-card class="rounded-2xl border border-slate-200/70 bg-white p-5 shadow-sm">
        <div class="mb-4 flex items-center justify-between">
            <div>
                <h3 class="text-base font-semibold text-slate-900">Account balances</h3>
                <p class="mt-0.5 text-sm text-slate-500">Top accounts by current balance.</p>
            </div>
            <a href="{{ route('accounts.index') }}" class="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
                View all <i class="bi bi-chevron-right text-[10px]"></i>
            </a>
        </div>
        @if($accountBalances->isEmpty())
            <div class="py-8 text-center text-sm text-slate-500">
                <p>No accounts yet.</p>
                <a href="{{ route('accounts.create') }}" class="mt-2 inline-block text-primary hover:underline">Add your first account</a>
            </div>
        @else
            <div class="space-y-3">
                @foreach($accountBalances as $account)
                    @php
                        $pct = ($accountCashBalance ?? $totalCashBalance) > 0
                            ? round(((float) $account->current_balance / ($accountCashBalance ?? $totalCashBalance)) * 100)
                            : 0;
                    @endphp
                    <div>
                        <div class="mb-1 flex items-center justify-between text-sm">
                            <div>
                                <span class="font-medium text-slate-800">{{ $account->name }}</span>
                                <span class="ml-2 text-xs capitalize text-slate-400">{{ $account->type }}</span>
                            </div>
                            <span class="font-semibold text-slate-700">{{ $formatMoney($account->current_balance) }}</span>
                        </div>
                        <div class="h-2 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-primary transition-all" style="width: {{ max($pct, 4) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </x-card>

    <x-card class="rounded-2xl border border-slate-200/70 bg-white p-5 shadow-sm">
        <div class="mb-4 flex items-center justify-between">
            <div>
                <h3 class="text-base font-semibold text-slate-900">Spend by category</h3>
                <p class="mt-0.5 text-sm text-slate-500">This month — all expense statuses.</p>
            </div>
            <a href="{{ route('expenses.index') }}" class="text-sm font-medium text-primary hover:underline">All expenses</a>
        </div>
        @if(empty($expenseByCategory))
            <p class="py-8 text-center text-sm text-slate-500">No expenses recorded this month.</p>
        @else
            <div class="rounded-xl border border-slate-200/70 bg-white/90 p-3 shadow-sm">
                <div class="h-56 w-full">
                    <canvas id="financeCategoryChart" class="h-full w-full"></canvas>
                </div>
            </div>
        @endif
    </x-card>
</div>

{{-- Recent activity --}}
<x-card class="rounded-2xl border border-slate-200/70 bg-white p-5 shadow-sm">
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h3 class="text-base font-semibold text-slate-900">Recent activity</h3>
            <p class="mt-0.5 text-sm text-slate-500">Latest deposits and expenses.</p>
        </div>
    </div>

    @if($recentTransactions->isEmpty())
        <div class="flex flex-col items-center justify-center py-10 text-center">
            <div class="mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-slate-100">
                <i class="bi bi-cash-stack text-2xl text-slate-400"></i>
            </div>
            <p class="text-sm font-medium text-slate-600">No transactions yet</p>
            <p class="mt-1 text-xs text-slate-400">Record a deposit or expense to populate this feed.</p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-100">
                        <th class="pb-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Type</th>
                        <th class="pb-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Description</th>
                        <th class="pb-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 hidden sm:table-cell">Reference</th>
                        <th class="pb-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Date</th>
                        <th class="pb-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">Amount</th>
                        <th class="pb-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($recentTransactions as $tx)
                        <tr class="hover:bg-slate-50/70">
                            <td class="py-3 pr-4">
                                @if($tx['type'] === 'deposit')
                                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">
                                        <i class="bi bi-arrow-down-short"></i> Deposit
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-700">
                                        <i class="bi bi-arrow-up-short"></i> Expense
                                    </span>
                                @endif
                            </td>
                            <td class="py-3 pr-4 font-medium text-slate-800">{{ $tx['label'] }}</td>
                            <td class="py-3 pr-4 text-slate-500 hidden sm:table-cell">{{ Str::limit($tx['reference'], 40) }}</td>
                            <td class="py-3 pr-4 text-slate-500">{{ $tx['date']?->format('d M Y') ?? '—' }}</td>
                            <td class="py-3 pr-4 text-right font-semibold {{ $tx['type'] === 'deposit' ? 'text-emerald-700' : 'text-rose-700' }}">
                                {{ $tx['type'] === 'deposit' ? '+' : '−' }}{{ $formatMoney($tx['amount']) }}
                            </td>
                            <td class="py-3 text-right">
                                <a href="{{ $tx['edit_route'] }}" class="text-xs font-medium text-primary hover:underline">Open</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</x-card>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof Chart === 'undefined') return;

    var palette = {
        text: '#334155',
        muted: '#94a3b8',
        grid: 'rgba(148, 163, 184, 0.18)',
        border: '#ffffff',
        tooltipBg: 'rgba(255, 255, 255, 0.98)',
        tooltipText: '#0f172a'
    };

    Chart.defaults.color = palette.text;
    Chart.defaults.font.family = 'ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif';
    Chart.defaults.font.size = 12;
    Chart.defaults.borderColor = palette.grid;

    var tooltipDefaults = {
        backgroundColor: palette.tooltipBg,
        titleColor: palette.tooltipText,
        bodyColor: palette.tooltipText,
        borderColor: palette.grid,
        borderWidth: 1,
        padding: 10
    };

    var flowLabels = @json(array_column($monthlyFlow, 'label'));
    var flowDeposits = @json(array_column($monthlyFlow, 'deposits'));
    var flowExpenses = @json(array_column($monthlyFlow, 'expenses'));

    var ctxFlow = document.getElementById('financeCashFlowChart');
    if (ctxFlow) {
        new Chart(ctxFlow.getContext('2d'), {
            type: 'bar',
            data: {
                labels: flowLabels,
                datasets: [
                    {
                        label: 'Deposits',
                        data: flowDeposits,
                        backgroundColor: '#0d9488',
                        borderRadius: 6,
                        maxBarThickness: 28
                    },
                    {
                        label: 'Expenses',
                        data: flowExpenses,
                        backgroundColor: '#f43f5e',
                        borderRadius: 6,
                        maxBarThickness: 28
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'bottom' }, tooltip: tooltipDefaults },
                scales: {
                    x: { grid: { display: false } },
                    y: { beginAtZero: true, ticks: { color: palette.muted }, grid: { color: palette.grid } }
                }
            }
        });
    }

    var statusLabels = ['Pending', 'Approved', 'Paid', 'Rejected'];
    var statusData = [
        {{ $byStatus['pending'] }},
        {{ $byStatus['approved'] }},
        {{ $byStatus['paid'] }},
        {{ $byStatus['rejected'] }}
    ];
    var statusColors = ['#f59e0b', '#0ea5e9', '#10b981', '#f43f5e'];

    var ctxStatus = document.getElementById('financeStatusChart');
    if (ctxStatus) {
        new Chart(ctxStatus.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: statusLabels,
                datasets: [{
                    data: statusData,
                    backgroundColor: statusColors,
                    borderColor: palette.border,
                    borderWidth: 3,
                    hoverOffset: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '62%',
                plugins: { legend: { display: false }, tooltip: tooltipDefaults }
            }
        });
    }

    var catLabels = @json(array_column($expenseByCategory, 'name'));
    var catData = @json(array_column($expenseByCategory, 'total'));
    var ctxCat = document.getElementById('financeCategoryChart');
    if (ctxCat && catLabels.length > 0) {
        new Chart(ctxCat.getContext('2d'), {
            type: 'bar',
            data: {
                labels: catLabels,
                datasets: [{
                    label: 'Amount',
                    data: catData,
                    backgroundColor: '#6366f1',
                    borderRadius: 8,
                    maxBarThickness: 24
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: { legend: { display: false }, tooltip: tooltipDefaults },
                scales: {
                    x: { beginAtZero: true, grid: { color: palette.grid } },
                    y: { grid: { display: false } }
                }
            }
        });
    }
});
</script>
@endpush