import { Head, Link, usePage } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useMemo } from 'react';
import {
    create as permanentCreate,
    edit as permanentEdit,
    index as permanentIndex,
    updateStatus as permanentUpdateStatus,
} from '@/actions/App/Http/Controllers/PermanentEmployeeController';
import { index as punishmentsIndex } from '@/actions/App/Http/Controllers/PermanentEmployeePunishmentController';
import { staff as extraWorkStaff } from '@/actions/App/Http/Controllers/PermanentEmployeeExtraWorkController';
import { index as permanentSalariesIndex } from '@/actions/App/Http/Controllers/PermanentEmployeeSalaryPaymentController';
import { PermanentEmployeesTable } from '@/components/employees/permanent-employees-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 PermanentEmployeesIndex() {
    const { t } = useLanguage();
    const p = t.employeesPermanentPage;
    const a = t.appActions;
    const page = usePage();
    const auth = page.props.auth ?? {};
    const { employees, filters = { search: '', per_page: 10 } } = page.props;
    const canViewExtraWork = auth.canViewPermanentExtraWork === true;

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

    const tableLabels = useMemo(
        () => ({
            colSerial: p.colSerial,
            colFullName: p.colFullName,
            colDesignation: p.colDesignation,
            colFatherName: p.colFatherName,
            colPhone: p.colPhone,
            colMonthlySalary: p.colMonthlySalary,
            colStatus: p.colStatus,
            monthlySalaries: p.monthlySalaries,
            punishments: p.punishments,
            overtime: p.overtime,
            colJoiningDate: p.colJoiningDate,
            colAction: p.colAction,
            statusActive: p.statusActive,
            statusInactive: p.statusInactive,
            editEmployee: p.editEmployee,
            viewEmployee: p.viewEmployee,
            viewEmployeeSubtitle: p.viewEmployeeSubtitle,
            actionsMenuAria: p.actionsMenuAria,
            viewDocument: p.viewDocument,
            notProvided: p.notProvided,
            sectionPersonal: p.sectionPersonal,
            sectionContact: p.sectionContact,
            sectionEmployment: p.sectionEmployment,
            sectionDocuments: p.sectionDocuments,
            fullName: p.fullName,
            designation: p.designation,
            fatherName: p.fatherName,
            nationalCardNumber: p.nationalCardNumber,
            nationalCard: p.nationalCard,
            healthCard: p.healthCard,
            laborCard: p.laborCard,
            contract: p.contract,
            phoneNumber: p.phoneNumber,
            relativePhoneNumber: p.relativePhoneNumber,
            address: p.address,
            shift: p.shift,
            shiftMorning: p.shiftMorning,
            shiftNight: p.shiftNight,
            monthlySalary: p.monthlySalary,
            oldSalary: p.oldSalary,
            newSalary: p.newSalary,
            oldSalaryForMonth: p.oldSalaryForMonth,
            totalPunishment: p.totalPunishment,
            joiningDate: p.joiningDate,
            empty: p.empty,
            searchPlaceholder: p.searchPlaceholder,
            paginationPrevious: p.paginationPrevious,
            paginationNext: p.paginationNext,
            paginationSummary: p.paginationSummary,
            paginationPages: p.paginationPages,
            summaryEmpty: p.summaryEmpty,
            rowsPerPage: p.rowsPerPage,
            activateEmployee: p.activateEmployee,
            deactivateEmployee: p.deactivateEmployee,
            confirmActivateTitle: p.confirmActivateTitle,
            confirmActivateBody: p.confirmActivateBody,
            confirmDeactivateTitle: p.confirmDeactivateTitle,
            confirmDeactivateBody: p.confirmDeactivateBody,
            toastStatusUpdated: p.toastStatusUpdated,
            toastActionFailed: a.requestFailed,
            cancel: a.cancel,
        }),
        [p, a],
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={p.headTitle} />
            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4">
                <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.title}
                            </CardTitle>
                            <CardDescription className="text-muted-foreground max-w-xl text-sm leading-relaxed">
                                {p.listSubtitle}
                            </CardDescription>
                        </div>
                        <Button asChild className="shrink-0">
                            <Link href={permanentCreate()} prefetch>
                                <Plus className="size-4" />
                                {p.addEmployee}
                            </Link>
                        </Button>
                    </CardHeader>
                    <CardContent className="px-4 pb-4 sm:px-6">
                        <PermanentEmployeesTable
                            employees={employees}
                            filters={filters}
                            labels={tableLabels}
                            indexUrl={permanentIndex.url}
                            editUrl={(id) => permanentEdit.url(id)}
                            statusUrl={(id) => permanentUpdateStatus.url(id)}
                            salariesUrl={(id) =>
                                permanentSalariesIndex.url({ permanentEmployee: id })
                            }
                            punishmentsUrl={(id) =>
                                punishmentsIndex.url({ permanentEmployee: id })
                            }
                            extraWorkUrl={
                                canViewExtraWork
                                    ? (id) => extraWorkStaff.url(id)
                                    : undefined
                            }
                        />
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}