import { DataTable } from '@/components/datatable';
import { FilterConfig } from '@/components/datatable-toolbar';
import { BulkStatusEditModal } from '@/components/modals/bulk-status-edit-modal';
import StatusSelector from '@/components/status-selector';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { useModal } from '@/components/ui/modal';
import AppLayout from '@/layouts/app-layout';
import PurchaseSettingsLayout from '@/layouts/settings/purchase-layout';
import { fetchDatatable } from '@/lib/datatable-fetch';
import { type PaginatedData } from '@/types';
import { Head, router, usePage } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { List, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';
import CreateModal from './Component/Create';
import EditModal from './Component/Edit';

declare const route: (...args: any[]) => string;

interface ReturnReasonData {
    id: number;
    uid: string;
    name: string;
    slug: string;
    description: string | null;
    status: number;
    created_at: string;
    updated_at: string;
}

type IndexData = PaginatedData<ReturnReasonData> & { statuses?: any[] };
type IndexProps = { data: IndexData };

function Index() {
    const { data } = usePage<IndexProps>().props;
    const [clientData, setClientData] = useState<any>(data);

    const [selectedForStatus, setSelectedForStatus] = useState<ReturnReasonData[]>([]);
    const [selectAllAcrossPages, setSelectAllAcrossPages] = useState(false);
    const [editingItem, setEditingItem]                   = useState<ReturnReasonData | null>(null);

    const { isOpen: isCreateOpen, openModal: openCreate, closeModal: closeCreate } = useModal();
    const { isOpen: isEditOpen,   openModal: openEdit,   closeModal: closeEdit   } = useModal();
    const { isOpen: isStatusOpen, openModal: openStatus, closeModal: closeStatus } = useModal();

    useEffect(() => { setClientData(data); }, [data]);

    useEffect(() => {
        setSelectAllAcrossPages(false);
    }, [clientData.queryParams?.page, clientData.queryParams?.per_page, clientData.queryParams?.search]);

    const navigate = async (params: Record<string, any>) => {
        const json = await fetchDatatable<ReturnReasonData>(route('purchase.return-reason.index'), params);
        setClientData((prev: any) => ({
            ...prev,
            data:        json?.data,
            meta:        json?.meta,
            queryParams: params,
            links: {
                prev: json?.meta?.current_page > 1 ? '' : null,
                next: json?.meta?.current_page < json?.meta?.last_page ? '' : null,
            },
        }));
    };

    const refetch = () => navigate(clientData?.queryParams || {});

    const handleEdit = (item: ReturnReasonData) => { setEditingItem(item); openEdit(); };
    const handleCloseEdit = () => { setEditingItem(null); closeEdit(); };

    const handleDelete = (id: number) => {
        router.delete(route('purchase.return-reason.destroy', id), { onSuccess: refetch });
    };

    const handleStatus = (id: number, status: string) => {
        router.put(route('purchase.return-reason.status', id), { status: Number(status) }, { onSuccess: refetch });
    };

    const tableFilters: FilterConfig[] = [
        {
            type: 'searchable-multiselect',
            label: 'Status',
            name: 'status',
            value: clientData?.queryParams?.status || '',
            options: [{ label: 'Active', value: 1 }, { label: 'Inactive', value: 0 }],
        },
    ];

    const bulkActions = [
        {
            label: 'Status Update',
            icon: List,
            confirm: false,
            className: '',
            onClick: (items: ReturnReasonData[]) => { setSelectedForStatus(items); openStatus(); },
        },
    ];

    const columns: (ColumnDef<ReturnReasonData> & { enableSorting?: boolean })[] = [
        {
            accessorKey: 'name',
            header: 'Name',
            enableSorting: true,
            cell: ({ row }) => <span className="font-medium text-gray-900">{row.original.name}</span>,
        },
        {
            accessorKey: 'description',
            header: 'Description',
            enableSorting: false,
            cell: ({ row }) => (
                <span className="max-w-xs truncate text-sm text-gray-500">{row.original.description || '—'}</span>
            ),
        },
        {
            accessorKey: 'status',
            header: 'Status',
            enableSorting: true,
            cell: ({ row }) => (
                <StatusSelector
                    id={row.original.id}
                    handleStatusUpdate={handleStatus}
                    status={row.original.status}
                    statusOptions={clientData?.statuses}
                />
            ),
        },
        {
            accessorKey: 'created_at',
            header: 'Created',
            enableSorting: true,
            cell: ({ row }) => (
                <span className="text-sm text-gray-500">
                    {new Date(row.original.created_at).toLocaleDateString()}
                </span>
            ),
        },
        {
            id: 'actions',
            header: 'Actions',
            cell: ({ row }) => (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
                            <MoreHorizontal className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-44">
                        <DropdownMenuItem onClick={() => handleEdit(row.original)}>
                            <Pencil className="mr-2 h-4 w-4 text-green-600" />
                            Edit
                        </DropdownMenuItem>
                        <AlertDialog>
                            <AlertDialogTrigger asChild>
                                <DropdownMenuItem
                                    className="text-red-600 focus:bg-red-50 focus:text-red-600"
                                    onSelect={(e: Event) => e.preventDefault()}
                                >
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    Delete
                                </DropdownMenuItem>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                                <AlertDialogHeader>
                                    <AlertDialogTitle>Delete return reason?</AlertDialogTitle>
                                    <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction onClick={() => handleDelete(row.original.id)} className="bg-red-600 hover:bg-red-700">
                                        Delete
                                    </AlertDialogAction>
                                </AlertDialogFooter>
                            </AlertDialogContent>
                        </AlertDialog>
                    </DropdownMenuContent>
                </DropdownMenu>
            ),
        },
    ];

    const bulkStatusOptions = [
        { value: 1, label: 'Active',   color: 'border-green-500 text-green-700' },
        { value: 0, label: 'Inactive', color: 'border-gray-500 text-gray-500'   },
    ];

    return (
        <>
            <Head title="Return Reasons" />
            <PurchaseSettingsLayout tab="purchase">
                <div className="no-scrollbar rounded-xl bg-gray-100/55 p-2 sm:p-4">
                    <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                        <div className="grid grid-cols-1 gap-1">
                            <h2 className="text-xl font-bold sm:text-2xl">Return Reasons</h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>Purchase Settings</span>
                                <span className="mx-2">›</span>
                                <span>Return Reasons</span>
                            </div>
                        </div>
                        <Button className="bg-success text-white hover:bg-brand-800" size="sm" onClick={openCreate}>
                            <Plus className="mr-2 h-4 w-4" />
                            Add New
                        </Button>
                    </div>

                    <div className="w-full">
                        <DataTable
                            columns={columns}
                            data={clientData?.data || []}
                            paginatedData={clientData}
                            bulkActions={bulkActions}
                            tableKey="return-reasons-table"
                            filters={tableFilters}
                            enableRowClick={false}
                            fullHeight={false}
                            selectAllActive={selectAllAcrossPages}
                            onSelectAllAcrossPages={() => setSelectAllAcrossPages(true)}
                            onClearSelectAllAcrossPages={() => setSelectAllAcrossPages(false)}
                            onNavigate={async (params) => { await navigate(params); }}
                        />
                    </div>
                </div>

                <BulkStatusEditModal
                    open={isStatusOpen}
                    onOpenChange={closeStatus}
                    selectedUsers={selectedForStatus}
                    selectAll={selectAllAcrossPages}
                    totalCount={clientData?.meta?.total}
                    currentFilters={clientData?.queryParams}
                    statusOptions={bulkStatusOptions}
                    apiRoute="purchase.return-reason.bulk-action"
                    onSuccess={() => { setSelectedForStatus([]); refetch(); }}
                />

                <CreateModal open={isCreateOpen} onOpenChange={closeCreate} onSuccess={refetch} />
                <EditModal
                    open={isEditOpen}
                    onOpenChange={handleCloseEdit}
                    onSuccess={refetch}
                    defaultValues={editingItem || undefined}
                />
            </PurchaseSettingsLayout>
        </>
    );
}

Index.layout = (page: ReactNode) => (
    <AppLayout title="Return Reasons" breadcrumbs={[{ title: 'Home', href: '/' }, { title: 'Purchase', href: '#' }, { title: 'Settings', href: route('purchase.settings.index') }, { title: 'Return Reasons', href: '#' }]}>
        {page}
    </AppLayout>
);

export default Index;