import { Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import type { HitoColindanteData } from '@/generated/types';

interface HitosTableProps {
    value: HitoColindanteData[];
    onChange: (value: HitoColindanteData[]) => void;
}

const EMPTY_HITO: HitoColindanteData = {
    categoria: null,
    inmueble: null,
};

export function HitosTable({ value, onChange }: HitosTableProps) {
    const rows = value.length > 0 ? value : [{ ...EMPTY_HITO }];

    const updateRow = (index: number, patch: Partial<HitoColindanteData>) => {
        onChange(
            rows.map((row, rowIndex) =>
                rowIndex === index ? { ...row, ...patch } : row,
            ),
        );
    };

    const removeRow = (index: number) => {
        const next = rows.filter((_, rowIndex) => rowIndex !== index);
        onChange(next.length > 0 ? next : []);
    };

    return (
        <div className="flex flex-col gap-3">
            <div className="overflow-x-auto rounded-lg border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Categoría</TableHead>
                            <TableHead>Inmueble</TableHead>
                            <TableHead className="w-12" />
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {rows.map((row, index) => (
                            <TableRow key={index}>
                                <TableCell>
                                    <Input
                                        value={row.categoria ?? ''}
                                        onChange={(e) =>
                                            updateRow(index, {
                                                categoria:
                                                    e.target.value || null,
                                            })
                                        }
                                        placeholder="Ej: A, B, C"
                                    />
                                </TableCell>
                                <TableCell>
                                    <Input
                                        value={row.inmueble ?? ''}
                                        onChange={(e) =>
                                            updateRow(index, {
                                                inmueble:
                                                    e.target.value || null,
                                            })
                                        }
                                        placeholder="Ej: Iglesia San Lorenzo"
                                    />
                                </TableCell>
                                <TableCell>
                                    <Button
                                        type="button"
                                        variant="ghost"
                                        size="icon"
                                        onClick={() => removeRow(index)}
                                        aria-label="Eliminar hito"
                                    >
                                        <Trash2 data-icon="inline-start" />
                                    </Button>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
            <Button
                type="button"
                variant="outline"
                size="sm"
                className="w-fit"
                onClick={() => onChange([...rows, { ...EMPTY_HITO }])}
            >
                <Plus data-icon="inline-start" />
                Añadir hito
            </Button>
        </div>
    );
}