/* eslint-disable @typescript-eslint/no-explicit-any */
import { Head, Link, usePage, router } from '@inertiajs/react';
import React, { useState, useEffect } from 'react';
import { useDebounce } from 'use-debounce';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Separator } from '@/components/ui/separator';
import AppLayout from '@/layouts/app-layout';

interface Employee {
    id: number;
    nip: string;
    status: string;
    join_date: string;
    position: {
        id: number;
        name: string;
    };
    department: {
        id: number;
        name: string;
    };
    user: {
        name: string;
        email: string;
    } | null;
}

interface PageProps {
    employees: {
        data: Employee[];
        links: any[];
    };
    departments: { id: number; name: string }[];
    filters: {
        search?: string;
        department_id?: string;
    };
    [key: string]: unknown;
}

interface SharedData {
    flash: {
        success?: string;
        error?: string;
    };
}

export default function Index({ employees, departments, filters }: PageProps) {
    const { flash } = usePage<any>().props as SharedData;
    const [search, setSearch] = useState(filters.search || '');
    const [departmentId, setDepartmentId] = useState(filters.department_id || 'all');
    const [debouncedSearch] = useDebounce(search, 500);

    useEffect(() => {
        if (debouncedSearch !== filters.search || (departmentId !== 'all' && departmentId !== filters.department_id)) {
            router.get(
                '/admin/employees',
                { 
                    search: debouncedSearch, 
                    department_id: departmentId === 'all' ? '' : departmentId 
                },
                { preserveState: true, replace: true }
            );
        }
    }, [debouncedSearch, departmentId]);

    return (
        <AppLayout>
            <Head title="Manajemen Karyawan" />
            <div className="p-4 md:p-8 space-y-4">
                {flash?.success && (
                    <div className="p-4 bg-green-50 text-green-700 border border-green-200 rounded-md text-sm">
                        {flash.success}
                    </div>
                )}

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between pb-4">
                        <CardTitle className="text-xl font-bold">Daftar Karyawan</CardTitle>
                        <Button asChild>
                            <Link href="/admin/employees/create">+ Tambah Karyawan</Link>
                        </Button>
                    </CardHeader>
                    <Separator />
                    
                    <div className="p-4 flex flex-col md:flex-row gap-4">
                        <div className="w-full md:w-1/3">
                            <Input 
                                placeholder="Cari Nama / NIP..." 
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                            />
                        </div>
                        <div className="w-full md:w-1/4">
                            <Select 
                                value={departmentId} 
                                onValueChange={(val) => setDepartmentId(val)}
                            >
                                <SelectTrigger>
                                    <SelectValue placeholder="Filter Departemen" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="all">Semua Departemen</SelectItem>
                                    {departments.map((dept) => (
                                        <SelectItem key={dept.id} value={String(dept.id)}>
                                            {dept.name}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                    </div>

                    <CardContent className="pt-0">
                        <div className="relative w-full overflow-auto">
                            <table className="w-full text-sm text-left">
                                <thead className="bg-zinc-50/50">
                                    <tr className="border-b text-muted-foreground">
                                        <th className="h-10 px-4 font-medium">Karyawan</th>
                                        <th className="h-10 px-4 font-medium">Posisi & Dept</th>
                                        <th className="h-10 px-4 font-medium">Status</th>
                                        <th className="h-10 px-4 font-medium">Bergabung</th>
                                        <th className="h-10 px-4 text-right font-medium">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {employees.data.length > 0 ? (
                                        employees.data.map((employee) => (
                                            <tr key={employee.id} className="border-b hover:bg-zinc-50">
                                                <td className="p-4">
                                                    <div className="font-bold">{employee.user?.name}</div>
                                                    <div className="text-xs text-muted-foreground">{employee.user?.email}</div>
                                                    <div className="text-xs text-zinc-400 mt-1">NIP: {employee.nip}</div>
                                                </td>
                                                <td className="p-4">
                                                    <div className="font-medium">{employee.position?.name || '-'}</div>
                                                    <Badge variant="outline" className="mt-1 font-normal text-xs">
                                                        {employee.department?.name || '-'}
                                                    </Badge>
                                                </td>
                                                <td className="p-4">
                                                    <Badge className={employee.status === 'PKWTT' ? 'bg-green-600' : 'bg-orange-500'}>
                                                        {employee.status}
                                                    </Badge>
                                                </td>
                                                <td className="p-4 text-muted-foreground">
                                                    {new Date(employee.join_date).toLocaleDateString('id-ID')}
                                                </td>
                                                <td className="p-4 text-right space-x-2">
                                                    <Button variant="ghost" size="sm" asChild>
                                                        <Link href={`/admin/employees/${employee.id}/edit`}>Edit</Link>
                                                    </Button>
                                                    <Link 
                                                        href={`/admin/employees/${employee.id}`}
                                                        method="delete" 
                                                        as="button"
                                                        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 text-red-600 hover:bg-red-50"
                                                    >
                                                        Hapus
                                                    </Link>
                                                </td>
                                            </tr>
                                        ))
                                    ) : (
                                        <tr>
                                            <td colSpan={5} className="p-8 text-center text-muted-foreground">
                                                Tidak ada data ditemukan.
                                            </td>
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}