import { DataTable } from '@/components/datatable';
import { FilterConfig } from '@/components/datatable-toolbar';
import { BulkExportModal } from '@/components/modals/templateModals/BulkExportModal';
import { BulkStatusEditModal } from '@/components/modals/templateModals/BulkStatusEditModal';
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 { type PaginatedData } from '@/types';
import { type Item } from '@/types/item';
import { Head, Link, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { Download, Eye, List, MoreHorizontal, Pencil, Plus, Upload } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';
import { AddEditModal } from './modal/AddEditModal';

interface SummaryItem {
    title: string;
    value: number;
}
type TemplateIndexData = PaginatedData<Item> & { summary?: SummaryItem[] };
type TemplateIndexProps = { templateData: TemplateIndexData };

function Index({}: TemplateIndexProps) {
    const [selectedItemsForStatus, setSelectedItemsForStatus] = useState<Item[]>([]);
    const [selectedItemsForExport, setSelectedItemsForExport] = useState<Item[]>([]);
    const [selectAllAcrossPages, setSelectAllAcrossPages] = useState(false);
    const [selectedItemForEdit, setSelectedItemForEdit] = useState<Item | null>(null);
    const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
    // Removed CSV inline import modal in favor of redirect to import index

    const { isOpen: isStatusModalOpen, openModal: openStatusModal, closeModal: closeStatusModal } = useModal();
    const { isOpen: isBulkExportModalOpen, openModal: openBulkExportModal, closeModal: closeBulkExportModal } = useModal();
    const { isOpen: isEditModalOpen, openModal: openEditModal, closeModal: closeEditModal } = useModal();
     const { isOpen: isExportModalOpen, openModal: openExportModal, closeModal: closeExportModal } = useModal();

    const handleColumnChange = (columnValue: string, checked: boolean) => {
        if (checked) {
            setSelectedColumns((prev) => [...prev, columnValue]);
        } else {
            setSelectedColumns((prev) => prev.filter((col) => col !== columnValue));
        }
    };
    const handleEditItem = (item: Item) => {
        setSelectedItemForEdit(item);
        openEditModal();
    };
    const handleCreateItem = () => {
        setSelectedItemForEdit(null);
        openEditModal();
    };

    // Mock data for template
    const tableData = {
        data: Array(10)
            .fill(null)
            .map((_, i) => ({
                id: i + 1,
                title: `Item ${i + 1}`,
                status: i == 1 ? 'active' : 'inactive' ,
            })),
        meta: { current_page: 1, from: 1, last_page: 3, per_page: 10, to: 10, total: 30 },
        links: { next: '', prev: null },
        queryParams: { page: 1, per_page: 10 },
    };

    // Local client-side datatable state to avoid exposing query params in URL
    const [clientData, setClientData] = useState<any>(tableData);

    const tableFilters: FilterConfig[] = [
        {
            type: 'searchable-multiselect',
            label: 'Category',
            name: 'category',
            value: clientData.queryParams.category || '',
            options: [
                { label: 'Option 1', value: 'option1' },
                { label: 'Option 2', value: 'option2' },
                { label: 'Option 3', value: 'option3' },
            ],
        },
        {
            type: 'searchable-multiselect',
            label: 'Status',
            name: 'status',
            value: clientData.queryParams.status || '',
            options: [
                { label: 'Active', value: 'active' },
                { label: 'Inactive', value: 'inactive' },
                { label: 'Pending', value: 'pending' },
            ],
        },
        {
            type: 'date-range',
            label: 'Created At',
            name: 'created_at',
            value: '',
        },
    ];

    // bulk actions config
    const bulkActions = [
        {
            label: 'Export Data',
            icon: Download,
            confirm: false,
            className: '',
            onClick: (items: Item[]) => {
                // If user opted to use full fetched set override items
                setSelectedItemsForExport(items);
                openBulkExportModal();
            },
        },
        {
            label: 'Status Update',
            icon: List,
            confirm: false,
            className: '',
            onClick: (items: Item[]) => {
                setSelectedItemsForStatus(items);
                openStatusModal();
            },
        },
    ].filter(Boolean); // ⬅ removes false

    // Reset cross-page selection if query (filters, page, per_page) changes to avoid stale 'all selected' state
    useEffect(() => {
        // Whenever the underlying query params change (data refresh), clear select-all-across-pages flag
        setSelectAllAcrossPages(false);
    }, [
        clientData.queryParams.page,
        clientData.queryParams.per_page,
        clientData.queryParams.search,
        clientData.queryParams.category,
        clientData.queryParams.status,
    ]);

    // For demo purposes, let's create a generic columns definition
    const dataColumns: (ColumnDef<Item> & { enableSorting?: boolean })[] = [
        {
            accessorKey: 'id',
            header: 'ID',
            enableSorting: true,
        },
        {
            accessorKey: 'title',
            header: 'Title',
            enableSorting: true,
        },
        {
            accessorKey: 'status',
            header: 'Status',
            enableSorting: true,
            cell: ({ row }) => {
                const status = row.original.status;
                return (
                    <div
                        className={`inline-flex items-center rounded-full px-2 py-1 text-xs ${
                            status === 'active'
                                ? 'bg-green-100 text-green-800'
                                : status === 'inactive'
                                  ? 'bg-gray-100 text-gray-800'
                                  : 'bg-yellow-100 text-yellow-800'
                        }`}
                    >
                        {status}
                    </div>
                );
            },
        },
        {
            id: 'actions',
            header: 'Actions',
            cell: ({ row }) => (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
                            <span className="sr-only">Open menu</span>
                            <MoreHorizontal className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>

                    <DropdownMenuContent align="end" className="w-48">
                        <DropdownMenuItem asChild>
                            <Link href={route('users.show', row.original.id)} className="flex items-center">
                                <Eye className="mr-2 h-4 w-4 text-blue-500" />
                                View Details
                            </Link>
                        </DropdownMenuItem>

                        <DropdownMenuItem className="flex cursor-pointer items-center" onClick={() => handleEditItem?.(row.original)}>
                            <Pencil className="mr-2 h-4 w-4 text-success" />
                            Edit Item
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            ),
        },
    ];
    return (
        <>
            <Head title="Item List" />
            <div className="no-scrollbar rounded-xl p-2">
                <div className="">
                    {/* Custom Section Header matching the design */}
                    <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">Item List</h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>Item Management</span>
                                <span className="mx-2">›</span>
                                <span>Item List</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            {/* Add Item */}
                            <Button className="bg-success text-white hover:bg-brand-800" size="sm" onClick={handleCreateItem}>
                                <div className="flex items-center gap-2">
                                    <Plus className="size-4" />
                                    <span className="hidden sm:inline">Add Item</span>
                                </div>
                            </Button>
                            <Button variant="outline" size="sm" onClick={() => router.visit(route('items.import'))}>
                                <div className="flex items-center gap-2">
                                    <Upload className="size-4" />
                                    <span className="hidden sm:inline">Import</span>
                                </div>
                            </Button>   
                             <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    setSelectedItemsForExport(clientData.data);
                                    openExportModal();
                                }}
                            >
                                <div className="flex items-center gap-2">
                                    <Download className="size-4" />
                                    <span className="hidden sm:inline">Export</span>
                                </div>
                            </Button>
                        </div>
                    </div>
                    <div className="w-96 sm:w-full">
                        <DataTable
                            columns={dataColumns}
                            data={clientData.data}
                            paginatedData={clientData}
                            bulkActions={bulkActions}
                            tableKey="items-table"
                            filters={tableFilters}
                            enableRowClick={false} // disable whole-row navigation
                            fullHeight={false}
                            selectAllActive={selectAllAcrossPages}
                            onSelectAllAcrossPages={() => setSelectAllAcrossPages(true)}
                            onClearSelectAllAcrossPages={() => setSelectAllAcrossPages(false)}
                            onNavigate={async (params) => {
                                const mockResponse = {
                                    data: tableData.data,
                                    meta: {
                                        ...tableData.meta,
                                        current_page: params.page || 1,
                                    },
                                };

                                setClientData({
                                    data: mockResponse.data,
                                    meta: mockResponse.meta,
                                    queryParams: params,
                                    links: {
                                        prev: mockResponse.meta.current_page > 1 ? '' : null,
                                        next: mockResponse.meta.current_page < mockResponse.meta.last_page ? '' : null,
                                    },
                                });
                                
                            }}
                        />
                    </div>
                </div>
            </div>
            {/* Bulk Status Edit Modal */}
            <BulkStatusEditModal
                open={isStatusModalOpen}
                onOpenChange={closeStatusModal}
                selectedItems={selectedItemsForStatus}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData.queryParams}
                onSuccess={() => {
                    setSelectedItemsForStatus([]);
                    // In a real app, you'd reload data or refetch
                    // router.reload();
                }}
            />
            {/* CSV Import modal removed: navigation now goes to items.import route */}

             {/* Bulk Export Modal */}
            <BulkExportModal
                open={isBulkExportModalOpen}
                onOpenChange={closeBulkExportModal}
                selectedItems={selectedItemsForExport}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData.queryParams}
                onSuccess={() => {
                    setSelectedItemsForExport([]);
                    // Optionally show a success message
                }}
                config={{
                    route: 'items.bulk-action',
                    payload: {
                        type: 'export',
                        ids: selectedItemsForExport.map((item) => item.id),
                        data: {
                            columns: selectedColumns,
                        },
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedColumns}
                title="Export Items"
                itemName="item"
            />
            {/* Export Modal for All Items */}
            <BulkExportModal
                open={isExportModalOpen}
                onOpenChange={closeExportModal}
                selectedItems={selectedItemsForExport}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData.queryParams}
                onSuccess={() => {
                    setSelectedItemsForExport([]);
                    // Optionally show a success message
                }}
                config={{
                    route: 'item.export',
                    payload: {
                        columns: selectedColumns,
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedColumns}
                title="Export Items"
                itemName="item"
            />
            
            {/* Item Create/Edit Modal */}
            <AddEditModal
                open={isEditModalOpen}
                onOpenChange={closeEditModal}
                item={selectedItemForEdit}
                filters={[
                    { label: 'Option 1', value: 'option1' },
                    { label: 'Option 2', value: 'option2' },
                    { label: 'Option 3', value: 'option3' },
                ]}
                onSuccess={() => {
                    setSelectedItemForEdit(null);
                    // In a real app, you'd reload data or refetch
                    // router.reload();
                }}
            />
        </>
    );
}

Index.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Items', href: '#' },
        ]}
        title="Items"
    >
        {page}
    </AppLayout>
);

export default Index;