/* Shared chrome: sidebar nav + prototype tab bar */

// ── チャプター進捗ヘルパー ─────────────────────────────────────────
function chapterStatus(ch, completed) {
  const total = ch.sectorCount;
  const done  = ch.lessons.filter(l => completed.includes(l.slug)).length;
  // if (done === 0 && ch.id > 1) return { status: 'locked', progress: 0, done };  // プレビュー用コメントアウト済み
  if (done === total) return { status: 'done', progress: 100, done };
  if (done > 0)      return { status: 'active', progress: Math.round(done / total * 100), done };
  return { status: 'active', progress: 0, done };  // ch1 always unlocked
}

function Sidebar({ page, nav, progress, chapterId }) {
  const chapters  = window.APP_DATA.chapters;
  const completed = progress.completed;

  const basicChapters   = chapters.filter(ch => !ch.isBonus && !ch.isIntro && !ch.isApplied);
  const isBasicComplete = basicChapters.every(ch => chapterStatus(ch, completed).status === "done");
  const basicDoneCount  = basicChapters.filter(ch => chapterStatus(ch, completed).status === "done").length;

  const items = [
    { key: "dashboard", label: "ホーム",       ico: "🏠", onClick: () => nav.goHome() },
    { key: "studying",  label: "学習中",       ico: "📖", onClick: () => nav.goStudying() },
    { key: "guide",     label: "始め方・準備", ico: "📋", onClick: () => nav.goGuide() },
    { key: "about",     label: "株次郎とは？", ico: "ℹ️",  onClick: () => nav.goAbout() },
  ];

  const totalSectors = chapters.reduce((s, c) => s + c.sectorCount, 0);
  const doneSectors  = completed.length;
  const streakDays   = Math.min(doneSectors, 12);

  return (
    <aside className="sidebar">
      <div className="sidebar-logo" onClick={() => nav.goAbout()} style={{ cursor: 'pointer' }}>
        <div className="mark">株</div>
        <div className="name">株次郎<small>KABUJIRO</small></div>
      </div>

      <div className="nav-section-label">MENU</div>
      {items.map(it => (
        <button key={it.key}
          className={`nav-item ${(page === it.key || (page === "quiz" && it.key === "lesson") || (page === "guide-article" && it.key === "guide")) ? "active" : ""}`}
          onClick={() => it.onClick && it.onClick()}>
          <span className="ico" aria-hidden>{it.ico}</span>
          <span>{it.label}</span>
        </button>
      ))}

      <div className="nav-section-label">基礎コース</div>
      {chapters.filter(ch => !ch.isBonus && !ch.isApplied).map(ch => {
        const st = chapterStatus(ch, completed);
        const active = chapterId === ch.id && (page === "chapter" || page === "lesson" || page === "quiz");
        return (
          <button key={ch.id}
            className={`nav-item ${active ? "active" : ""}`}
            disabled={st.status === "locked"}
            onClick={() => st.status !== "locked" && nav.goChapter(ch.id)}>
            <span className="ico">{ch.icon}</span>
            <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>{ch.title}</span>
            {st.status === "done"   && <span style={{ fontSize: 10, color: "var(--green-500)" }}>✓</span>}
            {st.status === "locked" && <span style={{ fontSize: 10, color: "var(--ink-300)" }}>🔒</span>}
            {st.status === "active" && st.done > 0 && <span style={{ fontSize: 10, color: "var(--gold-600)" }}>{st.done}/{ch.sectorCount}</span>}
          </button>
        );
      })}

      <div className="nav-section-label">番外編</div>
      {chapters.filter(ch => ch.isBonus).map(ch => {
        const st = chapterStatus(ch, completed);
        const active = chapterId === ch.id && (page === "chapter" || page === "lesson" || page === "quiz");
        return (
          <button key={ch.id}
            className={`nav-item ${active ? "active" : ""}`}
            onClick={() => nav.goChapter(ch.id)}>
            <span className="ico">{ch.icon}</span>
            <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>{ch.title}</span>
            {st.status === "done" && <span style={{ fontSize: 10, color: "var(--green-500)" }}>✓</span>}
            {st.status === "active" && st.done > 0 && <span style={{ fontSize: 10, color: "var(--gold-600)" }}>{st.done}/{ch.sectorCount}</span>}
          </button>
        );
      })}

      <div className="nav-section-label">応用コース</div>
      {isBasicComplete ? (
        <button
          className={`nav-item ${page === "applied" ? "active" : ""}`}
          onClick={() => nav.goApplied()}>
          <span className="ico">🚀</span>
          <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>コースを開く</span>
        </button>
      ) : (
        <div className="nav-item" style={{ opacity: 0.55, cursor: "default", pointerEvents: "none" }}>
          <span className="ico">🔒</span>
          <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>基礎修了で解放 ({basicDoneCount}/{basicChapters.length})</span>
        </div>
      )}

      <div className="nav-section-label">その他</div>
      <button
        className={`nav-item ${page === "badges" ? "active" : ""}`}
        onClick={() => nav.goBadges()}>
        <span className="ico">🏆</span><span>達成バッジ</span>
      </button>
      <button className={`nav-item ${page === "mypage" ? "active" : ""}`} onClick={() => nav.goMypage()}><span className="ico">⚙️</span><span>設定</span></button>

      <div className="streak-card">
        <div className="streak-num"><span className="mono">{Math.max(1, doneSectors)}</span><span>セクター完了</span></div>
        <div className="streak-label">🔥 学習中</div>
        <div className="streak-dots">
          {Array.from({ length: 7 }).map((_, i) => (
            <span key={i} className={`dot ${i < Math.min(doneSectors % 7 + 1, 7) ? "on" : ""}`} />
          ))}
        </div>
        <div className="streak-foot">{totalSectors - doneSectors} セクター残り</div>
      </div>

      <div className="sidebar-legal">
        <a href="/legal/tokushoho">特定商取引法</a>
        <a href="/legal/terms">利用規約</a>
        <a href="/legal/privacy">プライバシー</a>
        <a href="https://mirai-finance.com" target="_blank" rel="noopener noreferrer">運営会社</a>
        <div className="sidebar-copyright">© 2026 MIRAI合同会社</div>
      </div>
    </aside>
  );
}

