/* Page: 設定・マイページ（MyPage） */

function MyPage({ nav, progress }) {
  const user             = window.currentUser || {};
  const email            = user.email || '—';
  const membershipStatus = progress.membershipStatus || 'free';
  const isPaid           = membershipStatus === 'paid';

  const [signingOut, setSigningOut] = React.useState(false);

  async function handleSignOut() {
    if (signingOut) return;
    setSigningOut(true);
    try {
      await fetch('/api/signout', { method: 'POST' });
    } catch (_) {}
    window.location.href = '/kabujiro-app/index.html?page=about';
  }

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

      {/* ヘッダー */}
      <div style={{
        background: '#13294B',
        padding: '16px 20px',
        display: 'flex',
        alignItems: 'center',
        gap: 12,
      }}>
        <button
          onClick={() => nav.goHome()}
          style={{
            background: 'none',
            border: 'none',
            color: 'rgba(255,255,255,0.7)',
            fontSize: 22,
            cursor: 'pointer',
            padding: '0 4px',
            lineHeight: 1,
          }}
          aria-label="戻る"
        >←</button>
        <h1 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: '#fff' }}>設定・マイページ</h1>
      </div>

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

        {/* アカウント情報 */}
        <section style={cardStyle}>
          <SectionLabel>アカウント情報</SectionLabel>
          <InfoRow label="メールアドレス" value={email} />
          <InfoRow
            label="会員種別"
            value={
              <span style={{
                display: 'inline-block',
                background: isPaid ? '#1F6F5C' : '#E5E7EB',
                color: isPaid ? '#fff' : '#374151',
                fontSize: 12,
                fontWeight: 700,
                padding: '2px 10px',
                borderRadius: 20,
              }}>
                {isPaid ? '有料会員' : '無料会員'}
              </span>
            }
          />
        </section>

        {/* 支払い・解約 */}
        <section style={cardStyle}>
          <SectionLabel>支払い方法・解約</SectionLabel>
          <div style={{
            background: '#F3F4F6',
            border: '1px dashed #D1D5DB',
            borderRadius: 10,
            padding: '16px',
            textAlign: 'center',
          }}>
            <p style={{ margin: '0 0 4px', fontSize: 13, color: '#6B7280', fontWeight: 600 }}>
              🔧 準備中
            </p>
            <p style={{ margin: 0, fontSize: 12, color: '#9CA3AF', lineHeight: 1.6 }}>
              もうすぐこちらから支払い方法の変更・<br />解約手続きが行えるようになります。
            </p>
          </div>
          {/* TODO: Stripe カスタマーポータル実装後にリンクを差し替える */}
          {/* <a href="https://billing.stripe.com/..." target="_blank" rel="noopener noreferrer" style={linkBtnStyle}>
            支払い方法を変更・解約する →
          </a> */}
        </section>

        {/* ログアウト */}
        <section style={cardStyle}>
          <SectionLabel>ログアウト</SectionLabel>
          <p style={{ margin: '0 0 14px', fontSize: 13, color: '#6B7280', lineHeight: 1.6 }}>
            ログアウトすると、このデバイスでのセッションが終了します。
          </p>
          <button
            onClick={handleSignOut}
            disabled={signingOut}
            style={{
              width: '100%',
              padding: '12px',
              borderRadius: 10,
              border: '1.5px solid #E5193A',
              background: signingOut ? '#FEE2E2' : '#fff',
              color: '#E5193A',
              fontSize: 14,
              fontWeight: 700,
              cursor: signingOut ? 'default' : 'pointer',
              transition: 'background .15s',
            }}
          >
            {signingOut ? 'ログアウト中…' : 'ログアウトする'}
          </button>
        </section>

      </div>
    </main>
  );
}

/* ── 共通スタイルヘルパー ── */
const cardStyle = {
  background: '#fff',
  borderRadius: 14,
  padding: '20px 18px',
  boxShadow: '0 1px 4px rgba(19,41,75,0.07)',
};

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

function InfoRow({ label, value }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '10px 0',
      borderBottom: '1px solid #F3F4F6',
      gap: 12,
    }}>
      <span style={{ fontSize: 13, color: '#6B7280', flexShrink: 0 }}>{label}</span>
      <span style={{ fontSize: 13, color: '#1C2A3A', fontWeight: 600, wordBreak: 'break-all', textAlign: 'right' }}>
        {value}
      </span>
    </div>
  );
}