import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog';
import { DataTable } from '@admin/components/datatable';
import { FilterConfig } from '@admin/components/datatable-toolbar';
import { BulkStatusEditModal } from '@admin/components/modals/bulk-status-edit-modal';
import { BulkExportModal } from '@admin/components/modals/bulkExportModal';
import { SendEmailModal } from '@admin/components/modals/sendEmailModal';
import { UserModal } from '@admin/components/modals/UserModal';
import { SkeletonTableWithStateCard } from '@admin/components/skeleton';
import StatisticsCard from '@admin/components/statistics-card';
import { userTableColumns } from '@admin/components/tableColumns/userTableColumns';
import { Button } from '@admin/components/ui/button';
import { useModal } from '@admin/components/ui/modal';
import AppLayout from '@admin/layouts/app-layout';
import { fetchDatatable } from '@admin/lib/datatable-fetch';
import { bgColor } from '@admin/lib/Icon-bg-Color';
import { type PaginatedData, type User } from '@admin/types';
import { Head, router, usePage } from '@inertiajs/react';
import { Download, Plus, Send, Upload, Users } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';
import { toast } from 'sonner';
declare const can: (permission: string) => any;

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

interface UserStatusItem {
    label: string;
    value: string;
}
type UsersIndexData = PaginatedData<User> & { userSummary?: UserSummaryItem[]; userStatuses?: UserStatusItem[] };
type UsersIndexProps = { usersData: UsersIndexData };

