import React, { useState, useMemo } from 'react';
import { 
  CheckCircle2, 
  PieChart, 
  FileText, 
  ShieldCheck, 
  Users, 
  Send, 
  BrainCircuit, 
  ScanLine, 
  LayoutDashboard,
  AlertCircle
} from 'lucide-react';

// ==========================================
// DONNÉES & CONFIGURATION
// ==========================================

const SUITE_PRICE_PER_FILE = 29;

type UnitType = 'dossier' | 'expert';

interface Tool {
  id: string;
  label: string;
  category: string;
  desc: string;
  icon: React.ComponentType<{ size?: number; strokeWidth?: number }>;
  unit: UnitType;
  publicPrice: number;
  color: string;
  bg: string;
}

interface ToolResult extends Tool {
  volA: number;
  lineCostA: number;
}

type VolumeState = Record<string, number>;

// Données enrichies avec les descriptions
const TOOLS_DATA: Tool[] = [
  { 
    id: 'mcf', 
    label: 'MyCompanyFiles', 
    category: 'Collecte & Flux',
    desc: 'Portail client sécurisé, zéro mail, application mobile.',
    icon: Users,
    unit: 'dossier', 
    publicPrice: 2.0,
    color: 'text-orange-500',
    bg: 'bg-orange-50'
  },
  { 
    id: 'evoliz', 
    label: 'Evoliz', 
    category: 'Facturation & Gestion',
    desc: 'Facturation TPE/PME, préparation Facture Électronique (PDP).',
    icon: FileText,
    unit: 'dossier', 
    publicPrice: 40.0,
    color: 'text-yellow-600',
    bg: 'bg-yellow-50'
  },
  { 
    id: 'chaintrust', 
    label: 'Chaintrust', 
    category: 'Automatisation Saisie',
    desc: 'OCR certifié et IA pour zéro intervention manuelle.',
    icon: ScanLine,
    unit: 'dossier', 
    publicPrice: 20.0,
    color: 'text-indigo-600',
    bg: 'bg-indigo-50'
  },
  { 
    id: 'inqom', 
    label: 'Inqom', 
    category: 'Production Comptable',
    desc: 'IA générative, flux bancaires temps réel, production automatisée.',
    icon: BrainCircuit,
    unit: 'dossier', 
    publicPrice: 20.0,
    color: 'text-purple-600',
    bg: 'bg-purple-50'
  },
  { 
    id: 'finthesis', 
    label: 'Finthesis', 
    category: 'Pilotage & Conseil',
    desc: 'Business Intelligence, prévisionnels et tableaux de bord dynamiques.',
    icon: PieChart,
    unit: 'dossier', 
    publicPrice: 60.0,
    color: 'text-cyan-600',
    bg: 'bg-cyan-50'
  },
  { 
    id: 'kanta', 
    label: 'Kanta', 
    category: 'Conformité & LCB-FT',
    desc: 'Lutte Anti-Blanchiment, lettres de missions, conformité dossier.',
    icon: ShieldCheck,
    unit: 'expert',
    publicPrice: 91.66, // 1100 €/an ramené au mois
    color: 'text-pink-600',
    bg: 'bg-pink-50'
  },
  { 
    id: 'kinexo', 
    label: 'Kinexo', 
    category: 'Gestion Interne',
    desc: 'Suivi des temps, facturation cabinet et pilotage rentabilité.',
    icon: LayoutDashboard,
    unit: 'dossier', 
    publicPrice: 2.68,
    color: 'text-emerald-600',
    bg: 'bg-emerald-50'
  },
  { 
    id: 'teledec', 
    label: 'Teledec', 
    category: 'Admin & Fiscal',
    desc: 'Télétransmission sécurisée des liasses fiscales et EDI.',
    icon: Send,
    unit: 'dossier', 
    publicPrice: 5.0, // Estimation prix public si non inclus
    color: 'text-blue-600',
    bg: 'bg-blue-50'
  },
];

// ==========================================
// COMPOSANT PRINCIPAL
// ==========================================

