/* Design A2 — quiet editorial-minimal admin. Scoped under .A2 */
function AdminMinimal() {
  const M = window.MOCK, I = window.AdI;
  const [active, setActive] = React.useState("dash");
  const dot = (s) => s === "契約中" ? "ok" : s === "審査中" ? "warn" : "mute";
  const qst = (s) => s === "未対応" ? "warn" : s === "対応中" ? "info" : "done";
  const max = Math.max.apply(null, M.revenue), min = Math.min.apply(null, M.revenue);
  return (
    <div className="A2 admin-root">
      <aside className="A2-rail">
        <div className="A2-logo"><LogoMark size={26} color="var(--brand)" /></div>
        <nav className="A2-nav">
          {M.nav.map((n) => (
            <button key={n.key} className={"A2-navit" + (active === n.key ? " on" : "")} onClick={() => setActive(n.key)}>
              {I[n.icon]({ s: 20 })}
              {n.badge ? <i className="A2-nbadge" /> : null}
              <span className="A2-tip">{n.label}</span>
            </button>
          ))}
        </nav>
        <button className="A2-navit" title="ログアウト">{I.logout({ s: 20 })}<span className="A2-tip">ログアウト</span></button>
      </aside>

      <main className="A2-main">
        <header className="A2-head">
          <div>
            <div className="A2-eyebrow">MANAGEMENT</div>
            <h1>ダッシュボード</h1>
          </div>
          <div className="A2-hactions">
            <button className="A2-hicon">{I.search({ s: 19 })}</button>
            <button className="A2-hicon">{I.bell({ s: 19 })}</button>
            <div className="A2-me"><Avatar name={M.user.name} initials={M.user.initials} size={34} color="var(--brand)" /><div className="A2-menm"><b>{M.user.name}</b><span>{M.user.role}</span></div></div>
          </div>
        </header>

        <section className="A2-stats">
          {M.kpis.map((k) => (
            <div key={k.key} className="A2-stat">
              <div className="A2-slab">{k.label}</div>
              <div className="A2-sval">{k.value}</div>
              <div className={"A2-sdelta " + (k.up ? "up" : "dn")}>{(k.up ? I.up : I.down)({ s: 12 })}{k.delta}<em>{k.hint}</em></div>
            </div>
          ))}
        </section>

        <section className="A2-chart">
          <div className="A2-chd"><h2>売上推移</h2><span>2026年 · 月次（百万円）</span></div>
          <div className="A2-sparkwrap">
            <div className="A2-ann A2-max">最高 {max.toFixed(1)}</div>
            <Spark data={M.revenue} w={1000} h={120} color="var(--brand)" />
            <div className="A2-ann A2-min">最低 {min.toFixed(1)}</div>
          </div>
          <div className="A2-months">{["1","2","3","4","5","6","7","8","9","10","11","12"].map((m) => <span key={m}>{m}月</span>)}</div>
        </section>

        <section className="A2-block">
          <div className="A2-chd"><h2>顧問先</h2><a className="A2-link">すべて表示{I.chevR({ s: 14 })}</a></div>
          <ul className="A2-clients">
            {M.clients.map((c, i) => (
              <li key={i}>
                <span className="A2-cnm"><b>{c.name}</b><small>{c.kana}</small></span>
                <span className="A2-ccol">{c.type}</span>
                <span className="A2-ccol">{c.plan}</span>
                <span className="A2-ccol A2-mut">{c.since}</span>
                <span className={"A2-cstat " + dot(c.status)}><i />{c.status}</span>
              </li>
            ))}
          </ul>
        </section>

        <section className="A2-block">
          <div className="A2-chd"><h2>最近の問い合わせ</h2><a className="A2-link">受信箱{I.chevR({ s: 14 })}</a></div>
          <ul className="A2-inq">
            {M.inquiries.map((q, i) => (
              <li key={i}>
                <span className="A2-qd">{q.date}</span>
                <span className="A2-qs"><b>{q.subject}</b><small>{q.name}・{q.channel}</small></span>
                <span className={"A2-qst " + qst(q.status)}>{q.status}</span>
              </li>
            ))}
          </ul>
        </section>
        <div className="A2-foot">コンパス会計社 — 管理システム</div>
      </main>
    </div>
  );
}
Object.assign(window, { AdminMinimal });