// ADM-PROC-25 · Tags — manage  (Addendum Update A)
// Admin Web · Procurement Manager · P1 · 1440×900
// Clean up the tag vocabulary: rename, merge duplicates, delete unused.
// Registered as window.Pages.tagsManage.

const F25 = window.FM;
const Ic25 = window.Icons;
const D25 = window.AMDATE;

// Levenshtein ≤ 2 near-duplicate suggestion (system-suggested merges).
const lev = (a, b) => {
  const m = a.length, n = b.length; const d = Array.from({ length: m + 1 }, (_, i) => [i, ...Array(n).fill(0)]);
  for (let j = 0; j <= n; j++) d[0][j] = j;
  for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++)
    d[i][j] = Math.min(d[i-1][j] + 1, d[i][j-1] + 1, d[i-1][j-1] + (a[i-1] === b[j-1] ? 0 : 1));
  return d[m][n];
};

const TagsManage = ({ tweaks }) => {
  const toast = useToast();
  const go = window.makeGo(toast);
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState({ key: "usage", dir: "desc" });
  const [renameOpen, setRenameOpen] = useState(null);
  const [mergeOpen, setMergeOpen] = useState(null);
  const [menu, setMenu] = useState(null);

  const tags = window.sortRows(
    F25.TAGS.filter(t => t.name.toLowerCase().includes(search.toLowerCase())),
    sort, ["created"]);

  // Suggest merges for near-duplicate names.
  const suggestion = (t) => {
    const near = F25.TAGS.find(o => o.id !== t.id && lev(o.name, t.name) <= 2 && Math.abs(o.name.length - t.name.length) <= 2);
    return near || null;
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1 className="page-title">Tags</h1><p className="page-sub">Ad-hoc labels used to filter and slice the roster. Keep the vocabulary clean — merge duplicates, delete unused.</p></div>
        <div className="page-actions">
          <Button variant="ghost" icon={Ic25.Layers} onClick={() => go("ADM-PROC-24.html")}>Manage groups</Button>
          <Button variant="outline" icon={Ic25.Plus} onClick={() => toast({ title: "New tag", desc: "Add a label to the vocabulary." })}>New tag</Button>
        </div>
      </div>

      <div className="fm-toolbar" style={{ display: "flex", gap: 10, marginBottom: 14 }}>
        <div className="proc-search" style={{ maxWidth: 360 }}><Ic25.Search size={15}/><input className="input" placeholder="Search tags…" value={search} onChange={(e) => setSearch(e.target.value)}/></div>
      </div>

      <Card><div className="card-body flush"><div className="tbl-wrap"><table className="tbl">
        <thead><tr>
          <SortableTh label="Tag" col="name" sort={sort} setSort={setSort}/>
          <SortableTh label="Usage" col="usage" sort={sort} setSort={setSort} num/>
          <SortableTh label="Created" col="created" sort={sort} setSort={setSort}/>
          <th>Created by</th><th className="actions"></th>
        </tr></thead>
        <tbody>
          {tags.map(t => {
            const unused = t.usage === 0;
            const sug = suggestion(t);
            return (
              <tr key={t.id} className="proc-row" style={{ opacity: unused ? 0.62 : 1 }}>
                <td>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <span className="fm-chip tag" style={{ height: 24, fontSize: 12 }}><Ic25.Tag size={11}/>{t.name}</span>
                    {sug && <span className="muted" style={{ fontSize: 11.5, display: "inline-flex", alignItems: "center", gap: 4 }}><Ic25.Info size={12}/>similar to "{sug.name}" — merge?</span>}
                  </span>
                </td>
                <td className="num">{unused ? <span className="muted">0</span> : t.usage}</td>
                <td className="mono" style={{ fontSize: 12 }}>{D25(t.created)}</td>
                <td className="muted" style={{ fontSize: 12.5 }}>{t.by}</td>
                <td className="actions">
                  <div className="proc-menu-wrap" style={{ display: "inline-block" }}>
                    <IconButton size="sm" variant="ghost" icon={Ic25.More} onClick={() => setMenu(menu === t.id ? null : t.id)}/>
                    {menu === t.id && (<>
                      <div className="proc-menu-scrim" onClick={() => setMenu(null)}/>
                      <div className="proc-menu right">
                        <button className="proc-menu-item" onClick={() => { setMenu(null); setRenameOpen(t); }}><Ic25.Edit size={14}/>Rename</button>
                        <button className="proc-menu-item" onClick={() => { setMenu(null); setMergeOpen(t); }}><Ic25.Handshake size={14}/>Merge into…</button>
                        <div className="proc-menu-sep"/>
                        <button className="proc-menu-item danger" onClick={() => { setMenu(null); toast({ title: "Tag deleted", desc: `"${t.name}" removed from ${t.usage} farmer(s)` }); }}><Ic25.Trash size={14}/>Delete</button>
                      </div>
                    </>)}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table></div></div></Card>

      <Modal open={!!renameOpen} onClose={() => setRenameOpen(null)} title="Rename tag" sub="Renaming propagates to every farmer that has this tag."
        footer={<><Button variant="ghost" onClick={() => setRenameOpen(null)}>Cancel</Button><div style={{ flex: 1 }}/><Button variant="primary" onClick={() => { toast({ title: "Tag renamed" }); setRenameOpen(null); }}>Rename</Button></>}>
        <label className="fm-field"><span>New name</span><input className="input" defaultValue={renameOpen?.name}/></label>
      </Modal>

      <Modal open={!!mergeOpen} onClose={() => setMergeOpen(null)} title="Merge tag" sub={`"${mergeOpen?.name}" will be deleted and all its farmers get the target tag.`}
        footer={<><Button variant="ghost" onClick={() => setMergeOpen(null)}>Cancel</Button><div style={{ flex: 1 }}/><Button variant="primary" icon={Ic25.Handshake} onClick={() => { toast({ title: "Tags merged" }); setMergeOpen(null); }}>Merge</Button></>}>
        <label className="fm-field"><span>Merge into</span>
          <select className="input">{F25.TAGS.filter(t => t.id !== mergeOpen?.id).map(t => <option key={t.id}>{t.name}</option>)}</select></label>
      </Modal>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { tagsManage: TagsManage });