// PaywallModalDemo — page de test visuel (route #/paywall-demo)
// Permet de tester PaywallModal sans câbler le gating réel.
// Accessible via window.location.hash = '#/paywall-demo'

(function () {
  const { useState: useDemoS } = React;

  const SCENARIOS = [
    {
      label: 'Tier trop bas — Comparateur',
      props: {
        feature: 'compare_page',
        featureLabel: 'Comparateur de 4 biens',
        requiredTier: 'investisseur',
        currentTier: 'decouverte',
        reason: 'tier_too_low',
      },
    },
    {
      label: 'Tier trop bas — AnalyzePage',
      props: {
        feature: 'analyze_page',
        featureLabel: 'AnalyzePage (IRR + 3 scénarios 10 ans)',
        requiredTier: 'pro',
        currentTier: 'investisseur',
        reason: 'tier_too_low',
      },
    },
    {
      label: 'Tier trop bas — Fiscalité QC',
      props: {
        feature: 'fiscalite_qc',
        featureLabel: 'Module fiscalité QC (CCA + gain en capital)',
        requiredTier: 'pro',
        currentTier: 'decouverte',
        reason: 'tier_too_low',
      },
    },
    {
      label: 'Quota dépassé — Analyses détaillées',
      props: {
        feature: 'drawer_detail',
        featureLabel: 'Analyses détaillées',
        requiredTier: 'investisseur',
        currentTier: 'decouverte',
        reason: 'quota_exceeded',
        quotaInfo: {
          used: 5,
          limit: 5,
          resetsOn: new Date(Date.now() + 18 * 24 * 60 * 60 * 1000).toISOString(),
        },
      },
    },
    {
      label: 'Tier trop bas — Entreprise',
      props: {
        feature: 'api_access',
        featureLabel: 'Accès API + white-label',
        requiredTier: 'entreprise',
        currentTier: 'pro',
        reason: 'tier_too_low',
      },
    },
  ];

  function PaywallModalDemo({ onBack }) {
    const [openIdx, setOpenIdx] = useDemoS(null);

    return (
      <div style={{
        minHeight: '100vh',
        background: 'var(--bg)',
        fontFamily: 'var(--sans, Inter, sans-serif)',
        color: 'var(--ink-1, #1a1a1a)',
        overflowY: 'auto',
      }}>
        {/* Nav */}
        <div style={{
          position: 'sticky', top: 0, zIndex: 40,
          borderBottom: '1px solid var(--line)',
          background: 'var(--bg-elev)',
          padding: '0 24px', height: 56,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <button
            onClick={onBack || (() => window.navigateTo('#/'))}
            style={{
              display: 'flex', alignItems: 'center', gap: 6,
              background: 'none', border: 'none', cursor: 'pointer',
              color: 'var(--ink-2)', fontSize: 14, fontFamily: 'inherit',
              padding: '4px 0',
            }}
          >
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M10 3L5 8l5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Retour
          </button>
          <span style={{ fontWeight: 600, fontSize: 15 }}>
            Demo — PaywallModal
          </span>
          <div style={{ width: 60 }} />
        </div>

        {/* Contenu */}
        <div style={{ maxWidth: 680, margin: '0 auto', padding: '48px 24px' }}>
          <h1 style={{
            fontFamily: 'var(--serif, Fraunces, serif)',
            fontSize: 28, fontWeight: 500, marginBottom: 8,
            letterSpacing: '-0.01em',
          }}>
            PaywallModal — Scénarios de test
          </h1>
          <p style={{
            fontSize: 14, color: 'var(--ink-2, #555)', marginBottom: 40, lineHeight: 1.6,
          }}>
            Cliquez sur un scénario pour ouvrir la modal correspondante.
            Testez : fermeture par Echap, clic sur le backdrop, bouton "Plus tard", bouton "Voir les plans".
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {SCENARIOS.map((sc, i) => (
              <button
                key={i}
                onClick={() => setOpenIdx(i)}
                style={{
                  textAlign: 'left', padding: '16px 20px',
                  border: '1.5px solid var(--line, #e8e8e0)',
                  borderRadius: 'var(--radius-lg, 12px)',
                  background: 'var(--bg-elev, #fff)',
                  cursor: 'pointer', fontFamily: 'inherit',
                  transition: 'box-shadow 0.15s, border-color 0.15s',
                  boxShadow: 'var(--shadow-sm)',
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                  e.currentTarget.style.borderColor = 'var(--accent, oklch(0.36 0.07 155))';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.boxShadow = 'var(--shadow-sm)';
                  e.currentTarget.style.borderColor = 'var(--line, #e8e8e0)';
                }}
              >
                <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>
                  {sc.label}
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3, #888)' }}>
                  feature: <code style={{ background: 'var(--bg-warm)', padding: '1px 5px', borderRadius: 4 }}>{sc.props.feature}</code>
                  {' · '}
                  requiredTier: <code style={{ background: 'var(--bg-warm)', padding: '1px 5px', borderRadius: 4 }}>{sc.props.requiredTier}</code>
                  {' · '}
                  reason: <code style={{ background: 'var(--bg-warm)', padding: '1px 5px', borderRadius: 4 }}>{sc.props.reason}</code>
                </div>
              </button>
            ))}
          </div>

          <div style={{
            marginTop: 48, padding: '16px 20px',
            background: 'var(--bg-warm)', borderRadius: 10,
            border: '1px solid var(--line)',
            fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.7,
          }}>
            <strong>Note :</strong> Cette page est uniquement pour le test visuel de <code>PaywallModal</code>.
            Le gating réel sera branché via <code>tier-gate.js</code> (Sprint 2 PR1).
          </div>
        </div>

        {/* Modals */}
        {SCENARIOS.map((sc, i) => (
          <PaywallModal
            key={i}
            open={openIdx === i}
            onClose={() => setOpenIdx(null)}
            {...sc.props}
          />
        ))}
      </div>
    );
  }

  window.PaywallModalDemo = PaywallModalDemo;
})();