import { Head, router } from '@inertiajs/react';
import { ServerDataTable } from '@ui/components/data-table/server-data-table';
import { Button } from '@ui/components/ui/button';
import { 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 { Budget, BudgetFormData } from '@/types/finance';
import { createBudgetColumns } from './Columns';
import { BudgetForm } from './components/BudgetForm';

interface BudgetIndexProps {
    title: string;
    companies?: Array<{ id: number; name: string }>;
    branches?: Array<{ id: number; name: string }>;
    departments?: Array<{ id: number; name: string }>;
    chartOfAccounts?: Array<{ id: number; code: string; name: string }>;
    sourceAccounts?: Array<{ id: number; name: string }>;
}

export default function BudgetIndex({
    title,
    companies = [],
    branches = [],
    departments = [],
    chartOfAccounts = [],
    sourceAccounts = [],
}: BudgetIndexProps) {
    const { t: text } = useAppText();

    // UI state
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
    const [selectedBudget, setSelectedBudget] = useState<Budget | undefined>();
    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
    const [budgetToDelete, setBudgetToDelete] = useState<Budget | undefined>();
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isDeleting, setIsDeleting] = useState(false);
    const [refreshKey, setRefreshKey] = useState(0);

    const getFirstErrorMessage = (
        errors?: Record<string, string | string[]>
    ): string | undefined => {
        if (!errors) {
return undefined;
}

        for (const value of Object.values(errors)) {
            if (Array.isArray(value) && value.length > 0) {
                return value[0];
            }

            if (typeof value === 'string' && value.trim().length > 0) {
                return value;
            }
        }

        return undefined;
    };

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

    // Handle Create
    const handleCreate = () => {
        console.log('Opening drawer for create');
        setSelectedBudget(undefined);
        setIsDrawerOpen(true);
    };

    // Handle Edit
    const handleEdit = (budget: Budget) => {
        setSelectedBudget(budget);
        setIsDrawerOpen(true);
    };

    // Handle Delete
    const handleDelete = (budget: Budget) => {
        setBudgetToDelete(budget);
        setIsDeleteDialogOpen(true);
    };

    // Handle Submit (Create/Update)
    const handleSubmit = (data: BudgetFormData) => {
        if (selectedBudget) {
            router.put(`/department/finance/budget/${selectedBudget.id}`, data as any, {
                preserveState: true,
                preserveScroll: true,
                onStart: () => setIsSubmitting(true),
                onSuccess: () => {
                    toast.success(text('common.msg_success_update', { module: text('budget.title') }));
                    setIsDrawerOpen(false);
                    setRefreshKey(prev => prev + 1);
                },
                onError: (errors) => {
                    showSubmitError(errors as Record<string, string | string[]>);
                },
                onFinish: () => setIsSubmitting(false),
            });

            return;
        }

        router.post('/department/finance/budget', data as any, {
            preserveState: true,
            preserveScroll: true,
            onStart: () => setIsSubmitting(true),
            onSuccess: () => {
                toast.success(text('common.msg_success_create', { module: text('budget.title') }));
                setIsDrawerOpen(false);
                setRefreshKey(prev => prev + 1);
            },
            onError: (errors) => {
                showSubmitError(errors as Record<string, string | string[]>);
            },
            onFinish: () => setIsSubmitting(false),
        });
    };

    // Handle Delete Confirm
    const handleDeleteConfirm = () => {
        if (!budgetToDelete) {
return;
}

        router.delete(`/department/finance/budget/${budgetToDelete.id}`, {
            preserveState: true,
            preserveScroll: true,
            onStart: () => setIsDeleting(true),
            onSuccess: () => {
                toast.success(text('common.msg_success_delete', { module: text('budget.title') }));
                setIsDeleteDialogOpen(false);
                setBudgetToDelete(undefined);
                setRefreshKey(prev => prev + 1);
            },
            onError: () => {
                toast.error(text('common.msg_error'));
            },
            onFinish: () => setIsDeleting(false),
        });
    };

    // Create columns with handlers
    const columns = createBudgetColumns({
        onEdit: handleEdit,
        onDelete: handleDelete,
        text,
    });

    return (
        <FinanceAppLayout>
            <Head title={title} />

            <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('budget.title')}</h1>
                        <p className="text-muted-foreground">
                        {text('budget.description')}
                    </p>
                    </div>
                    <Button onClick={handleCreate}>
                        <Plus className="mr-2 h-4 w-4" />
                        {text('common.btn_create')}
                    </Button>
                </div>

                <ServerDataTable
                    key={refreshKey}
                    columns={columns as any}
                    endpoint="/department/finance/budget/datatable"
                    searchPlaceholder={text('common.label_search')}
                />
            </div>

            {/* Create/Edit Drawer */}
            <ResizableDrawer
                open={isDrawerOpen}
                onOpenChange={setIsDrawerOpen}
                title={selectedBudget ? text('budget.edit_title') : text('budget.create_title')}
                description={
                    selectedBudget
                        ? text('drawer.edit_description', { module: text('budget.title').toLowerCase() })
                        : text('drawer.create_description', { module: text('budget.title').toLowerCase() })
                }
            >
                <BudgetForm
                    budget={selectedBudget}
                    onSubmit={handleSubmit}
                    isSubmitting={isSubmitting}
                    onCancel={() => setIsDrawerOpen(false)}
                    companies={companies}
                    branches={branches}
                    departments={departments}
                    chartOfAccounts={chartOfAccounts}
                    sourceAccounts={sourceAccounts}
                />
            </ResizableDrawer>

            {/* Delete Confirmation Dialog */}
            <DeleteConfirmationDialog
                open={isDeleteDialogOpen}
                onOpenChange={setIsDeleteDialogOpen}
                onConfirm={handleDeleteConfirm}
                title={text('dialog.delete_title', { module: text('budget.title') })}
                itemName={budgetToDelete?.name}
                isDeleting={isDeleting}
            />
        </FinanceAppLayout>
    );
}