<x-app-layout>
    <x-slot:heading>Finance</x-slot:heading>

    <x-page-header title="Finance" description="Expenses, revenue, and monthly P&amp;L.">
        <x-slot:actions>
            <a href="{{ route('finance.create') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700">
                + Add Expense
            </a>
        </x-slot:actions>
    </x-page-header>

    <!-- Month selector + summary -->
    <form method="GET" class="mb-5 flex items-center gap-3">
        <input type="month" name="month" value="{{ $month }}"
               class="rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
        <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">View</button>
    </form>

    <div class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
        <x-stat-card label="Total Revenue" value="₦{{ number_format($totalRevenue) }}" colour="green" />
        <x-stat-card label="Total Expenses" value="₦{{ number_format($totalExpenses) }}" colour="red" />
        <x-stat-card label="Net Profit"
            :value="'₦' . number_format($totalRevenue - $totalExpenses)"
            :colour="($totalRevenue - $totalExpenses) >= 0 ? 'teal' : 'red'" />
    </div>

    @if($expenseByCategory->isNotEmpty())
    <div class="mb-6 rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
        <h3 class="font-semibold text-gray-900 mb-3">Expenses by Category</h3>
        <div class="space-y-2">
            @foreach($expenseByCategory as $ec)
            <div class="flex items-center gap-3">
                <div class="min-w-0 flex-1">
                    <div class="flex justify-between text-sm mb-1">
                        <span class="capitalize text-gray-700">{{ str_replace('_',' ',$ec->category) }}</span>
                        <span class="font-semibold text-gray-900">₦{{ number_format($ec->total) }}</span>
                    </div>
                    <div class="h-2 w-full rounded-full bg-gray-100">
                        <div class="h-2 rounded-full bg-red-400"
                             style="width: {{ $totalExpenses > 0 ? ($ec->total / $totalExpenses * 100) : 0 }}%"></div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    @if($expenses->isEmpty())
        <x-empty-state title="No expenses this month">
            <x-slot:icon><svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></x-slot:icon>
        </x-empty-state>
    @else
    <div class="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-xs uppercase tracking-wider text-gray-500">
                <tr>
                    <th class="px-5 py-3 text-left">Date</th>
                    <th class="px-5 py-3 text-left">Category</th>
                    <th class="px-5 py-3 text-left">Description</th>
                    <th class="px-5 py-3 text-left">Pond / Cycle</th>
                    <th class="px-5 py-3 text-right">Amount</th>
                    <th class="px-5 py-3 text-left">Payment</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($expenses as $exp)
                <tr class="hover:bg-gray-50">
                    <td class="px-5 py-3 text-gray-700">{{ $exp->expense_date->format('d M') }}</td>
                    <td class="px-5 py-3 capitalize text-gray-600 text-xs">{{ str_replace('_',' ',$exp->category) }}</td>
                    <td class="px-5 py-3 text-gray-900">{{ $exp->description }}</td>
                    <td class="px-5 py-3 text-xs text-gray-400">
                        {{ $exp->pond?->name ?? 'Farm-wide' }}
                    </td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-900">₦{{ number_format($exp->amount_naira) }}</td>
                    <td class="px-5 py-3 capitalize text-xs text-gray-500">{{ str_replace('_',' ',$exp->payment_method) }}</td>
                    <td class="px-5 py-3 text-right">
                        @if(!$exp->is_auto_generated)
                        <form method="POST" action="{{ route('finance.destroy', $exp) }}"
                              onsubmit="return confirm('Delete this expense?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-xs text-red-400 hover:text-red-600">Del</button>
                        </form>
                        @else
                        <span class="text-xs text-gray-300">auto</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $expenses->links() }}</div>
    @endif
</x-app-layout>