function Index() {
    const { roles } = usePage().props as any;
    const [selectedUsersForStatus, setSelectedUsersForStatus] = useState<User[]>([]);
    const [selectedUsersForExport, setSelectedUsersForExport] = useState<User[]>([]);
    const [selectedUserForEmail, setSelectedUserForEmail] = useState<User | null>(null);
    const [selectedUsersForBulkEmail, setSelectedUsersForBulkEmail] = useState<User[]>([]);
    const [selectAllAcrossPages, setSelectAllAcrossPages] = useState(false);
    const [selectedUserForEdit, setSelectedUserForEdit] = useState<User | null>(null);
    const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
    const { isOpen: isStatusModalOpen, openModal: openStatusModal, closeModal: closeStatusModal } = useModal();
    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: isUserModalOpen, openModal: openUserModal, closeModal: closeUserModal } = useModal();
    const { isOpen: isExportModalOpen, openModal: openExportModal, closeModal: closeExportModal } = useModal();
    // Local client-side datatable state to avoid exposing query params in URL
    const [clientData, setClientData] = useState<any>({});
    const [summary, setSummary] = useState<UserSummaryItem[]>([]);
    const [isLoading, setIsLoading] = useState(true);

    const activityLogCtl = useModelActivityLog();

    // 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(() => {
        refetchUsers();
        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 handleDeleteUser = (userId: number | string) => {
        router.delete(route('users.destroy', userId));
        refetchUsers();
    };
    // Refetch users data method
    const refetchUsers = async () => {
        const url = route('users.index');
        const json = await fetchDatatable<User>(url, clientData?.queryParams);
        setClientData({
            data: json.data,
            meta: json.meta,
            queryParams: clientData?.queryParams,
            userStatuses: (json as any).userStatuses || [],
            links: {
                prev: json.meta.current_page > 1 ? '' : null,
                next: json.meta.current_page < json.meta.last_page ? '' : null,
            },
            // usersSummary: json.userSummary,
        });
        if ((json as any).userSummary) {
            setSummary((json as any).userSummary as any);
        }
    };

    const handleSendEmail = (user: User) => {
        setSelectedUserForEmail(user);
        openEmailModal();
    };

    const handleEditUser = (user: User) => {
        setSelectedUserForEdit(user);
        openUserModal();
    };
    const handleCreateUser = () => {
        setSelectedUserForEdit(null);
        openUserModal();
    };

    // filters
    const humanize = (str: string | undefined): string => {
        if (!str) return '';
        return str
            .replace(/[_-]+/g, ' ') // underscores / dashes -> space
            .replace(/\s+/g, ' ') // collapse spaces
            .trim()
            .toLowerCase()
            .split(' ') // Title Case
            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
            .join(' ');
    };

    const roleOptions = Array.isArray(roles)
        ? roles.map((r: any) => ({
              label: humanize(r.name || r.slug || ''),
              value: r.slug || (r.name ? r.name.toLowerCase() : r.id),
          }))
        : [];

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

    // bulk actions config
    const bulkActions = [
        can('platform_export_users') && {
            label: 'Export Data',
            icon: Download,
            confirm: false,
            className: '',
            onClick: (items: User[]) => {
                // If user opted to use full fetched set override items
                setSelectedUsersForExport(items);
                openBulkExportModal();
            },
        },
        can('platform_edit_user') && {
            label: 'Status Update',
            icon: Users,
            confirm: false,
            className: '',
            onClick: (items: User[]) => {
                setSelectedUsersForStatus(items);
                openStatusModal();
            },
        },
        can('platform_send_email_to_user') && {
            label: 'Send Email',
            icon: Send,
            confirm: false,
            className: '',
            onClick: (items: User[]) => {
                setSelectedUsersForBulkEmail(items);
                openBulkEmailModal();
            },
        },
    ].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?.role,
        clientData?.queryParams?.status,
    ]);

    const handleUserStatus = (id: number, status: string) => {
        console.log('Handling user status change', id, status);
        router.put(route('users.status', id), { status: status }, {
            onSuccess: () => {
                toast.success('User status updated successfully!');
                refetchUsers();
            },
            onError: (errors) => {
                console.error('Status update errors:', errors);
                toast.error('Failed to update user status. Please try again.');
            },
        });
    };

    const statusOptions = clientData?.userStatuses || [];
    // Remove per-row activity button; keep only top model-wide Activity button
    const dataColumns = userTableColumns({
        handleDeleteUser,
        handleSendEmail,
        handleEditUser,
        handleUserStatus,
        statusOptions,
    });
    const handleActivitySidebar = () => {
        return activityLogCtl.show({ modelClass: 'User', title: 'User Model Activity' });
    };

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

        return () => clearTimeout(timer);
    }, []);
    // Statuses
    //  clientData?.userStatuses ||
    // Build bulk status options with colors
    const bulkStatusOptions = [
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' },
    ].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';
            }
        };

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

    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="Users" />
            <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" onClick={refetchUsers}>
                                User List
                            </h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>User Management</span>
                                <span className="mx-2">›</span>
                                <span>User List</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            {/* Add User */}
                            {can('platform_create_user') > 0 && (
                                <Button className="bg-success text-white hover:bg-brand-800" size="sm" onClick={handleCreateUser}>
                                    <div className="flex items-center gap-2">
                                        <Plus className="size-4" />
                                        <span className="hidden sm:inline">Add User</span>
                                    </div>
                                </Button>
                            )}
                            {/* Activity Log (model-wide) */}
                            {/* {can('platform_user_activity_log') > 0 && (
                                <Button variant="outline" size="sm" onClick={handleActivitySidebar}>
                                    <div className="flex items-center gap-2">
                                        <Activity className="size-4" />
                                        <span className="hidden sm:inline">Activity</span>
                                    </div>
                                </Button>
                            )} */}

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

                            {/* Export Users */}
                            {can('platform_export_user') > 0 && (
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                        setSelectedUsersForExport(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>

                    {/* User 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: UserSummaryItem, 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="users-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('users.data');
                                const json = await fetchDatatable<User>(url, params);
                                setClientData({
                                    data: json.data,
                                    meta: json.meta,
                                    queryParams: params,
                                    userStatuses: (json as any).userStatuses || [],
                                    links: {
                                        prev: json.meta.current_page > 1 ? '' : null,
                                        next: json.meta.current_page < json.meta.last_page ? '' : null,
                                    },
                                });
                                if ((json as any).userSummary) {
                                    setSummary((json as any).userSummary as any);
                                }
                            }}
                            handleActivitySidebar={handleActivitySidebar}
                        />
                    </div>
                </div>
            </div>
            {/* Bulk Status Edit Modal */}

            <BulkStatusEditModal
                open={isStatusModalOpen}
                onOpenChange={closeStatusModal}
                selectedUsers={selectedUsersForStatus}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData?.queryParams}
                statusOptions={bulkStatusOptions}
                apiRoute="users.bulk-action"
                onSuccess={() => {
                    setSelectedUsersForStatus([]);
                    router.reload();
                    refetchUsers();
                }}
            />

            {/* Bulk Export Modal */}
            <BulkExportModal
                open={isBulkExportModalOpen}
                onOpenChange={closeBulkExportModal}
                selectedUsers={selectedUsersForExport}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData?.queryParams}
                onSuccess={() => {
                    setSelectedUsersForExport([]);
                    // Optionally show a success message
                }}
                config={{
                    route: 'users.bulk-action',
                    payload: {
                        type: 'export',
                        ids: selectedUsersForExport.map((user) => user.id),
                        data: {
                            columns: selectedColumns,
                        },
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedColumns}
                title="Export Users"
                itemName="user"
            />
            {/* Export Modal for All Users */}
            <BulkExportModal
                open={isExportModalOpen}
                onOpenChange={closeExportModal}
                selectedUsers={selectedUsersForExport}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData?.queryParams}
                onSuccess={() => {
                    setSelectedUsersForExport([]);
                    // Optionally show a success message
                }}
                config={{
                    route: 'users.export',
                    payload: {
                        columns: selectedColumns,
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedColumns}
                title="Export Users"
                itemName="user"
            />
            {/* Send Email Modal */}
            <SendEmailModal
                open={isEmailModalOpen}
                onOpenChange={closeEmailModal}
                selectedUser={selectedUserForEmail}
                onSuccess={() => {
                    setSelectedUserForEmail(null);
                    // Optionally show a success message
                }}
            />
            <SendEmailModal
                open={isBulkEmailModalOpen}
                onOpenChange={(open) => {
                    if (!open) {
                        setSelectedUsersForBulkEmail([]);
                        closeBulkEmailModal();
                    } else {
                        openBulkEmailModal();
                    }
                }}
                selectedUsers={selectedUsersForBulkEmail}
                selectAll={selectAllAcrossPages}
                currentFilters={clientData?.queryParams}
                onSuccess={() => {
                    setSelectedUsersForBulkEmail([]);
                    // Optionally show a success message
                }}
                isBulk={true}
            />
            {/* User Create/Edit Modal */}
            <UserModal
                open={isUserModalOpen}
                onOpenChange={closeUserModal}
                user={selectedUserForEdit}
                roles={roles}
                onSuccess={async () => {
                    setSelectedUserForEdit(null);
                    await refetchUsers();
                }}
            />
            <ActivityLogSidebar
                open={activityLogCtl.open}
                onOpenChange={activityLogCtl.setOpen}
                modelClass={activityLogCtl.modelClass}
                modelId={activityLogCtl.modelId}
                title={activityLogCtl.title}
            />
        </>
    );
}

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

export default Index;