function ProtoTabs({ page, setPage }) {
  const tabs = [
    { key: "dashboard", label: "ダッシュボード", num: "01" },
    { key: "chapter",   label: "チャプター詳細", num: "02" },
    { key: "lesson",    label: "学習コンテンツ", num: "03" },
    { key: "quiz",      label: "ミニテスト",     num: "04" },
  ];
  return (
    <div className="proto-shell">
      <div className="proto-tabs">
        {tabs.map(t => (
          <button key={t.key} className={`proto-tab ${page === t.key ? "active" : ""}`} onClick={() => setPage(t.key)}>
            <span className="num">{t.num}</span>{t.label}
          </button>
        ))}
      </div>
    </div>
  );
}

// クイズ合格 or 完了済み か
// progress = { completed: string[], quizPassed: string[] }
function isLessonCleared(slug, lessonStore, progress) {
  const d = lessonStore[slug];
  const quizPassed = (progress && progress.quizPassed) ? progress.quizPassed : [];
  const completed  = (progress && progress.completed)  ? progress.completed  : [];
  // paid 有料レッスンは quiz=[] だが hasQuiz=true なので両方チェック
  if (d?.hasQuiz || d?.quiz?.length > 0) return quizPassed.includes(slug);
  return completed.includes(slug);
}

// スラッグベースの順番解放チェック（lib/lesson-unlock.ts のクライアント版）
// APP_DATA.chapters に courseType フィールドが必要（generate-spa で付与済み）
function isSlugUnlocked(slug, progress) {
  var chapters    = window.APP_DATA.chapters;
  var lessonStore = window.APP_DATA.lessons;

  // このスラッグが属するチャプターとセクター位置を探す
  var myChapter  = null;
  var sectorIdx  = -1;
  for (var ci = 0; ci < chapters.length; ci++) {
    var idx = chapters[ci].lessons.findIndex(function(l) { return l.slug === slug; });
    if (idx !== -1) { myChapter = chapters[ci]; sectorIdx = idx; break; }
  }
  if (!myChapter) return true; // 不明なスラッグは開放扱い

  var courseType = myChapter.courseType;
  if (courseType === 'open' || courseType === 'bonus') return true;

  if (courseType === 'basic') {
    // 基礎コース全体をフラット化して前のセクターのクリア状態を確認
    var basicChs = chapters.filter(function(c) { return c.courseType === 'basic'; });
    var basicFlat = [];
    for (var bi = 0; bi < basicChs.length; bi++) {
      for (var si = 0; si < basicChs[bi].lessons.length; si++) {
        basicFlat.push(basicChs[bi].lessons[si]);
      }
    }
    var flatIdx = basicFlat.findIndex(function(l) { return l.slug === slug; });
    if (flatIdx <= 0) return true;
    var prev = basicFlat[flatIdx - 1];
    return isLessonCleared(prev.slug, lessonStore, progress);
  }

  if (courseType === 'applied') {
    // 基礎コース全クリア確認
    var basicChs2 = chapters.filter(function(c) { return c.courseType === 'basic'; });
    var basicFlat2 = [];
    for (var bi2 = 0; bi2 < basicChs2.length; bi2++) {
      for (var si2 = 0; si2 < basicChs2[bi2].lessons.length; si2++) {
        basicFlat2.push(basicChs2[bi2].lessons[si2]);
      }
    }
    var allBasicCleared = basicFlat2.every(function(l) {
      return isLessonCleared(l.slug, lessonStore, progress);
    });
    if (!allBasicCleared) return false;
    // チャプター内セクター順
    if (sectorIdx <= 0) return true;
    var prevL = myChapter.lessons[sectorIdx - 1];
    return isLessonCleared(prevL.slug, lessonStore, progress);
  }

  return true;
}

