import { useState } from "react";
import Icon from "./Icon";

/**
 * Liste zusätzlicher EAN-Codes mit Notiz ("Mehl bei Aldi").
 * onAdd({ code, note }) und onDelete(code) werden vom Aufrufer bereitgestellt.
 */
export default function BarcodeList({ barcodes = [], onAdd, onDelete, disabled = false, hint }) {
  const [code, setCode] = useState("");
  const [note, setNote] = useState("");
  const [busy, setBusy] = useState(false);

  async function add(e) {
    e.preventDefault();
    if (!code.trim()) return;
    setBusy(true);
    try {
      await onAdd({ code: code.trim(), note: note.trim() || null });
      setCode("");
      setNote("");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div>
      <ul className="simple-list">
        {barcodes.map((b) => (
          <li key={b.id ?? b.code}>
            <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
              <code className="strong">{b.code}</code>
              {b.note && <span className="muted small">{b.note}</span>}
            </span>
            {!disabled && (
              <button className="btn-icon danger" title="Code entfernen"
                onClick={() => onDelete(b.code)}>
                <Icon name="trash" size={16} />
              </button>
            )}
          </li>
        ))}
        {barcodes.length === 0 && <li className="muted small">Noch keine zusätzlichen Codes.</li>}
      </ul>

      {!disabled && (
        <form className="field-inline" onSubmit={add} style={{ marginTop: "var(--sp-3)" }}>
          <input placeholder="EAN scannen oder eingeben" value={code}
            onChange={(e) => setCode(e.target.value)} />
          <input placeholder="Notiz, z.B. Mehl bei Aldi" value={note}
            onChange={(e) => setNote(e.target.value)} />
          <button className="btn" disabled={busy || !code.trim()}>
            <Icon name="plus" size={16} />Hinzufügen
          </button>
        </form>
      )}
      {hint && <p className="muted small">{hint}</p>}
    </div>
  );
}