import { useState } from "react";
import { Link as LinkIcon, ExternalLink, Plus, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface Props {
  label: string;
  prefix?: string; // ej "AF"
  links: string[];
  onChange: (next: string[]) => void;
  readOnly?: boolean;
  emptyText?: string;
}

export function LinkList({ label, prefix, links, onChange, readOnly, emptyText }: Props) {
  const [draft, setDraft] = useState("");

  const add = () => {
    const v = draft.trim();
    if (!v) return;
    onChange([...links, v]);
    setDraft("");
  };
  const update = (i: number, v: string) => onChange(links.map((x, idx) => (idx === i ? v : x)));
  const remove = (i: number) => onChange(links.filter((_, idx) => idx !== i));

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-foreground">
          {label}{" "}
          {prefix && <span className="text-xs text-muted-foreground font-normal">({prefix})</span>}
        </span>
        <span className="text-xs text-muted-foreground">{links.length}</span>
      </div>

      {links.length === 0 && (
        <p className="text-xs text-muted-foreground italic px-1">{emptyText ?? "Sin links aún"}</p>
      )}

      <div className="space-y-1.5">
        {links.map((l, i) => (
          <div key={i} className="group flex items-center gap-1.5">
            <div className="flex-shrink-0 w-7 h-7 rounded-md bg-accent flex items-center justify-center text-[10px] font-semibold text-accent-foreground">
              {prefix ?? "·"}
              {i + 1}
            </div>
            {readOnly ? (
              <a
                href={l}
                target="_blank"
                rel="noreferrer"
                className="flex-1 text-sm text-primary hover:underline truncate flex items-center gap-1.5 py-1.5 px-2 rounded-md hover:bg-accent/60 transition-colors"
              >
                <LinkIcon className="w-3.5 h-3.5 flex-shrink-0" />
                <span className="truncate">{l}</span>
                <ExternalLink className="w-3 h-3 flex-shrink-0 opacity-60" />
              </a>
            ) : (
              <>
                <Input
                  value={l}
                  onChange={(e) => update(i, e.target.value)}
                  placeholder="https://…"
                  className="h-9 text-sm"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="h-9 w-9 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                  onClick={() => remove(i)}
                >
                  <X className="w-4 h-4" />
                </Button>
              </>
            )}
          </div>
        ))}
      </div>

      {!readOnly && (
        <div className="flex gap-1.5 pt-1">
          <Input
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), add())}
            placeholder="Pegar link y Enter"
            className="h-9 text-sm"
          />
          <Button type="button" variant="outline" size="sm" onClick={add} className="h-9">
            <Plus className="w-4 h-4 mr-1" /> Añadir
          </Button>
        </div>
      )}
    </div>
  );
}
