import { Head, Link, router, usePage } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { toast } from 'sonner';
import {
    create as designationsCreate,
    destroy as designationsDestroy,
    index as designationsIndex,
    updateStatus,
} from '@/actions/App/Http/Controllers/DesignationController';
import { ConfirmActionDialog } from '@/components/confirm-action-dialog';
import { DesignationsDataTable } from '@/components/designations/designations-data-table';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { useLanguage } from '@/contexts/language-context';
import AppLayout from '@/layouts/app-layout';
import { dashboard } from '@/routes';

export default function DesignationsIndex() {
    const { t } = useLanguage();
    const p = t.designationsPage;
    const a = t.appActions;
    const page = usePage();
    const auth = page.props.auth ?? {};
    const canCreate = auth.canCreateDesignations === true;
    const canUpdate = auth.canUpdateDesignations === true;
    const canDelete = auth.canDeleteDesignations === true;
    const { designations = [] } = page.props;

    const [pendingId, setPendingId] = useState(null);
    const [designationToToggle, setDesignationToToggle] = useState(null);
    const [designationToDelete, setDesignationToDelete] = useState(null);

    const breadcrumbs = useMemo(
        () => [
            { title: t.dashboard.breadcrumb, href: dashboard() },
            { title: t.nav.employeeManagement, href: '#' },
            { title: p.breadcrumb, href: designationsIndex() },
        ],
        [t.dashboard.breadcrumb, t.nav.employeeManagement, p.breadcrumb],
    );

    const handleStatusChange = useCallback((designation) => {
        setDesignationToToggle(designation);
    }, []);

    const handleDelete = useCallback((designation) => {
        setDesignationToDelete(designation);
    }, []);

    const performStatusToggle = useCallback(() => {
        if (!designationToToggle) {
            return;
        }
        setPendingId(designationToToggle.id);
        router.patch(
            updateStatus.url(designationToToggle.id),
            { is_active: !designationToToggle.is_active },
            {
                preserveScroll: true,
                onFinish: () => {
                    setPendingId(null);
                    setDesignationToToggle(null);
                },
                onError: () => {
                    setPendingId(null);
                    setDesignationToToggle(null);
                    toast.error(a.requestFailed);
                },
            },
        );
    }, [a.requestFailed, designationToToggle]);

    const performDelete = useCallback(() => {
        if (!designationToDelete) {
            return;
        }
        setPendingId(designationToDelete.id);
        router.delete(designationsDestroy.url(designationToDelete.id), {
            preserveScroll: true,
            onFinish: () => {
                setPendingId(null);
                setDesignationToDelete(null);
            },
            onError: () => {
                setPendingId(null);
                setDesignationToDelete(null);
                toast.error(a.requestFailed);
            },
        });
    }, [a.requestFailed, designationToDelete]);

    const tableLabels = useMemo(
        () => ({
            colSerial: p.colSerial,
            colName: p.colName,
            colStatus: p.colStatus,
            colAction: p.colAction,
            statusActive: p.statusActive,
            statusInactive: p.statusInactive,
            activate: p.activate,
            deactivate: p.deactivate,
            editDesignation: p.editDesignation,
            deleteDesignation: p.deleteDesignation,
            empty: p.empty,
            searchPlaceholder: p.searchPlaceholder,
            paginationPrevious: p.paginationPrevious,
            paginationNext: p.paginationNext,
            paginationSummary: p.paginationSummary,
            rowsPerPage: p.rowsPerPage,
        }),
        [p],
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={p.headTitle} />
            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4">
                <ConfirmActionDialog
                    open={designationToToggle != null}
                    onOpenChange={(open) => {
                        if (!open) {
                            setDesignationToToggle(null);
                        }
                    }}
                    title={
                        designationToToggle?.is_active
                            ? p.confirmDeactivateTitle
                            : p.confirmActivateTitle
                    }
                    description={
                        designationToToggle?.is_active
                            ? p.confirmDeactivateBody
                            : p.confirmActivateBody
                    }
                    confirmLabel={
                        designationToToggle?.is_active ? p.deactivate : p.activate
                    }
                    cancelLabel={a.cancel}
                    destructive={designationToToggle?.is_active === true}
                    processing={
                        pendingId != null && designationToToggle?.id === pendingId
                    }
                    onConfirm={performStatusToggle}
                />
                <ConfirmActionDialog
                    open={designationToDelete != null}
                    onOpenChange={(open) => {
                        if (!open) {
                            setDesignationToDelete(null);
                        }
                    }}
                    title={p.confirmDeleteTitle}
                    description={p.confirmDeleteBody}
                    confirmLabel={p.deleteDesignation}
                    cancelLabel={a.cancel}
                    destructive
                    processing={
                        pendingId != null && designationToDelete?.id === pendingId
                    }
                    onConfirm={performDelete}
                />

                <Card>
                    <CardHeader className="bg-muted/45 dark:bg-muted/20 flex flex-col gap-4 rounded-t-xl border-b border-border px-6 py-5 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
                        <div className="space-y-2">
                            <CardTitle className="text-xl font-semibold tracking-tight">
                                {p.headTitle}
                            </CardTitle>
                            <CardDescription className="text-muted-foreground max-w-xl text-sm leading-relaxed">
                                {p.listSubtitle}
                            </CardDescription>
                        </div>
                        {canCreate ? (
                            <Button asChild className="shrink-0">
                                <Link href={designationsCreate()} prefetch>
                                    <Plus className="size-4" />
                                    {p.createDesignation}
                                </Link>
                            </Button>
                        ) : null}
                    </CardHeader>
                    <CardContent className="px-4 pb-4 sm:px-6">
                        <DesignationsDataTable
                            designations={designations}
                            pendingId={pendingId}
                            onStatusChange={handleStatusChange}
                            onDelete={handleDelete}
                            canUpdate={canUpdate}
                            canDelete={canDelete}
                            labels={tableLabels}
                        />
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}