import { Input } from '@/components/ui/input';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import type { AreaPorNivelData } from '@/generated/types';

interface AreasNivelTableProps {
    value: AreaPorNivelData[];
    onChange: (value: AreaPorNivelData[]) => void;
}

function toNumber(value: string): number | null {
    return value === '' ? null : Number(value);
}

export function AreasNivelTable({ value, onChange }: AreasNivelTableProps) {
    const updateRow = (index: number, patch: Partial<AreaPorNivelData>) => {
        onChange(
            value.map((row, rowIndex) =>
                rowIndex === index ? { ...row, ...patch } : row,
            ),
        );
    };

    if (value.length === 0) {
        return (
            <p className="text-sm text-muted-foreground">
                Sin niveles definidos
            </p>
        );
    }

    return (
        <div className="overflow-x-auto rounded-lg border">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Nivel</TableHead>
                        <TableHead className="w-48">Área (m²)</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {value.map((row, index) => (
                        <TableRow key={index}>
                            <TableCell>
                                <Input
                                    value={row.nivel ?? ''}
                                    onChange={(e) =>
                                        updateRow(index, {
                                            nivel: e.target.value || null,
                                        })
                                    }
                                    placeholder="PB, PA, P2..."
                                    aria-label={`Nivel ${index + 1}`}
                                />
                            </TableCell>
                            <TableCell>
                                <Input
                                    type="number"
                                    step="0.01"
                                    value={row.area_m2 ?? ''}
                                    onChange={(e) =>
                                        updateRow(index, {
                                            area_m2: toNumber(e.target.value),
                                        })
                                    }
                                    placeholder="Área"
                                    aria-label={`Área del nivel ${index + 1}`}
                                />
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
}