/* Design A1 — Classic SaaS admin with a fixed left sidebar. Scoped under .A1 */
function A1Chip({ s }) {
  const c = s === "契約中" ? "ok" : s === "審査中" ? "warn" : "mute";
  return <span className={"A1-chip " + c}>{s}</span>;
}
function AdminSidebar() {
  const M = window.MOCK, I = window.AdI;
  const [active, setActive] = React.useState("dash");
  const [navOpen, setNavOpen] = React.useState(false);
  const iq = (s) => s === "未対応" ? "warn" : s === "対応中" ? "info" : "done";
  return (
    <div className="A1 admin-root">
      <aside className={"A1-side" + (navOpen ? " open" : "")}>
        <div className="A1-brand">
          <LogoMark size={30} color="var(--on-brand)" />
          <div className="A1-bname">コンパス会計社<small>ADMIN CONSOLE</small></div>
        </div>
        <nav className="A1-nav">
          {M.nav.map((n) => (
            <button key={n.key} className={"A1-navit" + (active === n.key ? " on" : "")}
              onClick={() => { setActive(n.key); setNavOpen(false); }}>
              <span className="A1-navic">{I[n.icon]({ s: 19 })}</span>
              <span className="A1-navlb">{n.label}</span>
              {n.badge ? <span className="A1-badge">{n.badge}</span> : null}
            </button>
          ))}
        </nav>
        <div className="A1-user">
          <Avatar name={M.user.name} initials={M.user.initials} size={36} color="var(--accent)" />
          <div className="A1-uinfo"><b>{M.user.name}</b><span>{M.user.role}</span></div>
          <button className="A1-logout" title="ログアウト">{I.logout({ s: 18 })}</button>
        </div>
      </aside>
      {navOpen ? <div className="A1-ov" onClick={() => setNavOpen(false)} /> : null}

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

        <div className="A1-scroll">
          <div className="A1-kpis">
            {M.kpis.map((k) => (
              <div key={k.key} className="A1-kpi">
                <div className="A1-krow">
                  <span className="A1-klab">{k.label}</span>
                  <span className={"A1-delta " + (k.up ? "up" : "dn")}>{(k.up ? I.up : I.down)({ s: 13 })}{k.delta}</span>
                </div>
                <div className="A1-kval">{k.value}</div>
                <div className="A1-kspark"><Bars data={M.revenue.slice(-7)} h={30} color={k.up ? "var(--accent)" : "var(--brand-3)"} /></div>
                <div className="A1-khint">{k.hint}</div>
              </div>
            ))}
          </div>

          <div className="A1-grid2">
            <section className="A1-card A1-rev">
              <div className="A1-chd"><h2>売上推移</h2><span className="A1-sub">2026年 · 月次（百万円）</span></div>
              <div className="A1-revhead"><b>¥4.82M</b><span className="A1-delta up">{I.up({ s: 13 })}+8.3%</span><span className="A1-revsub">対目標 102%</span></div>
              <Bars data={M.revenue} h={150} />
              <div className="A1-months">{["1","2","3","4","5","6","7","8","9","10","11","12"].map((m) => <span key={m}>{m}月</span>)}</div>
            </section>
            <section className="A1-card">
              <div className="A1-chd"><h2>タスク</h2><a className="A1-more2">すべて{I.chevR({ s: 14 })}</a></div>
              <ul className="A1-tasks">
                {M.tasks.map((t, i) => (
                  <li key={i}>
                    <span className={"A1-pri p" + t.pri}>{t.pri}</span>
                    <div className="A1-tinfo"><b>{t.title}</b><span>{t.owner}・期限 {t.due}</span></div>
                    <button className="A1-tcheck" title="完了">{I.check({ s: 15 })}</button>
                  </li>
                ))}
              </ul>
            </section>
          </div>

          <section className="A1-card">
            <div className="A1-chd">
              <h2>顧問先一覧</h2>
              <div className="A1-chd-r">
                <div className="A1-search sm">{I.search({ s: 16 })}<input placeholder="顧問先を検索" /></div>
                <button className="A1-addbtn">{I.plus({ s: 16 })}新規登録</button>
              </div>
            </div>
            <div className="A1-tablewrap">
              <table className="A1-table">
                <thead><tr><th>顧問先</th><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="A1-cli"><Avatar name={c.name} size={30} color="var(--brand-2)" /><div className="A1-clit"><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="A1-mono">{c.since}</td>
                      <td><A1Chip s={c.status} /></td>
                      <td><button className="A1-rowmore">{I.more({ s: 16 })}</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>

          <section className="A1-card">
            <div className="A1-chd"><h2>最近の問い合わせ</h2><a className="A1-more2">すべて{I.chevR({ s: 14 })}</a></div>
            <ul className="A1-inq">
              {M.inquiries.map((q, i) => (
                <li key={i}>
                  <span className="A1-idate A1-mono">{q.date}</span>
                  <div className="A1-iinfo"><b>{q.subject}</b><span>{q.name}・{q.channel}</span></div>
                  <span className={"A1-ist " + iq(q.status)}>{q.status}</span>
                </li>
              ))}
            </ul>
          </section>
          <div className="A1-foot">© 2026 コンパス会計社 管理システム</div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { AdminSidebar });