import { useState{{USE_EFFECT_IMPORT}} } from 'react';
import { Head, usePage, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useFlashMessages } from '@/hooks/useFlashMessages';
import { useDeleteHandler } from '@/hooks/useDeleteHandler';
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { DataTable } from "@/components/ui/data-table";
import { Dialog } from "@/components/ui/dialog";
import { ConfirmationDialog } from '@/components/ui/confirmation-dialog';
import { Plus, Edit as EditIcon, Trash2, Eye, {{ICON}} as {{ICON}}Icon, Download, FileImage } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { FilterButton } from '@/components/ui/filter-button';
import { Pagination } from "@/components/ui/pagination";
import { SearchInput } from "@/components/ui/search-input";
import { ListGridToggle } from '@/components/ui/list-grid-toggle';
import { PerPageSelector } from '@/components/ui/per-page-selector';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import Create from './Create';
import Edit{{NAME}} from './Edit';
{{VIEW_IMPORT}}
import NoRecordsFound from '@/components/no-records-found';
import { {{NAME}}, {{NAME_PLURAL}}IndexProps, {{NAME}}Filters, {{NAME}}ModalState } from './types';
import { formatDate, formatTime, formatDateTime, formatCurrency, getImagePath } from '@/utils/helpers';

export default function Index() {
    const { t } = useTranslation();
    const { {{NAME_PLURAL_LOWER}}, auth{{RELATIONSHIP_PAGE_DATA_DESTRUCTURE}} } = usePage<{{NAME_PLURAL}}IndexProps>().props;
    const urlParams = new URLSearchParams(window.location.search);
    
    const [filters, setFilters] = useState<{{NAME}}Filters>({
{{FILTER_STATE}}
    });

    const [perPage] = useState(urlParams.get('per_page') || '10');
    const [sortField, setSortField] = useState(urlParams.get('sort') || '');
    const [sortDirection, setSortDirection] = useState(urlParams.get('direction') || 'asc');
    const [viewMode, setViewMode] = useState<'list' | 'grid'>(urlParams.get('view') as 'list' | 'grid' || 'list');
    const [modalState, setModalState] = useState<{{NAME}}ModalState>({
        isOpen: false,
        mode: '',
        data: null
    });
{{VIEW_STATE}}
{{FILTER_DEPENDENT_DROPDOWN_STATE}}
    const [showFilters, setShowFilters] = useState(false);

{{FILTER_DEPENDENT_DROPDOWN_EFFECTS}}

    useFlashMessages();

    const { deleteState, openDeleteDialog, closeDeleteDialog, confirmDelete } = useDeleteHandler({
        routeName: '{{ROUTE_PREFIX}}.destroy',
        defaultMessage: t('Are you sure you want to delete this {{NAME_LOWER}}?')
    });

    const handleFilter = () => {
        router.get(route('{{ROUTE_PREFIX}}.index'), {...filters, per_page: perPage, sort: sortField, direction: sortDirection, view: viewMode}, {
            preserveState: true,
            replace: true
        });
    };

    const handleSort = (field: string) => {
        const direction = sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';
        setSortField(field);
        setSortDirection(direction);
        router.get(route('{{ROUTE_PREFIX}}.index'), {...filters, per_page: perPage, sort: field, direction, view: viewMode}, {
            preserveState: true,
            replace: true
        });
    };

    const clearFilters = () => {
        setFilters({
{{CLEAR_FILTER_STATE}}
        });
        router.get(route('{{ROUTE_PREFIX}}.index'), {per_page: perPage, view: viewMode});
    };

    const openModal = (mode: 'add' | 'edit', data: {{NAME}} | null = null) => {
        setModalState({ isOpen: true, mode, data });
    };

    const closeModal = () => {
        setModalState({ isOpen: false, mode: '', data: null });
    };

    const tableColumns = [
{{TABLE_COLUMNS}},
        ...({{ACTIONS_COLUMN_PERMISSION_CHECK}} ? [{
            key: 'actions',
            header: t('Actions'),
            render: (_: any, {{NAME_LOWER}}: {{NAME}}) => (
                <div className="flex gap-1">
                    <TooltipProvider>
{{VIEW_BUTTON_TABLE}}
                        {auth.user?.permissions?.includes('edit-{{NAME_KEBAB}}') && (
                            <Tooltip delayDuration={0}>
                                <TooltipTrigger asChild>
                                    <Button variant="ghost" size="sm" onClick={() => openModal('edit', {{NAME_LOWER}})} className="h-8 w-8 p-0 text-blue-600 hover:text-blue-700">
                                        <EditIcon className="h-4 w-4" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>{t('Edit')}</p>
                                </TooltipContent>
                            </Tooltip>
                        )}
                        {auth.user?.permissions?.includes('delete-{{NAME_KEBAB}}') && (
                            <Tooltip delayDuration={0}>
                                <TooltipTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => openDeleteDialog({{NAME_LOWER}}.id)}
                                        className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                                    >
                                        <Trash2 className="h-4 w-4" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>{t('Delete')}</p>
                                </TooltipContent>
                            </Tooltip>
                        )}
                    </TooltipProvider>
                </div>
            )
        }] : [])
    ];

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                {label: t('{{PACKAGE}}')},
                {label: t('{{NAME_PLURAL_DISPLAY}}')}
            ]}
            pageTitle={t('Manage {{NAME_PLURAL_DISPLAY}}')}
            pageActions={
                <TooltipProvider>
                    {auth.user?.permissions?.includes('create-{{NAME_KEBAB}}') && (
                        <Tooltip delayDuration={0}>
                            <TooltipTrigger asChild>
                                <Button size="sm" onClick={() => openModal('add')}>
                                    <Plus className="h-4 w-4" />
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{t('Create')}</p>
                            </TooltipContent>
                        </Tooltip>
                    )}
                </TooltipProvider>
            }
        >
            <Head title={t('{{NAME_PLURAL_DISPLAY}}')} />

            {/* Main Content Card */}
            <Card className="shadow-sm">
                {/* Search & Controls Header */}
                <CardContent className="p-6 border-b bg-gray-50/50">
                    <div className="flex items-center justify-between gap-4">
                        <div className="flex-1 max-w-md">
                            <SearchInput
                                value={filters.{{SEARCH_FIELD}}}
                                onChange={(value) => setFilters({...filters, {{SEARCH_FIELD}}: value})}
                                onSearch={handleFilter}
                                placeholder={t('Search {{NAME_PLURAL_DISPLAY}}...')}
                            />
                        </div>
                        <div className="flex items-center gap-3">
                            <ListGridToggle
                                currentView={viewMode}
                                routeName="{{ROUTE_PREFIX}}.index"
                                filters={{...filters, per_page: perPage}}
                            />
                            <PerPageSelector
                                routeName="{{ROUTE_PREFIX}}.index"
                                filters={{...filters, view: viewMode}}
                            />
                            {{HAS_FILTER_BUTTON_WITH_COUNTER}}
                        </div>
                    </div>
                </CardContent>

