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 StatusSelector from '@admin/components/status-selector';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@admin/components/ui/alert-dialog';
import { Button } from '@admin/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import { useModal } from '@admin/components/ui/modal';
import AppLayout from '@admin/layouts/app-layout';
import SettingsLayout from '@admin/layouts/settings/layout';
import { fetchDatatable } from '@admin/lib/datatable-fetch';
import { type PaginatedData } from '@admin/types';
import { Head, Link, router, usePage } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { Activity, Languages, List, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';

// Project globals (Ziggy / Inertia route helper)
declare const route: (...args: any[]) => string;

interface LanguageData {
    id: number;
    name: string;
    code: string;
    icon: string | null;
    is_default: number;
    status: number;
    created_at: string;
    updated_at: string;
}

type LanguageIndexData = PaginatedData<LanguageData>;
type LanguageIndexProps = { data: LanguageIndexData };

function Index() {
    const { data } = usePage<LanguageIndexProps>().props;
    // Local client-side datatable state
    const [clientData, setClientData] = useState<any>(data);

    // Bulk actions state
    const [selectedItemsForStatus, setSelectedItemsForStatus] = useState<LanguageData[]>([]);
    const [selectAllAcrossPages, setSelectAllAcrossPages] = useState(false);

    // Modals
    const { isOpen: isStatusModalOpen, openModal: openStatusModal, closeModal: closeStatusModal } = useModal();

    // Activity log
    const activityLogCtl = useModelActivityLog();

    const tableFilters: FilterConfig[] = [
        {
            type: 'searchable-multiselect',
            label: 'Status',
            name: 'status',
            value: clientData?.queryParams?.status || '',
            options: clientData?.statuses || [
                { label: 'Active', value: '1' },
                { label: 'Inactive', value: '0' },
            ],
        },
    ];

    // Bulk actions config
    const bulkActions = [
        {
            label: 'Status Update',
            icon: List,
            confirm: false,
            className: '',
            onClick: (items: LanguageData[]) => {
                setSelectedItemsForStatus(items);
                openStatusModal();
            },
        },
    ].filter(Boolean);

    // Reset cross-page selection if query changes
    useEffect(() => {
        setSelectAllAcrossPages(false);
    }, [clientData?.queryParams?.page, clientData?.queryParams?.per_page, clientData?.queryParams?.search, clientData?.queryParams?.status]);

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

    const handleDeleteLanguage = (id: number | string) => {
        router.delete(route('language.destroy', id), {
            onSuccess: () => {
                setTimeout(() => {
                    refetchLanguages();
                }, 100);
            },
            onError: (errors) => {
                console.error('Delete failed:', errors);
            },
        });
    };

    const refetchLanguages = async () => {
        const url = route('language.index');
        const json = await fetchDatatable<LanguageData>(url, clientData?.queryParams);
        setClientData((prevData) => ({
            ...prevData,
            data: json?.data,
            meta: json.meta,
            queryParams: prevData.queryParams,
            statuses: (json as any)?.statuses || prevData.statuses,
            links: {
                prev: json.meta.current_page > 1 ? '' : null,
                next: json.meta.current_page < json.meta.last_page ? '' : null,
            },
        }));
    };

    const handleLanguageStatus = (id: number, status: number) => {
        router.put(
            route('language.status', id),
            { status: status },
            {
                onSuccess: () => {
                    refetchLanguages();
                },
                onError: (errors) => {
                    console.error('Status update failed:', errors);
                },
            },
        );
    };

    // Language columns definition
    const dataColumns: (ColumnDef<LanguageData> & { enableSorting?: boolean })[] = [
        {
            accessorKey: 'id',
            header: 'ID',
            enableSorting: true,
        },
        {
            accessorKey: 'name',
            header: 'Name',
            enableSorting: true,
            cell: ({ row }) => (
                <div className="flex items-center gap-2">
                    {row.original.icon && <span className="text-2xl">{row.original.icon}</span>}
                    <span>{row.original.name}</span>
                    {row.original.is_default === 1 && <span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">Default</span>}
                </div>
            ),
        },
        {
            accessorKey: 'code',
            header: 'Code',
            enableSorting: true,
            cell: ({ row }) => <span className="font-mono text-sm">{row.original.code.toUpperCase()}</span>,
        },
        {
            accessorKey: 'status',
            header: 'Status',
            enableSorting: true,
            cell: ({ row }) => {
                const status = (row.original.status || 0) as number;
                return (
                    <StatusSelector
                        id={row.original.id}
                        handleStatusUpdate={handleLanguageStatus}
                        status={status}
                        statusOptions={clientData?.statuses}
                    />
                );
            },
        },
        // handle$STUDLY_NAME$Status
        {
            accessorKey: 'created_at',
            header: 'Created At',
            enableSorting: true,
            cell: ({ row }) => <div className="text-sm text-gray-600">{new Date(row.original.created_at).toLocaleDateString()}</div>,
        },
        {
            id: 'actions',
            header: 'Actions',
            cell: ({ row }) => (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
                            <span className="sr-only">Open menu</span>
                            <MoreHorizontal className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>

                    <DropdownMenuContent align="end" className="w-48">
                        <DropdownMenuItem asChild>
                            <Link href={route('language.translate', row.original.id)} className="flex items-center">
                                <Languages className="mr-2 h-4 w-4 text-blue-500" />
                                Manage Translations
                            </Link>
                        </DropdownMenuItem>

                        <DropdownMenuItem asChild>
                            <Link href={route('language.edit', row.original.id)} className="flex items-center">
                                <Pencil className="mr-2 h-4 w-4 text-success" />
                                Edit Language
                            </Link>
                        </DropdownMenuItem>

                        {row.original.is_default !== 1 && (
                            <AlertDialog>
                                <AlertDialogTrigger asChild>
                                    <DropdownMenuItem
                                        className="flex items-center text-red-600 focus:bg-red-50 focus:text-red-600"
                                        onSelect={(e: Event) => e.preventDefault()}
                                    >
                                        <Trash2 className="mr-2 h-4 w-4" />
                                        Delete Language
                                    </DropdownMenuItem>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                    <AlertDialogHeader>
                                        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                                        <AlertDialogDescription>
                                            This action cannot be undone. This will permanently delete this language and all its translations.
                                        </AlertDialogDescription>
                                    </AlertDialogHeader>
                                    <AlertDialogFooter>
                                        <AlertDialogCancel>Cancel</AlertDialogCancel>
                                        <AlertDialogAction
                                            onClick={() => handleDeleteLanguage(row.original.id)}
                                            className="bg-red-600 hover:bg-red-700"
                                        >
                                            Delete
                                        </AlertDialogAction>
                                    </AlertDialogFooter>
                                </AlertDialogContent>
                            </AlertDialog>
                        )}
                    </DropdownMenuContent>
                </DropdownMenu>
            ),
        },
    ];

    return (
        <>
            <Head title="Language List" />
            <SettingsLayout tab="platform">
            <div className="no-scrollbar rounded-xl p-2">
                <div className="">
                    {/* 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">Languages</h2>
                            <div className="flex items-center text-sm text-gray-600">
                                <span>Manage application languages</span>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            <Link href={route('language.create')}>
                                <Button className="bg-success text-white hover:bg-brand-800" size="sm">
                                    <div className="flex items-center gap-2">
                                        <Plus className="size-4" />
                                        <span className="hidden sm:inline">Add Language</span>
                                    </div>
                                </Button>
                            </Link>

                            {/* Activity Log */}
                            <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>
                        </div>
                    </div>

                    <div className="w-96 sm:w-full">
                        {clientData ? (
                            <DataTable
                                columns={dataColumns}
                                data={clientData?.data || []}
                                paginatedData={clientData}
                                bulkActions={bulkActions}
                                tableKey="languages-table"
                                filters={tableFilters}
                                enableRowClick={false}
                                fullHeight={false}
                                selectAllActive={selectAllAcrossPages}
                                onSelectAllAcrossPages={() => setSelectAllAcrossPages(true)}
                                onClearSelectAllAcrossPages={() => setSelectAllAcrossPages(false)}
                                handleActivitySidebar={handleActivitySidebar}
                                onNavigate={async (params) => {
                                    const url = route('language.index');
                                    const json = await fetchDatatable<LanguageData>(url, params);
                                    setClientData((prevData) => ({
                                        ...prevData,
                                        data: json?.data,
                                        meta: json?.meta,
                                        queryParams: params,
                                        statuses: (json as any)?.statuses || prevData.statuses,
                                        links: {
                                            prev: json?.meta?.current_page > 1 ? '' : null,
                                            next: json?.meta?.current_page < json?.meta?.last_page ? '' : null,
                                        },
                                    }));
                                    if ((json as any)?.summary) {
                                        setSummary((json as any)?.summary as any);
                                    }
                                }}
                            />
                        ) : (
                            <div className="py-8 text-center">
                                <p className="text-gray-500">Loading languages...</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {/* Bulk Status Edit Modal */}
            <BulkStatusEditModal
                open={isStatusModalOpen}
                onOpenChange={closeStatusModal}
                selectedUsers={selectedItemsForStatus}
                selectAll={selectAllAcrossPages}
                totalCount={clientData?.meta?.total}
                currentFilters={clientData?.queryParams}
                statusOptions={[
                    {
                        value: 1,
                        label: 'Active',
                        color: 'border-brand-900 text-green-900',
                    },
                    {
                        value: 0,
                        label: 'Inactive',
                        color: 'border-gray-500 text-gray-500',
                    },
                ]}
                apiRoute="language.bulk-action"
                onSuccess={() => {
                    setSelectedItemsForStatus([]);
                    refetchLanguages();
                }}
            />

            {/* Activity Log Sidebar */}
            <ActivityLogSidebar
                open={activityLogCtl.open}
                onOpenChange={activityLogCtl.setOpen}
                modelClass={activityLogCtl.modelClass}
                modelId={activityLogCtl.modelId}
                title={activityLogCtl.title}
            />
            </SettingsLayout>
        </>
    );
}

Index.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Settings', href: route('settings.company.edit') },
            { title: 'Languages', href: '#' },
        ]}
        title="Languages"
    >
        {page}
    </AppLayout>
);

export default Index;