// data.jsx — Tabs, Accordion, Table, Pagination, Breadcrumb
const { useState: useStateD, useRef: useRefD, useEffect: useEffectD } = React;

/* ---------- Tabs ---------- */
function Tabs({ tabs, value, onChange, variant }) {
  const [internal, setInternal] = useStateD(tabs[0] && tabs[0].value);
  const active = value !== undefined ? value : internal;
  const set = (v) => { onChange ? onChange(v) : setInternal(v); };
  return (
    <div>
      <div className={"tabs-list" + (variant === "underline" ? " underline" : "")} role="tablist">
        {tabs.map((t) => (
          <button key={t.value} className="tab" data-active={t.value === active} onClick={() => set(t.value)} role="tab">{t.label}</button>
        ))}
      </div>
      <div className="tab-panel">{(tabs.find((t) => t.value === active) || {}).content}</div>
    </div>
  );
}

/* ---------- Accordion ---------- */
function Accordion({ items, multiple }) {
  const [open, setOpen] = useStateD(items.length ? [items[0].value] : []);
  const toggle = (v) => {
    setOpen((cur) => {
      const has = cur.includes(v);
      if (multiple) return has ? cur.filter((x) => x !== v) : [...cur, v];
      return has ? [] : [v];
    });
  };
  return (
    <div className="accordion">
      {items.map((it) => <AccItem key={it.value} item={it} open={open.includes(it.value)} onToggle={() => toggle(it.value)} />)}
    </div>
  );
}
function AccItem({ item, open, onToggle }) {
  const ref = useRefD(null);
  const [h, setH] = useStateD(0);
  useEffectD(() => { setH(open && ref.current ? ref.current.scrollHeight : 0); }, [open, item]);
  return (
    <div className="acc-item" data-open={open}>
      <button className="acc-trigger" onClick={onToggle} aria-expanded={open}>
        <span>{item.title}</span><Icon name="chevron-down" />
      </button>
      <div className="acc-content" style={{ height: h }}>
        <div className="acc-content-inner" ref={ref}>{item.content}</div>
      </div>
    </div>
  );
}

/* ---------- Table (sortable + selectable) ---------- */
function DataTable({ columns, rows, onRowClick }) {
  const [sort, setSort] = useStateD({ key: null, dir: 1 });
  const [selected, setSelected] = useStateD([]);
  const sorted = [...rows].sort((a, b) => {
    if (!sort.key) return 0;
    const av = a[sort.key], bv = b[sort.key];
    return (av > bv ? 1 : av < bv ? -1 : 0) * sort.dir;
  });
  const allChecked = selected.length === rows.length && rows.length > 0;
  const toggleAll = () => setSelected(allChecked ? [] : rows.map((r) => r.id));
  const toggle = (id) => setSelected((s) => s.includes(id) ? s.filter((x) => x !== id) : [...s, id]);
  const doSort = (key) => setSort((s) => ({ key, dir: s.key === key ? -s.dir : 1 }));
  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr>
            <th className="table-checkbox"><Checkbox checked={allChecked} onChange={toggleAll} /></th>
            {columns.map((c) => (
              <th key={c.key}>
                {c.sortable ? (
                  <span className="th-sort" onClick={() => doSort(c.key)}>{c.label}<Icon name="chevrons-up-down" /></span>
                ) : c.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {sorted.map((r) => (
            <tr key={r.id} className={onRowClick ? "row-clickable" : ""} onClick={onRowClick ? (e) => { if (!e.target.closest(".checkbox-row,.checkbox,button,a,.dropdown,.select")) onRowClick(r); } : null} style={selected.includes(r.id) ? { background: "var(--accent)" } : null}>
              <td><Checkbox checked={selected.includes(r.id)} onChange={() => toggle(r.id)} /></td>
              {columns.map((c) => <td key={c.key}>{c.render ? c.render(r) : r[c.key]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ---------- Breadcrumb ---------- */
function Breadcrumb({ items }) {
  return (
    <nav className="breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep"><Icon name="chevron-right" /></span>}
          {i === items.length - 1 ? <span className="current">{it.label}</span> : <a href="#" onClick={(e) => e.preventDefault()}>{it.label}</a>}
        </React.Fragment>
      ))}
    </nav>
  );
}

/* ---------- Pagination ---------- */
function Pagination({ page, total, onChange }) {
  const pages = [];
  for (let i = 1; i <= total; i++) {
    if (i === 1 || i === total || (i >= page - 1 && i <= page + 1)) pages.push(i);
    else if (pages[pages.length - 1] !== "…") pages.push("…");
  }
  return (
    <div className="pagination">
      <button className="page-btn" disabled={page === 1} onClick={() => onChange(page - 1)}><Icon name="chevron-left" />Anterior</button>
      {pages.map((p, i) => p === "…" ? <span key={i} className="page-btn" style={{ border: "none", background: "none", pointerEvents: "none" }}>…</span>
        : <button key={i} className="page-btn" data-active={p === page} onClick={() => onChange(p)}>{p}</button>)}
      <button className="page-btn" disabled={page === total} onClick={() => onChange(page + 1)}>Próximo<Icon name="chevron-right" /></button>
    </div>
  );
}

Object.assign(window, { Tabs, Accordion, DataTable, Breadcrumb, Pagination });