import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import type {
    CrujiaConfigData,
    ElementoFilaData,
    EstadoConservacionElemento,
    SistemaConstructivo,
} from '@/generated/types';
import { buildPlantKeys } from './index';

type ElementoCatalogo = {
    id: number;
    nombre: string;
    categoria: string;
    sort_order: number;
};

type ElementosTableProps = {
    filas: ElementoFilaData[];
    crujias: CrujiaConfigData[];
    catalogo: ElementoCatalogo[];
    onFilaChange: (elementoId: number, patch: Partial<ElementoFilaData>) => void;
    onCrujiaToggle: (
        elementoId: number,
        codigo: string,
        planta: string,
        value: boolean,
    ) => void;
};

export function ElementosTable({
    filas,
    crujias,
    catalogo,
    onFilaChange,
    onCrujiaToggle,
}: ElementosTableProps) {
    const nombreById = new Map(catalogo.map((c) => [c.id, c.nombre]));

    return (
        <div className="overflow-x-auto rounded-lg border border-border">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead rowSpan={2} className="min-w-40">Elemento</TableHead>
                        <TableHead rowSpan={2} className="text-center">Sist. Const.</TableHead>
                        <TableHead rowSpan={2} className="min-w-32">Mat. Acabados</TableHead>
                        <TableHead rowSpan={2} className="text-center">Estado</TableHead>
                        {crujias.map((c) => (
                            <TableHead
                                key={c.codigo}
                                colSpan={buildPlantKeys(c.total_plantas).length}
                                className="text-center border-l border-border"
                            >
                                {c.codigo}
                            </TableHead>
                        ))}
                    </TableRow>
                    <TableRow>
                        {crujias.map((c) =>
                            buildPlantKeys(c.total_plantas).map((pk) => (
                                <TableHead
                                    key={`${c.codigo}-${pk}`}
                                    className="text-center border-l border-border w-10"
                                >
                                    {pk === 'pb' ? 'PB' : pk.toUpperCase()}
                                </TableHead>
                            )),
                        )}
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {filas.map((fila) => {
                        const nombre = nombreById.get(fila.elemento_id) ?? `#${fila.elemento_id}`;
                        return (
                            <TableRow key={fila.elemento_id}>
                                <TableCell className="font-medium text-sm">
                                    {nombre}
                                </TableCell>
                                <TableCell>
                                    <ToggleGroup
                                        type="single"
                                        value={fila.sist_const ?? undefined}
                                        onValueChange={(v) => {
                                            if (v) {
                                                onFilaChange(fila.elemento_id, {
                                                    sist_const: v as SistemaConstructivo,
                                                });
                                            }
                                        }}
                                        variant="outline"
                                        size="sm"
                                        className={fila.sist_const ? '' : 'ring-2 ring-destructive/40'}
                                    >
                                        <ToggleGroupItem value="tradicional" aria-label="Tradicional">
                                            T
                                        </ToggleGroupItem>
                                        <ToggleGroupItem value="industrial" aria-label="Industrial">
                                            I
                                        </ToggleGroupItem>
                                    </ToggleGroup>
                                </TableCell>
                                <TableCell>
                                    <Input
                                        value={fila.mat_acabados ?? ''}
                                        onChange={(e) =>
                                            onFilaChange(fila.elemento_id, {
                                                mat_acabados: e.target.value || null,
                                            })
                                        }
                                        placeholder="—"
                                        className="h-8"
                                    />
                                </TableCell>
                                <TableCell>
                                    <ToggleGroup
                                        type="single"
                                        value={fila.estado_conservacion ?? undefined}
                                        onValueChange={(v) => {
                                            if (v) {
                                                onFilaChange(fila.elemento_id, {
                                                    estado_conservacion:
                                                        v as EstadoConservacionElemento,
                                                });
                                            }
                                        }}
                                        variant="outline"
                                        size="sm"
                                        className={fila.estado_conservacion ? '' : 'ring-2 ring-destructive/40'}
                                    >
                                        <ToggleGroupItem value="B" aria-label="Bueno">B</ToggleGroupItem>
                                        <ToggleGroupItem value="R" aria-label="Regular">R</ToggleGroupItem>
                                        <ToggleGroupItem value="M" aria-label="Malo">M</ToggleGroupItem>
                                    </ToggleGroup>
                                </TableCell>
                                {crujias.map((c) =>
                                    buildPlantKeys(c.total_plantas).map((pk) => {
                                        const checked = fila.crujias[c.codigo]?.[pk] ?? false;
                                        return (
                                            <TableCell
                                                key={`${c.codigo}-${pk}`}
                                                className="text-center border-l border-border"
                                            >
                                                <div className="flex justify-center">
                                                    <Checkbox
                                                        checked={checked}
                                                        onCheckedChange={(v) =>
                                                            onCrujiaToggle(
                                                                fila.elemento_id,
                                                                c.codigo,
                                                                pk,
                                                                v === true,
                                                            )
                                                        }
                                                    />
                                                </div>
                                            </TableCell>
                                        );
                                    }),
                                )}
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </div>
    );
}