// TenantsTable — the foundational dense admin table.

const TENANTS = [
  { id: "kht", name: "Khao Hom Thai",   tax: "0105561234567", brands: 3, status: "active",     onboarding: "approved",      mrr: 1247500, ccy: "THB", territory: "TH",        last: "3h ago",  initial: "K" },
  { id: "sia", name: "Siam Cosmetic",   tax: "0105547654321", brands: 5, status: "active",     onboarding: "approved",      mrr: 2840000, ccy: "THB", territory: "TH",        last: "1d ago",  initial: "S" },
  { id: "bkb", name: "Bangkok Beauty",  tax: "0105511223344", brands: 1, status: "onboarding", onboarding: "manual_review", mrr: 0,       ccy: "THB", territory: "TH",        last: "12h ago", initial: "B" },
  { id: "twn", name: "Thai Wellness",   tax: "0105599887766", brands: 2, status: "suspended",  onboarding: "rejected",      mrr: 420000,  ccy: "THB", territory: "TH",        last: "5d ago",  initial: "T" },
  { id: "nor", name: "Northern Silk",   tax: "0105533445566", brands: 1, status: "active",     onboarding: "approved",      mrr: 180000,  ccy: "THB", territory: "TH",        last: "2d ago",  initial: "N" },
  { id: "ria", name: "Riang Mai Coffee",tax: "0105588990011", brands: 2, status: "active",     onboarding: "approved",      mrr: 620000,  ccy: "THB", territory: "TH",        last: "6h ago",  initial: "R" },
  { id: "kru", name: "Krua Phuket",     tax: "0107712345678", brands: 4, status: "active",     onboarding: "approved",      mrr: 1980000, ccy: "THB", territory: "TH",        last: "11h ago", initial: "K" },
  { id: "hat", name: "Hat Yai Fresh",   tax: "0107799887711", brands: 1, status: "onboarding", onboarding: "submitted",     mrr: 0,       ccy: "THB", territory: "TH",        last: "2d ago",  initial: "H" },
  { id: "san", name: "Sanya Traders",   tax: "CN310003344",   brands: 2, status: "active",     onboarding: "approved",      mrr: 145000,  ccy: "CNY", territory: "CN-resident", last: "3h ago", initial: "S" },
  { id: "lan", name: "Lanna Tea",       tax: "0105599332211", brands: 2, status: "active",     onboarding: "approved",      mrr: 312000,  ccy: "THB", territory: "TH",        last: "30m ago", initial: "L" },
];

const STATUS_LABEL = {
  active: { label: "Active", tone: "success" },
  onboarding: { label: "Onboarding", tone: "info" },
  suspended: { label: "Suspended", tone: "danger" },
};
const ONBOARDING_LABEL = {
  approved:      { label: "Approved",      tone: "success" },
  submitted:     { label: "Submitted",     tone: "info" },
  manual_review: { label: "Manual review", tone: "warning" },
  rejected:      { label: "Rejected",      tone: "danger" },
  "—":           { label: "—",             tone: "neutral" },
};

function fmtMrr(n, ccy) {
  if (n === 0) return `0 ${ccy}`;
  return `${ccy==="THB"?"฿":"¥"}${n.toLocaleString("en-US")} ${ccy}`;
}

// Simple deterministic trend generator so each row has its own sparkline.
function trendFor(seed, base) {
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = ((h << 5) - h + seed.charCodeAt(i)) | 0;
  const pts = [];
  let v = 100;
  for (let i = 0; i < 8; i++) {
    h = (h * 9301 + 49297) % 233280;
    const delta = ((h / 233280) - 0.4) * (base / 25);
    v = Math.max(20, v + delta * 4);
    pts.push(v);
  }
  return pts;
}

