<x-filament-panels::page>
    @php
        $data = $this->data();
        $tabs = $this->tabs();
        $periods = $this->periods();
    @endphp

    <style>
        .fn-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
        .fn-pill { padding: 6px 12px; border-radius: 6px; font-size: 13px; background: #fff; border: 1px solid #e5e7eb; cursor: pointer; color: #374151; }
        .dark .fn-pill { background: #1f2937; border-color: #374151; color: #d1d5db; }
        .fn-pill.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
        .fn-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e5e7eb; margin-bottom: 16px; }
        .fn-tab { padding: 10px 16px; font-size: 14px; font-weight: 500; border: none; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; color: #6b7280; }
        .fn-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }
        .fn-grid { display: grid; gap: 16px; }
        .fn-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
        .fn-grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
        .fn-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; }
        .dark .fn-card { background: #1f2937; border-color: #374151; }
        .fn-stat-l { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; }
        .fn-stat-v { font-size: 26px; font-weight: 700; margin-top: 6px; }
        .fn-success { color: #059669; }
        .fn-danger { color: #dc2626; }
        .fn-warning { color: #d97706; }
        .fn-h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
        .fn-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
        .fn-tbl thead th { text-align: left; padding: 8px 4px; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #6b7280; }
        .fn-tbl tbody td { padding: 8px 4px; border-bottom: 1px solid #f3f4f6; }
        .fn-r { text-align: right; }
        .fn-bold { font-weight: 600; }

        /* Cashflow bar chart */
        .fn-chart { display: flex; align-items: flex-end; gap: 2px; height: 220px; padding-top: 16px; }
        .fn-chart-day { flex: 1; min-width: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: relative; }
        .fn-chart-day-label { text-align: center; font-size: 9px; color: #9ca3af; padding-top: 4px; height: 16px; }
        .fn-bar-in { background: #10b981; min-height: 1px; border-radius: 2px 2px 0 0; }
        .fn-bar-out { background: #ef4444; min-height: 1px; border-radius: 0 0 2px 2px; }
    </style>

    <div class="fn-bar">
        <span style="font-size:13px;font-weight:500;">Perioadă:</span>
        @foreach ($periods as $key => $label)
            <button type="button" wire:click="setPeriod('{{ $key }}')"
                    class="fn-pill {{ $period === $key ? 'active' : '' }}">{{ $label }}</button>
        @endforeach
    </div>

    <div class="fn-tabs">
        @foreach ($tabs as $key => $label)
            <button type="button" wire:click="setTab('{{ $key }}')"
                    class="fn-tab {{ $tab === $key ? 'active' : '' }}">{{ $label }}</button>
        @endforeach
    </div>

    @if ($tab === 'overview')
        <div class="fn-grid fn-grid-4">
            <div class="fn-card"><div class="fn-stat-l">Încasări</div><div class="fn-stat-v fn-success">{{ number_format($data['income'], 2, '.', ' ') }} MDL</div></div>
            <div class="fn-card"><div class="fn-stat-l">Cheltuieli</div><div class="fn-stat-v fn-danger">{{ number_format($data['expenses'], 2, '.', ' ') }} MDL</div></div>
            <div class="fn-card"><div class="fn-stat-l">Profit</div><div class="fn-stat-v {{ $data['profit'] >= 0 ? 'fn-success' : 'fn-danger' }}">{{ number_format($data['profit'], 2, '.', ' ') }} MDL</div></div>
            <div class="fn-card"><div class="fn-stat-l">Datorii clienți</div><div class="fn-stat-v fn-warning">{{ number_format($data['debtTotal'], 2, '.', ' ') }} MDL</div></div>
        </div>

    @elseif ($tab === 'cashflow')
        <div class="fn-grid fn-grid-2" style="margin-bottom: 16px;">
            <div class="fn-card"><div class="fn-stat-l">Total intrări</div><div class="fn-stat-v fn-success">{{ number_format($data['totalIn'], 2, '.', ' ') }} MDL</div></div>
            <div class="fn-card"><div class="fn-stat-l">Total ieșiri</div><div class="fn-stat-v fn-danger">{{ number_format($data['totalOut'], 2, '.', ' ') }} MDL</div></div>
        </div>
        <div class="fn-card">
            <div class="fn-h3">Cashflow zilnic — verde = încasări, roșu = cheltuieli</div>
            <div class="fn-chart">
                @foreach ($data['rows'] as $r)
                    <div class="fn-chart-day" title="{{ $r['date'] }}: in {{ number_format($r['in']) }} / out {{ number_format($r['out']) }}">
                        <div class="fn-bar-in" style="height: {{ ($r['in'] / $data['maxAbs']) * 100 }}px;"></div>
                        <div class="fn-bar-out" style="height: {{ ($r['out'] / $data['maxAbs']) * 100 }}px;"></div>
                        @if (count($data['rows']) <= 31)
                            <div class="fn-chart-day-label">{{ $r['date'] }}</div>
                        @endif
                    </div>
                @endforeach
            </div>
            <div style="text-align:right;margin-top:12px;font-size:14px;">
                Net: <b class="{{ $data['net'] >= 0 ? 'fn-success' : 'fn-danger' }}">{{ number_format($data['net'], 2, '.', ' ') }} MDL</b>
            </div>
        </div>

    @elseif ($tab === 'pnl')
        <div class="fn-grid fn-grid-2" style="margin-bottom: 16px;">
            <div class="fn-card">
                <div class="fn-h3">Venituri</div>
                <table class="fn-tbl">
                    <tr><td>Manopere</td><td class="fn-r">{{ number_format($data['worksRevenue'], 2, '.', ' ') }}</td></tr>
                    <tr><td>Piese (vânzare)</td><td class="fn-r">{{ number_format($data['partsRevenue'], 2, '.', ' ') }}</td></tr>
                    <tr style="border-top:2px solid #e5e7eb;"><td class="fn-bold">Total venituri</td><td class="fn-r fn-bold fn-success">{{ number_format($data['totalRevenue'], 2, '.', ' ') }}</td></tr>
                </table>
            </div>
            <div class="fn-card">
                <div class="fn-h3">Costuri</div>
                <table class="fn-tbl">
                    <tr><td>Cost piese (achiziție)</td><td class="fn-r fn-danger">{{ number_format($data['partsCost'], 2, '.', ' ') }}</td></tr>
                    @foreach ($data['expensesByCat'] as $row)
                        <tr><td>{{ \App\Models\Tenant\Expense::CATEGORIES[$row->category] ?? $row->category }}</td><td class="fn-r fn-danger">{{ number_format((float) $row->total, 2, '.', ' ') }}</td></tr>
                    @endforeach
                    <tr style="border-top:2px solid #e5e7eb;"><td class="fn-bold">Total costuri</td><td class="fn-r fn-bold fn-danger">{{ number_format($data['partsCost'] + $data['totalExpenses'], 2, '.', ' ') }}</td></tr>
                </table>
            </div>
        </div>
        <div class="fn-card" style="text-align:right;">
            <div class="fn-stat-l">Profit net</div>
            <div class="fn-stat-v {{ $data['netProfit'] >= 0 ? 'fn-success' : 'fn-danger' }}">{{ number_format($data['netProfit'], 2, '.', ' ') }} MDL</div>
            <div style="font-size:12px;color:#6b7280;margin-top:4px;">Marjă: {{ $data['marginPct'] }}%</div>
            <div style="font-size:11px;color:#9ca3af;margin-top:4px;">Marjă piese: {{ number_format($data['partsMargin'], 2, '.', ' ') }} MDL</div>
        </div>

    @elseif ($tab === 'balance')
        <div class="fn-grid fn-grid-2">
            <div class="fn-card">
                <div class="fn-h3">Active</div>
                <table class="fn-tbl">
                    <tr><td>Numerar net (toate plățile - cheltuieli)</td><td class="fn-r fn-bold fn-success">{{ number_format($data['netCash'], 2, '.', ' ') }} MDL</td></tr>
                    <tr><td>Datorii clienți (de încasat)</td><td class="fn-r fn-warning">{{ number_format($data['debt'], 2, '.', ' ') }} MDL</td></tr>
                    <tr><td>Stoc piese (la preț achiziție)</td><td class="fn-r">{{ number_format($data['stockValue'], 2, '.', ' ') }} MDL</td></tr>
                    <tr style="border-top:2px solid #e5e7eb;"><td class="fn-bold">Total active</td><td class="fn-r fn-bold">{{ number_format($data['netCash'] + $data['debt'] + $data['stockValue'], 2, '.', ' ') }}</td></tr>
                </table>
            </div>
            <div class="fn-card">
                <div class="fn-h3">Toate timpurile</div>
                <table class="fn-tbl">
                    <tr><td>Total încasat</td><td class="fn-r fn-success">{{ number_format($data['allTimePayments'], 2, '.', ' ') }} MDL</td></tr>
                    <tr><td>Total cheltuit</td><td class="fn-r fn-danger">{{ number_format($data['allTimeExpenses'], 2, '.', ' ') }} MDL</td></tr>
                </table>
            </div>
        </div>
    @endif
</x-filament-panels::page>
