import { router, usePage } from '@inertiajs/react';
import { FileText, Plus, Trash2, X } from 'lucide-react';
import { useState } from 'react';
import { EmptyState } from '@/components/shared/empty-state';
import { PageHeader } from '@/components/shared/page-header';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { brandLabel } from '@/lib/catalog';
import { destroy as cmsDestroy } from '@/routes/catalog/cms';

interface Page {
    id: number;
    brand_code: string;
    slug: string;
    name_de: string;
    active: boolean;
    decommission_at: string | null;
    blocks_count: number;
    is_linked: boolean;
}

export function CmsIndexView({ pages }: { pages: Page[] }) {
    const canEdit = usePage().props.auth.can.edit_catalog;
    const [showCreate, setShowCreate] = useState(false);
    const [brandCode, setBrandCode] = useState('');
    const [slug, setSlug] = useState('');
    const [nameDe, setNameDe] = useState('');

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <PageHeader
                title="Content Pages"
                subtitle="CMS — trilingual content for pricelists"
            />

            <div className="custom-scroll flex-1 overflow-y-auto p-4 md:p-6">
                <div className="rounded-xl border border-[rgba(30,25,50,0.06)] bg-white shadow-[0_2px_8px_rgba(30,25,50,0.04)]">
                    <div className="border-b border-gray-50 px-4 py-2">
                        {canEdit && !showCreate && (
                            <Button
                                size="sm"
                                variant="outline"
                                onClick={() => setShowCreate(true)}
                            >
                                <Plus size={14} />
                                New content page
                            </Button>
                        )}
                        {canEdit && showCreate && (
                            <form
                                className="flex flex-wrap items-end gap-2 py-2"
                                onSubmit={(event) => {
                                    event.preventDefault();
                                    router.post(
                                        '/cms/pages',
                                        {
                                            brand_code: brandCode || 'fiat',
                                            market_code: 'CH',
                                            slug,
                                            name_de: nameDe,
                                        },
                                        {
                                            preserveScroll: true,
                                            onSuccess: () =>
                                                setShowCreate(false),
                                        },
                                    );
                                }}
                            >
                                <Input
                                    value={brandCode}
                                    onChange={(e) =>
                                        setBrandCode(e.target.value)
                                    }
                                    required
                                    placeholder="Brand code"
                                    className="h-8 w-28 bg-white text-xs"
                                />
                                <Input
                                    value={slug}
                                    onChange={(e) => setSlug(e.target.value)}
                                    required
                                    placeholder="Slug"
                                    className="h-8 w-40 bg-white text-xs"
                                />
                                <Input
                                    value={nameDe}
                                    onChange={(e) => setNameDe(e.target.value)}
                                    required
                                    placeholder="Title DE *"
                                    className="h-8 w-64 bg-white text-xs"
                                />
                                <Button type="submit" size="sm">
                                    Create
                                </Button>
                                <Button
                                    type="button"
                                    size="sm"
                                    variant="ghost"
                                    onClick={() => setShowCreate(false)}
                                >
                                    <X size={14} />
                                </Button>
                            </form>
                        )}
                    </div>

                    <div className="divide-y divide-gray-50">
                        {pages.length === 0 && (
                            <EmptyState
                                title="No content pages yet"
                                description="Create the first CMS page for your pricelist."
                            />
                        )}
                        {pages.map((page) => (
                            <button
                                key={page.id}
                                type="button"
                                onClick={() =>
                                    router.visit(`/cms/pages/${page.id}`)
                                }
                                className="flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-astara-orange focus-visible:outline-none"
                            >
                                <span className="flex min-w-0 items-center gap-3">
                                    <FileText
                                        size={14}
                                        className="shrink-0 text-gray-400"
                                    />
                                    <span className="truncate font-mono text-[11px] text-gray-400">
                                        {page.slug}
                                    </span>
                                    <span className="truncate text-xs font-bold text-astara-purple">
                                        {page.name_de}
                                    </span>
                                    {!page.active && (
                                        <span className="rounded bg-red-50 px-1.5 py-0.5 text-[9px] font-bold text-red-600 uppercase">
                                            Inactive
                                        </span>
                                    )}
                                    {page.decommission_at && (
                                        <span className="text-[10px] text-gray-400">
                                            until {page.decommission_at}
                                        </span>
                                    )}
                                </span>
                                <span className="flex shrink-0 items-center gap-2">
                                    <span className="text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                        {brandLabel(page.brand_code)}
                                    </span>
                                    <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[9px] font-bold text-slate-500">
                                        {page.blocks_count} blocks
                                    </span>
                                    {canEdit && (
                                        <button
                                            type="button"
                                            aria-label={`Delete ${page.slug}`}
                                            onClick={(event) => {
                                                event.stopPropagation();
                                                router.delete(
                                                    `/cms/pages/${page.id}`,
                                                    { preserveScroll: true },
                                                );
                                            }}
                                            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-gray-300 hover:bg-red-50 hover:text-red-600"
                                        >
                                            <Trash2 size={13} />
                                        </button>
                                    )}
                                </span>
                            </button>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}