import { Head, Link, router, usePage } from '@inertiajs/react';
import { index as employeeLoansIndex, status as employeeLoansStatus, contractPdf as employeeLoansContractPdf } from '@/routes/admin/employee-loans';
import {
    createColumnHelper,
    type ColumnDef,
    type PaginationState,
} from '@tanstack/react-table';
import { useEffect, useRef, useState } from 'react';
import { DataTable, DataTableColumnHeader, getSelectionColumn } from '@/components/data-table';
import Heading from '@/components/heading';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { PlusCircle, MoreHorizontal, PenTool, CheckCircle, FileText, XCircle } from 'lucide-react';
import { SignLoanModal } from './components/sign-loan-modal';
import { AdjustLoanModal } from './components/adjust-loan-modal';
import { CreateLoanModal } from './components/create-loan-modal';
import { SharedData } from '@/types';

interface Employee {
    id: number;
    first_name: string;
    last_name: string;
    name: string;
    avatar_url: string | null;
}

interface EmployeeLoan {
    id: number;
    employee_id: number;
    employee: Employee;
    type: string;
    total_amount: string;
    monthly_installment: string;
    remaining_amount: number;
    start_date: string;
    status: string;
    status_label?: string;
    reason: string | null;
    created_at: string;
}

interface PageProps {
    loans: {
        data: EmployeeLoan[];
        meta?: {
            current_page: number;
            last_page: number;
            per_page: number;
            total: number;
        };
        current_page?: number;
        last_page?: number;
        per_page?: number;
        total?: number;
    };
    filters: {
        status?: string;
        type?: string;
        search?: string;
    };
    statuses: { value: string; label: string }[];
    types: { value: string; label: string }[];
    employees: Employee[];
}

const columnHelper = createColumnHelper<EmployeeLoan>();

const STATUS_VARIANTS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
    pending: 'secondary',
    manager_approved: 'secondary',
    hr_approved: 'secondary',
    employee_signature_pending: 'outline',
    pending_final_validation: 'default',
    finance_approved: 'default',
    active: 'default',
    paid_off: 'outline',
    rejected: 'destructive',
};

function formatCurrency(amount: string | number) {
    return new Intl.NumberFormat('fr-CI', { style: 'currency', currency: 'XOF' }).format(Number(amount));
}

function visitLoans(params: {
    search?: string;
    type?: string;
    status?: string;
    page: number;
    per_page: number;
}) {
    router.get(
        employeeLoansIndex().url,
        {
            search: params.search || undefined,
            type: params.type === 'all' ? undefined : params.type || undefined,
            status: params.status === 'all' ? undefined : params.status || undefined,
            page: params.page > 1 ? params.page : undefined,
            per_page: params.per_page !== 20 ? params.per_page : undefined,
        },
        { preserveState: true, replace: true, preserveScroll: true },
    );
}

