// Tempo — plans.jsx : terrain des futurs plans payants. RIEN n'est activé ici.
// En mode dev-unlocked, hasAccess() renvoie toujours true et <Gate> est transparent.
// Aucune dépendance : React global + CSS vars, comme le reste de design/.

// ─── Carte des fonctionnalités → plan requis ──────────────────────
const FEATURES = {
  journal:     { plan: 'starter' },
  backtest:    { plan: 'pro' },
  fondamental: { plan: 'pro' },
};

// Libellés d'affichage des plans (UI en français).
const PLAN_LABELS = { starter: 'Starter', pro: 'Pro' };

// Badges « plan » dans l'UI : désactivés tant que les plans ne sont pas lancés.
const PLAN_BADGES_ENABLED = false;

// Plan requis pour une fonctionnalité (ou null si inconnue).
function planOf(feature) {
  return (FEATURES[feature] && FEATURES[feature].plan) || null;
}

function hasAccess(feature) {
  // ══ POINT D'ANCRAGE UNIQUE DE LA FUTURE VÉRIFICATION D'ABONNEMENT ══
  // Quand les plans seront actifs : lire l'abonnement de l'utilisateur (Supabase)
  // et comparer à FEATURES[feature].plan.
  return true; // mode dev-unlocked — tout est accessible
}

// ─── Gate : enveloppe une fonctionnalité derrière son plan ────────
// Aujourd'hui hasAccess() renvoie true → children rendus tels quels.
// La carte « verrouillée » ci-dessous n'est jamais affichée, mais elle est prête.
function Gate({ feature, children }) {
  if (hasAccess(feature)) return children;

  const plan = planOf(feature);
  const label = PLAN_LABELS[plan] || plan || '—';
  return (
    <div className="card" style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
      padding: '28px 20px', textAlign: 'center',
    }}>
      {/* Cadenas en SVG inline, currentColor → suit le thème clair/sombre */}
      <div style={{
        width: 40, height: 40, borderRadius: 12,
        background: 'var(--bg-soft)', border: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--fg-3)',
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="4" y="11" width="16" height="10" rx="2" />
          <path d="M8 11V7a4 4 0 0 1 8 0v4" />
        </svg>
      </div>
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>
        Fonctionnalité du plan {label}
      </div>
      <div style={{ fontSize: 12.5, color: 'var(--fg-3)', maxWidth: 320 }}>
        Cette fonctionnalité sera disponible avec le plan {label}.
      </div>
      <span className="pill" style={{
        background: 'var(--blue-soft)', color: 'var(--blue-600)',
        border: '1px solid var(--blue-border)',
      }}>
        Plan {label}
      </span>
    </div>
  );
}

Object.assign(window, { FEATURES, hasAccess, Gate, planOf, PLAN_BADGES_ENABLED });