/* Maho Mockup — phone shell + tab bar */

function StatusBar() {
  return (
    <div className="phone__status">
      <span className="phone__status-time">9:41</span>
      <span className="phone__status-icons">
        <Icon name="signal" size={14} />
        <Icon name="wifi" size={14} />
        <Icon name="battery" size={16} />
      </span>
    </div>
  );
}

function ZenTabBar({ activeTab, onChange }) {
  return (
    <div className="zen-tab-bar-host">
      <nav className="zen-tab-bar" role="tablist">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            type="button"
            role="tab"
            className={`zen-tab-button${activeTab === tab.id ? " tab-selected" : ""}`}
            aria-selected={activeTab === tab.id}
            aria-label={tab.label}
            onClick={() => onChange(tab.id)}
          >
            <Icon name={tab.icon} size={24} />
          </button>
        ))}
      </nav>
    </div>
  );
}

function PhoneFrame({ children, showTabBar, activeTab, onTabChange }) {
  return (
    <div className="phone">
      <div className="phone__bezel">
        <div className="phone__island" />
        <StatusBar />
        <div className="phone__body">
          <ToastProvider>
            {children}
            {showTabBar ? (
              <ZenTabBar activeTab={activeTab} onChange={onTabChange} />
            ) : null}
          </ToastProvider>
        </div>
        <div className="phone__home-indicator" />
      </div>
    </div>
  );
}

function SideCatalog({ route, navigate }) {
  return (
    <div className="side-card">
      <div className="side-brand">
        <div className="side-brand__mark">ま</div>
        <div>
          <div className="side-brand__name">Maho 學日文</div>
          <div className="side-brand__sub">Hi-Fi Designer Mockup</div>
        </div>
      </div>
      <p>對齊 Ionic Vue Zen 主題。點左側可跳畫面；右側手機框為高精度擬真。</p>
      <div className="side-nav">
        {HUB_PAGES.map((g) => (
          <React.Fragment key={g.group}>
            <div className="side-nav__group">{g.group}</div>
            {g.items.map((it) => (
              <button
                key={it.route}
                type="button"
                className={`side-nav__btn${route === it.route || (it.route !== "/hub" && route.startsWith(it.route.split("/").slice(0, 3).join("/")) && it.route.includes(":")) ? "" : ""}${route === it.route ? " active" : ""}`}
                onClick={() => navigate(it.route)}
              >
                <span>{it.title}</span>
                <Icon name="chevronRight" size={14} />
              </button>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function TweaksPanel({ tweaks, setTweaks }) {
  const toggle = (key) => setTweaks((t) => ({ ...t, [key]: !t[key] }));
  return (
    <div className="side-card">
      <h2>Tweaks</h2>
      <p>示範用開關，不影響正式 App。</p>
      <div className="tweaks-row">
        <span>已登入使用者</span>
        <button
          type="button"
          className={`tweaks-toggle${tweaks.loggedIn ? " on" : ""}`}
          onClick={() => toggle("loggedIn")}
          aria-label="toggle login"
        />
      </div>
      <div className="tweaks-row">
        <span>顯示最近解析</span>
        <button
          type="button"
          className={`tweaks-toggle${tweaks.showRecent ? " on" : ""}`}
          onClick={() => toggle("showRecent")}
          aria-label="toggle recent"
        />
      </div>
      <div className="tweaks-row">
        <span>紀錄空狀態</span>
        <button
          type="button"
          className={`tweaks-toggle${tweaks.recordsEmpty ? " on" : ""}`}
          onClick={() => toggle("recordsEmpty")}
          aria-label="toggle empty records"
        />
      </div>
    </div>
  );
}

Object.assign(window, {
  PhoneFrame,
  ZenTabBar,
  StatusBar,
  SideCatalog,
  TweaksPanel,
});