<x-app-layout>
    <x-slot:heading>Water Quality</x-slot:heading>

    <x-page-header title="Water Quality Logs" description="Monitor pond water parameters.">
        <x-slot:actions>
            <a href="{{ route('water-quality.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 Reading
            </a>
        </x-slot:actions>
    </x-page-header>

    @if($alertCount > 0)
    <div class="mb-4 flex items-center gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3">
        <svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
        <p class="text-sm font-medium text-red-800">{{ $alertCount }} alert{{ $alertCount > 1 ? 's' : '' }} in the last 48 hours — check parameters below.</p>
    </div>
    @endif

    <!-- Filters -->
    <form method="GET" class="mb-4 flex flex-wrap gap-3">
        <select name="pond_id" class="rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
            <option value="">All ponds</option>
            @foreach($ponds as $p)
                <option value="{{ $p->id }}" @selected(request('pond_id') == $p->id)>{{ $p->name }}</option>
            @endforeach
        </select>
        <input type="date" name="date_from" value="{{ request('date_from') }}"
               class="rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
        <input type="date" name="date_to" value="{{ request('date_to') }}"
               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">Filter</button>
    </form>

    @if($logs->isEmpty())
        <x-empty-state title="No water quality readings yet">
            <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 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3"/></svg></x-slot:icon>
        </x-empty-state>
    @else
    <div class="rounded-xl border border-gray-100 bg-white shadow-sm overflow-x-auto">
        <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 / Time</th>
                    <th class="px-5 py-3 text-left">Pond</th>
                    <th class="px-5 py-3 text-center">Status</th>
                    <th class="px-5 py-3 text-right">pH</th>
                    <th class="px-5 py-3 text-right">DO (mg/L)</th>
                    <th class="px-5 py-3 text-right">Temp (°C)</th>
                    <th class="px-5 py-3 text-right">NH₃ (ppm)</th>
                    <th class="px-5 py-3 text-left">Action Taken</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($logs as $log)
                <tr class="hover:bg-gray-50 @if($log->overall_status === 'danger') bg-red-50 @elseif($log->overall_status === 'warning') bg-amber-50 @endif">
                    <td class="px-5 py-3 whitespace-nowrap">
                        <p class="font-medium text-gray-900">{{ $log->reading_date->format('d M Y') }}</p>
                        <p class="text-xs text-gray-400">{{ $log->reading_time }}</p>
                    </td>
                    <td class="px-5 py-3">
                        <a href="{{ route('ponds.show', $log->pond) }}" class="font-medium text-primary-600 hover:underline">
                            {{ $log->pond->name }}
                        </a>
                    </td>
                    <td class="px-5 py-3 text-center">
                        <x-status-badge :status="$log->overall_status" size="xs" />
                    </td>
                    @foreach([
                        [$log->ph, $log->ph_status],
                        [$log->dissolved_oxygen_mgl, $log->do_status],
                        [$log->temperature_c, $log->temp_status],
                    ] as [$val, $status])
                    <td class="px-5 py-3 text-right font-semibold
                        @if($status === 'danger') text-red-700
                        @elseif($status === 'warning') text-amber-700
                        @else text-gray-800 @endif">
                        {{ $val }}
                    </td>
                    @endforeach
                    <td class="px-5 py-3 text-right @if($log->ammonia_status === 'danger') text-red-700 @elseif($log->ammonia_status === 'warning') text-amber-700 @else text-gray-500 @endif">
                        {{ $log->ammonia_ppm ?? '—' }}
                    </td>
                    <td class="px-5 py-3 text-xs text-gray-500 max-w-xs truncate">
                        {{ $log->corrective_action ?? '—' }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $logs->links() }}</div>
    @endif
</x-app-layout>
