import { router, usePage } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { type ReactNode, useMemo, useState } from 'react';
import { Toaster } from 'sonner';
import { AppHeader } from '@/components/app-header';
import { AppShell } from '@/components/app-shell';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import { show as fichaShow } from '@/routes/ficha';
import type { BreadcrumbItem } from '@/types';
import { CodigoCatastral } from '../components/CodigoCatastral';
import { SectionFormBoundary } from '../components/section-form-boundary';
import {
    SECCIONES,
    type SeccionCodigo,
    seccionShowUrl,
} from '../sections';

type FichaResumen = {
    id: number;
    codigo_zona: number | string | null;
    codigo_manzano: number | string | null;
    codigo_lote: number | string | null;
    codigo_sublote: number | string | null;
    denominacion: string | null;
    categoria: string | null;
};

type SeccionCompleta = {
    codigo: string;
    label: string;
};

type PageProps = {
    ficha: FichaResumen;
    seccion: SeccionCodigo;
    data: Record<string, any>;
    secciones_completas: SeccionCompleta[];
};

export default function SectionLayout({ children }: { children: ReactNode }) {
    const page = usePage<PageProps>();
    const { ficha, seccion, data, secciones_completas } = page.props;
    const breadcrumbs = (page.props.breadcrumbs as BreadcrumbItem[]) ?? [];
    const [isDirty, setIsDirty] = useState(false);

    const completas = useMemo(
        () => new Set(secciones_completas.map((s) => s.codigo)),
        [secciones_completas],
    );
    const completadasCount = completas.size;
    const totalSecciones = SECCIONES.length;
    const progresoPct = Math.round((completadasCount / totalSecciones) * 100);

    const confirmarSalida = () =>
        !isDirty ||
        window.confirm(
            'Tienes cambios sin guardar. ¿Salir de la sección de todos modos?',
        );

    const navigate = (codigo: SeccionCodigo) => {
        if (codigo === seccion) {
            return;
        }
        if (!confirmarSalida()) {
            return;
        }
        router.visit(seccionShowUrl(ficha.id, codigo));
    };

    const irAFicha = () => {
        if (!confirmarSalida()) {
            return;
        }
        router.visit(fichaShow.url(ficha.id));
    };

    return (
        <AppShell variant="header">
            <AppHeader breadcrumbs={breadcrumbs} />

            <div className="flex min-h-0 flex-1 overflow-hidden">
                {/* Sidebar — lista de secciones */}
                <aside className="flex w-64 shrink-0 flex-col border-r bg-sidebar">
                    <div className="shrink-0 border-b px-3 py-3">
                        <div className="flex items-center justify-between">
                            <span className="text-xs font-semibold tracking-wider text-sidebar-foreground/60 uppercase">
                                Secciones
                            </span>
                            <span className="text-xs font-medium text-muted-foreground tabular-nums">
                                {completadasCount}/{totalSecciones}
                            </span>
                        </div>
                        <Progress value={progresoPct} className="mt-2 h-1" />
                    </div>
                    <nav className="flex-1 overflow-y-auto px-2 py-2">
                        {SECCIONES.map((item) => {
                            const isActive = item.codigo === seccion;
                            const completa = completas.has(item.codigo);
                            const numero = item.codigo.padStart(2, '0');
                            return (
                                <button
                                    key={item.codigo}
                                    type="button"
                                    onClick={() => navigate(item.codigo)}
                                    className={cn(
                                        'flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm transition-colors',
                                        isActive
                                            ? 'bg-sidebar-accent font-medium text-sidebar-accent-foreground'
                                            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground',
                                    )}
                                >
                                    <span
                                        className={cn(
                                            'flex size-5 shrink-0 items-center justify-center rounded-md font-mono text-[0.65rem] font-semibold transition-colors',
                                            completa
                                                ? 'bg-primary/15 text-primary'
                                                : isActive
                                                  ? 'text-sidebar-accent-foreground/50'
                                                  : 'text-sidebar-foreground/40',
                                        )}
                                    >
                                        {numero}
                                    </span>
                                    <span className="truncate">
                                        {item.label}
                                    </span>
                                </button>
                            );
                        })}
                    </nav>

                    <div className="shrink-0 border-t p-2">
                        <Button
                            variant="ghost"
                            className="w-full justify-start"
                            onClick={irAFicha}
                        >
                            <ArrowLeft />
                            Volver a la ficha
                        </Button>
                    </div>
                </aside>

                {/* Contenido — header + main + footer */}
                <div className="flex min-h-0 min-w-0 flex-1 flex-col">
                    <header className="flex h-14 shrink-0 items-center gap-3 border-b bg-background/95 px-4 backdrop-blur supports-backdrop-filter:bg-background/80">
                        <Separator
                            orientation="vertical"
                            className="mr-1 h-4!"
                        />
                        <div className="flex flex-1 items-center gap-6 overflow-hidden">
                            <HeaderField label="Código">
                                <CodigoCatastral
                                    zona={ficha.codigo_zona}
                                    manzano={ficha.codigo_manzano}
                                    lote={ficha.codigo_lote}
                                    sublote={ficha.codigo_sublote}
                                    size="sm"
                                />
                            </HeaderField>
                            {ficha.denominacion && (
                                <HeaderField label="Denominación">
                                    <span className="truncate text-sm font-medium">
                                        {ficha.denominacion}
                                    </span>
                                </HeaderField>
                            )}
                            {ficha.categoria && (
                                <HeaderField label="Categoría">
                                    <span className="truncate text-sm text-muted-foreground">
                                        {ficha.categoria}
                                    </span>
                                </HeaderField>
                            )}
                        </div>
                    </header>

                    <SectionFormBoundary
                        key={`${ficha.id}-${seccion}`}
                        fichaId={ficha.id}
                        seccion={seccion}
                        data={data}
                        onDirtyChange={setIsDirty}
                    >
                        {children}
                    </SectionFormBoundary>
                </div>
            </div>

            <Toaster position="top-right" richColors closeButton />
        </AppShell>
    );
}

function HeaderField({
    label,
    children,
}: {
    label: string;
    children: ReactNode;
}) {
    return (
        <div className="flex min-w-0 flex-col gap-0.5">
            <span className="text-[0.65rem] font-semibold tracking-wider text-muted-foreground uppercase">
                {label}
            </span>
            <div className="min-w-0">{children}</div>
        </div>
    );
}