import { Input } from '@/components/ui/input';
import type { VanosAbiertosData } from './types';

interface VanosAbiertosProps {
    data: VanosAbiertosData;
    onChange: (data: VanosAbiertosData) => void;
}

const columnas = [
    { key: 'pb', label: 'PB' },
    { key: 'p1', label: '1P' },
    { key: 'p2', label: '2P' },
    { key: 'otros', label: 'Otros P' },
] as const;

const filas = [
    { key: 'puertas', label: 'Puertas' },
    { key: 'ventanas', label: 'Ventanas' },
] as const;

export function VanosAbiertos({ data, onChange }: VanosAbiertosProps) {
    const handleChange = (
        fila: 'puertas' | 'ventanas',
        columna: 'pb' | 'p1' | 'p2' | 'otros',
        value: string,
    ) => {
        const num = value === '' ? null : parseInt(value, 10);
        const next: VanosAbiertosData = {
            ...data,
            [fila]: {
                ...data[fila],
                [columna]: num,
            },
        };
        onChange(next);
    };

    return (
        <div className="flex flex-col gap-2">
            <p className="text-sm font-semibold text-foreground">
                N° de Vanos Abiertos
            </p>
            <div className="overflow-hidden rounded-lg border border-border">
                <table className="w-full text-sm">
                    <thead>
                        <tr className="bg-muted/50">
                            <th className="border border-border px-3 py-2 text-left font-medium">
                                &nbsp;
                            </th>
                            {columnas.map((col) => (
                                <th
                                    key={col.key}
                                    className="border border-border px-3 py-2 text-center font-medium"
                                >
                                    {col.label}
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {filas.map((fila) => (
                            <tr key={fila.key}>
                                <td className="border border-border px-3 py-2 font-medium">
                                    {fila.label}
                                </td>
                                {columnas.map((col) => {
                                    const val = data[fila.key][col.key];
                                    return (
                                        <td
                                            key={col.key}
                                            className="border border-border px-2 py-1"
                                        >
                                            <Input
                                                type="number"
                                                min={0}
                                                value={val ?? ''}
                                                onChange={(e) =>
                                                    handleChange(
                                                        fila.key,
                                                        col.key,
                                                        e.target.value,
                                                    )
                                                }
                                                className="h-8 w-16 text-center"
                                            />
                                        </td>
                                    );
                                })}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}