import { Head, router } from '@inertiajs/react';
import { ServerDataTable } from '@ui/components/data-table/server-data-table';
import { Button } from '@ui/components/ui/button';
import { FileSpreadsheet, Plus } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';
import { DeleteConfirmationDialog } from '@/components/common/DeleteConfirmationDialog';
import { ResizableDrawer } from '@/components/common/ResizableDrawer';
import { FinanceAppLayout } from '@/layouts/finance-app-layout';
import { useAppText } from '@/lib/app-text';
import type { User } from '@/types';
import type { Bank, Branch, Budget, Company, Department, FundRequest } from '@/types/fund-request';
import { createFundRequestColumns } from './Columns';
import { AdminFundRequestForm } from './components/AdminFundRequestForm';
import type { AdminFundRequestFormData } from './components/AdminFundRequestForm';
import { ExcelImportDialog } from './components/ExcelImportDialog';

interface FundRequestIndexProps {
    title: string;
    companies: Company[];
    branches: Branch[];
    departments: Department[];
    budgets: Budget[];
    employees: User[];
    banks: Bank[];
    isServiceMode?: boolean;
}

export default function FundRequestIndex({ title, budgets, isServiceMode = false }: FundRequestIndexProps) {
    const { t: text } = useAppText();
    const basePath = isServiceMode ? '/service/fund-request' : '/department/finance/fund-request';

    // UI state
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
    const [selectedFundRequest, setSelectedFundRequest] = useState<FundRequest | undefined>();
    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
    const [fundRequestToDelete, setFundRequestToDelete] = useState<FundRequest | undefined>();
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isDeleting, setIsDeleting] = useState(false);
    const [refreshKey, setRefreshKey] = useState(0);
    const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);

    const showSubmitError = (errors?: Record<string, string | string[]>) => {
        if (!errors) {
            toast.error(text('common.msg_error'));

            return;
        }

        for (const value of Object.values(errors)) {
            const msg = Array.isArray(value) ? value[0] : value;

            if (msg) {
                toast.error(msg);

                return;
            }
        }

        toast.error(text('common.msg_error'));
    };

    // Handle Create
    const handleCreate = () => {
        router.visit(`${basePath}/create`);
    };

    // Handle Edit
    const handleEdit = (fundRequest: FundRequest) => {
        setSelectedFundRequest(fundRequest);
        setIsDrawerOpen(true);
    };

    // Handle Delete Click
    const handleDeleteClick = (fundRequest: FundRequest) => {
        setFundRequestToDelete(fundRequest);
        setIsDeleteDialogOpen(true);
    };

    // Handle Form Submit (edit only — create goes to /create page)
    const handleSubmit = (data: AdminFundRequestFormData) => {
        if (!selectedFundRequest) {
            return;
        }

        router.put(`/department/finance/fund-request/${selectedFundRequest.id}`, data as any, {
            preserveState: true,
            preserveScroll: true,
            onStart: () => setIsSubmitting(true),
            onSuccess: () => {
                toast.success(text('common.msg_success_update', { module: text('fund_request.title') }));
                setRefreshKey(prev => prev + 1);
            },
            onError: (errors) => {
                showSubmitError(errors as Record<string, string | string[]>);
            },
            onFinish: () => setIsSubmitting(false),
        });
    };

    const handleDeleteConfirm = () => {
        if (!fundRequestToDelete) {
            return;
        }

        router.delete(`/department/finance/fund-request/${fundRequestToDelete.id}`, {
            onStart: () => setIsDeleting(true),
            onSuccess: () => {
                toast.success(text('common.msg_success_delete', { module: text('fund_request.title') }));
                setIsDeleteDialogOpen(false);
                setFundRequestToDelete(undefined);
                setRefreshKey(prev => prev + 1);
            },
            onError: () => {
                toast.error(text('common.msg_error'));
            },
            onFinish: () => setIsDeleting(false),
        });
    };

    const columns = createFundRequestColumns({
        onEdit: isServiceMode ? undefined : handleEdit,
        onDelete: isServiceMode ? undefined : handleDeleteClick,
        text,
    });

    const pageContent = (
        <div className="flex h-full flex-1 flex-col gap-4 p-4">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-2xl font-bold tracking-tight text-foreground">{text('fund_request.title')}</h1>
                    <p className="text-muted-foreground">{text('fund_request.description')}</p>
                </div>
                <div className="flex flex-wrap gap-2">
                    {!isServiceMode && (
                        <>
                            <Button
                                variant="outline"
                                onClick={() => {
                                    window.location.href = `${basePath}/export`;
                                }}
                            >
                                <FileSpreadsheet className="mr-2 h-4 w-4" />
                                {text('common.btn_export')}
                            </Button>
                            <Button
                                variant="outline"
                                onClick={() => setIsImportDialogOpen(true)}
                            >
                                <FileSpreadsheet className="mr-2 h-4 w-4" />
                                {text('common.btn_import')}
                            </Button>
                        </>
                    )}
                    <Button onClick={handleCreate}>
                        <Plus className="mr-2 h-4 w-4" />
                        {text('fund_request.create_title')}
                    </Button>
                </div>
            </div>

            <ServerDataTable
                key={refreshKey}
                columns={columns as unknown as Record<string, unknown>[]}
                endpoint={`${basePath}/datatable`}
                searchPlaceholder={text('common.label_search')}
                enableGlobalFilter={true}
                enableSorting={true}
                enableRowSelection={false}
                enableColumnVisibility={true}
                initialPageSize={20}
            />
        </div>
    );

    return (
        <>
            <Head title={title || text('fund_request.title')} />

            {isServiceMode ? (
                <div className="min-h-screen bg-background">
                    <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
                        {pageContent}
                    </div>
                </div>
            ) : (
                <FinanceAppLayout>
                    {pageContent}
                </FinanceAppLayout>
            )}

            {!isServiceMode && (
                <ResizableDrawer
                    open={isDrawerOpen}
                    onOpenChange={setIsDrawerOpen}
                    title={text('fund_request.edit_title')}
                    description={text('drawer.edit_description', { module: text('fund_request.title').toLowerCase() })}
                    defaultWidth={880}
                    minWidth={700}
                    maxWidth={1200}
                >
                    {selectedFundRequest && (
                        <AdminFundRequestForm
                            fundRequest={selectedFundRequest}
                            budgets={budgets}
                            onSubmit={handleSubmit}
                            isSubmitting={isSubmitting}
                            onCancel={() => setIsDrawerOpen(false)}
                        />
                    )}
                </ResizableDrawer>
            )}

            {!isServiceMode && (
                <DeleteConfirmationDialog
                    open={isDeleteDialogOpen}
                    onOpenChange={setIsDeleteDialogOpen}
                    onConfirm={handleDeleteConfirm}
                    title={text('dialog.delete_title', { module: text('fund_request.title') })}
                    itemName={fundRequestToDelete?.description}
                    isDeleting={isDeleting}
                />
            )}

            {!isServiceMode && (
                <ExcelImportDialog
                    open={isImportDialogOpen}
                    onOpenChange={setIsImportDialogOpen}
                    importUrl={`${basePath}/import`}
                    templateUrl={`${basePath}/template/download`}
                    onImportSuccess={() => setRefreshKey(prev => prev + 1)}
                />
            )}
        </>
    );
}