import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import SEO from '../components/SEO';
import { CheckCircle2, ArrowRight, Sparkles, Calculator, Zap } from 'lucide-react';
import { SectionDivider } from '../components/Common';
import { PricingCard } from '../components/PricingSection';
import { PLANS, OVERAGE_RATES, calcOverageCost } from '../config/plans';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

export const Pricing = () => {
  const navigate = useNavigate();
  const { currentUser } = useAuth();
  const [isAnnual, setIsAnnual] = useState(false);

  const handleSelectPlan = (planTitle: string) => {
    const checkoutUrl = `/checkout?plan=${encodeURIComponent(planTitle)}&annual=${isAnnual}`;
    if (currentUser) {
      navigate(checkoutUrl);
    } else {
      navigate(`/register?redirect=${encodeURIComponent(checkoutUrl)}`);
    }
  };

  const [calcPlan, setCalcPlan] = useState<string>('Starter');
  const [calcAppointments, setCalcAppointments] = useState(3000);
  const [calcUsers, setCalcUsers] = useState(8);
  const [calcContracts, setCalcContracts] = useState(3000);
  const [calcGroups, setCalcGroups] = useState(2);

  const planObj = PLANS.find(p => p.title === calcPlan);
  const baseCost = planObj?.monthlyPriceNum || 0;
  const calcResult = planObj ? calcOverageCost(
    calcPlan,
    { appointments: calcAppointments, users: calcUsers, contracts: calcContracts, groups: calcGroups },
    { appointments: planObj.serviceDefaults.appointments_limit, users: planObj.serviceDefaults.users_limit, contracts: planObj.serviceDefaults.contracts_limit, groups: planObj.serviceDefaults.groups_limit }
  ) : { total: 0, breakdown: {} };
  const totalEstimate = baseCost + calcResult.total;

  return (
    <div className="pt-24 min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors duration-500">
      <SEO
        title="Tarifs et Abonnements"
        description="Découvrez nos offres Starter, Professionnel et Entreprise. Choisissez le pack qui correspond à votre ambition. Pas d'engagement, juste de la performance."
        url="https://agendivo.com/pricing"
      />

      <section className="py-20 text-center">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-10">
          <h1 className="text-5xl lg:text-7xl font-black text-slate-900 dark:text-white mb-8 tracking-tighter">
            Prêt à <span className="text-blue-600">Démarrer</span> ?
          </h1>
          <p className="text-xl text-slate-500 dark:text-slate-400 max-w-2xl mx-auto italic font-medium mb-12">
            Choisissez le pack qui correspond à votre ambition. Pas d'engagement, juste de la performance.
          </p>

          {/* Billing toggle */}
          <div className="inline-flex items-center gap-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-full p-1.5 shadow-sm">
            <button
              onClick={() => setIsAnnual(false)}
              className={`px-6 py-2 rounded-full text-sm font-bold transition-all ${
                !isAnnual
                  ? 'bg-slate-900 dark:bg-white text-white dark:text-slate-900 shadow'
                  : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
              }`}
            >
              Mensuel
            </button>
            <button
              onClick={() => setIsAnnual(true)}
              className={`px-6 py-2 rounded-full text-sm font-bold transition-all flex items-center gap-2 ${
                isAnnual
                  ? 'bg-slate-900 dark:bg-white text-white dark:text-slate-900 shadow'
                  : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
              }`}
            >
              Annuel
              <span className="text-[10px] bg-green-500 text-white px-2 py-0.5 rounded-full font-black uppercase tracking-wide">
                −20%
              </span>
            </button>
          </div>
        </div>
      </section>

      <SectionDivider />

      <section className="py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimatePresence mode="wait">
            <motion.div
              key={isAnnual ? 'annual' : 'monthly'}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.2 }}
              className="grid md:grid-cols-3 gap-8 items-start"
            >
              {PLANS.map((plan, i) => (
                <PricingCard
                  key={i}
                  plan={plan}
                  isAnnual={isAnnual}
                  onSelect={() => handleSelectPlan(plan.title)}
                />
              ))}
            </motion.div>
          </AnimatePresence>
        </div>
      </section>

      <SectionDivider />

      {/* Usage Calculator */}
      <section className="py-24 bg-white dark:bg-slate-900/50">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-xs font-black uppercase tracking-widest mb-6">
              <Zap className="w-3 h-3" /> Pay As You Go
            </div>
            <h2 className="text-4xl font-black text-slate-900 dark:text-white mb-4 tracking-tighter">
              Estimez votre <span className="text-blue-600">Facture Mensuelle</span>
            </h2>
            <p className="text-lg text-slate-500 dark:text-slate-400 font-medium max-w-xl mx-auto">
              Payez votre forfait de base + seulement ce que vous consommez en plus. Ajustez les curseurs pour voir votre estimation.
            </p>
          </div>

          <div className="bg-slate-50 dark:bg-slate-900 rounded-[3rem] border border-slate-200 dark:border-slate-800 p-10 shadow-sm">
            <div className="grid lg:grid-cols-2 gap-12 items-start">
              {/* Controls */}
              <div className="space-y-8">
                {/* Plan selector */}
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-widest mb-3">Forfait de base</label>
                  <div className="flex gap-2">
                    {PLANS.filter(p => OVERAGE_RATES[p.title] !== null).map(p => (
                      <button
                        key={p.title}
                        onClick={() => setCalcPlan(p.title)}
                        className={`flex-1 py-2.5 rounded-xl text-sm font-bold transition-all ${
                          calcPlan === p.title
                            ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20'
                            : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700 hover:border-blue-300'
                        }`}
                      >
                        {p.title}
                        <span className="block text-xs opacity-70">{p.monthlyPrice}/mois</span>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Sliders */}
                {[
                  { label: 'Rendez-vous / mois', value: calcAppointments, set: setCalcAppointments, min: 0, max: 20000, step: 100,
                    included: planObj?.serviceDefaults.appointments_limit || 0, rate: OVERAGE_RATES[calcPlan]?.appointmentRate || 0 },
                  { label: 'Utilisateurs', value: calcUsers, set: setCalcUsers, min: 1, max: 100, step: 1,
                    included: planObj?.serviceDefaults.users_limit || 0, rate: OVERAGE_RATES[calcPlan]?.userRate || 0 },
                  { label: 'Contrats / mois', value: calcContracts, set: setCalcContracts, min: 0, max: 20000, step: 100,
                    included: planObj?.serviceDefaults.contracts_limit || 0, rate: OVERAGE_RATES[calcPlan]?.contractRate || 0 },
                  { label: 'Groupes', value: calcGroups, set: setCalcGroups, min: 1, max: 30, step: 1,
                    included: planObj?.serviceDefaults.groups_limit || 0, rate: OVERAGE_RATES[calcPlan]?.groupRate || 0 },
                ].map(item => {
                  const isOver = item.value > item.included;
                  return (
                    <div key={item.label}>
                      <div className="flex justify-between items-center mb-2">
                        <label className="text-sm font-bold text-slate-700 dark:text-slate-300">{item.label}</label>
                        <div className="flex items-center gap-2">
                          <span className={`text-sm font-black ${isOver ? 'text-orange-500' : 'text-slate-900 dark:text-white'}`}>
                            {item.value}
                          </span>
                          {isOver && (
                            <span className="text-xs bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-2 py-0.5 rounded-full font-bold">
                              +{item.value - item.included} → +{((item.value - item.included) * item.rate).toFixed(2)}€
                            </span>
                          )}
                        </div>
                      </div>
                      <input
                        type="range"
                        min={item.min}
                        max={item.max}
                        step={item.step}
                        value={item.value}
                        onChange={e => item.set(Number(e.target.value))}
                        className={`range-slider${isOver ? ' overage' : ''}`}
                        style={{
                          '--range-pct': `${((item.value - item.min) / (item.max - item.min)) * 100}%`,
                        } as React.CSSProperties}
                      />
                      <div className="flex justify-between text-xs text-slate-400 mt-1">
                        <span>0</span>
                        <span className="font-bold text-blue-600">{item.included} inclus</span>
                        <span>{item.max}+</span>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Cost Breakdown */}
              <div className="lg:sticky lg:top-8">
                <div className="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 p-8 shadow-sm">
                  <div className="flex items-center gap-3 mb-6">
                    <div className="p-2.5 bg-blue-100 dark:bg-blue-900/30 rounded-xl">
                      <Calculator className="w-5 h-5 text-blue-600" />
                    </div>
                    <h3 className="font-black text-slate-900 dark:text-white text-lg">Estimation mensuelle</h3>
                  </div>

                  <div className="space-y-3 mb-6">
                    <div className="flex justify-between items-center py-3 border-b border-slate-100 dark:border-slate-700">
                      <span className="font-medium text-slate-600 dark:text-slate-400">Forfait {calcPlan}</span>
                      <span className="font-black text-slate-900 dark:text-white">{baseCost}€</span>
                    </div>
                    {Object.entries(calcResult.breakdown).map(([key, v]) => {
                      const labels: Record<string, string> = { appointments: 'Rendez-vous', users: 'Utilisateurs', contracts: 'Contrats', groups: 'Groupes' };
                      return (
                        <div key={key} className="flex justify-between items-center py-2">
                          <span className="text-sm font-medium text-orange-600 dark:text-orange-400">
                            +{v.excess} {labels[key]} supp.
                          </span>
                          <span className="text-sm font-bold text-orange-600 dark:text-orange-400">+{v.cost.toFixed(2)}€</span>
                        </div>
                      );
                    })}
                    {calcResult.total === 0 && (
                      <p className="text-sm text-green-600 dark:text-green-400 font-bold flex items-center gap-2 py-2">
                        <CheckCircle2 className="w-4 h-4" /> Aucune surconsommation
                      </p>
                    )}
                  </div>

                  <div className="bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl p-6 text-center">
                    <p className="text-blue-200 text-xs font-bold uppercase tracking-widest mb-2">Total estimé</p>
                    <p className="text-5xl font-black text-white">{totalEstimate.toFixed(0)}€</p>
                    <p className="text-blue-200 text-sm mt-1 font-medium">/ mois</p>
                  </div>

                  <button
                    onClick={() => handleSelectPlan(calcPlan)}
                    className="w-full mt-4 py-3 bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-black rounded-2xl hover:scale-[1.02] transition-transform flex items-center justify-center gap-2"
                  >
                    Choisir {calcPlan} <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SectionDivider />

      {/* FAQ Mini */}
      <section className="py-20 bg-white dark:bg-slate-900/50">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-8">Questions Fréquentes</h3>
          <div className="space-y-6 text-left">
            {[
              { q: "Puis-je changer de pack plus tard ?", a: "Oui, vous pouvez upgrader ou downgrader votre offre à tout moment depuis votre interface d'administration." },
              { q: "Y a-t-il des frais d'installation ?", a: "Aucun frais caché. L'installation et l'onboarding initial sont inclus dans votre abonnement." },
              { q: "Mes données sont-elles sécurisées ?", a: "Agendivo utilise un chiffrement de bout en bout et des serveurs certifiés ISO 27001 pour garantir la sécurité totale de vos données clients." },
              { q: "Puis-je avoir un accompagnement personnalisé ?", a: "Oui, le pack 'Entreprise' inclut un manager dédié et un support par téléphone pour un accompagnement optimal." }
            ].map((faq, i) => (
              <div key={i} className="p-6 bg-slate-50 dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800">
                <h4 className="font-bold text-slate-900 dark:text-white mb-2">{faq.q}</h4>
                <p className="text-slate-600 dark:text-slate-400 text-sm font-medium italic">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <SectionDivider />

      {/* Trial Form Section */}
      <section className="py-24 bg-gradient-to-b from-slate-50 to-white dark:from-slate-950 dark:to-slate-900 overflow-hidden relative">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/5 rounded-full blur-[120px] pointer-events-none" />

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid lg:grid-cols-2 gap-20 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-xs font-black uppercase tracking-widest mb-6">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
                </span>
                Offre Limitée
              </div>
              <h2 className="text-4xl lg:text-6xl font-black text-slate-900 dark:text-white mb-8 tracking-tighter leading-none">
                Testez Agendivo <br /> Gratuitement pendant <span className="text-blue-600">14 Jours</span>.
              </h2>
              <p className="text-xl text-slate-500 dark:text-slate-400 mb-10 font-medium italic leading-relaxed">
                Aucune carte bancaire requise. Accès complet à toutes les fonctionnalités pour transformer votre activité dès aujourd'hui.
              </p>

              <div className="space-y-6">
                {[
                  "Installation assistée par un expert",
                  "Support client prioritaire 24/7",
                  "Importation de vos données existantes",
                  "Formation personnalisée offerte"
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-4 group">
                    <div className="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                      <CheckCircle2 className="w-4 h-4 text-green-600 dark:text-green-500" />
                    </div>
                    <span className="font-bold text-slate-700 dark:text-slate-200">{item}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div className="absolute -inset-4 bg-gradient-to-tr from-blue-600 to-indigo-600 rounded-[3rem] blur-2xl opacity-10" />
              <div className="relative bg-white dark:bg-slate-900 p-12 lg:p-16 rounded-[4rem] border border-slate-100 dark:border-slate-800 shadow-2xl text-center">
                <div className="w-20 h-20 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mx-auto mb-8">
                  <Sparkles className="text-blue-600 w-10 h-10" />
                </div>
                <h3 className="text-3xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">Prêt à commencer ?</h3>
                <p className="text-slate-500 dark:text-slate-400 mb-10 font-medium italic leading-relaxed">
                  Rejoignez les professionnels qui optimisent déjà leur temps avec Agendivo.
                </p>
                <Link
                  to="/demo"
                  className="inline-flex items-center gap-3 px-10 py-5 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/20 hover:-translate-y-1"
                >
                  Activer mon essai de 14 jours
                  <ArrowRight className="w-6 h-6" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};