import React from 'react';
import { motion } from 'motion/react';
import { CheckCircle2, X } from 'lucide-react';
import { PLANS, type PlanConfig, type PlanFeature } from '../config/plans';

// Re-export the Plan type and plans array for backwards compatibility
export type { PlanFeature };
export type Plan = PlanConfig;
export { PLANS as plans };

interface PricingCardProps {
  plan: PlanConfig;
  isAnnual: boolean;
  onSelect: () => void;
}

export const PricingCard: React.FC<PricingCardProps> = ({ plan, isAnnual, onSelect }) => {
  const { title, monthlyPriceNum, monthlyPrice, recommended, features } = plan;
  const isCustom = monthlyPrice === 'Sur Mesure';

  const displayPrice = isCustom
    ? 'Sur Mesure'
    : isAnnual
    ? `${Math.round(monthlyPriceNum * (1 - 0.2))}€`
    : `${monthlyPriceNum}€`;

  const periodLabel = isCustom ? '' : isAnnual ? '/mois facturé annuellement' : '/mois';

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      className={`p-8 rounded-[2.5rem] flex flex-col transition-all duration-300 relative ${
        recommended
          ? 'bg-slate-900 dark:bg-blue-600 text-white shadow-2xl scale-105 z-10'
          : 'bg-white dark:bg-slate-900 text-slate-900 dark:text-white border border-slate-100 dark:border-slate-800 shadow-lg'
      }`}
    >
      {recommended && (
        <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-blue-600 dark:bg-slate-900 text-white text-[10px] font-black px-4 py-1 rounded-full uppercase tracking-widest">
          Conseillé
        </div>
      )}

      {isAnnual && !isCustom && (
        <div className="absolute -top-4 right-6 bg-green-500 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest">
          −20%
        </div>
      )}

      <h3 className="text-2xl font-bold mb-2">{title}</h3>

      <div className="flex items-baseline gap-1 mb-2">
        <span className="text-4xl font-black">{displayPrice}</span>
        {periodLabel && (
          <span className={`text-xs font-bold leading-tight ${recommended ? 'opacity-50' : 'text-slate-400 dark:text-slate-500'}`}>
            {periodLabel}
          </span>
        )}
      </div>

      {isAnnual && !isCustom && (
        <p className={`text-xs font-semibold mb-6 ${recommended ? 'text-blue-300' : 'text-green-600 dark:text-green-400'}`}>
          Soit {Math.round(monthlyPriceNum * 12 * (1 - 0.2))}€/an — économisez {Math.round(monthlyPriceNum * 12 * 0.2)}€
        </p>
      )}

      {!isAnnual && <div className="mb-6" />}

      <ul className="space-y-4 mb-10 flex-grow">
        {[...features]
          .sort((a, b) => (a.included === b.included ? 0 : a.included ? -1 : 1))
          .map((feature, i) => (
            <li key={i} className={`flex gap-3 text-sm font-medium ${!feature.included ? 'opacity-40 italic' : ''}`}>
              {feature.included ? (
                <CheckCircle2 className={`w-5 h-5 shrink-0 ${recommended ? 'text-blue-400' : 'text-blue-600'}`} />
              ) : (
                <X className="w-5 h-5 shrink-0 text-red-500" />
              )}
              <span className={recommended ? 'text-white' : 'text-slate-600 dark:text-slate-300'}>
                {feature.text}
              </span>
            </li>
          ))}
      </ul>

      <button
        onClick={onSelect}
        className={`w-full py-4 rounded-2xl font-bold text-lg transition-all ${
          recommended
            ? 'bg-blue-600 dark:bg-white text-white dark:text-blue-600 hover:bg-blue-700 dark:hover:bg-slate-100 shadow-lg shadow-blue-600/30'
            : 'bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-700'
        }`}
      >
        Choisir ce pack
      </button>
    </motion.div>
  );
};