import { ActivityLogSidebar } from '@/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@/components/activity-log/useModelActivityLog';
import { DataTable } from '@/components/datatable';
import { FilterConfig } from '@/components/datatable-toolbar';
import { BulkStatusEditModal } from '@/components/modals/bulk-status-edit-modal';
import { BulkExportModal } from '@/components/modals/bulkExportModal';
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 { fetchDatatable } from '@/lib/datatable-fetch';
import { type PaginatedData } from '@/types';
import { Head, Link, router, usePage } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';

import StatusSelector from '@/components/status-selector';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import StatisticCardLarge from '@/components/dashboard/StatisticCardLarge';
import { CalendarDays, CheckCircle2, Download, Eye, List, MoreHorizontal, Pencil, Plus, Sliders, Trash2, Upload, XCircle } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';
import Create from './Component/Create';
import Edit from './Component/Edit';

// Project globals (Ziggy / Inertia route helper)
declare const route: (...args: any[]) => string;

interface SummaryItem {
    title: string;
    value: number;
}

interface ProductVariantData {
    id: number;
    title: string;
    description: string;
    status: number;
    created_at: string;
    updated_at: string;
}

type ProductVariantIndexData = PaginatedData<ProductVariantData>;
type ProductVariantIndexProps = { data: ProductVariantIndexData };

const summaryIconMap = {
    'Total Variants': { icon: Sliders, iconColor: 'text-blue-600' },
    'Active': { icon: CheckCircle2, iconColor: 'text-green-600' },
    'Inactive': { icon: XCircle, iconColor: 'text-red-500' },
    'Created This Month': { icon: CalendarDays, iconColor: 'text-purple-600' },
};

