import Link from "next/link";
import { CheckCircle2, Crown } from "lucide-react";
import { auth } from "@/lib/auth";
import { UpgradeButton } from "@/components/UpgradeButton";

export const metadata = { title: "Tarifs — Diabetix" };

export default async function PricingPage() {
  const session = await auth();
  const isPremium = (session?.user as { plan?: string })?.plan === "PREMIUM";

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-teal-50 via-white to-slate-50 px-4 py-16">
      <h1 className="text-3xl font-bold text-slate-900">Choisissez votre plan</h1>
      <p className="mt-3 text-slate-500">Commencez gratuitement, passez Premium quand vous êtes prêt.</p>

      <div className="mt-10 grid w-full max-w-2xl gap-6 sm:grid-cols-2">
        {/* Free */}
        <div className="rounded-2xl border border-slate-200 bg-white p-7 shadow-sm">
          <div className="text-sm font-semibold uppercase tracking-wide text-slate-500">Gratuit</div>
          <div className="mt-3 text-4xl font-bold text-slate-900">0 €</div>
          {!session ? (
            <Link href="/auth/register" className="mt-6 block rounded-xl border border-slate-300 py-2.5 text-center text-sm font-medium text-slate-700 hover:bg-slate-50">
              Commencer
            </Link>
          ) : (
            <div className="mt-6 rounded-xl border border-emerald-300 bg-emerald-50 py-2.5 text-center text-sm font-medium text-emerald-700">
              Votre plan actuel
            </div>
          )}
          <ul className="mt-6 space-y-2.5 text-sm text-slate-600">
            {["Saisie illimitée", "Tableau de bord 7 jours", "Statistiques semaine", "Export CSV"].map((f) => (
              <li key={f} className="flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 flex-shrink-0 text-teal-500" />
                {f}
              </li>
            ))}
          </ul>
        </div>

        {/* Premium */}
        <div className="relative rounded-2xl border-2 border-teal-500 bg-white p-7 shadow-md">
          <div className="absolute -top-3 left-1/2 -translate-x-1/2">
            <span className="inline-flex items-center gap-1 rounded-full bg-teal-600 px-3 py-1 text-xs font-semibold text-white">
              <Crown className="h-3 w-3" />
              Recommandé
            </span>
          </div>
          <div className="text-sm font-semibold uppercase tracking-wide text-teal-600">Premium</div>
          <div className="mt-3 flex items-end gap-1">
            <span className="text-4xl font-bold text-slate-900">4,99 €</span>
            <span className="mb-1 text-slate-500">/mois</span>
          </div>
          <div className="mt-6">
            {!session ? (
              <Link href="/auth/register" className="block rounded-xl bg-teal-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-teal-700">
                Essayer Premium
              </Link>
            ) : (
              <UpgradeButton isPremium={isPremium} />
            )}
          </div>
          <ul className="mt-6 space-y-2.5 text-sm text-slate-600">
            {["Tout le plan Gratuit", "Historique illimité", "Stats 30 et 90 jours", "HbA1c estimée", "Analyse IA quotidienne", "Coach Diablo"].map((f) => (
              <li key={f} className="flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 flex-shrink-0 text-teal-500" />
                {f}
              </li>
            ))}
          </ul>
        </div>
      </div>

      <p className="mt-8 text-sm text-slate-400">
        {!session ? (
          <>
            Déjà inscrit ?{" "}
            <Link href="/auth/login" className="text-teal-700 underline">Se connecter</Link>
          </>
        ) : (
          <>
            Besoin d'aide ?{" "}
            <Link href="/contact" className="text-teal-700 underline">Contactez-nous</Link>
          </>
        )}
      </p>
    </div>
  );
}
