/* WalletLab - abonnement : pricing → Stripe Checkout */
const { useState } = React;

const BICONS = {
  check:   "m4.5 12.75 6 6 9-13.5",
  arrow:   "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3",
  back:    "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18",
  lock:    "M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z",
  card:    "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z",
  shield:  "M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z",
  info:    "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z",
  spinner: "M12 3v3m0 12v3M4.22 4.22l2.12 2.12m9.9 9.9 2.12 2.12M3 12h3m12 0h3M4.22 19.78l2.12-2.12m9.9-9.9 2.12-2.12",
};

function Ic({ name, size = 18, sw = 1.7 }) {
  return (
    <svg className="ic" width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d={BICONS[name]} />
    </svg>
  );
}

const PRICE = 29;
const TRIAL_DAYS = 14;

const FEATURES = [
  ['Clients illimités',            'aucune limite sur votre base clients'],
  ['Push notifications illimitées','sur l\'écran verrouillé, sans appli'],
  ['Branding complet',             'logo, couleurs et design de carte'],
  ['CRM complet + export CSV',     'historique, tampons, récompenses'],
  ['Analytics avancés',            'visites, tampons, rétention, récompenses'],
  ['Support prioritaire e-mail',   'réponse sous 24 h ouvrées'],
];

function StepBar({ step }) {
  return (
    <div className="bt-steps">
      <div className={`bt-step ${step === 1 ? 'on' : 'done'}`}>
        <span className="bts-num">{step > 1 ? <Ic name="check" size={13} sw={3} /> : '1'}</span>
        <span>Formule</span>
      </div>
      <div className="bt-sep"></div>
      <div className={`bt-step ${step === 2 ? 'on' : ''}`}>
        <span className="bts-num">2</span>
        <span>Paiement</span>
      </div>
    </div>
  );
}

