// app.jsx — main shell + tab switcher
const { useState, useEffect } = React;

const TABS = [
  { id: "core", num: "①", title: "コア（実機PoC）", badge: "実機", badgeClass: "core",
    sub: "3分体験フロー" },
  { id: "line", num: "②", title: "LINE一次査定",   badge: "クリッカブル", badgeClass: "",
    sub: "自動返信デモ" },
  { id: "pos",  num: "③", title: "POS連携",        badge: "クリッカブル", badgeClass: "",
    sub: "ステータス画面" },
  { id: "pop",  num: "④", title: "ポップ生成",      badge: "クリッカブル", badgeClass: "",
    sub: "テンプレ → PDF" },
];

function App() {
  const [tab, setTab] = useState("core");
  const [confirmedFromCore, setConfirmedFromCore] = useState(null);

  useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
      const ids = TABS.map(t => t.id);
      let idx = ids.indexOf(tab);
      idx = (idx + (e.key === "ArrowRight" ? 1 : -1) + ids.length) % ids.length;
      setTab(ids[idx]);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [tab]);

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand">
          <div className="brand-mark">T</div>
          <div className="brand-name">TCG-AI 業務支援</div>
          <div className="brand-sub">推奨構成：1コア実機 + 3周辺クリッカブル</div>
        </div>
        <div className="spacer" />
        <div className="topbar-meta">
          <span><span className="dot" />core-api v0.3.2</span>
          <span>店舗 ひむかアスレチックス 宮崎本店</span>
          <span>2026.05.13 月</span>
        </div>
      </header>

      <nav className="tabs">
        {TABS.map(t => (
          <button
            key={t.id}
            className={`tab ${tab === t.id ? "is-active" : ""}`}
            onClick={() => setTab(t.id)}>
            <span className="tab-num">{t.num}</span>
            <span>
              <span>{t.title}</span>
              <span className="muted" style={{fontSize: 11, marginLeft: 8, fontWeight: 400}}>· {t.sub}</span>
            </span>
            <span className={`tab-badge ${t.badgeClass}`}>{t.badge}</span>
          </button>
        ))}
        <div className="tabs-meta">
          <span className="kbd">←</span>
          <span className="kbd">→</span>
          <span>でタブ切替</span>
        </div>
      </nav>

      <main className="main">
        {tab === "core" && <CoreView onPriceConfirm={setConfirmedFromCore} />}
        {tab === "line" && <LineView />}
        {tab === "pos"  && <PosView />}
        {tab === "pop"  && <PopView confirmedFromCore={confirmedFromCore} />}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);