<x-app-layout>
    <x-slot:heading>Harvest Records</x-slot:heading>

    <x-page-header title="Harvest Records" description="All harvest events across the farm.">
        <x-slot:actions>
            @if(auth()->user()->hasRole(['admin','manager']))
            <a href="{{ route('harvest.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">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                Record Harvest
            </a>
            @endif
        </x-slot:actions>
    </x-page-header>

    @if($harvests->isEmpty())
        <x-empty-state title="No harvest records yet" description="Record your first harvest when ponds are ready.">
            <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="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.75 7.5h16.5"/></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">Pond</th>
                    <th class="px-5 py-3 text-center">Type</th>
                    <th class="px-5 py-3 text-right">Weight (kg)</th>
                    <th class="px-5 py-3 text-right">Fish</th>
                    <th class="px-5 py-3 text-right">Avg Weight</th>
                    <th class="px-5 py-3 text-right">Revenue</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($harvests as $h)
                <tr class="hover:bg-gray-50">
                    <td class="px-5 py-3 font-medium text-gray-900">{{ $h->harvest_date->format('d M Y') }}</td>
                    <td class="px-5 py-3">
                        <a href="{{ route('ponds.show', $h->pond) }}" class="text-primary-600 hover:underline">{{ $h->pond->name }}</a>
                    </td>
                    <td class="px-5 py-3 text-center">
                        <span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $h->harvest_type === 'full_harvest' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800' }}">
                            {{ ucwords(str_replace('_', ' ', $h->harvest_type)) }}
                        </span>
                    </td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-900">{{ number_format($h->total_weight_kg, 1) }}</td>
                    <td class="px-5 py-3 text-right text-gray-600">{{ number_format($h->total_fish_harvested) }}</td>
                    <td class="px-5 py-3 text-right text-gray-600">{{ number_format($h->avg_weight_g) }}g</td>
                    <td class="px-5 py-3 text-right @if($h->total_revenue > 0) font-semibold text-green-700 @else text-gray-400 @endif">
                        {{ $h->total_revenue > 0 ? '₦' . number_format($h->total_revenue) : '—' }}
                    </td>
                    <td class="px-5 py-3 text-right">
                        <a href="{{ route('harvest.show', $h) }}" class="text-xs font-medium text-primary-600 hover:underline">View</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $harvests->links() }}</div>
    @endif
</x-app-layout>
