import { Head, usePage } from '@inertiajs/react';
import EmployeeLayout from '@/layouts/employee-layout';
import { CheckCircle2, Clock, CalendarDays, ClipboardList, Briefcase, CalendarOff } from 'lucide-react';
import React from 'react';

interface Stats {
    present: number;
    leave: number;
    dispensation: number;
    on_time: number;
    late: number;
}

interface PageProps {
    stats: Stats | null;
    employee: any;
    [key: string]: any;
}

export default function EmployeeIndex({ stats, employee }: PageProps) {
    const { auth } = usePage<any>().props;
    const user = auth.user;

    const statData = stats || {
        present: 0,
        leave: 0,
        dispensation: 0,
        on_time: 0,
        late: 0,
    };

    return (
        <EmployeeLayout title="Portal Karyawan">
            <div className="bg-gradient-to-r from-sky-400 to-blue-500 text-white md:rounded-b-3xl shadow-sm relative mb-8 md:mb-12">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10 pb-20 md:pb-24">
                    <div className="flex justify-between items-start">
                        <div>
                            <h1 className="text-3xl md:text-4xl font-bold tracking-tight">Halo, {user.name.split(' ')[0]}!</h1>
                            <p className="text-sky-100 text-sm md:text-base opacity-90 mt-2">Semoga harimu menyenangkan dan produktif.</p>
                        </div>
                        <div className="hidden md:flex w-16 h-16 bg-white/20 backdrop-blur-md rounded-2xl items-center justify-center border border-white/30 shadow-inner">
                            <img src="/assets/logo-clear.png" alt="Logo" className="w-10 h-10 object-contain drop-shadow-md" onError={(e) => { e.currentTarget.style.display='none'; }} />
                        </div>
                    </div>
                </div>
            </div>

            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-20 md:-mt-24 relative z-10 pb-12">
                
                <div className="bg-white rounded-2xl shadow-lg shadow-slate-200/50 p-5 md:p-8 border border-slate-100 grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6 mb-8">
                    <div className="flex flex-col items-center justify-center p-4 md:p-6 bg-green-100 rounded-xl hover:shadow-md transition-shadow">
                        <CheckCircle2 className="w-8 h-8 md:w-10 md:h-10 text-green-600 mb-3" />
                        <span className="text-2xl md:text-3xl font-bold text-green-700">{statData.on_time}</span>
                        <span className="text-xs md:text-sm font-semibold text-green-700 uppercase tracking-wider mt-2 text-center">Tepat Waktu</span>
                    </div>
                    <div className="flex flex-col items-center justify-center p-4 md:p-6 bg-orange-100 rounded-xl hover:shadow-md transition-shadow">
                        <Clock className="w-8 h-8 md:w-10 md:h-10 text-orange-600 mb-3" />
                        <span className="text-2xl md:text-3xl font-bold text-orange-700">{statData.leave}</span>
                        <span className="text-xs md:text-sm font-semibold text-orange-700 uppercase tracking-wider mt-2 text-center">Toleransi/Izin</span>
                    </div>
                    <div className="flex flex-col items-center justify-center p-4 md:p-6 bg-red-100 rounded-xl hover:shadow-md transition-shadow">
                        <CalendarDays className="w-8 h-8 md:w-10 md:h-10 text-red-600 mb-3" />
                        <span className="text-2xl md:text-3xl font-bold text-red-700">{statData.late}</span>
                        <span className="text-xs md:text-sm font-semibold text-red-700 uppercase tracking-wider mt-2 text-center">Terlambat</span>
                    </div>
                </div>

                <div>
                    <h2 className="text-base md:text-lg font-bold text-slate-800 tracking-tight mb-4">Statistik Bulan Ini</h2>
                    
                    <div className="bg-white rounded-2xl shadow-sm border border-slate-100 divide-y divide-slate-100 overflow-hidden">
                        <div className="flex items-center justify-between p-5 hover:bg-slate-50 transition-colors">
                            <div className="flex items-center gap-4">
                                <div className="w-12 h-12 rounded-full bg-sky-50 flex items-center justify-center text-sky-600">
                                    <ClipboardList className="w-6 h-6" />
                                </div>
                                <div>
                                    <p className="font-semibold text-slate-700 md:text-base text-sm">Jumlah Presensi</p>
                                    <p className="text-xs md:text-sm text-slate-500">Total kehadiran tercatat</p>
                                </div>
                            </div>
                            <div className="text-xl md:text-2xl font-bold text-sky-600 px-4">{statData.present}</div>
                        </div>

                        <div className="flex items-center justify-between p-5 hover:bg-slate-50 transition-colors">
                            <div className="flex items-center gap-4">
                                <div className="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center text-purple-600">
                                    <Briefcase className="w-6 h-6" />
                                </div>
                                <div>
                                    <p className="font-semibold text-slate-700 md:text-base text-sm">Jumlah Kegiatan</p>
                                    <p className="text-xs md:text-sm text-slate-500">Tugas luar / dispensasi</p>
                                </div>
                            </div>
                            <div className="text-xl md:text-2xl font-bold text-purple-600 px-4">{statData.dispensation}</div>
                        </div>

                        <div className="flex items-center justify-between p-5 hover:bg-slate-50 transition-colors">
                            <div className="flex items-center gap-4">
                                <div className="w-12 h-12 rounded-full bg-rose-50 flex items-center justify-center text-rose-600">
                                    <CalendarOff className="w-6 h-6" />
                                </div>
                                <div>
                                    <p className="font-semibold text-slate-700 md:text-base text-sm">Jumlah Cuti/Izin</p>
                                    <p className="text-xs md:text-sm text-slate-500">Absen disetujui</p>
                                </div>
                            </div>
                            <div className="text-xl md:text-2xl font-bold text-rose-600 px-4">{statData.leave}</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </EmployeeLayout>
    );
}