function Index() {
    const { data } = usePage<ProductVariantIndexProps>().props;
    const [selectedItemsForStatus, setSelectedItemsForStatus] = useState<ProductVariantData[]>([]);

    const [selectedItemsForExport, setSelectedItemsForExport] = useState<ProductVariantData[]>([]);

    const [selectAllAcrossPages, setSelectAllAcrossPages] = useState(false);
    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: isCreateModalOpen, openModal: openCreateModal, closeModal: closeCreateModal } = useModal();
    const { isOpen: isEditModalOpen, openModal: openEditModal, closeModal: closeEditModal } = useModal();

    const [editingItem, setEditingItem] = useState<ProductVariantData | null>(null);

    const handleColumnChange = (columnValue: string, checked: boolean) => {
        if (checked) {
            setSelectedColumns((prev) => [...prev, columnValue]);
        } else {
            setSelectedColumns((prev) => prev.filter((col) => col !== columnValue));
        }
    };

    const handleEditItem = (item: ProductVariantData) => {
        setEditingItem(item);
        openEditModal();
    };

    const handleCloseEditModal = () => {
        setEditingItem(null);
        closeEditModal();
    };

    const handleModalSuccess = () => {
        // Refetch data after successful create/edit
        refetchProductVariants();
    };

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

    const tableFilters: FilterConfig[] = [
        {
            type: 'searchable-multiselect',
            label: 'Status',
            name: 'status',
            value: clientData.queryParams.status || '',
            options: [
                { label: 'Active', value: 1 },
                { label: 'Inactive', value: 0 },
            ],
        },
        {
            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: ProductVariantData[]) => {
                // If user opted to use full fetched set override items
                setSelectedItemsForExport(items);
                openBulkExportModal();
            },
        },
        {
            label: 'Status Update',
            icon: List,
            confirm: false,
            className: '',
            onClick: (items: ProductVariantData[]) => {
                setSelectedItemsForStatus(items);
                openStatusModal();
            },
        },
    ].filter(Boolean); // ⬅ removes false

    const activityLogCtl = useModelActivityLog();

    // 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,
    ]);

    const handleActivitySidebar = () => {
        return activityLogCtl.show({ modelClass: 'ProductVariant', title: 'ProductVariant Model Activity' });
    };

    const handleDeleteProductVariant = (id: number | string) => {
        router.delete(route('product-variant.destroy', id), {
            onSuccess: () => {
                setTimeout(() => {
                    refetchProductVariants();
                }, 100);
            },
            onError: (errors) => {
                console.error('Delete failed:', errors);
            },
        });
    };

    const refetchProductVariants = async () => {
        const url = route('product-variant.index');
        const json = await fetchDatatable<ProductVariantData>(url, clientData.queryParams);
        setClientData((prevData) => ({
            ...prevData,
            data: json.data,
            meta: json.meta,
            queryParams: prevData.queryParams,
            links: {
                prev: json.meta.current_page > 1 ? '' : null,
                next: json.meta.current_page < json.meta.last_page ? '' : null,
            },
        }));
        if ((json as any).summary) {
            setSummary((json as any).summary as any);
        }
    };

    const handleProductVariantStatus = (id: number, status: string) => {
        router.put(
            route('product-variant.status', id),
            { status: status },
            {
                onSuccess: () => {
                    refetchProductVariants();
                },
                onError: (errors) => {
                    console.error('Status update failed:', errors);
                },
            },
        );
    };
    // ProductVariant columns definition
    const dataColumns: (ColumnDef<ProductVariantData> & { enableSorting?: boolean })[] = [
        {
            accessorKey: 'id',
            header: 'ID',
            enableSorting: true,
        },
        {
            accessorKey: 'title',
            header: 'Title',
            enableSorting: true,
        },
        {
            accessorKey: 'description',
            header: 'Description',
            enableSorting: true,
            cell: ({ row }) => (
                <div className="max-w-xs truncate" title={row.original.description}>
                    {row.original.description}
                </div>
            ),
        },
        {
            accessorKey: 'options',
            header: 'Options',
            enableSorting: false,
            cell: ({ row }) => {
                const options = (row.original as any).options || [];
                if (options.length === 0) return <span className="text-sm text-gray-400">No options</span>;
                return (
                    <div className="flex flex-wrap gap-1">
                        {options.slice(0, 3).map((opt: any, idx: number) => (
                            <span
                                key={idx}
                                className="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800"
                            >
                                {opt.name}
                            </span>
                        ))}
                        {options.length > 3 && <span className="text-xs text-gray-500">+{options.length - 3} more</span>}
                    </div>
                );
            },
        },
        {
            accessorKey: 'status',
            header: 'Status',
            enableSorting: true,

            cell: ({ row }) => {
                const status = (row.original.status || 0) as number;
                return (
                    <StatusSelector
                        id={row.original.id}
                        handleStatusUpdate={handleProductVariantStatus}
                        status={status}
                        statusOptions={clientData?.statuses}
                    />
                );
            },
        },
        {
            accessorKey: 'created_at',
            header: 'Created At',
            enableSorting: true,
            cell: ({ row }) => <div className="text-sm text-gray-600">{new Date(row.original.created_at).toLocaleDateString()}</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('product-variant.show', row.original.id)} className="flex items-center">
                                <Eye className="mr-2 h-4 w-4 text-blue-500" />
                                View Details
                            </Link>
                        </DropdownMenuItem>

                        <DropdownMenuItem onClick={() => handleEditItem(row.original)}>
                            <Pencil className="mr-2 h-4 w-4 text-success" />
                            Edit ProductVariant
                        </DropdownMenuItem>

                        <AlertDialog>
                            <AlertDialogTrigger asChild>
                                <DropdownMenuItem
                                    className="flex items-center 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 ProductVariant
                                </DropdownMenuItem>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                                <AlertDialogHeader>
                                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                                    <AlertDialogDescription>
                                        This action cannot be undone. This will permanently delete this productvariant.
                                    </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                        onClick={() => handleDeleteProductVariant(row.original.id)}
                                        className="bg-red-600 hover:bg-red-700"
                                    >
                                        Delete
                                    </AlertDialogAction>
                                </AlertDialogFooter>
                            </AlertDialogContent>
                        </AlertDialog>
                    </DropdownMenuContent>
                </DropdownMenu>
            ),
        },
    ];

    // Build bulk status options with colors
    const bulkStatusOptions = clientData?.statuses?.map((status: any) => {
        // Map status values to colors
        const getStatusColor = (value: string | number) => {
            switch (value) {
                case 'ACTIVE':
                    return 'border-brand-900 text-green-900';
                case 'INACTIVE':
                    return 'border-gray-500 text-gray-500';
            }
        };

        // Map string status to numeric value for modal compatibility
        const getNumericValue = (value: string) => {
            switch (value) {
                case 'ACTIVE':
                    return 1;
                case 'INACTIVE':
                    return 0;
                default:
                    return 0;
            }
        };

        return {
            value: getNumericValue(status?.value),
            label: status?.label,
            color: getStatusColor(status?.value),
        };
    });

    return (
        <>
            <Head title="Product Variants" />
            <div className="no-scrollbar rounded-xl bg-gray-100/55 p-2 sm:p-4">
                <div className="">
                    <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">Product Variants</h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>Products</span>
                                <span className="mx-2">›</span>
                                <span>Product Variants</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            <Button className="bg-success text-white hover:bg-brand-800" size="sm" onClick={openCreateModal}>
                                <div className="flex items-center gap-2">
                                    <Plus className="size-4" />
                                    <span className="hidden sm:inline">Add new</span>
                                </div>
                            </Button>

                            {/* Import ProductVariants */}
                            <Link href={route('product-variant.import')}>
                                <Button variant="outline" size="sm">
                                    <div className="flex items-center gap-2">
                                        <Upload className="size-4" />
                                        <span className="hidden sm:inline">Import</span>
                                    </div>
                                </Button>
                            </Link>

                            {/* Export ProductVariants */}
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    setSelectedItemsForExport(clientData.data);
                                    openBulkExportModal();
                                }}
                            >
                                <div className="flex items-center gap-2">
                                    <Download className="size-4" />
                                    <span className="hidden sm:inline">Export</span>
                                </div>
                            </Button>
                        </div>
                    </div>

                    {summary && summary.length > 0 && (
                        <div className="mb-4 grid grid-cols-2 gap-4 lg:grid-cols-4">
                            {summary.map((s: SummaryItem, idx: number) => {
                                const iconDef = summaryIconMap[s.title as keyof typeof summaryIconMap] ?? { icon: Sliders, iconColor: 'text-blue-600' };
                                return (
                                    <StatisticCardLarge
                                        key={idx}
                                        title={s.title}
                                        value={s.value}
                                        change=""
                                        changeType="gray"
                                        icon={iconDef.icon}
                                        iconColor={iconDef.iconColor}
                                    />
                                );
                            })}
                        </div>
                    )}
                    <div className="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)}
                            handleActivitySidebar={handleActivitySidebar}
                            onNavigate={async (params) => {
                                const url = route('product-variant.index');
                                const json = await fetchDatatable<ProductVariantData>(url, params);
                                setClientData((prevData) => ({
                                    ...prevData,
                                    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,
                                    },
                                }));
                                if ((json as any).summary) {
                                    setSummary((json as any).summary as any);
                                }
                            }}
                        />
                    </div>
                </div>
            </div>
            {/* Bulk Status Edit Modal */}
            <BulkStatusEditModal
                open={isStatusModalOpen}
                onOpenChange={closeStatusModal}
                selectedUsers={selectedItemsForStatus}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData.queryParams}
                statusOptions={bulkStatusOptions}
                apiRoute="productvariants.bulk-action"
                onSuccess={() => {
                    setSelectedItemsForStatus([]);
                    refetchProductVariants();
                }}
            />
            {/* Bulk Export Modal */}
            <BulkExportModal
                open={isBulkExportModalOpen}
                onOpenChange={closeBulkExportModal}
                selectedUsers={selectedItemsForExport}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData.queryParams}
                onSuccess={() => {
                    setSelectedItemsForExport([]);

                    // Optionally show a success message
                }}
                config={{
                    route: 'product-variant.export',
                    payload: {
                        type: 'export',
                        ids: selectedItemsForExport.map((item) => item.id),
                        data: {
                            columns: selectedColumns,
                        },
                    },
                }}
                availableColumns={[
                    { value: 'id', label: 'ID', description: 'ProductVariant unique identifier' },
                    { value: 'title', label: 'Title', description: 'ProductVariant title' },
                    { value: 'description', label: 'Description', description: 'ProductVariant description' },
                    { value: 'status', label: 'Status', description: 'ProductVariant status (Active/Inactive)' },
                    { value: 'created_at', label: 'Created At', description: 'ProductVariant creation date' },
                    { value: 'updated_at', label: 'Updated At', description: 'Last update date' },
                ]}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedColumns}
                title="Export ProductVariants"
                itemName="productvariant"
            />

            {/* Create Modal */}
            <Create open={isCreateModalOpen} onOpenChange={closeCreateModal} onSuccess={handleModalSuccess} />

            {/* Edit Modal */}
            <Edit
                open={isEditModalOpen}
                onOpenChange={handleCloseEditModal}
                onSuccess={handleModalSuccess}
                defaultValues={editingItem || undefined}
            />
            <ActivityLogSidebar
                open={activityLogCtl.open}
                onOpenChange={activityLogCtl.setOpen}
                modelClass={activityLogCtl.modelClass}
                modelId={activityLogCtl.modelId}
                title={activityLogCtl.title}
            />
        </>
    );
}

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

export default Index;