@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title }}" />

    <div class="mb-4 rounded-2xl border border-brand-200 bg-brand-50 p-4 dark:border-brand-900/40 dark:bg-brand-900/10">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white/90">Rekap Absensi Bulan Berjalan</h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-white/70">
                    Data dihitung dari awal bulan sampai tanggal yang dipilih. AI Performance Insight tidak memasukkan karyawan Auto Absen / Jam Flexible ke ranking.
                </p>
            </div>

            <a href="{{ route('attendance.index') }}" class="inline-flex items-center rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-700 ring-1 ring-gray-200 hover:bg-gray-50 dark:bg-white/10 dark:text-white/70 dark:ring-white/10">
                Kembali ke Absensi
            </a>
        </div>
    </div>

    <div class="mb-4 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
        <form action="{{ route('attendance.recap') }}" method="GET" class="grid grid-cols-1 gap-4 lg:grid-cols-4">
            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Tanggal Akhir Periode</label>
                <input
                    type="date"
                    name="date"
                    value="{{ $date }}"
                    class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                >
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    Periode: {{ ($startDate ?? $selectedDate->copy()->startOfMonth())->format('d/m/Y') }} - {{ $selectedDate->format('d/m/Y') }}
                </p>
            </div>

            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Karyawan</label>
                <select
                    name="employee_id"
                    class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                >
                    <option value="">Semua Karyawan</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}" @selected((string) $employeeId === (string) $employee->id)>
                            {{ $employee->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="flex items-end">
                <button type="submit" class="h-11 w-full rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600">
                    Tampilkan
                </button>
            </div>

            <div class="flex items-end">
                <a
                    href="{{ route('attendance.export', ['date' => $date, 'employee_id' => $employeeId]) }}"
                    class="inline-flex h-11 w-full items-center justify-center rounded-lg bg-gray-800 px-4 py-2 text-sm font-medium text-white hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600"
                >
                    Export CSV
                </a>
            </div>
        </form>
    </div>

    <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Total Hadir</p>
            <h3 class="mt-2 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $summary['total_present'] }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Record absen masuk dalam periode</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Total Telat</p>
            <h3 class="mt-2 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $summary['total_late'] }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ $summary['late_minutes'] }} menit</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Pulang Cepat</p>
            <h3 class="mt-2 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $summary['total_early_leave'] }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ $summary['early_leave_minutes'] }} menit</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Belum Absen Pulang</p>
            <h3 class="mt-2 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $summary['total_incomplete'] }}</h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Record belum lengkap</p>
        </div>
    </div>

    <div class="mb-4 rounded-2xl border border-brand-200 bg-gradient-to-r from-brand-50 via-white to-brand-50 p-5 dark:border-brand-900/40 dark:from-brand-900/10 dark:via-white/[0.03] dark:to-brand-900/10">
        <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-500 text-white shadow-sm">
                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </span>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white/90">AI Performance Insight</h3>
                        <p class="mt-1 text-sm text-gray-600 dark:text-white/70">
                            Ringkasan performa absensi manual periode {{ $performanceInsight['period_label'] ?? ($periodLabel ?? '-') }}. Auto Absen / Jam Flexible tidak masuk ranking.
                        </p>
                    </div>
                </div>

                <div class="mt-4 rounded-xl bg-white/80 p-4 text-sm text-gray-700 ring-1 ring-brand-100 dark:bg-white/10 dark:text-white/75 dark:ring-white/10">
                    {{ $performanceInsight['headline'] ?? 'Belum ada data insight.' }}
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:w-[560px]">
                <div class="rounded-xl bg-white p-3 ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                    <p class="text-xs text-gray-500 dark:text-gray-400">Manual Dinilai</p>
                    <p class="mt-1 text-xl font-bold text-gray-900 dark:text-white">{{ $performanceInsight['total_manual'] ?? 0 }}</p>
                    <p class="mt-1 text-[11px] text-gray-500">karyawan</p>
                </div>
                <div class="rounded-xl bg-white p-3 ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                    <p class="text-xs text-gray-500 dark:text-gray-400">Disiplin</p>
                    <p class="mt-1 text-xl font-bold text-success-600 dark:text-success-400">{{ $performanceInsight['total_disciplined'] ?? 0 }}</p>
                    <p class="mt-1 text-[11px] text-gray-500">karyawan</p>
                </div>
                <div class="rounded-xl bg-white p-3 ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                    <p class="text-xs text-gray-500 dark:text-gray-400">Perlu Perhatian</p>
                    <p class="mt-1 text-xl font-bold text-warning-600 dark:text-warning-400">{{ $performanceInsight['total_attention'] ?? 0 }}</p>
                    <p class="mt-1 text-[11px] text-gray-500">karyawan</p>
                </div>
                <div class="rounded-xl bg-white p-3 ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                    <p class="text-xs text-gray-500 dark:text-gray-400">Auto Dikeluarkan</p>
                    <p class="mt-1 text-xl font-bold text-gray-900 dark:text-white">{{ $performanceInsight['auto_excluded'] ?? 0 }}</p>
                    <p class="mt-1 text-[11px] text-gray-500">record</p>
                </div>
            </div>
        </div>

        <div class="mt-5 grid grid-cols-1 gap-4 xl:grid-cols-2">
            <div class="rounded-2xl border border-success-200 bg-success-50/70 p-4 dark:border-success-500/20 dark:bg-success-500/10">
                <div class="mb-3 flex items-center justify-between gap-2">
                    <h4 class="text-sm font-semibold text-success-800 dark:text-success-300">Top Karyawan Disiplin Bulan Ini</h4>
                    <span class="rounded-full bg-white px-2.5 py-0.5 text-xs font-medium text-success-700 ring-1 ring-success-100 dark:bg-white/10 dark:text-success-300 dark:ring-success-500/20">
                        Top 5
                    </span>
                </div>

                <div class="space-y-2">
                    @forelse(($performanceInsight['top_disciplined'] ?? collect()) as $index => $employeePerformance)
                        <div class="flex items-center justify-between gap-3 rounded-xl bg-white px-3 py-2 ring-1 ring-success-100 dark:bg-white/10 dark:ring-success-500/20">
                            <div class="flex min-w-0 items-center gap-3">
                                <span class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-success-500 text-xs font-bold text-white">
                                    {{ $index + 1 }}
                                </span>
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-semibold text-gray-900 dark:text-white/90">{{ $employeePerformance['employee_name'] ?? '-' }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ $employeePerformance['disciplined_days'] ?? 0 }} hari disiplin • {{ $employeePerformance['complete_days'] ?? 0 }} hari lengkap
                                    </p>
                                </div>
                            </div>
                            <span class="shrink-0 rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-700 dark:bg-success-500/20 dark:text-success-300">
                                Skor 0
                            </span>
                        </div>
                    @empty
                        <div class="rounded-xl bg-white px-3 py-4 text-center text-sm text-gray-500 ring-1 ring-success-100 dark:bg-white/10 dark:text-gray-400 dark:ring-success-500/20">
                            Belum ada karyawan manual yang masuk kategori disiplin sempurna pada periode ini.
                        </div>
                    @endforelse
                </div>
            </div>

            <div class="rounded-2xl border border-warning-200 bg-warning-50/70 p-4 dark:border-warning-500/20 dark:bg-warning-500/10">
                <div class="mb-3 flex items-center justify-between gap-2">
                    <h4 class="text-sm font-semibold text-warning-800 dark:text-warning-300">Karyawan Perlu Perhatian</h4>
                    <span class="rounded-full bg-white px-2.5 py-0.5 text-xs font-medium text-warning-700 ring-1 ring-warning-100 dark:bg-white/10 dark:text-warning-300 dark:ring-warning-500/20">
                        Top 5
                    </span>
                </div>

                <div class="space-y-2">
                    @forelse(($performanceInsight['needs_attention'] ?? collect()) as $index => $employeePerformance)
                        @php
                            $reasonParts = [];

                            if (($employeePerformance['missing_check_in_count'] ?? 0) > 0) {
                                $reasonParts[] = ($employeePerformance['missing_check_in_count'] ?? 0) . 'x belum masuk';
                            }

                            if (($employeePerformance['incomplete_count'] ?? 0) > 0) {
                                $reasonParts[] = ($employeePerformance['incomplete_count'] ?? 0) . 'x belum pulang';
                            }

                            if (($employeePerformance['late_count'] ?? 0) > 0) {
                                $reasonParts[] = ($employeePerformance['late_count'] ?? 0) . 'x telat (' . ($employeePerformance['total_late_minutes'] ?? 0) . ' menit)';
                            }

                            if (($employeePerformance['early_leave_count'] ?? 0) > 0) {
                                $reasonParts[] = ($employeePerformance['early_leave_count'] ?? 0) . 'x pulang cepat (' . ($employeePerformance['total_early_leave_minutes'] ?? 0) . ' menit)';
                            }

                            $reasonText = !empty($reasonParts) ? implode(', ', $reasonParts) : 'perlu dicek';
                        @endphp

                        <div class="flex items-center justify-between gap-3 rounded-xl bg-white px-3 py-2 ring-1 ring-warning-100 dark:bg-white/10 dark:ring-warning-500/20">
                            <div class="flex min-w-0 items-center gap-3">
                                <span class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-warning-500 text-xs font-bold text-white">
                                    {{ $index + 1 }}
                                </span>
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-semibold text-gray-900 dark:text-white/90">{{ $employeePerformance['employee_name'] ?? '-' }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ $employeePerformance['total_days'] ?? 0 }} record • {{ $employeePerformance['issue_days'] ?? 0 }} hari bermasalah
                                    </p>
                                </div>
                            </div>
                            <span class="shrink-0 rounded-full bg-warning-100 px-2.5 py-0.5 text-xs font-medium text-warning-700 dark:bg-warning-500/20 dark:text-warning-300">
                                {{ $reasonText }}
                            </span>
                        </div>
                    @empty
                        <div class="rounded-xl bg-white px-3 py-4 text-center text-sm text-gray-500 ring-1 ring-warning-100 dark:bg-white/10 dark:text-gray-400 dark:ring-warning-500/20">
                            Tidak ada karyawan manual yang perlu perhatian pada periode ini.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-4">
            <div class="rounded-xl bg-white px-4 py-3 text-sm ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                <span class="text-gray-500 dark:text-gray-400">Total Telat Manual</span>
                <p class="mt-1 font-semibold text-gray-900 dark:text-white">{{ $performanceInsight['total_late_minutes'] ?? 0 }} menit</p>
            </div>
            <div class="rounded-xl bg-white px-4 py-3 text-sm ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                <span class="text-gray-500 dark:text-gray-400">Total Pulang Cepat</span>
                <p class="mt-1 font-semibold text-gray-900 dark:text-white">{{ $performanceInsight['total_early_leave_minutes'] ?? 0 }} menit</p>
            </div>
            <div class="rounded-xl bg-white px-4 py-3 text-sm ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                <span class="text-gray-500 dark:text-gray-400">Belum Pulang</span>
                <p class="mt-1 font-semibold text-gray-900 dark:text-white">{{ $performanceInsight['total_incomplete'] ?? 0 }} record</p>
            </div>
            <div class="rounded-xl bg-white px-4 py-3 text-sm ring-1 ring-gray-200 dark:bg-white/10 dark:ring-white/10">
                <span class="text-gray-500 dark:text-gray-400">Belum Masuk</span>
                <p class="mt-1 font-semibold text-gray-900 dark:text-white">{{ $performanceInsight['total_missing_check_in'] ?? 0 }} record</p>
            </div>
        </div>
    </div>

    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                Detail Rekap {{ $periodLabel ?? (($startDate ?? $selectedDate->copy()->startOfMonth())->format('d/m/Y') . ' - ' . $selectedDate->format('d/m/Y')) }}
            </h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                Data berdasarkan absen masuk dan absen pulang yang tersimpan dari awal bulan sampai tanggal yang dipilih.
            </p>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-800">
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Tanggal</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">ID</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Nama</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Masuk</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Pulang</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Telat</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Pulang Cepat</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Status</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                    @forelse($attendances as $attendance)
                        <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                            <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ $attendance->attendance_date->format('d/m/Y') }}
                            </td>

                            <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ $attendance->employee->employee_id ?? '-' }}
                            </td>

                            <td class="px-5 py-4 text-sm font-medium text-gray-800 dark:text-white/90">
                                {{ $attendance->employee->name ?? '-' }}
                            </td>

                            <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ $attendance->check_in_at?->format('H:i') ?? '-' }}
                            </td>

                            <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ $attendance->check_out_at?->format('H:i') ?? '-' }}
                            </td>

                            <td class="px-5 py-4 text-sm">
                                @if(($attendance->late_minutes ?? 0) > 0)
                                    <span class="inline-flex rounded-full bg-error-50 px-2.5 py-0.5 text-xs font-medium text-error-700 dark:bg-error-500/15 dark:text-error-400">
                                        {{ $attendance->late_minutes }} menit
                                    </span>
                                @else
                                    <span class="text-gray-500 dark:text-gray-400">-</span>
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm">
                                @if(($attendance->early_leave_minutes ?? 0) > 0)
                                    <span class="inline-flex rounded-full bg-warning-50 px-2.5 py-0.5 text-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
                                        {{ $attendance->early_leave_minutes }} menit
                                    </span>
                                @else
                                    <span class="text-gray-500 dark:text-gray-400">-</span>
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm">
                                @if($attendance->check_in_at && $attendance->check_out_at)
                                    <span class="inline-flex rounded-full bg-success-50 px-2.5 py-0.5 text-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-400">
                                        Lengkap
                                    </span>
                                @elseif($attendance->check_in_at)
                                    <span class="inline-flex rounded-full bg-warning-50 px-2.5 py-0.5 text-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
                                        Belum Pulang
                                    </span>
                                @else
                                    <span class="inline-flex rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">
                                        -
                                    </span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                Tidak ada data absensi pada periode ini.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection