import { DataTable } from '@admin/components/datatable';
import { FilterConfig } from '@admin/components/datatable-toolbar';
import { BulkExportModal } from '@admin/components/modals/bulkExportModal';
import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge';
import { Button } from '@admin/components/ui/button';
import AppLayout from '@admin/layouts/app-layout';
import { fetchDatatable } from '@admin/lib/datatable-fetch';
import { Head, usePage } from '@inertiajs/react';
import { BarChart2, Download } from 'lucide-react';
import { ReactNode, useEffect, useMemo, useState } from 'react';

const EMAIL_LOG_EXPORT_COLUMNS = [
    { value: 'id', label: 'ID', description: 'Log ID' },
    { value: 'notification_id', label: 'Notification ID', description: 'Reference notification' },
    { value: 'channel', label: 'Channel', description: 'Email channel' },
    { value: 'status', label: 'Status', description: 'Email status' },
    { value: 'message', label: 'Message', description: 'Email message' },
    { value: 'created_at', label: 'Created At', description: 'Timestamp' },
];

function Index() {
    const { notificationLogs } = usePage().props as any;
    const cleanParams = (params: Record<string, any> = {}) =>
        Object.fromEntries(Object.entries(params || {}).filter(([, v]) => v !== '' && v !== null && v !== undefined));

    // Initialize local datatable state from server props. Keep queryParams cleaned locally.
    const defaultClient = { data: [], meta: {}, queryParams: {} };
    const [clientData, setClientData] = useState(() => {
        const base = notificationLogs ?? defaultClient;
        return { ...base, queryParams: cleanParams(base.queryParams || {}) };
    });
    const [selectedForExport, setSelectedForExport] = useState<any[]>([]);
    const [exportOpen, setExportOpen] = useState(false);
    const [selectedColumns, setSelectedColumns] = useState<string[]>(['id', 'notification_id', 'channel', 'status', 'message', 'created_at']);

    // Local status summary state (robust: handle multiple possible shapes coming from backend)
    const resolveStatusSummary = (src: any) => {
        return src?.statusSummary || src?.meta?.statusSummary || src?.status_summary || src?.meta?.status_summary || {};
    };
    // Keep only summary array (cards) for UI; statusSummary map is not needed separately

    // Convert statusSummary map into summary cards array like Activity page
    const mapToSummaryCards = (src: Record<string, number> | Record<string, any>) => {
        const s = src || {};
        const pending = Number(s['0'] ?? s[0] ?? 0);
        const sent = Number(s['1'] ?? s[1] ?? 0);
        const failed = Number(s['2'] ?? s[2] ?? 0);
        return [
            { title: 'Pending', value: pending },
            { title: 'Sent', value: sent },
            { title: 'Failed', value: failed },
        ];
    };
    let initialSummary;
    if (Array.isArray(notificationLogs?.userSummary)) {
        initialSummary = notificationLogs.userSummary;
    } else if (Array.isArray(notificationLogs?.summary)) {
        initialSummary = notificationLogs.summary;
    } else {
        initialSummary = mapToSummaryCards(resolveStatusSummary(notificationLogs));
    }
    const [summary, setSummary] = useState<any[]>(initialSummary);

    useEffect(() => {
        if (notificationLogs) {
            setClientData({ ...notificationLogs, queryParams: cleanParams(notificationLogs?.queryParams || {}) });
            // Prefer array-shaped summaries (userSummary or summary) from backend if present
            if (Array.isArray(notificationLogs.userSummary)) {
                setSummary(notificationLogs.userSummary);
            } else if (Array.isArray(notificationLogs.summary)) {
                setSummary(notificationLogs.summary);
            } else {
                const resolved = resolveStatusSummary(notificationLogs);
                setSummary(mapToSummaryCards(resolved));
            }
        }
    }, [notificationLogs]);

    // refetch helper intentionally removed; onNavigate now uses fetchDatatable directly

    const channels = clientData?.channels || notificationLogs?.channels || [];

    const backendStatuses =
        (clientData?.queryParams && (notificationLogs?.userStatuses || (clientData as any).userStatuses)) || notificationLogs?.userStatuses || [];

    const fallbackOptions = [
        { label: 'Pending', value: String(0) },
        { label: 'Sent', value: String(1) },
        { label: 'Failed', value: String(2) },
    ];

    const filters: FilterConfig[] = useMemo(
        () =>
            [
                {
                    type: 'dropdown' as const,
                    label: 'Status',
                    name: 'status',
                    value: clientData.queryParams.status || '',
                    options:
                        Array.isArray(backendStatuses) && backendStatuses.length > 0
                            ? backendStatuses.map((s: any) => ({ label: s.label, value: String(s.value) }))
                            : fallbackOptions,
                },
            ] as any,
        [clientData.queryParams, notificationLogs?.userStatuses],
    );

    const [maxColumns, setMaxColumns] = useState(4);

    useEffect(() => {
        const updateColumns = () => {
            const width = window.innerWidth;
            if (width < 640) setMaxColumns(1);
            else if (width < 1024) setMaxColumns(2);
            else if (width < 1280) setMaxColumns(3);
            else setMaxColumns(4);
        };
        updateColumns();
        window.addEventListener('resize', updateColumns);
        return () => window.removeEventListener('resize', updateColumns);
    }, []);

    return (
        <>
            <Head title="Email Logs" />
            <div className="p-4">
                <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">Email Logs</h2>
                        <div className="flex items-center text-sm text-gray-600">
                            <span>System</span>
                            <span className="mx-2">›</span>
                            <span>Email Logs</span>
                        </div>
                    </div>
                    <div className="flex flex-wrap gap-2 sm:gap-4">
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                                setSelectedForExport(clientData.data);
                                setSelectedColumns(['id', 'notification_id', 'channel', 'status', 'message', 'created_at']);
                                setExportOpen(true);
                            }}
                        >
                            <div className="flex items-center gap-2">
                                <Download className="size-4" />
                                <span className="hidden sm:inline">Export</span>
                            </div>
                        </Button>
                    </div>
                </div>

                {summary?.length > 0 && (
                    <div
                        className="mb-4 grid gap-4 rounded-lg border bg-card"
                        style={{
                            gridTemplateColumns: `repeat(${Math.min(summary.length, maxColumns)}, 1fr)`,
                        }}
                    >
                        {summary.map((card: any, idx: number) => (
                            <div key={card.title || idx}>
                                <StatisticCardLarge
                                    title={card?.title || ''}
                                    value={card.value}
                                    iconbg="bg-blue-100"
                                    iconColor="text-blue-500"
                                    icon={BarChart2}
                                />
                            </div>
                        ))}
                    </div>
                )}
                <DataTable
                    columns={[
                        { accessorKey: 'notification_id', header: 'Reference Notification' },
                        { accessorKey: 'channel', header: 'Channel' },
                        { accessorKey: 'status', header: 'Status' },
                        { accessorKey: 'created_at', header: 'Created At' },
                    ]}
                    fullHeight={false}
                    data={clientData.data}
                    paginatedData={clientData}
                    tableKey="notification-logs-table"
                    filters={filters}
                    onNavigate={async (params) => {
                        // Fetch and update local datatable state without changing the URL
                        const url = route('email-log.index');
                        const json = await fetchDatatable<any>(url, params as any);
                        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).statusSummary) {
                            setSummary(mapToSummaryCards((json as any).statusSummary));
                        } else if ((json as any).userSummary) {
                            setSummary((json as any).userSummary);
                        } else if ((json as any).summary) {
                            setSummary((json as any).summary);
                        }
                    }}
                    onSelectAllAcrossPages={() => {}}
                    bulkActions={[
                        {
                            label: 'Export',
                            icon: undefined,
                            confirm: false,
                            onClick: (items: any[]) => {
                                setSelectedForExport(items);
                                setExportOpen(true);
                            },
                        },
                    ]}
                />

                <BulkExportModal
                    open={exportOpen}
                    onOpenChange={(open) => {
                        setExportOpen(open);
                        if (!open) setSelectedForExport([]);
                    }}
                    selectedUsers={selectedForExport}
                    selectAll={false}
                    totalCount={clientData?.meta?.total}
                    currentFilters={clientData.queryParams}
                    onSuccess={() => {
                        setSelectedForExport([]);
                        setExportOpen(false);
                    }}
                    config={{
                        route: 'email-log.export',
                        payload: {
                            type: 'export',
                            select_all: true,
                            filters: clientData?.queryParams,
                            data: {
                                columns: selectedColumns,
                            },
                        },
                    }}
                    handleColumnChange={(col, checked) => {
                        setSelectedColumns((prev) => {
                            if (checked) return Array.from(new Set([...prev, col]));
                            return prev.filter((c) => c !== col);
                        });
                    }}
                    selectedColumns={selectedColumns}
                    title="Export Email Logs"
                    itemName="notification log"
                    availableColumns={EMAIL_LOG_EXPORT_COLUMNS}
                />
            </div>
        </>
    );
}

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

export default Index;