import { useEffect, useState } from "react"
import { Link } from "react-router-dom"
import { motion } from "framer-motion"
import { Heart, ArrowRight, ChefHat, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import stripeService, { type SubscriptionStatus } from "@/api/stripe"

export default function SubscriptionCancelled() {
  const [subscription, setSubscription] = useState<SubscriptionStatus | null>(null)

  // Sync immédiat avec Stripe pour refléter l'annulation dans la DB
  useEffect(() => {
    stripeService.syncSubscription().then(setSubscription).catch(() => {
      // Fallback sur un simple GET si le sync échoue
      stripeService.getSubscription().then(setSubscription).catch(() => {/* ignore */})
    })
  }, [])

  const periodEnd = subscription?.currentPeriodEnd
    ? new Date(subscription.currentPeriodEnd).toLocaleDateString("fr-FR", {
        day: "numeric",
        month: "long",
        year: "numeric",
      })
    : null

  return (
    <div className="mx-auto max-w-2xl px-4 py-12 md:py-20 text-center">
      {/* Icône heart animée */}
      <motion.div
        className="relative mx-auto mb-8 flex h-28 w-28 items-center justify-center"
        initial={{ scale: 0, rotate: -20 }}
        animate={{ scale: 1, rotate: 0 }}
        transition={{ type: "spring", stiffness: 200, damping: 15 }}
      >
        {/* Halo */}
        <motion.div
          className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-200/60 to-amber-200/40 blur-2xl"
          animate={{ scale: [1, 1.15, 1], opacity: [0.6, 1, 0.6] }}
          transition={{ duration: 3, repeat: Infinity }}
        />
        <div className="relative z-10 flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-orange-400 to-amber-500 text-white shadow-2xl shadow-orange-500/30 ring-4 ring-white dark:ring-slate-900">
          <Heart className="h-12 w-12 fill-current" strokeWidth={1.5} />
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3 }}
      >
        <h1 className="text-3xl md:text-4xl font-bold tracking-tight mb-3">
          À bientôt, on l'espère
        </h1>
        <p className="text-muted-foreground text-base md:text-lg max-w-md mx-auto">
          Ton abonnement a bien été annulé. Merci d'avoir fait un bout de chemin
          avec Freedge.
        </p>
      </motion.div>

      {/* Info période payée */}
      {periodEnd && (
        <motion.div
          className="mt-8 mx-auto max-w-md rounded-2xl border border-orange-200/60 bg-orange-50/60 dark:bg-orange-950/20 dark:border-orange-900/40 p-5 backdrop-blur-sm"
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5 }}
        >
          <div className="flex items-start gap-3">
            <div className="h-9 w-9 shrink-0 rounded-full bg-orange-100 dark:bg-orange-950/60 flex items-center justify-center">
              <Sparkles className="h-4 w-4 text-orange-600 dark:text-orange-400" />
            </div>
            <div className="text-left">
              <p className="text-sm font-semibold text-foreground">
                Profite de ton plan jusqu'au {periodEnd}
              </p>
              <p className="text-xs text-muted-foreground mt-1">
                Tu conserves l'accès à toutes les fonctionnalités premium jusqu'à
                la fin de la période déjà payée. Ensuite, tu repasseras
                automatiquement sur le plan gratuit.
              </p>
            </div>
          </div>
        </motion.div>
      )}

      {/* Message de re-engagement */}
      <motion.p
        className="mt-8 text-sm text-muted-foreground max-w-md mx-auto italic"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.7 }}
      >
        Tu changes d'avis ? Tu peux te réabonner à tout moment depuis la page
        Tarifs, sans perdre tes recettes ni tes préférences.
      </motion.p>

      <motion.div
        className="mt-10 flex flex-col sm:flex-row gap-3 justify-center"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.8 }}
      >
        <Link to="/recipes">
          <Button
            size="lg"
            className="w-full sm:w-auto h-12 px-6 rounded-full bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white shadow-md shadow-orange-500/25 hover:shadow-lg hover:shadow-orange-500/40 transition-all font-semibold group"
          >
            <ChefHat className="mr-2 h-5 w-5" />
            Retour à mes recettes
            <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
          </Button>
        </Link>
        <Link to="/pricing">
          <Button
            size="lg"
            variant="outline"
            className="w-full sm:w-auto h-12 px-6 rounded-full"
          >
            Voir les plans
          </Button>
        </Link>
      </motion.div>

      <motion.p
        className="mt-12 text-xs text-muted-foreground"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1 }}
      >
        Une dernière chose — si tu as un retour à nous partager, n'hésite pas :
        ça nous aide à faire mieux.
      </motion.p>
    </div>
  )
}
