import { Head, usePage } from '@inertiajs/react';
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import AppLayout from '@/layouts/app-layout';

interface Attendance {
    id: number;
    employee_name: string;
    employee_nik: string;
    date: string;
    check_in: string | null;
    check_out: string | null;
    status: 'present' | 'leave' | 'dispensation';
    notes: string | null;
    total_hours: string | null;
}

interface PageProps {
    attendances: Attendance[];
    [key: string]: unknown;
}

export default function Index({ attendances }: PageProps) {
    const formatStatus = (status: string) => {
        switch (status) {
            case 'present': return <span className="text-green-600 font-medium">Hadir</span>;
            case 'leave': return <span className="text-yellow-600 font-medium">Izin/Cuti</span>;
            case 'dispensation': return <span className="text-blue-600 font-medium">Dispensasi</span>;
            default: return <span>{status}</span>;
        }
    };

    return (
        <AppLayout>
            <Head title="Rekap Absensi" />
            
            <div className="p-4 md:p-8 w-full space-y-4">
                <div className="space-y-1">
                    <h2 className="text-2xl font-bold tracking-tight">Rekap Absensi Karyawan</h2>
                    <p className="text-muted-foreground">Monitoring kehadiran, izin, dan dispensasi karyawan.</p>
                </div>

                <Card>
                    <CardHeader className="pb-4">
                        <CardTitle>Daftar Absensi</CardTitle>
                    </CardHeader>
                    <Separator />
                    <CardContent className="pt-0">
                        <div className="relative w-full overflow-auto">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Nama</TableHead>
                                        <TableHead>NIK</TableHead>
                                        <TableHead>Tanggal</TableHead>
                                        <TableHead>Jam Masuk</TableHead>
                                        <TableHead>Jam Keluar</TableHead>
                                        <TableHead>Keterangan</TableHead>
                                        <TableHead className="text-right">Total Jam Kerja</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {attendances.length > 0 ? (
                                        attendances.map((attendance) => (
                                            <TableRow key={attendance.id}>
                                                <TableCell className="font-medium text-gray-900">{attendance.employee_name}</TableCell>
                                                <TableCell className="text-gray-600">{attendance.employee_nik}</TableCell>
                                                <TableCell className="text-gray-600">{attendance.date}</TableCell>
                                                <TableCell>{attendance.check_in || '-'}</TableCell>
                                                <TableCell>{attendance.check_out || '-'}</TableCell>
                                                <TableCell>
                                                    <div className="flex flex-col">
                                                        {formatStatus(attendance.status)}
                                                        {attendance.notes && (
                                                            <span className="text-xs text-gray-500 mt-1">{attendance.notes}</span>
                                                        )}
                                                    </div>
                                                </TableCell>
                                                <TableCell className="text-right font-medium">
                                                    {attendance.total_hours ? `${attendance.total_hours} Jam` : '-'}
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    ) : (
                                        <TableRow>
                                            <TableCell colSpan={7} className="h-24 text-center text-muted-foreground">
                                                Belum ada data absensi.
                                            </TableCell>
                                        </TableRow>
                                    )}
                                </TableBody>
                            </Table>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}
