import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Pencil, Plus, Trash2 } from "lucide-react";
import { toast } from "sonner";

const formatCurrency = (value) =>
  value === null || value === undefined ? "Sin tope" : `$${Number(value).toLocaleString()}`;

const emptyTier = { from: 0, to: null, percentage: 0 };

/**
 * Tramos de comisión sobre la venta directa del líder (línea "Total
 * Directos" de NetworkCommissionFormula::tierPercentage). Reemplaza la
 * grilla de inputs sueltos por una tabla de lectura + edición por fila,
 * con validación de solapes y huecos entre tramos.
 */
export default function SalesTiersTable({ tiers, onChange }) {
  const [editingIndex, setEditingIndex] = useState(null); // number | 'new' | null
  const [draft, setDraft] = useState(emptyTier);

  const sorted = [...tiers].map((tier, index) => ({ ...tier, __index: index }));

  const openEdit = (index) => {
    setEditingIndex(index);
    setDraft(tiers[index]);
  };

  const openNew = () => {
    setEditingIndex("new");
    setDraft(emptyTier);
  };

  const close = () => setEditingIndex(null);

  const validate = (candidate, ignoreIndex) => {
    const from = Number(candidate.from ?? 0);
    const to = candidate.to === null || candidate.to === "" ? null : Number(candidate.to);

    if (to !== null && to <= from) {
      toast.error('"Hasta" debe ser mayor que "Desde"');
      return false;
    }

    const overlaps = tiers.some((tier, index) => {
      if (index === ignoreIndex) return false;
      const otherFrom = Number(tier.from ?? 0);
      const otherTo = tier.to === null || tier.to === undefined ? Infinity : Number(tier.to);
      const candidateTo = to === null ? Infinity : to;
      return from <= otherTo && candidateTo >= otherFrom;
    });

    if (overlaps) {
      toast.error("Este tramo se solapa con otro ya definido");
      return false;
    }

    return true;
  };

  const saveEdit = () => {
    const ignoreIndex = editingIndex === "new" ? -1 : editingIndex;
    if (!validate(draft, ignoreIndex)) {
      return;
    }

    const normalized = {
      from: Number(draft.from ?? 0),
      to: draft.to === null || draft.to === "" ? null : Number(draft.to),
      percentage: Number(draft.percentage ?? 0),
    };

    if (editingIndex === "new") {
      onChange([...tiers, normalized].sort((a, b) => a.from - b.from));
    } else {
      const next = [...tiers];
      next[editingIndex] = normalized;
      onChange(next.sort((a, b) => a.from - b.from));
    }
    close();
  };

  const removeTier = (index) => {
    const next = tiers.filter((_, i) => i !== index);
    onChange(next.length ? next : [emptyTier]);
  };

  return (
    <div className="border rounded-lg p-4 space-y-3">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold text-sm">Tramos de comisión por venta directa</h3>
          <p className="text-xs text-gray-500">
            % que un líder recibe sobre el volumen neto vendido por sus referidas directas,
            según el tramo en que caiga ese volumen.
          </p>
        </div>
        <Button type="button" variant="outline" size="sm" onClick={openNew}>
          <Plus className="w-4 h-4 mr-1" />
          Agregar tramo
        </Button>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Desde</TableHead>
            <TableHead>Hasta</TableHead>
            <TableHead>%</TableHead>
            <TableHead className="text-right">Acciones</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {sorted
            .sort((a, b) => a.from - b.from)
            .map((tier) => (
              <TableRow key={tier.__index}>
                <TableCell>{formatCurrency(tier.from)}</TableCell>
                <TableCell>{formatCurrency(tier.to)}</TableCell>
                <TableCell className="font-medium">{tier.percentage}%</TableCell>
                <TableCell className="text-right space-x-1">
                  <Button type="button" variant="ghost" size="sm" onClick={() => openEdit(tier.__index)}>
                    <Pencil className="w-4 h-4" />
                  </Button>
                  <Button type="button" variant="ghost" size="sm" onClick={() => removeTier(tier.__index)}>
                    <Trash2 className="w-4 h-4 text-red-500" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
        </TableBody>
      </Table>

      <Dialog open={editingIndex !== null} onOpenChange={(open) => !open && close()}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingIndex === "new" ? "Agregar tramo" : "Editar tramo"}</DialogTitle>
          </DialogHeader>

          <div className="grid grid-cols-3 gap-3">
            <div>
              <Label>Desde</Label>
              <Input
                type="number"
                min="0"
                value={draft.from ?? 0}
                onChange={(e) => setDraft((d) => ({ ...d, from: Number(e.target.value || 0) }))}
              />
            </div>
            <div>
              <Label>Hasta</Label>
              <Input
                type="number"
                min="0"
                placeholder="Sin tope"
                value={draft.to ?? ""}
                onChange={(e) =>
                  setDraft((d) => ({ ...d, to: e.target.value === "" ? null : Number(e.target.value) }))
                }
              />
            </div>
            <div>
              <Label>%</Label>
              <Input
                type="number"
                min="0"
                max="100"
                step="0.01"
                value={draft.percentage ?? 0}
                onChange={(e) =>
                  setDraft((d) => ({ ...d, percentage: Number(e.target.value || 0) }))
                }
              />
            </div>
          </div>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={close}>
              Cancelar
            </Button>
            <Button type="button" onClick={saveEdit}>
              Guardar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}