function Pricing({ onContinue }) {
  const firstCharge = new Date(Date.now() + TRIAL_DAYS * 864e5)
    .toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });

  return (
    <div className="bill-stage">
      <div className="pr-head">
        <div className="pr-eyebrow">Abonnement WalletLab</div>
        <h1 className="pr-title">Une formule. Tout compris.</h1>
        <p className="pr-sub">Toutes les fonctionnalités, sans limite de membres ni de cartes. Essai gratuit de {TRIAL_DAYS} jours, CB requise dès l'inscription.</p>
      </div>

      <div className="plan">
        <div className="plan-left">
          <span className="plan-badge">Plan unique Pro</span>
          <div className="plan-name">WalletLab Pro</div>
          <div className="plan-tag">Pour les commerces et chaînes qui veulent fidéliser sans appli.</div>

          <div className="plan-price">
            <span className="cur">€</span>
            <span className="amt">{PRICE}</span>
            <span className="per">/ mois HT · par enseigne</span>
          </div>
          <div className="plan-billed">
            Sans engagement · résiliable à tout moment · premier prélèvement le <b>{firstCharge}</b>
          </div>

          <div className="plan-spacer"></div>

          <button className="btn green plan-cta" onClick={onContinue}>
            Démarrer l'essai gratuit <Ic name="arrow" size={18} sw={2} />
          </button>
          <div className="plan-reassure">
            <div className="r"><Ic name="check" size={15} sw={2.4} />{TRIAL_DAYS} jours gratuits, puis {PRICE} €/mois</div>
            <div className="r"><Ic name="check" size={15} sw={2.4} />Aucune carte débitée pendant l'essai</div>
            <div className="r"><Ic name="check" size={15} sw={2.4} />Annulation en un clic via le portail Stripe</div>
          </div>
        </div>

        <div className="plan-right">
          <div className="pr-feat-head">Tout est inclus</div>
          <div className="feat-list">
            {FEATURES.map((f, i) => (
              <div className="feat" key={i}>
                <span className="feat-ic"><Ic name="check" size={13} sw={3} /></span>
                <div className="feat-txt"><b>{f[0]}</b> - <span>{f[1]}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function CheckoutRedirect({ onBack }) {
  const [loading, setLoading] = useState(false);
  const [error, setError]     = useState(null);

  const firstCharge = new Date(Date.now() + TRIAL_DAYS * 864e5)
    .toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });

  async function startCheckout() {
    setError(null);
    setLoading(true);
    try {
      const res = await fetch('/api/billing/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
      });
      if (res.status === 401 || res.status === 403) {
        window.location.href = '/app/login?next=/abonnement';
        return;
      }
      const data = await res.json();
      if (!res.ok) {
        setError(data.message || 'Erreur lors de la création de la session Stripe.');
        setLoading(false);
        return;
      }
      window.location.href = data.url;
    } catch (_) {
      setError('Connexion impossible. Vérifiez votre réseau.');
      setLoading(false);
    }
  }

  return (
    <div className="bill-stage">
      <button className="co-back" onClick={onBack}>
        <Ic name="back" size={16} sw={2} />Retour à la formule
      </button>

      <div className="checkout">
        <div className="summary">
          <div className="sum-eyebrow">Récapitulatif</div>
          <div className="sum-plan">
            <span className="sum-logo"><Ic name="card" size={22} /></span>
            <div>
              <div className="sum-nm">WalletLab Pro</div>
              <div className="sum-cycle">Facturation mensuelle</div>
            </div>
            <button className="sum-edit" onClick={onBack}>Modifier</button>
          </div>
          <div className="sum-lines">
            <div className="sum-line"><span className="l">Abonnement (1 mois)</span><span className="v">{PRICE},00 €</span></div>
            <div className="sum-line"><span className="l">Essai gratuit</span><span className="v">{TRIAL_DAYS} jours</span></div>
          </div>
          <div className="sum-total">
            <span className="l">Dû aujourd'hui</span>
            <span className="v">0,00 € <small>- gratuit</small></span>
          </div>
          <div className="sum-note">
            <Ic name="info" size={16} />
            <div>Votre carte sera enregistrée mais <b>non débitée</b> pendant l'essai. Le premier prélèvement de <b>{PRICE},00 €</b> interviendra le <b>{firstCharge}</b>.</div>
          </div>
        </div>

        <div className="pay-card">
          <div className="pay-title">Paiement sécurisé via Stripe</div>
          <p style={{ fontSize: 14, color: 'var(--muted, #6F7A72)', lineHeight: 1.6, margin: '0 0 24px' }}>
            Vous serez redirigé vers la page de paiement Stripe pour saisir vos informations bancaires en toute sécurité. WalletLab ne stocke jamais vos données de carte.
          </p>

          {error && (
            <div style={{ background: 'rgba(224,86,59,.10)', border: '1px solid rgba(224,86,59,.25)', borderRadius: 10, padding: '11px 14px', fontSize: 13.5, color: '#E0563B', marginBottom: 20 }}>
              {error}
            </div>
          )}

          <button
            className="btn green pay-submit"
            onClick={startCheckout}
            disabled={loading}
            style={{ width: '100%', justifyContent: 'center', opacity: loading ? .65 : 1 }}
          >
            {loading
              ? <><Ic name="spinner" size={17} sw={2} />Redirection…</>
              : <><Ic name="lock" size={17} sw={2} />Continuer vers Stripe</>}
          </button>

          <div className="pay-secure">
            <Ic name="shield" size={15} sw={2} />
            Connexion chiffrée TLS · Stripe certifié PCI DSS niveau 1
          </div>
        </div>
      </div>
    </div>
  );
}

function Billing() {
  const [step, setStep] = useState(1);

  // Redirect back from Stripe success/cancel
  const params = new URLSearchParams(window.location.search);
  const billingStatus = params.get('billing');

  return (
    <div className="bill">
      <header className="bill-top">
        <div className="bt-brand">
          <span className="m"><Ic name="check" size={17} sw={2.4} /></span>
          WalletLab
        </div>
        <StepBar step={step} />
      </header>

      {billingStatus === 'success' && (
        <div style={{ background: 'rgba(14,157,92,.12)', border: '1px solid rgba(14,157,92,.3)', borderRadius: 12, padding: '14px 20px', margin: '24px auto', maxWidth: 640, fontSize: 14, color: '#0E9D5C', textAlign: 'center' }}>
          ✓ Abonnement activé - bienvenue dans WalletLab Pro ! <a href="/app/" style={{ color: 'inherit', fontWeight: 700 }}>Accéder au tableau de bord →</a>
        </div>
      )}

      <div className="bill-body">
        {step === 1
          ? <Pricing onContinue={() => setStep(2)} />
          : <CheckoutRedirect onBack={() => setStep(1)} />}
      </div>

      <div className="bill-foot">
        WalletLab · ZksDigitals · Paiement sécurisé Stripe · <a href="/terms">CGU</a> · <a href="/privacy">Confidentialité</a>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Billing />);