{{FILTER_SECTION}}

                {/* Table Content */}
                <CardContent className="p-0">
                    {viewMode === 'list' ? (
                        <div className="overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 max-h-[70vh] rounded-none w-full">
                            <div className="min-w-[800px]">
                            <DataTable
                                data={{{NAME_PLURAL_LOWER}}?.data || []}
                                columns={tableColumns}
                                onSort={handleSort}
                                sortKey={sortField}
                                sortDirection={sortDirection as 'asc' | 'desc'}
                                className="rounded-none"
                                emptyState={
                                    <NoRecordsFound
                                        icon={{{ICON}}Icon}
                                        title={t('No {{NAME_PLURAL_DISPLAY}} found')}
                                        description={t('Get started by creating your first {{NAME_DISPLAY}}.')}
                                        hasFilters={{{HAS_FILTERS_CHECK}}}
                                        onClearFilters={clearFilters}
                                        createPermission="create-{{NAME_KEBAB}}"
                                        onCreateClick={() => openModal('add')}
                                        createButtonText={t('Create {{NAME_DISPLAY}}')}
                                        className="h-auto"
                                    />
                                }
                            />
                            </div>
                        </div>
                    ) : (
                        <div className="overflow-auto max-h-[70vh] p-6">
                            {{{NAME_PLURAL_LOWER}}?.data?.length > 0 ? (
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                                    {{{NAME_PLURAL_LOWER}}?.data?.map(({{NAME_LOWER}}) => (
                                        <Card key={{{NAME_LOWER}}.id} className="p-6 hover:shadow-md transition-shadow">
{{GRID_VIEW_CONTENT}}
                                            <div className="flex justify-end gap-2 pt-4 border-t">
                                                <TooltipProvider>
{{VIEW_BUTTON_GRID}}
                                                    {auth.user?.permissions?.includes('edit-{{NAME_KEBAB}}') && (
                                                        <Tooltip delayDuration={300}>
                                                            <TooltipTrigger asChild>
                                                                <Button variant="ghost" size="sm" onClick={() => openModal('edit', {{NAME_LOWER}})} className="h-9 w-9 p-0 text-blue-600 hover:text-blue-700 hover:bg-blue-50">
                                                                    <EditIcon className="h-4 w-4" />
                                                                </Button>
                                                            </TooltipTrigger>
                                                            <TooltipContent>
                                                                <p>{t('Edit')}</p>
                                                            </TooltipContent>
                                                        </Tooltip>
                                                    )}
                                                    {auth.user?.permissions?.includes('delete-{{NAME_KEBAB}}') && (
                                                        <Tooltip delayDuration={300}>
                                                            <TooltipTrigger asChild>
                                                                <Button
                                                                    variant="ghost"
                                                                    size="sm"
                                                                    onClick={() => openDeleteDialog({{NAME_LOWER}}.id)}
                                                                    className="h-9 w-9 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
                                                                >
                                                                    <Trash2 className="h-4 w-4" />
                                                                </Button>
                                                            </TooltipTrigger>
                                                            <TooltipContent>
                                                                <p>{t('Delete')}</p>
                                                            </TooltipContent>
                                                        </Tooltip>
                                                    )}
                                                </TooltipProvider>
                                            </div>
                                        </Card>
                                    ))}
                                </div>
                            ) : (
                                <NoRecordsFound
                                    icon={{{ICON}}Icon}
                                    title={t('No {{NAME_PLURAL_DISPLAY}} found')}
                                    description={t('Get started by creating your first {{NAME_DISPLAY}}.')}
                                    hasFilters={{{HAS_FILTERS_CHECK}}}
                                    onClearFilters={clearFilters}
                                    createPermission="create-{{NAME_KEBAB}}"
                                    onCreateClick={() => openModal('add')}
                                    createButtonText={t('Create {{NAME_DISPLAY}}')}
                                />
                            )}
                        </div>
                    )}
                </CardContent>

                {/* Pagination Footer */}
                <CardContent className="px-4 py-2 border-t bg-gray-50/30">
                    <Pagination
                        data={{{NAME_PLURAL_LOWER}} || { data: [], links: [], meta: {} }}
                        routeName="{{ROUTE_PREFIX}}.index"
                        filters={{...filters, per_page: perPage, view: viewMode}}
                    />
                </CardContent>
            </Card>

            <Dialog open={modalState.isOpen} onOpenChange={closeModal}>
                {modalState.mode === 'add' && (
                    <Create onSuccess={closeModal} />
                )}
                {modalState.mode === 'edit' && modalState.data && (
                    <Edit{{NAME}}
                        {{NAME_LOWER}}={modalState.data}
                        onSuccess={closeModal}
                    />
                )}
            </Dialog>

{{VIEW_DIALOG}}

            <ConfirmationDialog
                open={deleteState.isOpen}
                onOpenChange={closeDeleteDialog}
                title={t('Delete {{NAME_DISPLAY}}')}
                message={deleteState.message}
                confirmText={t('Delete')}
                onConfirm={confirmDelete}
                variant="destructive"
            />
        </AuthenticatedLayout>
    );
}