/* Design A3 — information-dense power console. Scoped under .A3 */
function AdminDense() {
  const M = window.MOCK, I = window.AdI;
  const [tab, setTab] = React.useState("clients");
  const [all, setAll] = React.useState(false);
  const chip = (s) => s === "契約中" ? "ok" : s === "審査中" ? "warn" : "mute";
  const sdot = (s) => s === "未対応" ? "warn" : s === "対応中" ? "info" : "done";
  return (
    <div className="A3 admin-root">
      <header className="A3-top">
        <div className="A3-brand"><LogoMark size={22} color="var(--brand)" /><b>コンパス会計社</b><span>ADMIN</span></div>
        <nav className="A3-tabs">
          {M.nav.map((n) => (
            <button key={n.key} className={"A3-tab" + (tab === n.key ? " on" : "")} onClick={() => setTab(n.key)}>
              {I[n.icon]({ s: 15 })}<span>{n.label}</span>{n.badge ? <i className="A3-tb">{n.badge}</i> : null}
            </button>
          ))}
        </nav>
        <div className="A3-tr">
          <button className="A3-ti">{I.search({ s: 17 })}</button>
          <button className="A3-ti dot">{I.bell({ s: 17 })}</button>
          <Avatar name={M.user.name} initials={M.user.initials} size={28} color="var(--brand)" />
        </div>
      </header>

      <div className="A3-toolbar">
        <div className="A3-tsearch">{I.search({ s: 15 })}<input placeholder="顧問先・担当で検索" /></div>
        <button className="A3-tbtn">{I.filter({ s: 14 })}フィルタ</button>
        <button className="A3-tbtn">{I.calendar({ s: 14 })}2026/07{I.chevD({ s: 13 })}</button>
        <span className="A3-spacer" />
        <button className="A3-tbtn ghost">CSV出力</button>
        <button className="A3-primary">{I.plus({ s: 15 })}新規登録</button>
      </div>

      <div className="A3-kstrip">
        {M.kpis.map((k) => (
          <div key={k.key} className="A3-kp">
            <span className="A3-kl">{k.label}</span>
            <span className="A3-kv">{k.value}</span>
            <span className={"A3-kd " + (k.up ? "up" : "dn")}>{(k.up ? I.up : I.down)({ s: 11 })}{k.delta}</span>
          </div>
        ))}
      </div>

      <div className="A3-cols">
        <section className="A3-tablecard">
          <div className="A3-tchd"><h2>顧問先 <em>128 件</em></h2><div className="A3-tsort">並び替え：契約日{I.chevD({ s: 13 })}</div></div>
          <div className="A3-twrap">
            <table className="A3-table">
              <thead><tr>
                <th className="A3-ck"><input type="checkbox" checked={all} onChange={() => setAll(!all)} /></th>
                <th>顧問先{I.chevD({ s: 12 })}</th><th>ｶﾅ</th><th>種別</th><th>プラン</th><th>担当</th><th>契約日{I.chevD({ s: 12 })}</th><th>ステータス</th><th></th>
              </tr></thead>
              <tbody>
                {M.clients.map((c, i) => (
                  <tr key={i}>
                    <td className="A3-ck"><input type="checkbox" checked={all} readOnly /></td>
                    <td className="A3-cnm">{c.name}</td>
                    <td className="A3-mono A3-mut">{c.kana}</td>
                    <td>{c.type}</td><td>{c.plan}</td><td>{c.owner}</td>
                    <td className="A3-mono">{c.since}</td>
                    <td><span className={"A3-chip " + chip(c.status)}>{c.status}</span></td>
                    <td><button className="A3-more">{I.more({ s: 15 })}</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="A3-pag">
            <span>1–6 / 128 件を表示</span>
            <div className="A3-pg"><button className="A3-pgb">{I.chevR({ s: 13, w: 2 })}</button><button className="A3-pgb on">1</button><button className="A3-pgb">2</button><button className="A3-pgb">3</button><button className="A3-pgb">{I.chevR({ s: 13 })}</button></div>
          </div>
        </section>

        <aside className="A3-side">
          <div className="A3-panel">
            <div className="A3-phd"><h3>問い合わせ</h3><i className="A3-pc">3</i></div>
            <ul className="A3-plist">
              {M.inquiries.map((q, i) => (
                <li key={i}><span className="A3-qd A3-mono">{q.date}</span><div className="A3-qi"><b>{q.subject}</b><span>{q.name}・{q.channel}</span></div><i className={"A3-sdot " + sdot(q.status)} /></li>
              ))}
            </ul>
          </div>
          <div className="A3-panel">
            <div className="A3-phd"><h3>タスク</h3><a className="A3-plink">すべて</a></div>
            <ul className="A3-plist">
              {M.tasks.map((t, i) => (
                <li key={i}><span className={"A3-pri p" + t.pri}>{t.pri}</span><div className="A3-qi"><b>{t.title}</b><span>{t.owner}・期限 {t.due}</span></div></li>
              ))}
            </ul>
          </div>
        </aside>
      </div>
      <div className="A3-foot">© 2026 コンパス会計社 管理システム</div>
    </div>
  );
}
Object.assign(window, { AdminDense });