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

interface FrentesTableProps {
    value: FrenteMedidaData[];
    onChange: (value: FrenteMedidaData[]) => void;
}

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

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

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

    return (
        <div className="overflow-x-auto rounded-lg border">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Frente</TableHead>
                        <TableHead className="w-48">Medida (m)</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {value.map((row, index) => (
                        <TableRow key={index}>
                            <TableCell>
                                <Input
                                    type="number"
                                    min={1}
                                    value={row.frente ?? index + 1}
                                    onChange={(e) =>
                                        updateRow(index, {
                                            frente: toNumber(e.target.value),
                                        })
                                    }
                                    aria-label={`Frente ${index + 1}`}
                                />
                            </TableCell>
                            <TableCell>
                                <Input
                                    type="number"
                                    step="0.01"
                                    value={row.medida_m ?? ''}
                                    onChange={(e) =>
                                        updateRow(index, {
                                            medida_m: toNumber(e.target.value),
                                        })
                                    }
                                    placeholder="Medida"
                                    aria-label={`Medida del frente ${index + 1}`}
                                />
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
}