import React, { useEffect, useState } from 'react';
import { motion } from 'motion/react';
import { Package, CheckCircle2, XSquare, TrendingUp, AlertTriangle, Zap } from 'lucide-react';
import useSWR from 'swr';
import { postFetcher } from '../../lib/fetcher';
import { useAuth } from '../../contexts/AuthContext';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { OVERAGE_RATES, calcOverageCost } from '../../config/plans';

interface OverageData {
  plan: string;
  period: string;
  current: { appointments: number; users: number; contracts: number; groups: number };
  limits:  { appointments: number; users: number; contracts: number; groups: number };
  estimatedOverageCost: number;
  breakdown: Record<string, { excess: number; rate: number; cost: number }>;
}

export const Dashboard = () => {
  const { currentUser } = useAuth();

  const { data: services, isLoading: loading } = useSWR(
    currentUser ? ['/api/db/query', { collection: 'services', conditions: [{ field: 'userId', op: '==', value: currentUser.uid }] }] : null,
    postFetcher
  );

  const subscription = services && services.length > 0 ? services[0] : null;

  const overageData = React.useMemo(() => {
    if (!subscription) return null;

    const current = {
      appointments: subscription.appointments_current ?? 0,
      users:        subscription.users_current ?? 0,
      contracts:    subscription.contracts_current ?? 0,
      groups:       subscription.groups_current ?? 0,
    };

    const limits = {
      appointments: subscription.appointments_limit ?? 100,
      users:        subscription.users_limit ?? 5,
      contracts:    subscription.contracts_limit ?? 100,
      groups:       subscription.groups_limit ?? 1,
    };

    const { total, breakdown } = calcOverageCost(subscription.plan || 'Starter', current, limits);

    const formatDate = (dateInput: any) => {
      if (!dateInput) return '';
      if (dateInput.seconds) return new Date(dateInput.seconds * 1000).toLocaleDateString('fr-FR');
      return new Date(dateInput).toLocaleDateString('fr-FR');
    };

    const periodStr = subscription.currentPeriodStart && subscription.currentPeriodEnd
      ? `${formatDate(subscription.currentPeriodStart)} au ${formatDate(subscription.currentPeriodEnd)}`
      : new Date().toISOString().slice(0, 7);

    return {
      plan: subscription.plan || 'Starter',
      period: periodStr,
      current,
      limits,
      estimatedOverageCost: total,
      breakdown,
      accumulated: {
        appointments: subscription.overageAppointments ?? 0,
        users:        subscription.overageUsers ?? 0,
        contracts:    subscription.overageContracts ?? 0,
        groups:       subscription.overageGroups ?? 0,
      }
    };
  }, [subscription]);

  const getPercentage = (current: number, limit: number) => {
    if (limit === 0) return 0;
    return Math.min(150, Math.round((current / limit) * 100));
  };

  const renderProgressBar = (label: string, count: number, limit: number) => {
    const pct = getPercentage(count, limit);
    const isOver = pct > 100;
    const displayPct = Math.min(100, pct);
    return (
      <div className="bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-5 rounded-2xl">
        <div className="flex items-center justify-between mb-3">
          <div className="flex flex-col">
            <span className="font-bold text-slate-900 dark:text-white">{label}</span>
            {isOver && (
              <span className="text-xs text-orange-500 font-bold flex items-center gap-1 mt-0.5">
                <AlertTriangle className="w-3 h-3" /> Surconsommation
              </span>
            )}
          </div>
          <span className={`text-sm font-bold ${isOver ? 'text-orange-500' : 'text-slate-500'}`}>
            {count} / {limit}
          </span>
        </div>
        <div className="w-full bg-slate-200 dark:bg-slate-800 rounded-full h-2.5 overflow-hidden">
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: `${displayPct}%` }}
            className={`h-2.5 rounded-full ${isOver ? 'bg-orange-500' : pct > 90 ? 'bg-red-500' : 'bg-blue-600'}`}
          />
        </div>
      </div>
    );
  };

  const renderFeatureRow = (label: string, enabled: boolean) => (
    <div className="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-800 last:border-0">
      <span className="font-medium text-slate-700 dark:text-slate-300">{label}</span>
      {enabled ? <CheckCircle2 className="w-5 h-5 text-green-500" /> : <XSquare className="w-5 h-5 text-slate-300 dark:text-slate-700" />}
    </div>
  );

  if (loading) {
    return (
      <div className="bg-white dark:bg-slate-900 p-12 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm text-center">
        <div className="w-12 h-12 border-4 border-blue-600/30 border-t-blue-600 rounded-full animate-spin mx-auto mb-4" />
        <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Chargement de votre profil...</p>
      </div>
    );
  }

  // Determine if this plan has PAYG overage billing
  const hasPAYG = overageData?.plan ? OVERAGE_RATES[overageData.plan] !== null && OVERAGE_RATES[overageData.plan] !== undefined : false;

  // ── Trial Expiry Detection ────────────────────────────────────────────
  const isTrialing = subscription?.status === 'trialing';
  const isExpired = subscription?.status === 'expired';
  const trialEndDate = subscription?.currentPeriodEnd
    ? new Date(subscription.currentPeriodEnd.seconds ? subscription.currentPeriodEnd.seconds * 1000 : subscription.currentPeriodEnd)
    : null;
  const trialHasEnded = trialEndDate ? trialEndDate < new Date() : false;
  const showTrialGate = isExpired || (isTrialing && trialHasEnded);

  // Days remaining for trial banner
  const daysRemaining = trialEndDate && isTrialing && !trialHasEnded
    ? Math.max(0, Math.ceil((trialEndDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)))
    : null;

  // ── Trial Expiry Payment Gate ─────────────────────────────────────────
  if (showTrialGate) {
    return (
      <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="space-y-6">
        <div className="bg-white dark:bg-slate-900 rounded-3xl border-2 border-red-200 dark:border-red-900 shadow-xl overflow-hidden">
          {/* Header */}
          <div className="bg-gradient-to-br from-red-500 to-orange-600 p-10 text-center text-white">
            <div className="w-20 h-20 bg-white/20 backdrop-blur-sm rounded-3xl flex items-center justify-center mx-auto mb-6">
              <AlertTriangle className="w-10 h-10" />
            </div>
            <h2 className="text-3xl font-black mb-3">Votre essai gratuit a expiré</h2>
            <p className="text-red-100 font-medium max-w-md mx-auto">
              Votre période d'essai de 14 jours s'est terminée le {trialEndDate?.toLocaleDateString('fr-FR')}.
              Pour continuer à utiliser Agendivo, veuillez souscrire à un forfait.
            </p>
          </div>

          {/* Body */}
          <div className="p-10 text-center space-y-6">
            <div className="bg-amber-50 dark:bg-amber-900/20 p-5 rounded-2xl border border-amber-200 dark:border-amber-900/50 max-w-lg mx-auto">
              <p className="text-amber-800 dark:text-amber-300 text-sm font-bold">
                📦 Vos données sont conservées pendant 30 jours. Souscrivez à un forfait pour y accéder de nouveau.
              </p>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <Link
                to="/client/upgrades"
                className="px-8 py-4 bg-blue-600 text-white font-black rounded-2xl hover:bg-blue-700 transition-all shadow-lg shadow-blue-600/20 text-lg"
              >
                Choisir un forfait →
              </Link>
              <a
                href="mailto:support@agendivo.com"
                className="px-6 py-4 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold rounded-2xl hover:bg-slate-200 dark:hover:bg-slate-700 transition-all text-sm"
              >
                Contacter le support
              </a>
            </div>
          </div>
        </div>
      </motion.div>
    );
  }

  return (
    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="space-y-6">
      {/* Trial Banner — shows countdown during active trial */}
      {isTrialing && daysRemaining !== null && (
        <div className={`p-4 rounded-2xl border text-center font-bold text-sm ${
          daysRemaining <= 3
            ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-900 text-red-700 dark:text-red-400'
            : 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-900 text-amber-700 dark:text-amber-400'
        }`}>
          ⏳ Essai gratuit — <strong>{daysRemaining} jour{daysRemaining > 1 ? 's' : ''}</strong> restant{daysRemaining > 1 ? 's' : ''}.
          {' '}
          <Link to="/client/upgrades" className="underline hover:no-underline">Souscrire maintenant</Link>
        </div>
      )}
      {subscription ? (
        <>
          {/* Plan Header */}
          <div className="bg-white dark:bg-slate-900 p-8 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
            <div>
              <h2 className="text-xl font-black text-slate-400 uppercase tracking-widest mb-1">Mon Forfait Actuel</h2>
              <div className="flex items-center gap-4">
                <span className="text-4xl font-black text-slate-900 dark:text-white">{subscription.plan}</span>
                <span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider ${subscription.status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400' :
                    subscription.status === 'pending' ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400' :
                      'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-400'
                  }`}>
                  {subscription.status === 'active' ? 'Actif' : subscription.status === 'pending' ? 'En attente' : subscription.status || 'Inactif'}
                </span>
                {hasPAYG && (
                  <span className="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 flex items-center gap-1">
                    <Zap className="w-3 h-3" /> PAYG actif
                  </span>
                )}
                {subscription.currentPeriodEnd && (
                  <span className="text-xs font-bold text-slate-500 flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full">
                    {subscription.cancelAtPeriodEnd ? "Se termine le" : "Renouvellement le"} {new Date(subscription.currentPeriodEnd.seconds * 1000).toLocaleDateString()}
                  </span>
                )}
              </div>
            </div>
            {subscription.instance_link ? (
              <button onClick={() => window.open(subscription.instance_link, '_blank')} className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl transition-colors shadow-lg shadow-blue-600/20">
                Ouvrir l'application
              </button>
            ) : (
              <div className="px-6 py-3 bg-slate-100 dark:bg-slate-800 text-slate-500 font-bold rounded-2xl">
                {subscription.status === 'pending' ? 'Configuration en cours...' : 'Instance non activée'}
              </div>
            )}
          </div>

          {/* Overage Cost Estimator — shown only for PAYG plans with overages */}
          {hasPAYG && overageData && overageData.estimatedOverageCost > 0 && (
            <motion.div
              initial={{ opacity: 0, scale: 0.98 }}
              animate={{ opacity: 1, scale: 1 }}
              className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950/30 dark:to-amber-950/30 p-8 rounded-3xl border border-orange-200 dark:border-orange-800/50 shadow-sm"
            >
              <div className="flex items-start justify-between gap-4 mb-6">
                <div className="flex items-center gap-3">
                  <div className="p-3 bg-orange-100 dark:bg-orange-900/30 rounded-2xl">
                    <TrendingUp className="w-6 h-6 text-orange-600 dark:text-orange-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-black text-slate-900 dark:text-white">Surconsommation Estimée</h3>
                    <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Période : {overageData.period} — sera facturé en fin de cycle</p>
                  </div>
                </div>
                <div className="text-right">
                  <p className="text-3xl font-black text-orange-600 dark:text-orange-400">+{overageData.estimatedOverageCost.toFixed(2)}€</p>
                  <p className="text-xs text-slate-500 font-bold uppercase tracking-widest">en sus de votre forfait</p>
                </div>
              </div>

              <div className="space-y-3">
                {Object.entries(overageData.breakdown).map(([key, v]) => {
                  const labels: Record<string, string> = {
                    appointments: 'Rendez-vous',
                    users:        'Utilisateurs',
                    contracts:    'Contrats',
                    groups:       'Groupes',
                  };
                  return (
                    <div key={key} className="flex items-center justify-between bg-white/60 dark:bg-slate-900/40 rounded-2xl px-5 py-3 border border-orange-100 dark:border-orange-900/30">
                      <span className="font-bold text-slate-700 dark:text-slate-300">{labels[key] || key}</span>
                      <span className="text-sm text-slate-500 font-medium">{v.excess} × {v.rate}€</span>
                      <span className="font-black text-orange-600 dark:text-orange-400">{v.cost.toFixed(2)}€</span>
                    </div>
                  );
                })}
              </div>

              <div className="mt-6 flex items-center justify-between">
                <p className="text-xs text-slate-500 dark:text-slate-400 font-medium italic">
                  Pour éviter les frais de surconsommation, passez au forfait supérieur.
                </p>
                <Link to="/client/upgrades" className="px-5 py-2.5 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-xl text-sm transition-colors shadow-sm">
                  Upgrader →
                </Link>
              </div>
            </motion.div>
          )}

          <div className="bg-white dark:bg-slate-900 p-8 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm space-y-6">
            <h3 className="font-black text-slate-900 dark:text-white text-xl">Utilisation & Limites</h3>
            <div className="grid lg:grid-cols-2 gap-6">
              {renderProgressBar('Utilisateurs', subscription.users_current || 0, subscription.users_limit || 0)}
              {renderProgressBar('Groupes', subscription.groups_current || 0, subscription.groups_limit || 0)}
              {renderProgressBar('Rendez-vous / Mois', subscription.appointments_current || 0, subscription.appointments_limit || 0)}
              {renderProgressBar('Contrats / Mois', subscription.contracts_current || 0, subscription.contracts_limit || 0)}
            </div>

            {/* PAYG rate info */}
            {hasPAYG && overageData?.plan && OVERAGE_RATES[overageData.plan] && (
              <div className="pt-6 border-t border-slate-100 dark:border-slate-800">
                <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Tarifs de surconsommation applicables</p>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {[
                    { label: 'Rendez-vous', rate: OVERAGE_RATES[overageData.plan]!.appointmentRate },
                    { label: 'Utilisateur',  rate: OVERAGE_RATES[overageData.plan]!.userRate },
                    { label: 'Contrat',       rate: OVERAGE_RATES[overageData.plan]!.contractRate },
                    { label: 'Groupe',        rate: OVERAGE_RATES[overageData.plan]!.groupRate },
                  ].map(item => (
                    <div key={item.label} className="bg-slate-50 dark:bg-slate-800 rounded-2xl px-4 py-3 border border-transparent hover:border-slate-200 dark:hover:border-slate-700 transition-colors">
                      <p className="text-xs text-slate-500 font-bold mb-1">{item.label}</p>
                      <p className="text-lg font-black text-slate-900 dark:text-white">{item.rate}€ <span className="text-xs text-slate-400 font-medium">/ unité</span></p>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </>
      ) : (
        <div className="bg-white dark:bg-slate-900 p-12 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm text-center">
          <Package className="w-12 h-12 text-slate-300 mx-auto mb-4" />
          <p className="text-slate-500 font-bold">Aucun forfait actif trouvé.</p>
        </div>
      )}
    </motion.div>
  );
};