/* Page: 決済完了ウェルカムページ（?payment=success でリダイレクト） */

function WelcomePage({ nav, progress }) {
  const [lineLinked, setLineLinked] = React.useState(null); // null=loading, true/false

  console.log('[株次郎][welcome-debug] WelcomePage レンダー開始。progress=', progress);

  React.useEffect(() => {
    console.log('[株次郎][welcome-debug] WelcomePage マウント完了（画面に表示されています）');
    fetch('/api/line-link-status')
      .then(r => r.json())
      .then(d => setLineLinked(d.linked === true))
      .catch(() => setLineLinked(false));
  }, []);

  const isPaid    = (progress.membershipStatus || 'free') === 'active';
  const showLine  = isPaid && lineLinked === false;

  const benefits = [
    {
      icon: '📚',
      title: '全コース・全セクター解放',
      desc: '基礎コースから応用コース（テクニカル・ファンダメンタル）まで、全コンテンツを制限なく学習できます。',
    },
    {
      icon: '💬',
      title: 'LINE AIサポート（週3回）',
      desc: '勉強中に疑問が生まれたらLINEで質問！AIが即座に回答します。',
    },
    {
      icon: '🏘️',
      title: 'コミュニティ掲示板',
      desc: '全掲示板を閲覧・投稿できます。同じ目標を持つ仲間と情報交換しましょう。',
    },
    {
      icon: '📧',
      title: 'メールマガジン',
      desc: '株式市場のトレンドや学習のコツをメールでお届けします。',
    },
  ];

  return (
    <main style={{
      minHeight: '100vh',
      background: '#F5F2EB',
      paddingBottom: 80,
      fontFamily: 'var(--font-jp, sans-serif)',
    }}>

      {/* ヘッダーバナー */}
      <div style={{
        background: 'linear-gradient(135deg, #0F1F4D, #1E3A8A)',
        padding: '36px 20px 32px',
        textAlign: 'center',
        color: '#fff',
      }}>
        <div style={{ fontSize: 52, marginBottom: 14, lineHeight: 1 }}>🎉</div>
        <h1 style={{ margin: '0 0 10px', fontSize: 22, fontWeight: 800, letterSpacing: '0.02em' }}>
          有料プランへようこそ！
        </h1>
        <p style={{ margin: 0, fontSize: 14, color: 'rgba(255,255,255,0.8)', lineHeight: 1.7 }}>
          ご登録ありがとうございます。<br />全コンテンツが解放されました！
        </p>
      </div>

      <div style={{ maxWidth: 520, margin: '0 auto', padding: '24px 16px', display: 'flex', flexDirection: 'column', gap: 16 }}>

        {/* Section 1: 有料会員でできること */}
        <section style={wcCard}>
          <WcLabel>有料会員でできること</WcLabel>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {benefits.map(b => (
              <div key={b.title} style={{
                display: 'flex', gap: 14, alignItems: 'flex-start',
                padding: '12px 14px',
                background: '#F8FAFF',
                borderRadius: 10,
                border: '1px solid #E8ECF8',
              }}>
                <span style={{ fontSize: 24, flexShrink: 0, lineHeight: 1.4 }}>{b.icon}</span>
                <div>
                  <p style={{ margin: '0 0 3px', fontSize: 13, fontWeight: 700, color: '#13294B' }}>{b.title}</p>
                  <p style={{ margin: 0, fontSize: 12, color: '#6B7280', lineHeight: 1.6 }}>{b.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Section 2: LINE連携（有料かつ未連携のみ） */}
        {showLine && (
          <section style={{ ...wcCard, border: '2px solid #06C755' }}>
            <WcLabel>まずはLINE連携をしましょう</WcLabel>
            <p style={{ margin: '0 0 16px', fontSize: 13, color: '#374151', lineHeight: 1.7 }}>
              🎓 株次郎のLINE公式アカウントと連携すると、<br />
              学習内容についてAIに質問できるようになります。
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
              <WcStep num={1} text="下のボタンから株次郎を友だち追加" />
              <WcStep num={2} text="設定画面の「LINE連携」から認証コードを発行" />
              <WcStep num={3} text="LINEに認証コードを送信して完了！" />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a
                href="https://lin.ee/TzlOu02"
                target="_blank"
                rel="noopener noreferrer"
                onClick={() => window.trackLineConversion && window.trackLineConversion()}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 8,
                  width: '100%',
                  padding: '14px',
                  borderRadius: 10,
                  background: '#06C755',
                  color: '#fff',
                  fontSize: 15,
                  fontWeight: 700,
                  textDecoration: 'none',
                  boxSizing: 'border-box',
                }}
              >
                <span style={{ fontSize: 20 }}>💬</span>
                友だち追加する
              </a>

              <button
                onClick={() => nav.goMypage()}
                style={{
                  width: '100%',
                  padding: '12px',
                  borderRadius: 10,
                  border: '1.5px solid #D1D5DB',
                  background: '#fff',
                  color: '#374151',
                  fontSize: 13,
                  fontWeight: 600,
                  cursor: 'pointer',
                  textAlign: 'center',
                }}
              >
                設定画面へ →
              </button>
            </div>
          </section>
        )}

        {/* Section 3: 掲示板の案内 */}
        <section style={wcCard}>
          <WcLabel>コミュニティに参加しよう</WcLabel>
          <p style={{ margin: '0 0 16px', fontSize: 13, color: '#374151', lineHeight: 1.7 }}>
            💬 掲示板では他の会員と投資について情報交換できます。<br />
            まずは自己紹介から始めてみましょう！
          </p>
          <button
            onClick={() => nav.goCommunity()}
            style={{
              width: '100%',
              padding: '13px',
              borderRadius: 10,
              border: '1.5px solid #1E3A8A',
              background: '#fff',
              color: '#1E3A8A',
              fontSize: 14,
              fontWeight: 700,
              cursor: 'pointer',
              textAlign: 'center',
            }}
          >
            掲示板を見る →
          </button>
        </section>

        {/* 学習を始めるCTA */}
        <button
          onClick={() => nav.goHome()}
          style={{
            width: '100%',
            padding: '16px',
            borderRadius: 12,
            border: 'none',
            background: '#13294B',
            color: '#fff',
            fontSize: 16,
            fontWeight: 800,
            cursor: 'pointer',
            boxShadow: '0 4px 12px rgba(19,41,75,0.25)',
          }}
        >
          学習を始める →
        </button>

      </div>
    </main>
  );
}

function WcLabel({ children }) {
  return (
    <p style={{
      margin: '0 0 14px',
      fontSize: 11,
      fontWeight: 700,
      color: '#9CA3AF',
      letterSpacing: '0.06em',
      textTransform: 'uppercase',
    }}>{children}</p>
  );
}

function WcStep({ num, text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
      <span style={{
        width: 24, height: 24, borderRadius: '50%',
        background: '#06C755', color: '#fff',
        fontSize: 12, fontWeight: 800, flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{num}</span>
      <p style={{ margin: 0, fontSize: 13, color: '#374151', lineHeight: 1.7 }}>{text}</p>
    </div>
  );
}

const wcCard = {
  background: '#fff',
  borderRadius: 14,
  padding: '20px 18px',
  boxShadow: '0 1px 4px rgba(19,41,75,0.07)',
};

window.WelcomePage = WelcomePage;