export default function EmployeeLoansIndex({ loans, filters, statuses, types, employees }: PageProps) {
    const isFirstSearchEffect = useRef(true);
    const [isLoading, setIsLoading] = useState(false);
    const [search, setSearch] = useState(filters.search || '');
    const [type, setType] = useState(filters.type || 'all');
    const [status, setStatus] = useState(filters.status || 'all');
    
    // Modals state
    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
    const [loanToSign, setLoanToSign] = useState<EmployeeLoan | null>(null);
    const [loanToAdjust, setLoanToAdjust] = useState<EmployeeLoan | null>(null);

    const { auth } = usePage<SharedData>().props;
    const isValidator = auth.user.permissions.includes('employee-loans.validate');
    const currentEmployeeId = auth.user.employee_id;

    const currentPage = loans.meta?.current_page ?? loans.current_page ?? 1;
    const lastPage = loans.meta?.last_page ?? loans.last_page ?? 1;
    const perPage = loans.meta?.per_page ?? loans.per_page ?? 20;
    const total = loans.meta?.total ?? loans.total ?? 0;

    const [pagination, setPagination] = useState<PaginationState>({
        pageIndex: currentPage - 1,
        pageSize: perPage,
    });

    useEffect(() => {
        const removeStart = router.on('start', () => setIsLoading(true));
        const removeFinish = router.on('finish', () => setIsLoading(false));

        return () => {
            removeStart();
            removeFinish();
        };
    }, []);

    useEffect(() => {
        // eslint-disable-next-line react-hooks/set-state-in-effect
        setSearch(filters.search || '');
        setType(filters.type || 'all');
        setStatus(filters.status || 'all');
        setPagination({
            pageIndex: currentPage - 1,
            pageSize: perPage,
        });
    }, [filters, currentPage, perPage]);

    useEffect(() => {
        if (isFirstSearchEffect.current) {
            isFirstSearchEffect.current = false;
            return;
        }

        const timeout = window.setTimeout(() => {
            visitLoans({
                search,
                type,
                status,
                page: 1,
                per_page: pagination.pageSize,
            });
        }, 300);

        return () => window.clearTimeout(timeout);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [search]);

    const handleFilterChange = (filterType: 'type' | 'status', value: string) => {
        if (filterType === 'type') setType(value);
        if (filterType === 'status') setStatus(value);
        
        visitLoans({
            search,
            type: filterType === 'type' ? value : type,
            status: filterType === 'status' ? value : status,
            page: 1,
            per_page: pagination.pageSize,
        });
    };

    const handleQuickAction = (loan: EmployeeLoan, action: string) => {
        router.patch(employeeLoansStatus(loan.id).url, { status: action });
    };

    const columns: ColumnDef<EmployeeLoan, any>[] = [
        ...(isValidator ? [
            columnHelper.accessor('employee', {
                header: ({ column }) => <DataTableColumnHeader column={column} title="Employé" />,
                cell: (info) => {
                    const employee = info.getValue();
                    return (
                        <div className="flex items-center gap-3">
                            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary font-medium text-sm">
                                {employee.first_name.charAt(0)}{employee.last_name.charAt(0)}
                            </div>
                            <div className="flex flex-col">
                                <span className="font-medium text-foreground">{employee.first_name} {employee.last_name}</span>
                            </div>
                        </div>
                    );
                },
            }),
        ] : []),
        columnHelper.accessor('type', {
            header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
            cell: (info) => {
                const t = types.find(t => t.value === info.getValue());
                return <span className="font-medium">{t?.label || info.getValue()}</span>;
            },
        }),
        columnHelper.accessor('total_amount', {
            header: ({ column }) => <DataTableColumnHeader column={column} title="Montant Total" />,
            cell: (info) => <span className="font-medium">{formatCurrency(info.getValue())}</span>,
        }),
        columnHelper.accessor('remaining_amount', {
            header: ({ column }) => <DataTableColumnHeader column={column} title="Reste à payer" />,
            cell: (info) => (
                <div className="flex flex-col gap-1.5 w-full max-w-[120px]">
                    <span className="font-medium">{formatCurrency(info.getValue())}</span>
                    <div className="h-1.5 w-full bg-muted rounded-full overflow-hidden">
                        <div 
                            className="h-full bg-primary rounded-full" 
                            style={{ width: `${Math.max(0, 100 - (info.getValue() / Number(info.row.original.total_amount)) * 100)}%` }} 
                        />
                    </div>
                </div>
            ),
        }),
        columnHelper.accessor('monthly_installment', {
            header: ({ column }) => <DataTableColumnHeader column={column} title="Mensualité" />,
            cell: (info) => <span className="text-muted-foreground">{formatCurrency(info.getValue())}/mois</span>,
        }),
        columnHelper.accessor('created_at', {
            header: ({ column }) => <DataTableColumnHeader column={column} title="Date de demande" />,
            cell: (info) => {
                return <span className="text-muted-foreground">{new Date(info.getValue()).toLocaleDateString('fr-FR')}</span>;
            },
        }),
        columnHelper.accessor('status', {
            header: ({ column }) => <DataTableColumnHeader column={column} title="Statut" />,
            cell: (info) => {
                const loan = info.row.original;
                return (
                    <Badge variant={STATUS_VARIANTS[info.getValue()] || 'outline'}>
                        {loan.status_label || info.getValue()}
                    </Badge>
                );
            },
        }),
        columnHelper.display({
            id: 'actions',
            cell: (info) => {
                const loan = info.row.original;
                
                // Si la demande est fermée (Soldée, Rejetée, Active et qu'on n'a plus rien à faire), 
                // on affiche uniquement le bouton de téléchargement si un PDF est dispo (ex: Active ou Soldé).
                // Pour simplifier, on affiche un menu d'actions contextuelles
                
                return (
                    <div className="flex items-center justify-end">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-8 w-8 p-0">
                                    <span className="sr-only">Actions</span>
                                    <MoreHorizontal className="h-4 w-4" />
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                
                                {isValidator && (
                                    <>
                                        {(loan.status === 'pending' || loan.status === 'manager_approved' || loan.status === 'hr_approved') && (
                                            <>
                                                <DropdownMenuItem onClick={() => setLoanToAdjust(loan)}>
                                                    <PenTool className="mr-2 h-4 w-4 text-primary" />
                                                    Ajuster et Demander Signature
                                                </DropdownMenuItem>
                                                <DropdownMenuItem onClick={() => handleQuickAction(loan, 'rejected')}>
                                                    <XCircle className="mr-2 h-4 w-4 text-destructive" />
                                                    Rejeter
                                                </DropdownMenuItem>
                                            </>
                                        )}

                                        {loan.status === 'pending_final_validation' && (
                                            <DropdownMenuItem onClick={() => handleQuickAction(loan, 'active')}>
                                                <CheckCircle className="mr-2 h-4 w-4 text-primary" />
                                                Valider définitivement (Activer)
                                            </DropdownMenuItem>
                                        )}
                                        
                                        {loan.status === 'active' && (
                                            <DropdownMenuItem onClick={() => handleQuickAction(loan, 'paid_off')}>
                                                <CheckCircle className="mr-2 h-4 w-4 text-primary" />
                                                Marquer comme soldé
                                            </DropdownMenuItem>
                                        )}
                                    </>
                                )}

                                {!isValidator && loan.employee_id === currentEmployeeId && loan.status === 'employee_signature_pending' && (
                                    <DropdownMenuItem onClick={() => setLoanToSign(loan)}>
                                        <PenTool className="mr-2 h-4 w-4 text-primary" />
                                        Signer l'accord
                                    </DropdownMenuItem>
                                )}

                                {(loan.status === 'pending_final_validation' || loan.status === 'active' || loan.status === 'paid_off') && (
                                    <DropdownMenuItem asChild>
                                        <a href={employeeLoansContractPdf(loan.id).url} target="_blank" rel="noreferrer">
                                            <FileText className="mr-2 h-4 w-4" />
                                            Télécharger le contrat PDF
                                        </a>
                                    </DropdownMenuItem>
                                )}
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                );
            },
        }),
    ];

    return (
        <>
            <Head title="Avances & Prêts" />
            
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <div className="flex items-center justify-between">
                    <Heading 
                        title="Avances & Prêts" 
                        description="Gérez les demandes d'avances sur salaire et les prêts accordés aux employés." 
                    />
                    <Button onClick={() => setIsCreateModalOpen(true)}>
                        <PlusCircle className="mr-2 h-4 w-4" />
                        Nouvelle demande
                    </Button>
                </div>

                <DataTable
                    id="admin-employee-loans"
                    columns={columns}
                    data={loans.data}
                    getRowId={(row) => String(row.id)}
                    isLoading={isLoading}
                    searchValue={search}
                    onSearchChange={setSearch}
                    searchPlaceholder="Rechercher un employé..."
                    emptyMessage="Aucune demande trouvée."
                    toolbarRight={
                        <div className="flex gap-2 items-center">
                            <Select 
                                value={type} 
                                onValueChange={(value) => handleFilterChange('type', value)}
                            >
                                <SelectTrigger className="w-[150px]">
                                    <SelectValue placeholder="Tous les types" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="all">Tous les types</SelectItem>
                                    {types.map(t => (
                                        <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>

                            <Select 
                                value={status} 
                                onValueChange={(value) => handleFilterChange('status', value)}
                            >
                                <SelectTrigger className="w-[150px]">
                                    <SelectValue placeholder="Tous les statuts" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="all">Tous les statuts</SelectItem>
                                    {statuses.map(s => (
                                        <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                    }
                    pagination={pagination}
                    onPaginationChange={(updater) => {
                        const next = typeof updater === 'function' ? updater(pagination) : updater;
                        const pageChanged = next.pageIndex !== pagination.pageIndex;
                        const sizeChanged = next.pageSize !== pagination.pageSize;

                        setPagination(next);

                        if (!pageChanged && !sizeChanged) {
                            return;
                        }

                        visitLoans({
                            search,
                            type,
                            status,
                            page: sizeChanged ? 1 : next.pageIndex + 1,
                            per_page: next.pageSize,
                        });
                    }}
                    manualPagination
                    pageCount={lastPage}
                    totalRows={total}
                />
            </div>

            <SignLoanModal 
                isOpen={!!loanToSign} 
                onClose={() => setLoanToSign(null)} 
                loan={loanToSign} 
            />
            
            <AdjustLoanModal 
                isOpen={!!loanToAdjust} 
                onClose={() => setLoanToAdjust(null)} 
                loan={loanToAdjust} 
            />

            <CreateLoanModal
                isOpen={isCreateModalOpen}
                onClose={() => setIsCreateModalOpen(false)}
                employees={employees}
                types={types}
            />
        </>
    );
}