import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog';
import ContactAddOnSidebar from '@admin/components/addOns/addon-sidebars/contacts/contacts-sidebar';
import { DataTable } from '@admin/components/datatable';
import { FilterConfig } from '@admin/components/datatable-toolbar';
import { BulkExportModal } from '@admin/components/modals/bulkExportModal';
import { ContactSendEmailModal } from '@admin/components/modals/ContactSendEmailModal';
import { SkeletonTableWithStateCard } from '@admin/components/skeleton';
import StatisticsCard from '@admin/components/statistics-card';
import { contactTableColumns } from '@admin/components/tableColumns/contactTableColumns';
import { Button } from '@admin/components/ui/button';
import { useModal } from '@admin/components/ui/modal';
import useAddOn from '@/hooks/use-addons';
import AppLayout from '@admin/layouts/app-layout';
import { fetchDatatable } from '@admin/lib/datatable-fetch';
import { bgColor } from '@admin/lib/Icon-bg-Color';
import { Head, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { Download, Plus, Send, Upload } from 'lucide-react';
import { useEffect, useState } from 'react';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
declare const can: (permission: string) => any;

interface ContactItem {
    id: number;
    uid: string;
    name: string;
    email: string;
    phone: string | null;
    status: number;
    user_id: number | null;
    avatar?: string | null;
    created_at: string | null;
}

const CONTACT_EXPORT_COLUMNS = [
    { value: 'id', label: 'ID', description: 'Contact unique identifier' },
    { value: 'name', label: 'Name', description: 'Contact full name' },
    { value: 'email', label: 'Email', description: 'Contact email address' },
    { value: 'phone', label: 'Phone', description: 'Contact phone number' },
    { value: 'created_at', label: 'Created At', description: 'Contact creation date' },
];

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

function Index() {
    const [selectedContactsForExport, setSelectedContactsForExport] = useState<ContactItem[]>([]);
    const [selectedContactForEmail, setSelectedContactForEmail] = useState<ContactItem | null>(null);
    const [selectedContactsForBulkEmail, setSelectedContactsForBulkEmail] = useState<ContactItem[]>([]);
    const [selectAllAcrossPages, setSelectAllAcrossPages] = useState(false);
    const [selectedColumns, setSelectedColumns] = useState<string[]>(['id', 'name', 'email', 'phone']);
    const [statuses, setStatuses] = useState<Array<{ label: string; value: number }>>([]);
    const { addOnOpen, addOnClose } = useAddOn();

    const { isOpen: isBulkExportModalOpen, openModal: openBulkExportModal, closeModal: closeBulkExportModal } = useModal();
    const { isOpen: isEmailModalOpen, openModal: openEmailModal, closeModal: closeEmailModal } = useModal();
    const { isOpen: isBulkEmailModalOpen, openModal: openBulkEmailModal, closeModal: closeBulkEmailModal } = useModal();
    const { isOpen: isExportModalOpen, openModal: openExportModal, closeModal: closeExportModal } = useModal();
    const [isLoading, setIsLoading] = useState(true);
    const [clientData, setClientData] = useState<any>({});
    const [summary, setSummary] = useState<ContactSummaryItem[]>([]);
    // Responsive grid columns hook
    const [maxColumns, setMaxColumns] = useState(6);

    const handleColumnChange = (columnValue: string, checked: boolean) => {
        if (checked) {
            setSelectedColumns((prev) => [...prev, columnValue]);
        } else {
            setSelectedColumns((prev) => prev.filter((col) => col !== columnValue));
        }
    };
    useEffect(() => {
        refreshContacts();
        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);
    }, []);

    const handleDeleteContact = (contactId: number | string) => {
        router.delete(route('contacts.destroy', { contact: contactId }), {
            onSuccess: () => {
                refreshContacts();
            },
        });
    };

    const handleSendEmail = (contact: ContactItem) => {
        setSelectedContactForEmail(contact);
        openEmailModal();
    };

    const handleEditContact = (contact: ContactItem) => {
        const sidebar = {
            id: 'contact',
            content: (
                <ContactAddOnSidebar
                    mode="edit"
                    initialContact={contact}
                    onClose={addOnClose}
                    refreshContacts={refreshContacts}
                    ApiRoute="contacts.update"
                />
            ),
        };
        addOnOpen(sidebar);
    };

    const handleStatusUpdate = async (contactId: string, status: number) => {
        try {
            console.log('=== Contact Status Update Debug ===');
            console.log('Contact ID:', contactId);
            console.log('New Status:', status);
            console.log('Status Type:', typeof status);
            
            const url = route('contacts.update-status', { contact: contactId });
            console.log('Request URL:', url);
            
            const csrfToken = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content;
            console.log('CSRF Token:', csrfToken ? 'Found' : 'Not Found');
            
            const requestBody = { status };
            console.log('Request Body:', requestBody);

            const response = await fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken || '',
                },
                body: JSON.stringify(requestBody),
            });

            console.log('Response Status:', response.status);
            console.log('Response OK:', response.ok);
            
            const responseData = await response.json();
            console.log('Response Data:', responseData);

            if (response.ok) {
                refreshContacts();
            } else {
                console.error('Status update failed:', responseData);
            }
        } catch (error) {
            console.error('Failed to update contact status:', error);
        }
    };

    const handleCreateContact = () => {
        // Determine app name based on current context/route or pass dynamically
        const currentAppName = 'main'; // You can make this dynamic based on your app context
        
        const sidebar = {
            id: 'contact',
            content: <ContactAddOnSidebar mode="add" onClose={addOnClose} refreshContacts={refreshContacts} appName={currentAppName} />,
        };

        addOnOpen(sidebar);
    };

    useEffect(() => {
        if (!clientData) return;
        setSummary(clientData?.contactSummary ?? []);
    }, [clientData]);

    // Refresh current datatable and statistics without full page reload
    const refreshContacts = async (opts?: { forceFirstPage?: boolean; defaultSortIfNone?: boolean }) => {
        try {
            const params: any = { ...(clientData?.queryParams ?? {}) };

            // For create flows, jump to first page and sort newest first so the new item is visible
            if (opts?.forceFirstPage) params.page = 1;
            if (opts?.defaultSortIfNone && !params.sort_by) {
                params.sort_by = 'created_at';
                params.sort_dir = 'desc';
            }
            const url = route('contacts.index');
            const json = await fetchDatatable<ContactItem>(url, params);
            setClientData({
                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).contactSummary) {
                setSummary((json as any).contactSummary as any);
            }
            if ((json as any).statuses) {
                setStatuses((json as any).statuses);
            }
            setSelectAllAcrossPages(false);
        } catch (e) {
            console.error('Failed to refresh contacts:', e);
        }
    };

    // Global refresh listener (in case create/update happens from other components on the page)
    useEffect(() => {
        const handler = (e: any) => {
            const action = e?.detail?.action as 'created' | 'updated' | undefined;
            refreshContacts({ forceFirstPage: action === 'created', defaultSortIfNone: true });
        };
        window.addEventListener('contacts:refresh', handler as EventListener);
        return () => window.removeEventListener('contacts:refresh', handler as EventListener);
    }, []);

    // Refresh once if an import just completed (flag set by Import page)
    useEffect(() => {
        try {
            const flag = localStorage.getItem('contacts:needs-refresh');
            if (flag === '1') {
                localStorage.removeItem('contacts:needs-refresh');
                refreshContacts({ defaultSortIfNone: true });
            }
        } catch {}
    }, []);

    const filters: FilterConfig[] = [
        {
            type: 'searchable-multiselect',
            label: 'Status',
            name: 'status',
            value: clientData?.queryParams?.status || '',
            options: statuses.map(status => ({
                label: status.label,
                value: status.value,
            })),
        },
        {
            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: ContactItem[]) => {
                // If user opted to use full fetched set override items
                setSelectedContactsForExport(items);
                openBulkExportModal();
            },
        },
        {
            label: 'Send Email',
            icon: Send,
            confirm: false,
            className: '',
            onClick: (items: ContactItem[]) => {
                setSelectedContactsForBulkEmail(items);
                openBulkEmailModal();
            },
        },
    ].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(() => {
        setSelectAllAcrossPages(false);
    }, [clientData?.queryParams?.page, clientData?.queryParams?.per_page, clientData?.queryParams?.search, clientData?.queryParams?.status]);

    const dataColumns: (ColumnDef<ContactItem> & { enableSorting?: boolean })[] = contactTableColumns({
        handleDeleteContact,
        handleSendEmail,
        handleEditContact,
        handleStatusUpdate,
        statusOptions: statuses,
    });
    const handleActivitySidebar = () => {
        return activityLogCtl.show({ modelClass: 'Contact', title: 'Contact Model Activity' });
    };

    useEffect(() => {
        // Simulate loading for demo purposes
        const timer = setTimeout(() => {
            setIsLoading(false);
        }, 500);

        return () => clearTimeout(timer);
    }, []);

    if (isLoading) {
        return (
            <>
                <Head title="Loading Users..." />
                <SkeletonTableWithStateCard
                    showBreadcrumbs={true}
                    showActionButtons={true}
                    showStats={true}
                    statCount={4}
                    showTable={true}
                    tableRows={6}
                    animation="pulse"
                />
            </>
        );
    }
    return (
        <>
            <Head title="Contacts" />
            <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">Contacts</h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>Manage your contacts</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            {/* Add Contact */}
                            {can('platform_create_contact') > 0 && (
                                <Button className="bg-success text-white hover:bg-brand-800" size="sm" onClick={handleCreateContact}>
                                    <div className="flex items-center gap-2">
                                        <Plus className="size-4" />
                                        <span className="hidden sm:inline">Add Contact</span>
                                    </div>
                                </Button>
                            )}

                            {/* Import Contacts */}
                            {can('platform_import_contact') > 0 && (
                                <Button variant="outline" size="sm" onClick={() => router.visit(route('contacts.import'))}>
                                    <div className="flex items-center gap-2">
                                        <Upload className="size-4" />
                                        <span className="hidden sm:inline">Import</span>
                                    </div>
                                </Button>
                            )}

                            {/* Export Contacts */}
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    setSelectedContactsForExport(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>

                    {/* Contact 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: ContactSummaryItem, idx: number) => {
                            const { icon: Icon } = bgColor(s?.title);

                            return (
                                <div key={idx}>
                                    <StatisticsCard
                                        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="contacts-table"
                            filters={filters}
                            enableRowClick={false} // disable whole-row navigation
                            fullHeight={false}
                            selectAllActive={selectAllAcrossPages}
                            onSelectAllAcrossPages={() => setSelectAllAcrossPages(true)}
                            onClearSelectAllAcrossPages={() => setSelectAllAcrossPages(false)}
                            onNavigate={async (params) => {
                                const url = route('contacts.index');
                                const json = await fetchDatatable<ContactItem>(url, params);
                                setClientData({
                                    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).contactSummary) {
                                    setSummary((json as any).contactSummary as any);
                                }
                            }}
                            handleActivitySidebar={handleActivitySidebar}
                        />
                    </div>
                </div>
            </div>
            {/* Bulk Export Modal */}
            <BulkExportModal
                open={isBulkExportModalOpen}
                onOpenChange={closeBulkExportModal}
                selectedUsers={selectedContactsForExport}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData?.queryParams}
                onSuccess={() => {
                    setSelectedContactsForExport([]);
                    // Optionally show a success message
                }}
                config={{
                    route: 'contacts.bulk-action',
                    payload: {
                        type: 'export',
                        ids: selectedContactsForExport.map((contact) => contact.id),
                        data: {
                            columns: selectedColumns,
                        },
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedColumns}
                availableColumns={CONTACT_EXPORT_COLUMNS}
                title="Export Contacts"
                itemName="contact"
            />
            {/* Export Modal for All Contacts */}
            <BulkExportModal
                open={isExportModalOpen}
                onOpenChange={closeExportModal}
                selectedUsers={selectedContactsForExport}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData?.queryParams}
                onSuccess={() => {
                    setSelectedContactsForExport([]);
                    // Optionally show a success message
                }}
                config={{
                    route: 'contacts.export',
                    payload: {
                        type: 'export',
                        select_all: true,
                        filters: clientData?.queryParams,
                        data: {
                            columns: selectedColumns,
                        },
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedColumns}
                availableColumns={CONTACT_EXPORT_COLUMNS}
                title="Export Contacts"
                itemName="contact"
            />
            {/* Send Email Modal */}
            <ContactSendEmailModal
                open={isEmailModalOpen}
                onOpenChange={closeEmailModal}
                selectedContact={selectedContactForEmail}
                onSuccess={() => {
                    setSelectedContactForEmail(null);
                    // Optionally show a success message
                }}
            />
            <ContactSendEmailModal
                open={isBulkEmailModalOpen}
                onOpenChange={(open) => {
                    if (!open) {
                        setSelectedContactsForBulkEmail([]);
                        closeBulkEmailModal();
                    } else {
                        openBulkEmailModal();
                    }
                }}
                selectedContacts={selectedContactsForBulkEmail}
                selectAll={selectAllAcrossPages}
                currentFilters={clientData?.queryParams}
                onSuccess={() => {
                    setSelectedContactsForBulkEmail([]);
                    // Optionally show a success message
                }}
                isBulk={true}
            />

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

Index.layout = (page: React.ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Contacts', href: route('contacts.index') },
        ]}
        title="Contacts"
    >
        {page}
    </AppLayout>
);

export default Index;