import { ReactNode, useEffect, useState } from 'react';
import { Head, router } from '@inertiajs/react';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@admin/components/ui/alert-dialog';
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 } 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 { tenantTableColumns } from '@admin/components/tableColumns/tenantTableColumns';

interface Tenant {
    id: number;
    uid: string;
    name: string;
    slug: string;
    email: string;
    phone?: string;
    company_name?: string;
    address?: string;
    city?: string;
    state?: string;
    country?: string;
    zip_code?: string;
    status: number;
    status_info: {
        value: number;
        name: string;
    };
    subscription?: {
        package_name: string;
        expires_at: string;
    };
    created_at: string;
    updated_at: string;
}

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

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

type TenantsIndexData = PaginatedData<Tenant> & {
    tenantSummary?: TenantSummaryItem[];
    tenantStatuses?: TenantStatusItem[];
};

type TenantsIndexProps = { tenantsData: TenantsIndexData };

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

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

    const activityLogCtl = useModelActivityLog();
    const [tenantToDelete, setTenantToDelete] = useState<any | null>(null);

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

    useEffect(() => {
        refetchTenants();
        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 tenants data method
    const refetchTenants = async () => {
        setIsLoading(true);
        const url = route('admin.tenants.index');
        const json = await fetchDatatable<Tenant>(url, clientData?.queryParams);
        setClientData({
            data: json.data,
            meta: json.meta,
            queryParams: clientData?.queryParams,
            tenantStatuses: (json as any).tenantStatuses || [],
            links: {
                prev: json.meta.current_page > 1 ? '' : null,
                next: json.meta.current_page < json.meta.last_page ? '' : null,
            },
        });
        if ((json as any).tenantSummary) {
            setSummary((json as any).tenantSummary as any);
        }
        setIsLoading(false);
    };

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

    // bulk actions config
    const bulkActions: any[] = [];

    // 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 handleTenantStatus = (id: number, status: number) => {
        console.log('Handling tenant status change', id, status);
        router.put(
            route('admin.tenants.status', id),
            { status: status },
            {
                onSuccess: () => {
                    toast.success('Tenant status updated successfully!');
                    refetchTenants();
                },
                onError: (errors) => {
                    console.error('Status update errors:', errors);
                    toast.error('Failed to update tenant status. Please try again.');
                },
            }
        );
    };

    const statusOptions = clientData?.tenantStatuses || [];

    const handleViewTenant = (tenant: any) => {
        router.visit(route('admin.tenants.show', tenant.id));
    };

    const handleEditTenant = (tenant: any) => {
        router.visit(route('admin.tenants.edit', tenant.id));
    };

    const handleDeleteTenant = (tenant: any) => {
        setTenantToDelete(tenant);
    };

    const confirmDeleteTenant = () => {
        if (!tenantToDelete) return;
        router.delete(route('admin.tenants.destroy', tenantToDelete.id), {
            onSuccess: () => {
                toast.success('Tenant deleted successfully');
                setTenantToDelete(null);
                refetchTenants();
            },
            onError: (errors: any) => {
                const first = Object.values(errors)[0];
                const msg = Array.isArray(first) ? first[0] : (first as string);
                toast.error(msg || 'Failed to delete tenant');
                setTenantToDelete(null);
            },
        });
    };

    const handleRestoreTenant = (tenant: any) => {
        router.patch(route('admin.tenants.restore', tenant.id), {}, {
            onSuccess: () => {
                toast.success('Tenant restored successfully');
                refetchTenants();
            },
            onError: () => {
                toast.error('Failed to restore tenant');
            },
        });
    };

    // Table columns configuration - use the comprehensive tenant table columns
    const dataColumns = tenantTableColumns({
        handleViewTenant,
        handleEditTenant,
        handleDeleteTenant,
        handleRestoreTenant,
    });

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

    // Build bulk status options with colors
    const bulkStatusOptions = [
        { label: 'Active', value: 1 },
        { label: 'Inactive', value: 2 },
        { label: 'Freezed', value: 3 },
        { label: 'Terminated', value: 4 },
    ].map((status: any) => {
        const getStatusColor = (value: number) => {
            switch (value) {
                case 1:
                    return 'border-brand-900 text-green-900';
                case 2:
                    return 'border-gray-500 text-gray-500';
                case 3:
                    return 'border-yellow-500 text-yellow-500';
                case 4:
                    return 'border-red-500 text-red-500';
                default:
                    return 'border-gray-500 text-gray-500';
            }
        };

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

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

    return (
        <>
            <Head title="Tenants" />
            <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" onClick={refetchTenants}>
                                Tenant List
                            </h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>Tenant Management</span>
                                <span className="mx-2">›</span>
                                <span>Tenant List</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            {/* Add Tenant */}
                            <Button 
                                className="bg-success text-white hover:bg-brand-800" 
                                size="sm" 
                                onClick={() => router.visit(route('admin.tenants.create'))}
                            >
                                <div className="flex items-center gap-2">
                                    <Plus className="size-4" />
                                    <span className="hidden sm:inline">Add Tenant</span>
                                </div>
                            </Button>

                            {/* Export Tenants */}
                            <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>

                    {/* Tenant Statistics Cards */}
                    <div
                        className="mb-4 grid gap-4"
                        style={{
                            gridTemplateColumns: `repeat(${Math.min(summary?.length || 0, maxColumns)}, 1fr)`,
                        }}
                    >
                        {summary?.map((s: TenantSummaryItem, 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-full">
                        <DataTable
                            columns={dataColumns}
                            data={clientData?.data}
                            paginatedData={clientData}
                            bulkActions={bulkActions}
                            tableKey="tenants-table"
                            filters={filters}
                            enableRowClick={false}
                            fullHeight={false}
                            selectAllActive={selectAllAcrossPages}
                            onSelectAllAcrossPages={() => setSelectAllAcrossPages(true)}
                            onClearSelectAllAcrossPages={() => setSelectAllAcrossPages(false)}
                            onNavigate={async (params) => {
                                const url = route('admin.tenants.index');
                                const json = await fetchDatatable<Tenant>(url, params);
                                setClientData({
                                    data: json.data,
                                    meta: json.meta,
                                    queryParams: params,
                                    tenantStatuses: (json as any).tenantStatuses || [],
                                    links: {
                                        prev: json.meta.current_page > 1 ? '' : null,
                                        next: json.meta.current_page < json.meta.last_page ? '' : null,
                                    },
                                });
                                if ((json as any).tenantSummary) {
                                    setSummary((json as any).tenantSummary as any);
                                }
                            }}
                            handleActivitySidebar={handleActivitySidebar}
                        />
                    </div>
                </div>
            </div>

            <AlertDialog open={!!tenantToDelete} onOpenChange={(open) => !open && setTenantToDelete(null)}>
                <AlertDialogContent className="max-w-sm">
                    <AlertDialogHeader>
                        <AlertDialogTitle>Delete Tenant</AlertDialogTitle>
                        <AlertDialogDescription>
                            Are you sure you want to delete <span className="font-semibold">{tenantToDelete?.name}</span>? This will soft-delete the tenant and can be restored later.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>Cancel</AlertDialogCancel>
                        <AlertDialogAction
                            className="bg-red-500 hover:bg-red-600"
                            onClick={confirmDeleteTenant}
                        >
                            Delete
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

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

TenantsIndex.layout = (page: ReactNode) => (
    <AdminLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Tenants', href: route('admin.tenants.index') },
        ]}
    >
        {page}
    </AdminLayout>
);