// 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);
  }
};

// 管理者（創設者・エイト様）の特権アカウントリスト
// このメールアドレスでログインした場合は、課金不要で自動的に「永続Proプラン」が適用されます
const ADMIN_EMAILS = [
  'eitosato0818@gmail.com',
  'tachibana06060818@gmail.com',
  'tachibana@example.com',
];

const isAdminUser = (user) => {
  if (!user || !user.email) return false;
  const em = user.email.toLowerCase();
  return ADMIN_EMAILS.includes(em) || em.includes('eitosato');
};

// 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);
  }, []);

  // 現在ログイン中のオーナー情報（Supabase認証）
  const [currentUser, setCurrentUser] = React.useState(null);

  // ロードマップデータ（講座のタイトル、各ステージ、スライドのリスト）
  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;
    });
  };

  // オーナーの設定データ（デフォルトは一般ユーザー向けに 'free'。本人はログイン時に自動で 'pro' に昇格）
  const [cfg, setCfgState] = React.useState(() => {
    const saved = loadLocal('nx_prod_cfg', null);
    if (saved) return saved;
    return {
      plan: 'free', // 一般ユーザーの初期値は無料プラン
      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;
    });
  };

  // ログイン状態を監視し、管理者アカウントであれば自動的にProプランを付与
  React.useEffect(() => {
    const checkUser = async () => {
      if (window.getCurrentUser) {
        const u = await window.getCurrentUser();
        setCurrentUser(u);
        if (isAdminUser(u)) {
          // 管理者アカウントなら自動的に有料プラン（Pro）を有効化
          setCfg((c) => (c.plan === 'pro' ? c : { ...c, plan: 'pro' }));
        }
      }
    };
    checkUser();

    if (window.onAuthStateChange) {
      const sub = window.onAuthStateChange((_, u) => {
        setCurrentUser(u);
        if (isAdminUser(u)) {
          setCfg((c) => (c.plan === 'pro' ? c : { ...c, plan: 'pro' }));
        }
      });
      return () => sub?.unsubscribe && sub.unsubscribe();
    }
  }, []);

  // 受講者の一時状態（現在開いているステージ・ステップ、ログイン状態、ポップアップ表示など）
  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'));
  const [isOwnerPreview, setIsOwnerPreview] = React.useState(false);

  // ハッシュの変更を検知して画面を同期します
  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 }));
    if (opts?.preview !== undefined) setIsOwnerPreview(opts.preview);
    if (opts?.embed !== undefined) setEmbedMode(opts.embed);
    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 activeCfg = { ...cfg, mode: embedMode ? 'embed' : 'url' };

  return (
    <div className="real-app-root">
      {/* オーナーが管理スタジオからプレビュー確認しに来た時だけ上部に表示するスリムな復帰バー */}
      {isOwnerPreview && !isOwner && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, zIndex: 9999,
          background: 'rgba(15,28,24,0.94)', backdropFilter: 'blur(12px)',
          color: '#fff', padding: isMobile ? '8px 12px' : '10px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          boxShadow: '0 4px 20px rgba(0,0,0,0.25)', fontSize: 13, gap: 10
        }}>
          <div className="row" style={{ gap: 8, minWidth: 0, overflow: 'hidden' }}>
            <span style={{ width: 8, height: 8, borderRadius: 9, background: '#6fe0b6', flex: 'none' }} />
            <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: isMobile ? 12 : 13 }}>
              <b>受講者プレビュー中</b> <span style={{ opacity: 0.65, fontSize: 11 }}>（受講生にはこのバーは出ません）</span>
            </span>
          </div>
          <div className="row" style={{ gap: 8, flex: 'none' }}>
            <button className="btn btn-s" style={{ height: 32, fontSize: 11.5, background: 'rgba(255,255,255,0.14)', color: '#fff', border: 'none', padding: '0 10px' }} onClick={() => setEmbedMode(!embedMode)}>
              {embedMode ? '全画面' : '埋め込み枠'}
            </button>
            <button className="btn btn-p" style={{ height: 32, fontSize: 12, padding: '0 14px' }} onClick={() => { setIsOwnerPreview(false); setEmbedMode(false); go('O-03'); }}>
              ← 管理スタジオに戻る
            </button>
          </div>
        </div>
      )}

      <div className="real-view-container" style={{ paddingTop: isOwnerPreview && !isOwner ? 50 : 0 }}>
        {/* 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>
  );
}

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