import { ReactNode, useEffect, useState } from 'react';
import { Head, router } from '@inertiajs/react';
import AdminLayout from '@admin/layouts/admin/admin-layout';
import { DataTable } from '@admin/components/datatable';
import { FilterConfig } from '@admin/components/datatable-toolbar';
import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge';
import { Plus, Download, Trash2 } from 'lucide-react';
import { SkeletonTableWithStateCard } from '@admin/components/skeleton';
import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar';
import { Button } from '@admin/components/ui/button';
import { toast } from 'sonner';
import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog';
import { fetchDatatable } from '@admin/lib/datatable-fetch';
import { bgColor } from '@admin/lib/Icon-bg-Color';
import { type PaginatedData } from '@admin/types';
import { saasAppInstanceTableColumns, type SaasAppInstance } from '@admin/components/tableColumns/saasAppInstanceTableColumns';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@admin/components/ui/alert-dialog';
import { useDialog } from '@admin/components/ui/use-dialog';

interface SaasAppInstanceSummaryItem {
    title: string;
    value: number;
    description?: string;
}

interface SaasAppInstanceStatusItem {
    label: string;
    value: number;
}

type SaasAppInstancesIndexData = PaginatedData<SaasAppInstance> & {
    summary?: SaasAppInstanceSummaryItem[];
    statuses?: SaasAppInstanceStatusItem[];
};

type SaasAppInstancesIndexProps = { saasAppInstancesData: SaasAppInstancesIndexData };

