import { Head, router } from '@inertiajs/react';
import { Eye, Pencil, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

import DashboardLayout from '@/components/dashboard/DashboardLayout';
import { DashboardPageHeader } from '@/components/dashboard/DashboardPageHeader';
import ConfirmDialog from '@/components/dashboard/ConfirmDialog';
import DataTable, { Column, Paginator } from '@/components/dashboard/DataTable';
import FormDialog from '@/components/dashboard/FormDialog';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    TableActionMenu,
    TableActionMenuContent,
    TableActionMenuItem,
    TableActionMenuLabel,
    TableActionMenuSeparator,
    TableActionMenuTrigger,
} from '@/components/ui/table-action-menu';
import { useTranslation } from '@/contexts/LanguageContext';
import { useAppDate } from '@/lib/date';
import { formatNumber } from '@/lib/format';

import Form from './Form';
import Preview from './Preview';

interface Placement {
    id: number;
    name: string;
    slug: string;
    width: number;
    height: number;
}

interface AdRow {
    id: number;
    placement_id: number;
    name: string;
    ad_code: string;
    fallback_ad_code: string | null;
    priority: number;
    is_active: boolean;
    created_at: string;
    placement: Placement | null;
}

interface Props {
    rows: Paginator<AdRow>;
    filters: {
        search: string;
        placement_id: string | null;
        is_active: string | null;
    };
    placements: Placement[];
}

export default function AdsIndex({ rows, filters, placements }: Props) {
    const { t } = useTranslation();
    const { formatDateTime } = useAppDate();
    const [createOpen, setCreateOpen] = useState(false);
    const [editTarget, setEditTarget] = useState<AdRow | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<AdRow | null>(null);
    const [previewTarget, setPreviewTarget] = useState<AdRow | null>(null);

    function applyFilter(key: 'placement_id' | 'is_active', value: string) {
        router.get(
            '/dashboard/ads',
            { ...filters, [key]: value === 'all' ? undefined : value },
            { preserveState: false, preserveScroll: true },
        );
    }

    const columns: Column<AdRow>[] = [
        {
            key: 'name',
            label: t('Name'),
            cell: (row) => <span className="font-medium">{row.name}</span>,
        },
        {
            key: 'placement',
            label: t('Placement'),
            cell: (row) =>
                row.placement ? (
                    <div className="flex flex-col">
                        <span>{row.placement.name}</span>
                        <span className="font-mono text-xs text-muted-foreground">
                            {row.placement.width}×{row.placement.height}
                        </span>
                    </div>
                ) : (
                    <span className="text-muted-foreground">—</span>
                ),
        },
        {
            key: 'priority',
            label: t('Priority'),
            cell: (row) => <Badge variant="outline">{row.priority}</Badge>,
        },
        {
            key: 'is_active',
            label: t('Status'),
            cell: (row) => (
                <Badge variant={row.is_active ? 'default' : 'secondary'}>
                    {row.is_active ? t('Active') : t('Inactive')}
                </Badge>
            ),
        },
        {
            key: 'created_at',
            label: t('Created'),
            cell: (row) => (
                <span className="text-sm text-muted-foreground">
                    {formatDateTime(row.created_at)}
                </span>
            ),
        },
    ];

    function handleDelete() {
        if (!deleteTarget) return;
        const name = deleteTarget.name;
        router.delete(`/dashboard/ads/${deleteTarget.id}`, {
            preserveScroll: true,
            onSuccess: () => {
                toast.success(t(':name deleted', { name }));
                setDeleteTarget(null);
            },
            onError: (errors) => {
                toast.error((Object.values(errors)[0] as string) || t('Delete failed'));
                setDeleteTarget(null);
            },
        });
    }

    return (
        <DashboardLayout>
            <Head title={t('Ads')} />
            <DashboardPageHeader
                title={t('Ads')}
                subtitle={`${formatNumber(rows.total)} ${rows.total === 1 ? t('ad') : t('ads')} — ${t('HTML/script snippets served into placement slots. Toggle is_active to pause without deleting.')}`}
                action={<Button onClick={() => setCreateOpen(true)}>{t('New ad')}</Button>}
            />

            <DataTable
                rows={rows}
                columns={columns}
                searchPlaceholder={t('Search by name…')}
                initialSearch={filters.search}
                toolbar={
                    <>
                        <Select
                            value={filters.placement_id ?? 'all'}
                            onValueChange={(v) => applyFilter('placement_id', v)}
                        >
                            <SelectTrigger className="w-[200px]">
                                <SelectValue placeholder={t('All placements')} />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">{t('All placements')}</SelectItem>
                                {placements.map((p) => (
                                    <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <Select
                            value={filters.is_active ?? 'all'}
                            onValueChange={(v) => applyFilter('is_active', v)}
                        >
                            <SelectTrigger className="w-[130px]">
                                <SelectValue placeholder={t('Active?')} />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">{t('All')}</SelectItem>
                                <SelectItem value="1">{t('Active')}</SelectItem>
                                <SelectItem value="0">{t('Inactive')}</SelectItem>
                            </SelectContent>
                        </Select>
                    </>
                }
                rowActions={(row) => (
                    <div className="flex justify-end">
                        <TableActionMenu>
                            <TableActionMenuTrigger />
                            <TableActionMenuContent>
                                <TableActionMenuLabel>{t('Actions')}</TableActionMenuLabel>
                                <TableActionMenuItem onClick={() => setPreviewTarget(row)}>
                                    <Eye className="h-4 w-4" />
                                    {t('Preview')}
                                </TableActionMenuItem>
                                <TableActionMenuItem onClick={() => setEditTarget(row)}>
                                    <Pencil className="h-4 w-4" />
                                    {t('Edit')}
                                </TableActionMenuItem>
                                <TableActionMenuSeparator />
                                <TableActionMenuItem
                                    variant="destructive"
                                    onClick={() => setDeleteTarget(row)}
                                >
                                    <Trash2 className="h-4 w-4" />
                                    {t('Delete')}
                                </TableActionMenuItem>
                            </TableActionMenuContent>
                        </TableActionMenu>
                    </div>
                )}
            />

            <FormDialog open={createOpen} onOpenChange={setCreateOpen} title={t('New ad')} size="lg">
                <Form
                    mode="create"
                    placements={placements}
                    onSuccess={() => {
                        setCreateOpen(false);
                        toast.success(t('Ad created'));
                    }}
                />
            </FormDialog>

            <FormDialog
                open={editTarget !== null}
                onOpenChange={(open) => !open && setEditTarget(null)}
                title={t('Edit ad')}
                size="lg"
            >
                {editTarget && (
                    <Form
                        mode="update"
                        placements={placements}
                        initialData={editTarget}
                        onSuccess={() => {
                            setEditTarget(null);
                            toast.success(t('Ad updated'));
                        }}
                    />
                )}
            </FormDialog>

            <Preview
                open={previewTarget !== null}
                onOpenChange={(open) => !open && setPreviewTarget(null)}
                ad={previewTarget}
            />

            <ConfirmDialog
                open={deleteTarget !== null}
                onOpenChange={(open) => !open && setDeleteTarget(null)}
                title={t('Delete ":name"?', { name: deleteTarget?.name ?? '' })}
                description={t('This cannot be undone.')}
                confirmLabel={t('Delete')}
                onConfirm={handleDelete}
            />
        </DashboardLayout>
    );
}