import { Head, Link, router, setLayoutProps } from '@inertiajs/react';
import { ArrowRight, Plus, Search, X } from 'lucide-react';
import { useState } from 'react';
import AppHeaderLayout from '@/layouts/app/app-header-layout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { index as fichasRegistroIndex } from '@/routes/fichas-registro';
import { index as fichaIndex, show as fichaShow } from '@/routes/ficha';
import { formatCadastralBlock, sanitizeCadastralBlock } from '@/lib/cadastral-code';
import { cn, formatTimestamp } from '@/lib/utils';
import { CodigoCatastral } from './components/CodigoCatastral';
import { EstadoBadge } from './components/estado-badge';
import { codigoDigits } from './lib/codigoInventario';

type EstadoOption = {
    value: string;
    label: string;
};

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

type PaginationMeta = {
    data: FichaListItem[];
    current_page: number;
    last_page: number;
    total: number;
    from: number | null;
    to: number | null;
};

type Filters = {
    mine?: string;
    estado?: string;
    codigo_zona?: string;
    codigo_manzano?: string;
    codigo_lote?: string;
    codigo_sublote?: string;
};

type Props = {
    fichas: PaginationMeta;
    estados: EstadoOption[];
    filters: Filters;
};

export default function FichaInventarioIndex({ fichas, estados, filters }: Props) {
    setLayoutProps({
        breadcrumbs: [
            { title: 'Inicio', href: '/' },
            { title: 'Panel Central', href: '/dashboard' },
            {
                title: 'Fichas de Inventario',
                href: fichaIndex.url(),
                is_current_page: true,
            },
        ],
    });

    const [scope, setScope] = useState(filters.mine ? 'mine' : 'all');
    const [estado, setEstado] = useState(filters.estado ?? 'all');
    const [codigoZona, setCodigoZona] = useState(
        formatCadastralBlock(filters.codigo_zona, codigoDigits.zona),
    );
    const [codigoManzano, setCodigoManzano] = useState(
        formatCadastralBlock(filters.codigo_manzano, codigoDigits.manzano),
    );
    const [codigoLote, setCodigoLote] = useState(
        formatCadastralBlock(filters.codigo_lote, codigoDigits.lote),
    );
    const [codigoSublote, setCodigoSublote] = useState(
        formatCadastralBlock(filters.codigo_sublote, codigoDigits.sublote),
    );

    const visit = (page?: number) => {
        const activeFilter = Object.fromEntries(
            Object.entries({
                mine: scope === 'mine' ? 1 : undefined,
                estado: estado !== 'all' ? estado : undefined,
                codigo_zona: sanitizeCadastralBlock(codigoZona, codigoDigits.zona) || undefined,
                codigo_manzano: sanitizeCadastralBlock(codigoManzano, codigoDigits.manzano) || undefined,
                codigo_lote: sanitizeCadastralBlock(codigoLote, codigoDigits.lote) || undefined,
                codigo_sublote: sanitizeCadastralBlock(codigoSublote, codigoDigits.sublote) || undefined,
            }).filter(([, value]) => value !== undefined),
        );

        router.get(
            fichaIndex.url(),
            { filter: activeFilter, page },
            { preserveState: true, preserveScroll: true, replace: true },
        );
    };

    const handleClear = () => {
        setScope('all');
        setEstado('all');
        setCodigoZona('');
        setCodigoManzano('');
        setCodigoLote('');
        setCodigoSublote('');
        router.get(
            fichaIndex.url(),
            {},
            { preserveState: true, preserveScroll: true, replace: true },
        );
    };

    return (
        <>
            <Head title="Fichas de Inventario" />

            <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-6 px-4 py-6 md:px-6">
                <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                    <h1 className="text-3xl font-semibold tracking-tight">
                        Fichas de inventario
                    </h1>
                    <Button asChild>
                        <Link href={fichasRegistroIndex().url}>
                            <Plus data-icon="inline-start" />
                            Nueva ficha
                        </Link>
                    </Button>
                </div>

                <div className="rounded-3xl border bg-card p-5 shadow-sm">
                    <div className="flex flex-wrap items-end gap-4">
                        <FilterSelect
                            label="Alcance"
                            value={scope}
                            onValueChange={setScope}
                            options={[
                                { value: 'all', label: 'Todas las fichas' },
                                { value: 'mine', label: 'Mis fichas' },
                            ]}
                        />
                        <FilterSelect
                            label="Estado"
                            value={estado}
                            onValueChange={setEstado}
                            options={[{ value: 'all', label: 'Todos' }, ...estados]}
                        />

                        <div className="grid gap-2">
                            <label className="text-xs font-medium text-muted-foreground">
                                Código catastral
                            </label>
                            <div className="flex items-center gap-1.5">
                                <CodigoInput
                                    className="w-14"
                                    value={codigoZona}
                                    onChange={setCodigoZona}
                                    digits={codigoDigits.zona}
                                    placeholder="00"
                                    onEnter={() => visit()}
                                />
                                <Sep />
                                <CodigoInput
                                    className="w-20"
                                    value={codigoManzano}
                                    onChange={setCodigoManzano}
                                    digits={codigoDigits.manzano}
                                    placeholder="0000"
                                    onEnter={() => visit()}
                                />
                                <Sep />
                                <CodigoInput
                                    className="w-[4.5rem]"
                                    value={codigoLote}
                                    onChange={setCodigoLote}
                                    digits={codigoDigits.lote}
                                    placeholder="000"
                                    onEnter={() => visit()}
                                />
                                <Sep />
                                <CodigoInput
                                    className="w-14"
                                    value={codigoSublote}
                                    onChange={setCodigoSublote}
                                    digits={codigoDigits.sublote}
                                    placeholder="00"
                                    onEnter={() => visit()}
                                />
                            </div>
                        </div>

                        <div className="flex gap-2">
                            <Button type="button" onClick={() => visit()}>
                                <Search data-icon="inline-start" />
                                Buscar
                            </Button>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={handleClear}
                            >
                                <X data-icon="inline-start" />
                                Limpiar
                            </Button>
                        </div>
                    </div>
                </div>

                <div className="overflow-hidden rounded-3xl border bg-card shadow-sm">
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Código inventario</TableHead>
                                <TableHead>Bien</TableHead>
                                <TableHead>Estado</TableHead>
                                <TableHead>Actualizado</TableHead>
                                <TableHead className="text-right">Acciones</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {fichas.data.length > 0 ? (
                                fichas.data.map((ficha) => (
                                    <TableRow key={ficha.id}>
                                        <TableCell>
                                            <CodigoCatastral
                                                zona={ficha.codigo_zona}
                                                manzano={ficha.codigo_manzano}
                                                lote={ficha.codigo_lote}
                                                sublote={ficha.codigo_sublote}
                                                size="sm"
                                            />
                                        </TableCell>
                                        <TableCell>
                                            <div className="flex flex-col gap-1">
                                                <span className="font-medium text-foreground">
                                                    {ficha.denominacion ??
                                                        'Sin denominación'}
                                                </span>
                                                <span className="text-xs text-muted-foreground">
                                                    {ficha.categoria ?? 'Sin categoría'}
                                                </span>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <EstadoBadge estado={ficha.estado} />
                                        </TableCell>
                                        <TableCell className="text-sm text-muted-foreground">
                                            {formatTimestamp(ficha.updated_at)}
                                        </TableCell>
                                        <TableCell className="text-right">
                                            <Button asChild variant="ghost" size="sm">
                                                <Link href={fichaShow.url(ficha.id)}>
                                                    Continuar
                                                    <ArrowRight data-icon="inline-end" />
                                                </Link>
                                            </Button>
                                        </TableCell>
                                    </TableRow>
                                ))
                            ) : (
                                <TableRow>
                                    <TableCell
                                        colSpan={5}
                                        className="py-12 text-center text-sm text-muted-foreground"
                                    >
                                        No se encontraron fichas de inventario con
                                        esos filtros.
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>

                {fichas.last_page > 1 ? (
                    <div className="flex items-center justify-between text-sm text-muted-foreground">
                        <span>
                            Mostrando {fichas.from ?? 0}-{fichas.to ?? 0} de{' '}
                            {fichas.total}
                        </span>
                        <div className="flex gap-2">
                            <Button
                                variant="outline"
                                size="sm"
                                disabled={fichas.current_page <= 1}
                                onClick={() => visit(fichas.current_page - 1)}
                            >
                                Anterior
                            </Button>
                            <Button
                                variant="outline"
                                size="sm"
                                disabled={fichas.current_page >= fichas.last_page}
                                onClick={() => visit(fichas.current_page + 1)}
                            >
                                Siguiente
                            </Button>
                        </div>
                    </div>
                ) : null}
            </div>
        </>
    );
}

FichaInventarioIndex.layout = AppHeaderLayout;

function FilterSelect({
    label,
    value,
    onValueChange,
    options,
}: {
    label: string;
    value: string;
    onValueChange: (value: string) => void;
    options: { value: string; label: string }[];
}) {
    return (
        <div className="grid min-w-[150px] gap-2">
            <label className="text-xs font-medium text-muted-foreground">
                {label}
            </label>
            <Select value={value} onValueChange={onValueChange}>
                <SelectTrigger>
                    <SelectValue />
                </SelectTrigger>
                <SelectContent>
                    <SelectGroup>
                        {options.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                                {option.label}
                            </SelectItem>
                        ))}
                    </SelectGroup>
                </SelectContent>
            </Select>
        </div>
    );
}

function CodigoInput({
    className,
    value,
    onChange,
    digits,
    placeholder,
    onEnter,
}: {
    className: string;
    value: string;
    onChange: (value: string) => void;
    digits: number;
    placeholder: string;
    onEnter: () => void;
}) {
    return (
        <Input
            value={value}
            onChange={(e) => onChange(sanitizeCadastralBlock(e.target.value, digits))}
            placeholder={placeholder}
            className={cn('text-center font-mono', className)}
            maxLength={digits}
            inputMode="numeric"
            onKeyDown={(e) => {
                if (e.key === 'Enter') {
                    onEnter();
                }
            }}
        />
    );
}

function Sep() {
    return <span className="text-lg font-semibold text-muted-foreground">-</span>;
}