// app-real.jsx — NEXTAGE 本番用Webアプリケーションの統合コントローラー
// このファイルは、アプリ全体の画面遷移（ルーティング）、データの保存、レスポンシブ対応を統括する「司令塔」です。

// 1. 安全なストレージ操作ユーティリティ（ブラウザの引き出しにデータを出し入れする機能）
// キー名を指定してローカルストレージからデータを取り出します。
const loadLocal = (key, fallback) => {
  try {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : fallback;
  } catch (e) {
    console.warn('localStorage読み込みスキップ:', e);
    return fallback;
  }
};

// データをローカルストレージに安全に保管します。
const saveLocal = (key, value) => {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    console.warn('localStorage保存スキップ:', e);
  }
};

// 2. メインアプリケーションコンポーネント
// アプリ全体の骨組みを作り、状態（ステート）を管理します。
function RealApp() {
  // ウィンドウ幅を監視し、768px未満ならスマートフォン向けレイアウトに自動適応します
  // （画面の大きさを測る「ものさし」を常に当てている状態です）
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < 768);

  React.useEffect(() => {
    // 画面のサイズが変わったときに呼び出されるハンドラー（窓の大きさを測り直す係）
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // ロードマップデータ（講座のタイトル、各ステージ、スライドのリスト）
  const [rm, setRmState] = React.useState(() => loadLocal('nx_prod_roadmap', INITIAL_ROADMAP));
  const setRm = (updater) => {
    setRmState((prev) => {
      const next = typeof updater === 'function' ? updater(prev) : updater;
      saveLocal('nx_prod_roadmap', next);
      return next;
    });
  };

  // 受講者の進捗データ（どのステージの何番目のステップまで進んだか）
  const [prog, setProgState] = React.useState(() => {
    const saved = loadLocal('nx_prod_progress', INITIAL_PROGRESS);
    return Object.fromEntries(
      Object.entries(saved).map(([k, c]) => [
        k,
        { c, done: c >= (INITIAL_ROADMAP.stages.find((s) => s.id === k)?.steps.length || 99) },
      ])
    );
  });
  const setProg = (updater) => {
    setProgState((prev) => {
      const next = typeof updater === 'function' ? updater(prev) : updater;
      // 進捗の数値だけを取り出して保存
      const simple = Object.fromEntries(Object.entries(next).map(([k, v]) => [k, v.c]));
      saveLocal('nx_prod_progress', simple);
      return next;
    });
  };

  // オーナーの設定データ（プラン、縁の色、Powered byの表示設定、Xシェアの文章など）
  const [cfg, setCfgState] = React.useState(() =>
    loadLocal('nx_prod_cfg', {
      plan: 'pro',
      frameStyle: 'white',
      glassColor: 'oklch(0.62 0.14 165)',
      poweredBy: true,
      shareOn: true,
      shareText: '「声活アクションプラン」全ステージ達成しました！1段ずつ、次のステージへ。',
      shareLink: 'tachibana.voice/note',
      cancelAt: null,
      mode: 'url',
    })
  );
  const setCfg = (updater) => {
    setCfgState((prev) => {
      const next = typeof updater === 'function' ? updater(prev) : updater;
      saveLocal('nx_prod_cfg', next);
      return next;
    });
  };

  // 受講者の一時状態（現在開いているステージ・ステップ、ログイン状態、ポップアップ表示など）
  const [lst, setLst] = React.useState({
    stage: 0,
    step: 0,
    loggedIn: false,
    sheet: false,
    prompts: {},
    justCleared: null,
  });

  // オーナーの一時状態（選択中のステージ番号、空状態表示フラグなど）
  const [ost, setOst] = React.useState({ empty: false, stage: 0 });

  // トースト通知（画面下部に数秒だけ現れるお知らせバー）
  const [toast, toastNode] = useToast();

  // ルーティング（URLのハッシュをもとに表示する画面を決定）
  // 例: #/lp（LP）, #/studio（管理画面）, #/learn（受講者画面）
  const getRouteFromHash = () => {
    const hash = window.location.hash.replace(/^#\/?/, '');
    if (!hash || hash === 'lp') return 'O-01'; // デフォルトはLP
    if (hash === 'login') return 'O-02';
    if (hash.startsWith('studio')) {
      if (hash === 'studio/roadmap') return 'O-04';
      if (hash === 'studio/stage') return 'O-05';
      if (hash === 'studio/preview') return 'O-06';
      if (hash === 'studio/publish') return 'O-07';
      if (hash === 'studio/kpi') return 'O-08';
      if (hash === 'studio/plan') return 'O-09';
      if (hash === 'studio/settings') return 'O-10';
      return 'O-03'; // スタジオのホーム
    }
    if (hash.startsWith('embed')) return 'L-01'; // 埋め込みモード
    if (hash.startsWith('learn') || hash.startsWith('view')) return 'L-01'; // 受講者目次
    return 'O-01';
  };

  const [screen, setScreen] = React.useState(getRouteFromHash);
  const [embedMode, setEmbedMode] = React.useState(() => window.location.hash.includes('embed'));

  // ハッシュの変更を検知して画面を同期します
  React.useEffect(() => {
    const onHashChange = () => {
      setScreen(getRouteFromHash());
      setEmbedMode(window.location.hash.includes('embed'));
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  // 画面遷移関数（指定した画面IDに合わせてURLハッシュを更新）
  const go = (targetScreen, opts) => {
    if (opts?.empty !== undefined) setOst((o) => ({ ...o, empty: opts.empty }));
    setScreen(targetScreen);

    // 画面IDに対応するハッシュの書き換え（ブラウザのURL欄を更新）
    const hashMap = {
      'O-01': 'lp',
      'O-02': 'login',
      'O-03': 'studio',
      'O-04': 'studio/roadmap',
      'O-05': 'studio/stage',
      'O-06': 'studio/preview',
      'O-07': 'studio/publish',
      'O-08': 'studio/kpi',
      'O-09': 'studio/plan',
      'O-10': 'studio/settings',
      'L-01': 'learn',
      'L-02': 'learn/step',
      'L-03': 'learn/fullscreen',
      'L-04': 'learn/prompt',
      'L-05': 'learn/login',
      'L-06': 'learn/complete',
    };
    const nextHash = hashMap[targetScreen] || 'lp';
    if (window.location.hash !== '#' + nextHash) {
      window.location.hash = nextHash;
    }
  };

  // 初期データへのリセット関数
  const resetToDemo = () => {
    if (window.confirm('初期デモデータに戻しますか？（変更したスライドや進捗がリセットされます）')) {
      localStorage.removeItem('nx_prod_roadmap');
      localStorage.removeItem('nx_prod_progress');
      localStorage.removeItem('nx_prod_cfg');
      setRmState(INITIAL_ROADMAP);
      setProgState(
        Object.fromEntries(
          Object.entries(INITIAL_PROGRESS).map(([k, c]) => [
            k,
            { c, done: c >= (INITIAL_ROADMAP.stages.find((s) => s.id === k)?.steps.length || 99) },
          ])
        )
      );
      toast('初期データにリセットしました');
    }
  };

  // オーナー管理画面かどうかの判定
  const isOwner = screen.startsWith('O');
  const isOwnerStudio = isOwner && !['O-01', 'O-02'].includes(screen);

  // オーナー画面の各サブ画面に渡すプロパティ
  const ownerProps = {
    m: isMobile,
    go,
    rm,
    setRm,
    cfg,
    setCfg,
    ost,
    setOst,
    toast,
    reduced: false,
  };

  // 表示するオーナー画面の選択
  let ownerBody = null;
  if (screen === 'O-03') ownerBody = <O03Home {...ownerProps} />;
  if (screen === 'O-04') ownerBody = <O04Roadmap {...ownerProps} />;
  if (screen === 'O-05') ownerBody = <O05Stage {...ownerProps} />;
  if (screen === 'O-06') ownerBody = <O06Preview {...ownerProps} />;
  if (screen === 'O-07') ownerBody = <O07Publish {...ownerProps} />;
  if (screen === 'O-08') ownerBody = <O08Kpi {...ownerProps} />;
  if (screen === 'O-09') ownerBody = <O09Plan {...ownerProps} />;
  if (screen === 'O-10') ownerBody = <O10Settings {...ownerProps} />;

  // クイックドック（画面右下のモード切り替えツールバー）の開閉状態
  const [dockOpen, setDockOpen] = React.useState(true);

  // 実効的な設定（埋め込みモードかどうかを反映）
  const activeCfg = { ...cfg, mode: embedMode ? 'embed' : 'url' };

  return (
    <div className="real-app-root">
      <div className="real-view-container">
        {/* O-01: ランディングページ（デモ付き） */}
        {screen === 'O-01' && <O01LP m={isMobile} go={go} reduced={false} />}

        {/* O-02: ログイン画面 */}
        {screen === 'O-02' && <O02Login m={isMobile} go={go} />}

        {/* O-03〜O-10: オーナー管理画面（サイドバーまたはボトムタブ付き） */}
        {isOwnerStudio && (
          <OwnerShell m={isMobile} screen={screen} go={go} cfg={activeCfg}>
            {ownerBody}
          </OwnerShell>
        )}

        {/* L-01〜L-06: 受講者側アクションプラン画面 */}
        {!isOwner && (
          <LearnerApp
            m={isMobile}
            screen={screen}
            go={go}
            rm={rm}
            cfg={activeCfg}
            prog={prog}
            setProg={setProg}
            lst={lst}
            setLst={setLst}
            reduced={false}
          />
        )}
      </div>

      {/* トースト表示（「保存済み」「削除しました［元に戻す］」などのお知らせ） */}
      {toastNode}

      {/* クイック切り替えドック（体験・検証用の便利バー） */}
      <div className={'quick-dock' + (dockOpen ? '' : ' minimized')}>
        {dockOpen ? (
          <>
            <span style={{ fontWeight: 700, marginRight: 4, color: 'var(--em-d)' }}>NEXTAGE</span>
            <button
              className={'quick-dock-btn' + (screen === 'O-01' ? ' active' : '')}
              onClick={() => go('O-01')}
            >
              LPデモ
            </button>
            <button
              className={'quick-dock-btn' + (isOwnerStudio ? ' active' : '')}
              onClick={() => {
                setEmbedMode(false);
                go('O-03');
              }}
            >
              管理スタジオ
            </button>
            <button
              className={'quick-dock-btn' + (!isOwner && !embedMode ? ' active' : '')}
              onClick={() => {
                setEmbedMode(false);
                go('L-01');
              }}
            >
              受講者ビュー
            </button>
            <button
              className={'quick-dock-btn' + (embedMode ? ' active' : '')}
              onClick={() => {
                setEmbedMode(true);
                go('L-01');
              }}
            >
              埋め込み
            </button>
            <button
              className="quick-dock-btn"
              style={{ color: 'rgba(255,180,180,0.9)' }}
              title="初期デモ状態にリセット"
              onClick={resetToDemo}
            >
              リセット
            </button>
            <button
              className="quick-dock-toggle"
              onClick={() => setDockOpen(false)}
              title="最小化"
            >
              ✕
            </button>
          </>
        ) : (
          <button
            className="quick-dock-btn active"
            style={{ padding: '4px 8px', fontSize: 11 }}
            onClick={() => setDockOpen(true)}
          >
            🧭 ナビ
          </button>
        )}
      </div>
    </div>
  );
}

// 画面のルート要素にReactアプリを描画（マウント）します
ReactDOM.createRoot(document.getElementById('root')).render(<RealApp />);