import { useState } from "react";

export function ChecklistModule({ toolboxId, moduleId, context, editing }) {
  const data = context.normalizeChecklistData(context.getModuleData(toolboxId, moduleId, { items: [] }));
  const [label, setLabel] = useState("");
  const [qty, setQty] = useState(1);

  function save(items) {
    context.setModuleData(toolboxId, moduleId, { items });
  }

  function addItem(event) {
    event.preventDefault();
    const cleanLabel = label.trim();
    if (!cleanLabel) return;
    save([...data.items, { id: context.uid("item"), label: cleanLabel, qtyTarget: Math.max(1, Number(qty) || 1), qtyCurrent: 0 }]);
    setLabel("");
    setQty(1);
  }

  return (
    <>
      {editing && (
        <form className="inline-form checklist-add-form module-add-panel" onSubmit={addItem}>
          <input name="label" placeholder="Nouvel item" value={label} onChange={(event) => setLabel(event.target.value)} />
          <input className="checklist-qty-input" name="qty" type="number" min="1" value={qty} onChange={(event) => setQty(event.target.value)} aria-label="Quantité cible" />
          <button className="primary">Ajouter</button>
        </form>
      )}
      <ul className="checklist">
        {data.items.map((item) => (
          <ChecklistItem key={item.id} item={item} toolboxId={toolboxId} moduleId={moduleId} context={context} items={data.items} save={save} />
        ))}
      </ul>
    </>
  );
}

function ChecklistItem({ item, context, items, save }) {
  const done = context.clampQty(item.qtyCurrent, item.qtyTarget) >= item.qtyTarget;

  function updateItem(updater) {
    save(items.map((entry) => entry.id === item.id ? updater(entry) : entry));
  }

  return (
    <li className={`checklist-item ${done ? "is-complete" : ""}`}>
      <div className="checklist-item-main">
        {item.qtyTarget === 1 ? (
          <input
            type="checkbox"
            checked={done}
            onChange={(event) => updateItem((entry) => ({ ...entry, qtyTarget: 1, qtyCurrent: event.target.checked ? 1 : 0 }))}
            aria-label={`Terminer ${item.label}`}
          />
        ) : (
          <div className="checklist-qty-controls" aria-label={`Quantité ${item.label}`}>
            <button type="button" onClick={() => updateItem((entry) => ({ ...entry, qtyCurrent: context.clampQty(entry.qtyCurrent - 1, entry.qtyTarget) }))} aria-label="Retirer une quantité">-</button>
            <small>{context.clampQty(item.qtyCurrent, item.qtyTarget)}/{item.qtyTarget}</small>
            <button type="button" onClick={() => updateItem((entry) => ({ ...entry, qtyCurrent: context.clampQty(entry.qtyCurrent + 1, entry.qtyTarget) }))} aria-label="Ajouter une quantité">+</button>
          </div>
        )}
        <span>{item.label}</span>
      </div>
      <button onClick={() => save(items.filter((entry) => entry.id !== item.id))} aria-label={`Supprimer ${item.label}`}>×</button>
    </li>
  );
}