import { type BreadcrumbItem } from '@admin/types';
import { Head, usePage } from '@inertiajs/react';

import { DataTable } from '@admin/components/datatable';
import { FilterConfig } from '@admin/components/datatable-toolbar';
import { BulkExportModal } from '@admin/components/modals/bulkExportModal';
import { SkeletonTableWithStateCard } from '@admin/components/skeleton';
import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge';
import { activityTableColumns } from '@admin/components/tableColumns/ActivityTableColumns';
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 { type PaginatedData } from '@admin/types';
import { router } from '@inertiajs/react';
import { Activity, BarChart2, Download, Layers, Trash2, Users } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';
import { toast } from 'sonner';

const ACTIVITY_LOG_EXPORT_COLUMNS = [
    { value: 'user', label: 'User', description: 'Actor name/email' },
    { value: 'module', label: 'Module', description: 'Module name' },
    { value: 'action', label: 'Action', description: 'Action performed' },
    { value: 'description', label: 'Description', description: 'Activity description' },
    { value: 'ip_address', label: 'IP Address', description: 'IP address' },
    { value: 'properties', label: 'Properties', description: 'Custom properties' },
    { value: 'created_at', label: 'Created At', description: 'Timestamp' },
];

type ActivityLog = {
    id: number;
    user: { id: number; name: string; email: string };
    module: { id: number; name: string };
    action: string;
    description: string;
    ip_address: string;
    properties: Record<string, any>;
    created_at: string | null;
};

type ActivityListProps = { activityData: PaginatedData<ActivityLog> };

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Profile settings',
        href: route('settings.profile.edit'),
    },
];

