import { Head, Link, usePage } from '@inertiajs/react';
import React from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import AppLayout from '@/layouts/app-layout';

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

interface PageProps {
    employees: {
        data: Employee[];
    };
    [key: string]: unknown;
}

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

export default function Index({ employees }: PageProps) {
    const { flash } = usePage().props as unknown as SharedData;

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

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between">
                        <CardTitle>Daftar Karyawan</CardTitle>
                        <Button asChild>
                            <Link href="/admin/employees/create">Tambah Karyawan</Link>
                        </Button>
                    </CardHeader>
                    <Separator />
                    <CardContent className="pt-6">
                        <table className="w-full text-sm">
                            <thead>
                                <tr className="text-left border-b">
                                    <th className="pb-4 font-medium">Karyawan</th>
                                    <th className="pb-4 font-medium">NIP & Jabatan</th>
                                    <th className="pb-4 font-medium">Status</th>
                                    <th className="pb-4 text-right font-medium">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                {employees.data.map((employee) => (
                                    <tr key={employee.id} className="border-b">
                                        <td className="py-4">
                                            <div className="font-bold">{employee.user?.name}</div>
                                            <div className="text-xs text-muted-foreground">{employee.user?.email}</div>
                                        </td>
                                        <td className="py-4">
                                            <div>{employee.nip}</div>
                                            <Badge variant="outline">{employee.position}</Badge>
                                        </td>
                                        <td className="py-4">
                                            <Badge variant={employee.status === 'PKWTT' ? 'default' : 'secondary'}>
                                                {employee.status}
                                            </Badge>
                                        </td>
                                        <td className="py-4 text-right">
                                            <Button variant="ghost" asChild>
                                                <Link href={`/admin/employees/${employee.id}/edit`}>Edit</Link>
                                            </Button>
                                            <Button variant="ghost" className="text-red-600" asChild>
                                                <Link href={`/admin/employees/${employee.id}`} method="delete" as="button">Hapus</Link>
                                            </Button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}