function TenantsTable({ onOpenDetail, onBulkSuspend }) {
  const [filters, setFilters] = React.useState({ status: ["active","onboarding","suspended"], territory: null, search: "" });
  const [selected, setSelected] = React.useState(new Set());

  const toggle = (id) => {
    setSelected(s => {
      const next = new Set(s);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };
  const toggleStatus = (s) => {
    setFilters(f => ({...f, status: f.status.includes(s) ? f.status.filter(x => x!==s) : [...f.status, s]}));
  };
  const rows = TENANTS.filter(t => filters.status.includes(t.status))
                      .filter(t => !filters.territory || t.territory === filters.territory)
                      .filter(t => !filters.search || (t.name + " " + t.tax).toLowerCase().includes(filters.search.toLowerCase()));

  const allChecked = rows.length > 0 && rows.every(r => selected.has(r.id));

  return (
    <div>
      <div className="page-head">
        <h1>Tenants</h1>
        <span className="count">({rows.length} of {TENANTS.length})</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Export</button>
          <button className="btn primary"><i className="ti ti-plus"></i>Add tenant</button>
        </div>
      </div>

      <div className="filter-bar">
        <div className="searchbar">
          <i className="ti ti-search"></i>
          <input placeholder="Search by organization, tax ID, email…" value={filters.search} onChange={e => setFilters(f => ({...f, search: e.target.value}))} />
        </div>
        <span className="label-caps">Status</span>
        {["active","onboarding","suspended"].map(s => (
          <span key={s} className={"chip" + (filters.status.includes(s) ? " active":"")} onClick={() => toggleStatus(s)}>
            {filters.status.includes(s) ? <i className="ti ti-check"></i> : null}
            {STATUS_LABEL[s].label}
          </span>
        ))}
        <span className="label-caps" style={{marginLeft:8}}>Territory</span>
        {[null, "TH", "CN-resident"].map(t => (
          <span key={t||"all"} className={"chip" + (filters.territory===t ? " active":"")} onClick={() => setFilters(f => ({...f, territory: t}))}>
            {t ? t : "All"}
          </span>
        ))}
      </div>

      {selected.size > 0 && (
        <div className="bulk">
          <strong>{selected.size} selected</strong>
          <span className="spacer"></span>
          <button className="btn secondary sm"><i className="ti ti-download"></i>Export CSV</button>
          <button className="btn secondary sm"><i className="ti ti-megaphone"></i>Send announcement</button>
          <button className="btn danger sm" onClick={() => onBulkSuspend(Array.from(selected))}><i className="ti ti-ban"></i>Suspend selected</button>
          <button className="btn tertiary sm" onClick={() => setSelected(new Set())}>Deselect all</button>
        </div>
      )}

      <div className="table-card">
        <table>
          <thead>
            <tr>
              <th style={{width:30}}>
                <input type="checkbox" checked={allChecked} onChange={() => {
                  setSelected(allChecked ? new Set() : new Set(rows.map(r => r.id)));
                }} aria-label="Select all" />
              </th>
              <th>Organization</th>
              <th style={{width:90}}>Brands</th>
              <th style={{width:120}}>Status</th>
              <th style={{width:160}}>Onboarding</th>
              <th style={{width:180, textAlign:"right"}}>MRR contribution</th>
              <th style={{width:120}}>Last active</th>
              <th style={{width:36}}></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((t, i) => {
              const checked = selected.has(t.id);
              const status = STATUS_LABEL[t.status];
              const ob = ONBOARDING_LABEL[t.onboarding] || ONBOARDING_LABEL["—"];
              return (
                <tr key={t.id} className={checked?"checked":""} onClick={() => onOpenDetail(t)}>
                  <td onClick={(e) => { e.stopPropagation(); toggle(t.id); }}>
                    <input type="checkbox" checked={checked} onChange={() => toggle(t.id)} aria-label={`Select ${t.name}`} />
                  </td>
                  <td>
                    <div className="org">
                      <div className="av">{t.initial}</div>
                      <div>
                        <div className="org-name">{t.name}</div>
                        <div className="org-id">{t.tax}</div>
                      </div>
                    </div>
                  </td>
                  <td className="data-mono">{t.brands}</td>
                  <td><span className={"pill dot " + status.tone}><span className="d"></span>{status.label}</span></td>
                  <td><span className={"pill " + ob.tone}>{ob.label}</span></td>
                  <td className="num">
                    <span className="cell-mrr">
                      {t.mrr > 0 && <Sparkline data={trendFor(t.id, t.mrr/1000)} width={64} height={18} mini={true} tone={t.status === "suspended" ? "danger" : "primary"} />}
                      <span className="num">{fmtMrr(t.mrr, t.ccy)}</span>
                    </span>
                  </td>
                  <td className="body-sm" style={{color:"var(--on-surface-variant)"}}>{t.last}</td>
                  <td onClick={e => e.stopPropagation()}><span className="kebab"><i className="ti ti-dots-vertical"></i></span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="pagination">
          <div className="meta">Showing 1–{rows.length} of {TENANTS.length}</div>
          <select defaultValue="25"><option>25</option><option>50</option><option>100</option></select>
          <span className="page-btn"><i className="ti ti-chevron-left"></i></span>
          <span className="page-btn active">1</span>
          <span className="page-btn">2</span>
          <span className="page-btn">3</span>
          <span className="page-btn"><i className="ti ti-chevron-right"></i></span>
        </div>
      </div>
    </div>
  );
}

window.TenantsTable = TenantsTable;
window.TENANTS = TENANTS;