"use client";

import React, { useEffect } from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';
import { Calculator, Info, AlertTriangle, Scale } from 'lucide-react';
import { usePostHog } from 'posthog-js/react';

export default function SimulateurPage() {
  usePageTitle("Simulateur de paie");
  const posthog = usePostHog();

  // 📊 Écouter les messages de l'iframe pour tracker les calculs
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // Vérifier que le message vient de notre iframe
      if (event.data?.type === 'simulateur_calculation') {
        const data = event.data.data;
        
        // Envoyer l'événement enrichi à PostHog
        posthog?.capture('simulateur_calculation', {
          // Paramètres du formulaire
          ccn_id: data.ccn_id,
          ccn_nom: data.ccn_nom,
          categorie: data.categorie,
          statut: data.statut,
          abattement_active: data.abattement_active,
          abattement_profession: data.abattement_profession,
          
          // Cachets, heures, dates
          cachets: data.cachets,
          heures: data.heures,
          dates_travail: data.dates_travail,
          nombre_jours: data.nombre_jours,
          
          // Montant saisi et type
          montant_saisi: data.montant_saisi,
          type_calcul: data.type_calcul,
          
          // Résultats calculés
          resultat_brut: data.resultat_brut,
          resultat_net: data.resultat_net,
          resultat_cost: data.resultat_cost,
          
          // Métadonnées
          plafond_urssaf: data.plafond_urssaf,
          timestamp: data.timestamp
        });
      }
    };

    window.addEventListener('message', handleMessage);
    
    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, [posthog]);

  return (
    <div className="max-w-7xl mx-auto px-4">
      <style jsx global>{`
        .simulateur-iframe {
          width: 100%;
          min-height: 1100px;
          border: none;
          border-radius: 12px;
          box-shadow: 0 1px 3px rgba(0,0,0,.06);
          background: white;
        }
      `}</style>

      {/* En-tête compact */}
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-1">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-md">
            <Calculator className="w-5 h-5 text-white" />
          </div>
          <h1 className="text-2xl font-bold text-slate-900">Simulateur de paie intermittent</h1>
        </div>
        <p className="text-sm text-slate-600 ml-13">
          Calculez le coût de recrutement d'un intermittent du spectacle (CDDU)
        </p>
      </div>

      {/* Layout 2 colonnes : simulateur à gauche, cards info à droite */}
      <div className="grid grid-cols-1 xl:grid-cols-[1fr_340px] gap-5">
        
        {/* Colonne principale : Simulateur en iframe */}
        <div className="order-2 xl:order-1">
          <iframe 
            src="/simulateur-embed.html" 
            className="simulateur-iframe"
            title="Simulateur de paie intermittent"
            loading="lazy"
          />
        </div>

        {/* Colonne droite : Cards d'information compactes */}
        <aside className="order-1 xl:order-2 space-y-4 xl:sticky xl:top-20 xl:self-start" aria-label="Aide et explications">
          
          {/* Card : Mode d'emploi */}
          <div className="bg-white rounded-xl shadow-sm border border-slate-200/80 p-5 hover:shadow-md transition-shadow">
            <div className="flex items-center gap-2 mb-3">
              <div className="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <Info className="w-4 h-4 text-indigo-600" />
              </div>
              <h3 className="text-base font-semibold text-slate-900">Mode d'emploi</h3>
            </div>
            
            <ul className="space-y-2.5 text-sm text-slate-700">
              <li className="flex items-start gap-2.5">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">1</span>
                <span className="leading-snug">Choisissez la Convention Collective et le statut</span>
              </li>
              <li className="flex items-start gap-2.5">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">2</span>
                <span className="leading-snug">Indiquez les cachets/heures et dates travaillées</span>
              </li>
              <li className="flex items-start gap-2.5">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">3</span>
                <span className="leading-snug">Saisissez le montant (Brut, Net ou Coût employeur)</span>
              </li>
              <li className="flex items-start gap-2.5">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">4</span>
                <span className="leading-snug">Consultez les résultats avec le détail des cotisations</span>
              </li>
            </ul>
            
            <div className="mt-4 pt-4 border-t border-slate-100">
              <p className="text-xs text-slate-500">
                <span className="font-medium text-slate-700">Taux à jour 2025</span>
              </p>
            </div>
          </div>

          {/* Card : Disclaimer compact */}
          <div className="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/80 rounded-xl shadow-sm p-5">
            <div className="flex items-start gap-2.5 mb-5">
              <div className="flex-shrink-0 mt-0.5">
                <AlertTriangle className="w-4 h-4 text-amber-600" />
              </div>
              <div className="flex-1">
                <h3 className="text-sm font-semibold text-amber-900 mb-3">Limitations</h3>
                <p className="text-xs text-amber-800 leading-relaxed mb-2">
                  Le simulateur ne prévoit pas certains cas particuliers
                </p>
                <ul className="text-xs text-amber-800 leading-relaxed space-y-1 ml-3">
                  <li className="flex items-start gap-1.5">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Mineurs de moins de 16 ans</span>
                  </li>
                  <li className="flex items-start gap-1.5">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Cumul annuel</span>
                  </li>
                  <li className="flex items-start gap-1.5">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Taxe sur les salaires</span>
                  </li>
                  <li className="flex items-start gap-1.5">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Taxe d'apprentissage</span>
                  </li>
                  <li className="flex items-start gap-1.5">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Non-résidents fiscaux</span>
                  </li>
                  <li className="flex items-start gap-1.5">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Contrats multi-mois</span>
                  </li>
                  <li className="flex items-start gap-1.5">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Plus de 2 cachets par jour</span>
                  </li>
                </ul>
              </div>
            </div>
            
            <div className="flex items-start gap-2.5">
              <div className="flex-shrink-0 mt-0.5">
                <Scale className="w-4 h-4 text-amber-600" />
              </div>
              <div className="flex-1">
                <h3 className="text-sm font-semibold text-amber-900 mb-2">Mentions légales</h3>
                <p className="text-xs text-amber-800 leading-relaxed">
                  <em>Sauf erreurs ou omissions.</em> Les résultats fournis par le simulateur peuvent être imprécis ou erronés. 
                  Les informations communiquées par le simulateur n'engagent pas la responsabilité de Odentas Media SAS quant 
                  à leur utilisation et/ou leur interprétation. Elles ne sont considérées par l'utilisateur que sous sa seule responsabilité.
                </p>
              </div>
            </div>
          </div>

        </aside>
      </div>
    </div>
  );
}