// セクターにアクセスできるか（4th 引数は progress オブジェクト）
function isLessonAccessible(idx, chLessons, lessonStore, progress) {
  var lesson = chLessons[idx];
  if (!lesson) return true;
  return isSlugUnlocked(lesson.slug, progress);
}

function MobileAppBar({ progress, nav, page }) {
  const doneSectors = progress.completed.length;
  return (
    <div className="mobile-appbar">
      <div className="mb-logo" onClick={() => nav && nav.goAbout()} style={{ cursor: 'pointer' }}>
        <img src="assets/kabujiro_mainicon.jpg" alt="株次郎" className="mb-avatar" />
        <span>株次郎</span>
      </div>
      {page !== "about" && (
        <div className="mb-streak">
          <span>🔥</span>
          <span className="mono">{Math.max(1, doneSectors)}</span>
          <span>セクター完了</span>
        </div>
      )}
    </div>
  );
}

function MobileTabBar({ page, nav, chapterId, progress }) {
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const chapters  = window.APP_DATA.chapters;
  const completed = progress ? progress.completed : [];

  const basicChapters   = chapters.filter(ch => !ch.isBonus && !ch.isIntro && !ch.isApplied);
  const isBasicComplete = basicChapters.every(ch => chapterStatus(ch, completed).status === "done");
  const basicDoneCount  = basicChapters.filter(ch => chapterStatus(ch, completed).status === "done").length;

  const activeKey = page === "quiz" ? "lesson" : (page === "guide-article" ? "guide" : page);

  const tabs = [
    { key: "dashboard", label: "ホーム",   ico: "🏠", onClick: () => nav.goHome() },
    { key: "chapter",   label: "基礎",     ico: "📚", onClick: () => nav.goChapter(chapterId || 1) },
    { key: "applied",   label: "応用",     ico: isBasicComplete ? "🚀" : "🔒", onClick: () => nav.goApplied(), locked: !isBasicComplete },
    { key: "studying",  label: "学習中",   ico: "📖", onClick: () => nav.goStudying() },
    { key: "menu",      label: "メニュー", ico: "☰",  onClick: () => setDrawerOpen(o => !o) },
  ];

  const closeDrawer = () => setDrawerOpen(false);

  const menuItems = [
    { key: "dashboard", label: "ホーム",       ico: "🏠", onClick: () => { nav.goHome();                   closeDrawer(); } },
    { key: "chapter",   label: "基礎コース",   ico: "📚", onClick: () => { nav.goChapter(chapterId || 1); closeDrawer(); } },
    { key: "studying",  label: "学習中",       ico: "📖", onClick: () => { nav.goStudying();               closeDrawer(); } },
    { key: "guide",     label: "始め方・準備", ico: "📋", onClick: () => { nav.goGuide();                  closeDrawer(); } },
    { key: "about",     label: "株次郎とは？", ico: "ℹ️",  onClick: () => { nav.goAbout();                  closeDrawer(); } },
  ];

  return (
    <>
      {/* ── オーバーレイ ── */}
      {drawerOpen && (
        <div className="mb-drawer-overlay" onClick={closeDrawer} />
      )}

      {/* ── スライドインドロワー ── */}
      <div className={`mb-drawer ${drawerOpen ? "open" : ""}`}>
        {/* ヘッダー */}
        <div className="mb-drawer-header">
          <div className="sidebar-logo" onClick={() => { nav.goAbout(); closeDrawer(); }} style={{ cursor: 'pointer' }}>
            <div className="mark">株</div>
            <div className="name">株次郎<small>KABUJIRO</small></div>
          </div>
          <div className="mb-drawer-done">🔥 {Math.max(1, completed.length)} セクター完了</div>
        </div>

        {/* MENU */}
        <div className="nav-section-label">MENU</div>
        {menuItems.map(it => (
          <button
            key={it.key}
            className={`nav-item ${(activeKey === it.key || (activeKey === "quiz" && it.key === "lesson") || (activeKey === "guide-article" && it.key === "guide")) ? "active" : ""}`}
            onClick={() => it.onClick && it.onClick()}
            disabled={!it.onClick}
          >
            <span className="ico" aria-hidden>{it.ico}</span>
            <span>{it.label}</span>
          </button>
        ))}

        {/* 基礎コース */}
        <div className="nav-section-label">基礎コース</div>
        {chapters.filter(ch => !ch.isBonus && !ch.isApplied).map(ch => {
          const st     = chapterStatus(ch, completed);
          const active = chapterId === ch.id && (page === "chapter" || page === "lesson" || page === "quiz");
          return (
            <button key={ch.id}
              className={`nav-item ${active ? "active" : ""}`}
              disabled={st.status === "locked"}
              onClick={() => { if (st.status !== "locked") { nav.goChapter(ch.id); closeDrawer(); } }}
            >
              <span className="ico">{ch.icon}</span>
              <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>{ch.title}</span>
              {st.status === "done"                    && <span style={{ fontSize: 10, color: "var(--green-500)" }}>✓</span>}
              {st.status === "locked"                  && <span style={{ fontSize: 10, color: "var(--ink-300)" }}>🔒</span>}
              {st.status === "active" && st.done > 0   && <span style={{ fontSize: 10, color: "var(--gold-600)" }}>{st.done}/{ch.sectorCount}</span>}
            </button>
          );
        })}

        {/* 番外編 */}
        <div className="nav-section-label">番外編</div>
        {chapters.filter(ch => ch.isBonus).map(ch => {
          const st     = chapterStatus(ch, completed);
          const active = chapterId === ch.id && (page === "chapter" || page === "lesson" || page === "quiz");
          return (
            <button key={ch.id}
              className={`nav-item ${active ? "active" : ""}`}
              onClick={() => { nav.goChapter(ch.id); closeDrawer(); }}
            >
              <span className="ico">{ch.icon}</span>
              <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>{ch.title}</span>
              {st.status === "done"                  && <span style={{ fontSize: 10, color: "var(--green-500)" }}>✓</span>}
              {st.status === "active" && st.done > 0 && <span style={{ fontSize: 10, color: "var(--gold-600)" }}>{st.done}/{ch.sectorCount}</span>}
            </button>
          );
        })}

        {/* 応用コース */}
        <div className="nav-section-label">応用コース</div>
        {isBasicComplete ? (
          <button
            className={`nav-item ${page === "applied" ? "active" : ""}`}
            onClick={() => { nav.goApplied(); closeDrawer(); }}>
            <span className="ico">🚀</span>
            <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>コースを開く</span>
          </button>
        ) : (
          <div className="nav-item" style={{ opacity: 0.55, cursor: "default", pointerEvents: "none" }}>
            <span className="ico">🔒</span>
            <span style={{ flex: 1, textAlign: "left", fontSize: 12 }}>基礎修了で解放 ({basicDoneCount}/{basicChapters.length})</span>
          </div>
        )}

        {/* その他 */}
        <div className="nav-section-label">その他</div>
        <button
          className={`nav-item ${page === "badges" ? "active" : ""}`}
          onClick={() => { nav.goBadges(); closeDrawer(); }}>
          <span className="ico">🏆</span><span>達成バッジ</span>
        </button>
        <button className={`nav-item ${page === "mypage" ? "active" : ""}`} onClick={() => { nav.goMypage(); closeDrawer(); }}><span className="ico">⚙️</span><span>設定</span></button>
        {!window.currentUser && (
          <a
            className="nav-item"
            href="/login"
            style={{ textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'center', gap: 10, fontWeight: 600 }}
          >
            <span className="ico">🔑</span><span>ログイン</span>
          </a>
        )}
      </div>

      {/* ── タブバー ── */}
      <nav className="mobile-tabbar">
        {tabs.map(it => {
          const isActive = it.key === "menu" ? drawerOpen : activeKey === it.key;
          return (
            <button
              key={it.key}
              className={`mt-item ${isActive ? "active" : ""} ${it.locked ? "mt-locked" : ""}`}
              onClick={() => it.onClick && it.onClick()}
              disabled={!it.onClick}
            >
              <span className="ico" style={it.key === "menu" ? { fontFamily: "sans-serif", fontWeight: 700 } : {}}>{it.ico}</span>
              <span>{it.label}</span>
            </button>
          );
        })}
      </nav>
    </>
  );
}

window.chapterStatus      = chapterStatus;
window.isLessonCleared    = isLessonCleared;
window.isSlugUnlocked     = isSlugUnlocked;
window.isLessonAccessible = isLessonAccessible;
window.Sidebar       = Sidebar;
window.ProtoTabs     = ProtoTabs;
window.MobileAppBar  = MobileAppBar;
window.MobileTabBar  = MobileTabBar;