export default function SaasAppInstancesIndex() {
    const [selectAllAcrossPages, setSelectAllAcrossPages] = useState(false);

    // Local client-side datatable state
    const [clientData, setClientData] = useState<any>({});
    const [summary, setSummary] = useState<SaasAppInstanceSummaryItem[]>([]);
    const [isLoading, setIsLoading] = useState(true);

    const activityLogCtl = useModelActivityLog();

    // Bulk delete dialog
    const { open: showBulkDeleteDialog, setOpen: setShowBulkDeleteDialog } = useDialog();
    const [selectedIds, setSelectedIds] = useState<number[]>([]);

    // Responsive grid columns hook
    const [maxColumns, setMaxColumns] = useState(6);

    useEffect(() => {
        refetchInstances();
        const updateColumns = () => {
            const width = window.innerWidth;
            if (width < 640) setMaxColumns(1); // mobile
            else if (width < 768) setMaxColumns(2); // sm
            else if (width < 1024) setMaxColumns(3); // md
            else if (width < 1280) setMaxColumns(4); // lg
            else if (width < 1536) setMaxColumns(5); // xl
            else setMaxColumns(6); // 2xl
        };

        updateColumns();
        window.addEventListener('resize', updateColumns);
        return () => window.removeEventListener('resize', updateColumns);
    }, []);

    // Refetch instances data method
    const refetchInstances = async () => {
        setIsLoading(true);
        const url = route('admin.saas_app_instances.index');
        const json = await fetchDatatable<SaasAppInstance>(url, clientData?.queryParams);
        setClientData({
            data: json.data,
            meta: json.meta,
            queryParams: clientData?.queryParams,
            statuses: (json as any).statuses || [],
            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);
        }
        setIsLoading(false);
    };

    const filters: FilterConfig[] = [
        {
            type: 'searchable-multiselect',
            label: 'Status',
            name: 'status',
            value: clientData?.queryParams?.status || '',
            options: clientData?.statuses || [],
        },
        {
            type: 'date-range',
            label: 'Created At',
            name: 'created_at',
            value: '',
        },
    ];

    // Bulk actions config
    const bulkActions = [
        {
            label: 'Delete',
            icon: Trash2,
            variant: 'destructive',
            onClick: (selectedRows: SaasAppInstance[]) => {
                const ids = selectedRows.map((row) => row.id);
                setSelectedIds(ids);
                setShowBulkDeleteDialog(true);
            },
        },
    ];

    // Reset cross-page selection if query (filters, page, per_page) changes
    useEffect(() => {
        setSelectAllAcrossPages(false);
    }, [
        clientData?.queryParams?.page,
        clientData?.queryParams?.per_page,
        clientData?.queryParams?.search,
        clientData?.queryParams?.status,
    ]);

    const handleViewInstance = (instance: SaasAppInstance) => {
        router.visit(route('admin.saas_app_instances.edit', instance.id));
    };

    const handleEditInstance = (instance: SaasAppInstance) => {
        router.visit(route('admin.saas_app_instances.edit', instance.id));
    };

    // Table columns configuration
    const dataColumns = saasAppInstanceTableColumns({
        handleViewInstance,
        handleEditInstance,
    });

    const handleActivitySidebar = () => {
        return activityLogCtl.show({ modelClass: 'SaasAppInstance', title: 'Application Instance Activity' });
    };

    // Handle bulk delete
    const handleBulkDelete = () => {
        if (selectedIds.length === 0) return;

        router.delete(route('admin.saas_app_instances.bulk-destroy'), {
            data: { ids: selectedIds },
            onSuccess: () => {
                toast.success(`${selectedIds.length} instance(s) deleted successfully`);
                setSelectedIds([]);
                refetchInstances();
                setShowBulkDeleteDialog(false);
            },
            onError: (errors) => {
                console.error('Bulk delete errors:', errors);
                toast.error('Failed to delete instances');
                setShowBulkDeleteDialog(false);
            },
        });
    };

    if (isLoading) {
        return (
            <>
                <Head title="Loading Application Instances..." />
                <SkeletonTableWithStateCard
                    showBreadcrumbs={true}
                    showActionButtons={true}
                    showStats={true}
                    statCount={3}
                    showTable={true}
                    tableRows={6}
                    animation="pulse"
                />
            </>
        );
    }

    return (
        <>
            <Head title="Application Instances" />
            <div className="no-scrollbar rounded-xl p-4">
                <div className="">
                    {/* Custom Section Header */}
                    <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">
                                Application Instance List
                            </h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>Management</span>
                                <span className="mx-2">›</span>
                                <span>Application Instances</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            {/* Add Instance */}
                            <Button
                                className="bg-success text-white hover:bg-brand-800"
                                size="sm"
                                onClick={() => router.visit(route('admin.saas_app_instances.create'))}
                            >
                                <div className="flex items-center gap-2">
                                    <Plus className="size-4" />
                                    <span className="hidden sm:inline">Add Instance</span>
                                </div>
                            </Button>

                            {/* Export */}
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    toast.info('Export feature coming soon');
                                }}
                            >
                                <div className="flex items-center gap-2">
                                    <Download className="size-4" />
                                    <span className="hidden sm:inline">Export</span>
                                </div>
                            </Button>
                        </div>
                    </div>

                    {/* Statistics Cards */}
                    <div
                        className="mb-4 grid gap-4 rounded-lg border bg-card"
                        style={{
                            gridTemplateColumns: `repeat(${Math.min(summary?.length || 0, maxColumns)}, 1fr)`,
                        }}
                    >
                        {summary?.map((s: SaasAppInstanceSummaryItem, idx: number) => {
                            const { icon: Icon } = bgColor(s?.title);

                            return (
                                <div key={idx}>
                                    <StatisticCardLarge
                                        title={s?.title || ''}
                                        value={s.value}
                                        iconbg={bgColor(s?.title).bg}
                                        icon={Icon as any}
                                        iconColor={bgColor(s?.title).icons}
                                    />
                                </div>
                            );
                        })}
                    </div>

                    <div className="w-96 sm:w-full">
                        <DataTable
                            columns={dataColumns}
                            data={clientData?.data}
                            paginatedData={clientData}
                            bulkActions={bulkActions}
                            tableKey="saas-app-instances-table"
                            filters={filters}
                            enableRowClick={false}
                            fullHeight={false}
                            selectAllActive={selectAllAcrossPages}
                            onSelectAllAcrossPages={() => setSelectAllAcrossPages(true)}
                            onClearSelectAllAcrossPages={() => setSelectAllAcrossPages(false)}
                            onNavigate={async (params) => {
                                const url = route('admin.saas_app_instances.index');
                                const json = await fetchDatatable<SaasAppInstance>(url, params);
                                setClientData({
                                    data: json.data,
                                    meta: json.meta,
                                    queryParams: params,
                                    statuses: (json as any).statuses || [],
                                    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);
                                }
                            }}
                            handleActivitySidebar={handleActivitySidebar}
                        />
                    </div>
                </div>
            </div>

            <ActivityLogSidebar
                open={activityLogCtl.open}
                onOpenChange={activityLogCtl.setOpen}
                modelClass={activityLogCtl.modelClass}
                modelId={activityLogCtl.modelId}
                title={activityLogCtl.title}
            />

            {/* Bulk Delete Confirmation Dialog */}
            <AlertDialog open={showBulkDeleteDialog} onOpenChange={setShowBulkDeleteDialog}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Delete Application Instances</AlertDialogTitle>
                        <AlertDialogDescription>
                            Are you sure you want to delete {selectedIds.length} instance(s)? This action cannot be undone.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>Cancel</AlertDialogCancel>
                        <AlertDialogAction onClick={handleBulkDelete} className="bg-red-600 hover:bg-red-700">
                            Delete
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </>
    );
}

SaasAppInstancesIndex.layout = (page: ReactNode) => (
    <AdminLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Application Instances', href: route('admin.saas_app_instances.index') },
        ]}
    >
        {page}
    </AdminLayout>
);