/* Design A5 — full dark "pro" console with glassmorphism. Scoped under .A5 */
function AdminDark() {
  const M = window.MOCK, I = window.AdI;
  const [active, setActive] = React.useState("dash");
  const [navOpen, setNavOpen] = React.useState(false);
  const chip = (s) => s === "契約中" ? "ok" : s === "審査中" ? "warn" : "mute";
  const iq = (s) => s === "未対応" ? "warn" : s === "対応中" ? "info" : "done";
  const months = ["1","2","3","4","5","6","7","8","9","10","11","12"];
  return (
    <div className="A5 admin-root">
      <div className="A5-glow" />
      <aside className={"A5-side" + (navOpen ? " open" : "")}>
        <div className="A5-brand"><LogoMark size={30} color="var(--accent)" /><div className="A5-bn">コンパス会計社<small>PRO CONSOLE</small></div></div>
        <nav className="A5-nav">
          {M.nav.map((n) => (
            <button key={n.key} className={"A5-navit" + (active === n.key ? " on" : "")} onClick={() => { setActive(n.key); setNavOpen(false); }}>
              <span className="A5-navic">{I[n.icon]({ s: 19 })}</span><span className="A5-navlb">{n.label}</span>{n.badge ? <span className="A5-badge">{n.badge}</span> : null}
            </button>
          ))}
        </nav>
        <div className="A5-user"><Avatar name={M.user.name} initials={M.user.initials} size={36} color="var(--accent)" /><div className="A5-ui"><b>{M.user.name}</b><span>{M.user.role}</span></div><button className="A5-lo" title="ログアウト">{I.logout({ s: 18 })}</button></div>
      </aside>
      {navOpen ? <div className="A5-ov" onClick={() => setNavOpen(false)} /> : null}

      <div className="A5-main">
        <header className="A5-top">
          <button className="A5-burger" onClick={() => setNavOpen(true)}>{I.menu({ s: 22 })}</button>
          <h1>ダッシュボード</h1>
          <div className="A5-search">{I.search({ s: 18 })}<input placeholder="顧客・書類を検索…" /></div>
          <button className="A5-ti dot">{I.bell({ s: 20 })}</button>
          <Avatar name={M.user.name} initials={M.user.initials} size={34} color="var(--brand-3)" />
        </header>

        <div className="A5-scroll">
          <div className="A5-kpis">
            {M.kpis.map((k) => (
              <div key={k.key} className="A5-kpi">
                <div className="A5-krow"><span className="A5-kl">{k.label}</span><span className={"A5-kd " + (k.up ? "up" : "dn")}>{(k.up ? I.up : I.down)({ s: 12 })}{k.delta}</span></div>
                <div className="A5-kv">{k.value}</div>
                <Spark data={M.revenue} w={220} h={34} color="var(--accent)" />
                <div className="A5-kh">{k.hint}</div>
              </div>
            ))}
          </div>

          <div className="A5-grid2">
            <section className="A5-card A5-rev">
              <div className="A5-chd"><h2>売上推移</h2><span className="A5-kd up">{I.up({ s: 12 })}+8.3%</span></div>
              <div className="A5-revv">¥4.82M<small>2026年 · 対目標 102%</small></div>
              <Bars data={M.revenue} h={150} color="var(--accent)" />
              <div className="A5-months">{months.map((m) => <span key={m}>{m}月</span>)}</div>
            </section>
            <section className="A5-card">
              <div className="A5-chd"><h2>タスク</h2><a className="A5-more">すべて</a></div>
              <ul className="A5-tasks">
                {M.tasks.map((t, i) => (
                  <li key={i}><span className={"A5-pri p" + t.pri}>{t.pri}</span><div className="A5-tl"><b>{t.title}</b><span>{t.owner}・期限 {t.due}</span></div></li>
                ))}
              </ul>
            </section>
          </div>

          <section className="A5-card">
            <div className="A5-chd"><h2>顧問先一覧</h2><button className="A5-add">{I.plus({ s: 16 })}新規登録</button></div>
            <div className="A5-twrap">
              <table className="A5-table">
                <thead><tr><th>顧問先</th><th>種別</th><th>プラン</th><th>担当</th><th>契約日</th><th>ステータス</th></tr></thead>
                <tbody>
                  {M.clients.map((c, i) => (
                    <tr key={i}>
                      <td><div className="A5-cli"><Avatar name={c.name} size={28} color="var(--brand-3)" /><div className="A5-clt"><b>{c.name}</b><span>{c.kana}</span></div></div></td>
                      <td>{c.type}</td><td>{c.plan}</td><td>{c.owner}</td><td className="A5-mono">{c.since}</td>
                      <td><span className={"A5-chip " + chip(c.status)}>{c.status}</span></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>

          <section className="A5-card">
            <div className="A5-chd"><h2>最近の問い合わせ</h2><a className="A5-more">受信箱</a></div>
            <ul className="A5-inq">
              {M.inquiries.map((q, i) => (
                <li key={i}><span className="A5-qd A5-mono">{q.date}</span><div className="A5-qi"><b>{q.subject}</b><span>{q.name}・{q.channel}</span></div><span className={"A5-ist " + iq(q.status)}>{q.status}</span></li>
              ))}
            </ul>
          </section>
          <div className="A5-foot">© 2026 コンパス会計社 管理システム</div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { AdminDark });