function Audit() {
    const { activityData } = usePage().props as any;
    const initialSummary = (activityData as any).activityLogSummary ?? [];
    const filterUsers = (activityData as any).filterUsers ?? [];
    const filterModules = (activityData as any).filterModules ?? [];
    const filterActions = (activityData as any).filterActions ?? [];
    const [maxColumns, setMaxColumns] = useState(4);
    const [selectedActivities, setSelectedActivities] = useState<ActivityLog[]>([]);
    const [summary, setSummary] = useState<any[]>(initialSummary);
    const [selectedExportColumns, setSelectedExportColumns] = useState<string[]>([]);
    const [selectedExportFormat, setSelectedExportFormat] = useState<string>('csv');
    const { isOpen: isExportModalOpen, openModal: openExportModal, closeModal: closeExportModal } = useModal();
    const { isOpen: isBulkExportModalOpen, openModal: openBulkExportModal, closeModal: closeBulkExportModal } = useModal();
    const [isLoading, setIsLoading] = useState(true);

    // Handle column selection for export
    const handleColumnChange = (columnValue: string, checked: boolean) => {
        if (checked) {
            setSelectedExportColumns((prev) => [...prev, columnValue]);
        } else {
            setSelectedExportColumns((prev) => prev.filter((col) => col !== columnValue));
        }
    };

    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);
    }, []);

    // Add this at the top inside your component
    const [selectedUsersForExport, setSelectedUsersForExport] = useState<ActivityLog[]>([]); // previously undefined
    // Local client-side datatable state to avoid exposing query params in URL
    const [clientData, setClientData] = useState<any>(activityData);

    // Helper to format labels like on Users page
    const humanize = (str: string | undefined): string => {
        if (!str) return '';
        return str
            .replace(/[_-]+/g, ' ')
            .replace(/\s+/g, ' ')
            .trim()
            .toLowerCase()
            .split(' ')
            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
            .join(' ');
    };

    const userOptions = Array.isArray(filterUsers)
        ? filterUsers.map((u: any) => ({
              label: humanize(u.name) || u.email || `User #${u.id}`,
              value: String(u.id),
          }))
        : [];
    const actionOptions = Array.isArray(filterActions)
        ? filterActions.map((a: any) => ({
              label: humanize(a.name || a.action || a.value || a.slug || a.code || a.key || a),
              value: String(a.slug || a.action || a.id || a.value || a),
          }))
        : [];
    const moduleOptions = Array.isArray(filterModules)
        ? filterModules.map((m: any) => ({
              label: humanize(m.name || m.slug || m.code || `Module #${m.id}`),
              value: String(m.id || m.slug || m.code),
          }))
        : [];

    const filters: FilterConfig[] = [
        {
            type: 'searchable-multiselect',
            label: 'User',
            name: 'user_id',
            value: activityData.queryParams.user_id || '',
            options: userOptions,
        },
        {
            type: 'searchable-multiselect',
            label: 'Action',
            name: 'action',
            value: activityData.queryParams.action || '',
            options: actionOptions,
        },
        {
            type: 'searchable-multiselect',
            label: 'Module',
            name: 'module_id',
            value: activityData.queryParams.module_id || '',
            options: moduleOptions,
        },
    ];

    const bulkActions = [
        {
            label: 'Export Logs',
            icon: Download,
            confirm: false,
            className: '',
            onClick: (items: ActivityLog[]) => {
                setSelectedActivities(items);
                setSelectedUsersForExport(items);
                // Reset export settings
                setSelectedExportColumns([]);
                setSelectedExportFormat('csv');
                openBulkExportModal();
            },
        },
        {
            label: 'Delete Logs',
            icon: Trash2,
            confirm: true,
            className: 'text-red-600',
            onClick: (items: ActivityLog[]) => {
                const ids = items.map((i) => i.id);
                router.delete(route('activity-log.bulk-delete'), {
                    data: { ids },
                    onSuccess: () => toast.success('Selected logs deleted successfully'),
                });
            },
        },
    ];

    const handleRowClick = (log: ActivityLog) => {
        toast.info(`Log #${log.id}: ${log.description}`);
    };
    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="Activity Logs" />
            <div className="no-scrollbar flex h-full w-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-2">
                <div className="no-scrollbar w-full overflow-x-auto">
                    {/* 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">Activity Logs</h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>System</span>
                                <span className="mx-2">›</span>
                                <span>Activity Logs</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    setSelectedUsersForExport(activityData.data);
                                    setSelectedExportColumns([]);
                                    setSelectedExportFormat('csv');
                                    openExportModal();
                                }}
                            >
                                <div className="flex items-center gap-2">
                                    <Download className="size-4" />
                                    <span className="hidden sm:inline">Export</span>
                                </div>
                            </Button>
                        </div>
                    </div>

                    {/* Activity Statistics Cards */}
                    {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) => {
                                let IconComponent = BarChart2;
                                if (card.title?.toLowerCase().includes('active user')) IconComponent = Users;
                                else if (card.title?.toLowerCase().includes('top module')) IconComponent = Layers;
                                else if (card.title?.toLowerCase().includes('most common action')) IconComponent = Activity;
                                let iconBg = 'bg-blue-100';
                                let iconColor = 'text-blue-500';
                                const titleLower = (card.title || '').toLowerCase();
                                if (titleLower.includes('error') || titleLower.includes('delete')) {
                                    iconBg = 'bg-red-100';
                                    iconColor = 'text-red-600';
                                } else if (titleLower.includes('active user')) {
                                    iconBg = 'bg-green-100';
                                    iconColor = 'text-green-600';
                                } else if (titleLower.includes('top module')) {
                                    iconBg = 'bg-yellow-100';
                                    iconColor = 'text-yellow-500';
                                } else if (titleLower.includes('most common action')) {
                                    iconBg = 'bg-blue-100';
                                    iconColor = 'text-blue-500';
                                }

                                return (
                                    <>
                                        <div key={idx}>
                                            <StatisticCardLarge
                                                title={card?.title || ''}
                                                value={card.value}
                                                iconbg={iconBg}
                                                icon={IconComponent}
                                                iconColor={iconColor}
                                            />
                                        </div>
                                    </>
                                );
                            })}
                        </div>
                    )}

                    {/* Activity Data Table */}
                    <div className="w-96 sm:w-full">
                        <DataTable
                            columns={activityTableColumns()}
                            data={clientData.data}
                            paginatedData={clientData}
                            bulkActions={bulkActions}
                            tableKey="activity-log-table"
                            filters={filters}
                            enableRowClick={true}
                            onRowClick={handleRowClick}
                            fullHeight={false}
                            onNavigate={async (params) => {
                                // Fetch and update local datatable state without changing the URL
                                const url = route('activity-log.data');
                                const json = await fetchDatatable<ActivityLog>(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).activityLogSummary) {
                                    setSummary((json as any).activityLogSummary);
                                }
                            }}
                        />
                    </div>
                </div>
            </div>
            {/* Bulk Export Modal */}
            <BulkExportModal
                open={isBulkExportModalOpen}
                onOpenChange={closeBulkExportModal}
                selectedUsers={selectedUsersForExport}
                onSuccess={() => {
                    setSelectedUsersForExport([]);
                }}
                config={{
                    route: 'activity-log.bulk-action',
                    payload: {
                        type: 'export',
                        ids: selectedUsersForExport.map((activity) => activity.id),
                        data: {
                            columns: selectedExportColumns,
                            format: selectedExportFormat,
                        },
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedExportColumns}
                title="Export Activity Logs"
                itemName="activity log"
                availableColumns={ACTIVITY_LOG_EXPORT_COLUMNS}
            />
            {/* Export All Modal */}
            <BulkExportModal
                open={isExportModalOpen}
                onOpenChange={closeExportModal}
                selectedUsers={selectedUsersForExport}
                onSuccess={() => {
                    setSelectedUsersForExport([]);
                }}
                config={{
                    route: 'activity-log.export',
                    payload: {
                        columns: selectedExportColumns,
                        format: selectedExportFormat,
                    },
                }}
                handleColumnChange={handleColumnChange}
                selectedColumns={selectedExportColumns}
                title="Export Activity Logs"
                itemName="activity log"
                availableColumns={ACTIVITY_LOG_EXPORT_COLUMNS}
            />
        </>
    );
}
Audit.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Activity Logs', href: route('activity-log.index') },
        ]}
        title="Activity Logs"
    >
        {page}
    </AppLayout>
);

export default Audit;