import { useState } from 'react'
import { useSubscriptions } from '../context/SubscriptionsContext.jsx'

function formatEUR(n) {
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: 'EUR',
  }).format(Number(n) || 0)
}

function formatDate(iso) {
  try {
    return new Intl.DateTimeFormat('fr-FR', {
      dateStyle: 'long',
    }).format(new Date(iso))
  } catch {
    return iso || '—'
  }
}

export default function AbonnementPage() {
  const { plans, subscription, subscribe, cancelSubscription, getPlanLabel } =
    useSubscriptions()
  const [err, setErr] = useState(null)
  const [ok, setOk] = useState(null)

  function handleSubscribe(planId) {
    setErr(null)
    setOk(null)
    try {
      subscribe(planId)
      setOk('Abonnement pris en compte (POST /api/subscriptions en local).')
    } catch (e) {
      setErr(e?.message || 'Impossible de souscrire.')
    }
  }

  return (
    <div className="abonnement-page">
      <h2 className="page-title">Abonnement</h2>
      <p className="page-lead">
        Équivalent local de <code>POST /api/subscriptions</code> · stockage{' '}
        <code>librairie-subscriptions</code> · pas de paiement réel, c’est une
        démo.
      </p>

      {err ? (
        <p className="form-error" role="alert">
          {err}
        </p>
      ) : null}
      {ok ? <p className="form-notice">{ok}</p> : null}

      {subscription ? (
        <section className="order-panel abo-active">
          <h3 className="panel-title">Abonnement actif</h3>
          <p>
            Formule : <strong>{getPlanLabel(subscription.planId)}</strong>
          </p>
          <p className="book-section-lead">
            Depuis le {formatDate(subscription.subscribedAt)}
          </p>
          <button
            type="button"
            className="btn danger"
            onClick={() => {
              cancelSubscription()
              setOk('Abonnement annulé (local).')
            }}
          >
            Résilier (local)
          </button>
        </section>
      ) : null}

      <section className="order-panel">
        <h3 className="panel-title">Choisir une formule</h3>
        <ul className="abo-plans">
          {plans.map((p) => (
            <li key={p.id} className="abo-plan-card">
              <p className="abo-plan-name">{p.label}</p>
              <p className="abo-plan-price">{formatEUR(p.price)}</p>
              <button
                type="button"
                className="btn primary small"
                onClick={() => handleSubscribe(p.id)}
                disabled={Boolean(subscription)}
              >
                Souscrire (POST)
              </button>
            </li>
          ))}
        </ul>
        {subscription ? (
          <p className="book-section-lead">
            Pour changer de formule, résilie d’abord puis reprends une offre.
          </p>
        ) : null}
      </section>
    </div>
  )
}