// Screen Gallery — horizontal scrolling rail of all app screens.

const GALLERY_SCREENS = [
  { key: 'onboarding', label: 'はじめてのご挨拶', latin: 'Welcome', Screen: ScreenOnboarding },
  { key: 'home',       label: 'ホーム',           latin: 'Home',    Screen: ScreenHome },
  { key: 'menu',       label: '占いメニュー',      latin: 'Menu',    Screen: ScreenMenu },
  { key: 'today',      label: '今日の運勢',        latin: 'Today',   Screen: ScreenTodayResult },
  { key: 'dreamIn',    label: '夢占い入力',        latin: 'Dream',   Screen: ScreenDreamInput },
  { key: 'dreamOut',   label: '夢占い結果',        latin: 'Reading', Screen: ScreenDreamResult },
  { key: 'tarot',      label: 'タロット',          latin: 'Tarot',   Screen: ScreenTarot },
  { key: 'mypage',     label: 'マイページ',        latin: 'Mine',    Screen: ScreenMypage },
  { key: 'paid',       label: '占い師に相談',      latin: 'Readers', Screen: ScreenPaidMenu },
  { key: 'counselor',  label: '占い師プロフィール', latin: 'Profile', Screen: ScreenCounselor },
];

const ScreenGallery = ({ theme }) => {
  const t = getAppTheme(theme);
  const railRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  // Update active dot based on scroll position.
  const onScroll = React.useCallback(() => {
    const rail = railRef.current;
    if (!rail) return;
    const cardW = rail.firstChild?.offsetWidth || 240;
    const idx = Math.round(rail.scrollLeft / (cardW + 16));
    setActive(Math.min(GALLERY_SCREENS.length - 1, Math.max(0, idx)));
  }, []);

  const scrollBy = (dir) => {
    const rail = railRef.current;
    if (!rail) return;
    const cardW = rail.firstChild?.offsetWidth || 240;
    rail.scrollBy({ left: dir * (cardW + 16), behavior: 'smooth' });
  };

  return (
    <section style={{ paddingLeft: 0, paddingRight: 0 }}>
      <div style={{ padding: '0 28px', textAlign: 'center', marginBottom: 22 }}>
        <div className="eyebrow">— Inside Mirise —</div>
        <h2 className="section-title">
          実際の画面を、<br/>
          <em>すこし覗いてみる。</em>
        </h2>
        <p style={{
          fontSize: 12, color: 'var(--ink-soft)',
          letterSpacing: '0.1em', marginTop: 14, lineHeight: 1.9,
        }}>
          登録時の案内から占いメニュー、<br/>
          結果画面や相談画面まで確認できます。
        </p>
      </div>

      {/* Rail */}
      <div
        ref={railRef}
        className="rail"
        onScroll={onScroll}
        style={{
          display: 'flex', gap: 16,
          overflowX: 'auto', overflowY: 'visible',
          padding: '20px 28px 28px',
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
        }}
      >
        {GALLERY_SCREENS.map(({ key, label, latin, Screen }, i) => (
          <div key={key} style={{
            flex: '0 0 auto',
            scrollSnapAlign: 'center',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            gap: 12,
          }}>
            <div style={{
              padding: 6,
              borderRadius: 36,
              background: 'rgba(255, 255, 255, 0.45)',
              border: '1px solid rgba(203, 168, 104, 0.3)',
              boxShadow: '0 20px 40px -20px rgba(150, 100, 130, 0.35)',
              backdropFilter: 'blur(8px)',
            }}>
              <PhoneScaled scale={0.7}>
                <Screen t={t}/>
              </PhoneScaled>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div className="latin" style={{
                fontSize: 10, color: 'var(--gold)',
                letterSpacing: '0.3em',
              }}>{`${String(i + 1).padStart(2, '0')} · ${latin}`}</div>
              <div style={{
                fontFamily: 'var(--title-font)', fontSize: 13,
                letterSpacing: '0.1em', color: 'var(--ink)',
                marginTop: 4,
              }}>{label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Pagination dots + arrows */}
      <div style={{
        padding: '0 28px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 10,
      }}>
        <ArrowButton onClick={() => scrollBy(-1)} dir="left"/>

        <div style={{
          display: 'flex', gap: 6, alignItems: 'center',
          flex: 1, justifyContent: 'center',
        }}>
          {GALLERY_SCREENS.map((_, i) => (
            <div key={i} style={{
              width: i === active ? 18 : 5,
              height: 5,
              borderRadius: 3,
              background: i === active ? 'var(--accent-deep)' : 'rgba(167, 137, 98, 0.4)',
              transition: 'all 0.3s ease',
            }}/>
          ))}
        </div>

        <ArrowButton onClick={() => scrollBy(1)} dir="right"/>
      </div>
    </section>
  );
};

const ArrowButton = ({ onClick, dir }) => (
  <button onClick={onClick} style={{
    width: 36, height: 36, borderRadius: '50%',
    background: 'rgba(255, 255, 255, 0.7)',
    border: '1px solid rgba(203, 168, 104, 0.35)',
    color: 'var(--ink)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer',
    backdropFilter: 'blur(8px)',
  }}>
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d={dir === 'left' ? 'M14 6l-6 6 6 6' : 'M10 6l6 6-6 6'}
        stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  </button>
);

window.ScreenGallery = ScreenGallery;