export default function VismaSimulator() {
  // --- STATES ---
  const [totalFiles, setTotalFiles] = useState<number>(500);

  const [volumes, setVolumes] = useState<VolumeState>(() => {
    const initial: VolumeState = {};
    const defaultFiles = 500;

    TOOLS_DATA.forEach(tool => {
      if (tool.unit === 'expert') {
        initial[tool.id] = 2; // 2 experts par défaut
      } else {
        initial[tool.id] = Math.floor(defaultFiles * 0.2); // 20% du parc équipé
      }
    });

    return initial;
  });

  // --- HANDLERS ---

  const handleTotalFilesChange = (value: string) => {
    const num = parseInt(value, 10);
    const safe = isNaN(num) || num < 0 ? 0 : num;
    setTotalFiles(safe);
  };

  const handleVolumeChange = (id: string, value: string) => {
    const num = parseInt(value, 10);
    const safe = isNaN(num) || num < 0 ? 0 : num;
    setVolumes(prev => ({ ...prev, [id]: safe }));
  };

  // --- CALCULS ---

  const results = useMemo(() => {
    let costA = 0;
    const costB = totalFiles * SUITE_PRICE_PER_FILE;

    const breakdown: ToolResult[] = TOOLS_DATA.map(tool => {
      const volA = volumes[tool.id] ?? 0;
      const lineCostA = volA * tool.publicPrice;
      costA += lineCostA;

      return {
        ...tool,
        volA,
        lineCostA
      };
    });

    const savings = costA - costB;
    const savingsPercent = costA > 0 ? (savings / costA) * 100 : 0;

    return { costA, costB, savings, savingsPercent, breakdown };
  }, [totalFiles, volumes]);

  // --- FORMATTERS ---

  const formatEUR = (num: number) =>
    new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(num);

  // ==========================================
  // RENDER
  // ==========================================

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 pb-20">
      {/* HEADER */}
      <header className="bg-gradient-to-r from-blue-900 to-indigo-800 text-white pt-10 pb-24 px-6 relative overflow-hidden">
        <div className="absolute top-0 right-0 p-12 opacity-10 pointer-events-none">
          <BrainCircuit size={400} />
        </div>
        <div className="max-w-6xl mx-auto relative z-10">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <span className="bg-blue-500/30 border border-blue-400/50 px-3 py-1 rounded-full text-xs font-semibold tracking-wider uppercase">
                  Simulateur de Rentabilité
                </span>
                <span className="text-blue-200 text-sm font-medium">Powered by Visma</span>
              </div>
              <h1 className="text-3xl md:text-5xl font-bold mb-2">La Suite Visma Expert</h1>
              <p className="text-blue-200 text-lg max-w-2xl">
                Comparez le coût de vos outils actuels versus l&apos;offre unifiée à 29€/dossier incluant les 8 leaders du marché.
              </p>
            </div>

            {/* KPI HEADERS */}
            <div className="flex gap-4 md:text-right">
              <div className="bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/20">
                <div className="text-sm text-blue-200 mb-1">Coût par dossier</div>
                <div className="text-3xl font-bold">
                  29 € <span className="text-base font-normal opacity-70">/mois</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* MAIN CONTENT */}
      <main className="max-w-6xl mx-auto px-4 -mt-16 relative z-20">
        {/* GLOBAL INPUT CARD */}
        <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8 border border-slate-200">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="flex-1">
              <label className="block text-sm font-bold text-slate-500 uppercase tracking-wide mb-2">
                Taille du cabinet (Dossiers)
              </label>
              <div className="relative">
                <input
                  type="number"
                  min={0}
                  value={totalFiles}
                  onChange={(e) => handleTotalFilesChange(e.target.value)}
                  className="w-full text-4xl font-bold text-slate-900 border-b-2 border-slate-200 focus:border-blue-600 outline-none py-2 bg-transparent transition-colors"
                  placeholder="Ex: 500"
                />
                <span className="absolute right-0 bottom-3 text-slate-400 font-medium">dossiers</span>
              </div>
              <p className="text-sm text-slate-500 mt-2 flex items-center gap-2">
                <AlertCircle size={14} />
                L&apos;offre Suite Visma Expert s&apos;applique à 100% du parc.
              </p>
            </div>

            {/* RESULTS SUMMARY */}
            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
              {/* Scenario A Card */}
              <div className="bg-red-50 rounded-xl p-5 border border-red-100 flex flex-col justify-between h-full">
                <div className="text-xs font-bold text-red-600 uppercase mb-1">Coût Actuel (Estimé)</div>
                <div className="text-2xl font-bold text-red-900">
                  {formatEUR(results.costA)}{' '}
                  <span className="text-sm font-normal text-red-700">/mois</span>
                </div>
                <div className="text-xs text-red-700 mt-2">Prix publics cumulés</div>
              </div>

              {/* Scenario B Card */}
              <div className="bg-blue-600 text-white rounded-xl p-5 shadow-lg shadow-blue-900/20 flex flex-col justify-between h-full transform transition-transform hover:scale-105">
                <div className="text-xs font-bold text-blue-200 uppercase mb-1">Avec Visma Expert</div>
                <div className="text-2xl font-bold text-white">
                  {formatEUR(results.costB)}{' '}
                  <span className="text-sm font-normal text-blue-100">/mois</span>
                </div>
                <div className="text-xs text-blue-100 mt-2">Tout inclus, illimité</div>
              </div>
            </div>
          </div>

          {/* SAVINGS BAR */}
          <div className="mt-8 pt-6 border-t border-slate-100">
            <div className="flex items-center justify-between mb-2">
              <span className="font-semibold text-slate-700">Économie Potentielle</span>
              <span
                className={`font-bold text-xl ${
                  results.savings >= 0 ? 'text-green-600' : 'text-red-500'
                }`}
              >
                {results.savings >= 0 ? '+' : ''}
                {formatEUR(results.savings)} / mois
              </span>
            </div>
            <div className="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
              <div
                className={`h-full rounded-full transition-all duration-1000 ease-out ${
                  results.savings >= 0 ? 'bg-green-500' : 'bg-red-400'
                }`}
                style={{ width: `${Math.min(Math.abs(results.savingsPercent), 100)}%` }}
              />
            </div>
            {results.savings > 0 && (
              <p className="text-center text-sm text-green-700 font-medium mt-3 bg-green-50 py-1 px-3 rounded-full inline-block mx-auto">
                Vous économisez {Math.round(results.savingsPercent)}% sur votre budget logiciel global
              </p>
            )}
          </div>
        </div>

        {/* COMPARISON TABLE */}
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
          {/* Table Header */}
          <div className="grid grid-cols-12 bg-slate-50 border-b border-slate-200 text-sm font-semibold text-slate-500 uppercase tracking-wider py-4 px-6">
            <div className="col-span-12 md:col-span-5">Les 8 Piliers de l&apos;Écosystème</div>
            <div className="col-span-6 md:col-span-4 text-center text-red-600">Votre Situation Actuelle</div>
            <div className="col-span-6 md:col-span-3 text-center text-blue-700">Suite Visma Expert</div>
          </div>

          <div className="divide-y divide-slate-100">
            {results.breakdown.map((item) => (
              <div
                key={item.id}
                className="grid grid-cols-12 items-center py-6 px-4 md:px-6 hover:bg-slate-50 transition-colors group"
              >
                {/* 1. TOOL DESCRIPTION (Left) */}
                <div className="col-span-12 md:col-span-5 mb-4 md:mb-0 pr-4">
                  <div className="flex items-start gap-4">
                    <div className={`p-3 rounded-xl ${item.bg} ${item.color} shrink-0`}>
                      <item.icon size={24} strokeWidth={1.5} />
                    </div>
                    <div>
                      <h3 className="font-bold text-slate-900 text-lg">{item.label}</h3>
                      <div className="text-xs font-bold text-slate-400 uppercase mb-1 tracking-wide">
                        {item.category}
                      </div>
                      <p className="text-sm text-slate-600 leading-relaxed">
                        {item.desc}
                      </p>
                    </div>
                  </div>
                </div>

                {/* 2. SCENARIO A (Middle) */}
                <div className="col-span-6 md:col-span-4 flex flex-col items-center justify-center border-r border-slate-100 md:border-transparent">
                  <div className="flex flex-col items-center gap-2 w-full max-w-[140px]">
                    <div className="relative w-full">
                      <input
                        type="number"
                        min={0}
                        value={item.volA}
                        onChange={(e) => handleVolumeChange(item.id, e.target.value)}
                        className="w-full text-center py-1 px-2 border border-slate-300 rounded-md text-slate-700 font-medium focus:border-red-400 focus:ring-2 focus:ring-red-100 outline-none transition-all"
                      />
                      <span className="text-[10px] text-slate-400 text-center block mt-1">
                        {item.unit === 'dossier' ? 'dossiers équipés' : 'licences experts'}
                      </span>
                    </div>
                    <div className="text-sm font-medium text-slate-500">
                      x {item.publicPrice}€
                    </div>
                    <div className="font-bold text-red-600 text-lg">
                      {formatEUR(item.lineCostA)}
                    </div>
                  </div>
                </div>

                {/* 3. SCENARIO B (Right) */}
                <div className="col-span-6 md:col-span-3 flex flex-col items-center justify-center">
                  <div className="bg-blue-50 text-bl