"use client";

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

interface SimulateurContentProps {
  hideInfoPanel?: boolean;
}

export default function SimulateurContent({ hideInfoPanel = false }: SimulateurContentProps) {
  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,
          
          // Ajout du contexte sidebar
          opened_from: 'sidebar'
        });

        console.log('📊 PostHog: Événement simulateur_calculation (sidebar) enrichi envoyé', {
          categorie: data.categorie,
          ccn: data.ccn_nom,
          type_calcul: data.type_calcul,
          montant_saisi: data.montant_saisi,
          resultats: {
            brut: data.resultat_brut,
            net: data.resultat_net,
            cost: data.resultat_cost
          }
        });
      }
    };

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

  return (
    <div className="h-full">
      <style jsx global>{`
        .simulateur-iframe-sidebar {
          width: 100%;
          height: calc(100vh - 73px);
          border: none;
          background: white;
        }
        .simulateur-iframe-sidebar.compact {
          height: 420px; /* Taille plus compacte pour le modal */
        }
      `}</style>

      {/* Layout avec simulateur et info */}
      <div className="h-full flex flex-col lg:flex-row">
        
        {/* Simulateur principal */}
        <div className="flex-1 min-w-0">
          <iframe 
            src={hideInfoPanel ? "/simulateur-embed-compact.html" : "/simulateur-embed.html"}
            className={hideInfoPanel ? "simulateur-iframe-sidebar compact" : "simulateur-iframe-sidebar"}
            title="Simulateur de paie intermittent"
            loading="lazy"
          />
        </div>

        {/* Panneau d'information (optionnel, masqué sur petits écrans ou en mode compact) */}
        {!hideInfoPanel && (
          <aside className="hidden xl:block w-80 border-l bg-slate-50 p-5 space-y-4 overflow-y-auto" aria-label="Aide et explications">
          
          {/* Card : Mode d'emploi */}
          <div className="bg-white rounded-xl shadow-sm border border-slate-200/80 p-4">
            <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-sm font-semibold text-slate-900">Mode d'emploi</h3>
            </div>
            
            <ul className="space-y-2 text-xs text-slate-700">
              <li className="flex items-start gap-2">
                <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">
                <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">
                <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">
                <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-3 pt-3 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-4">
            <div className="flex items-start gap-2 mb-3">
              <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-xs font-semibold text-amber-900 mb-2">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-2">
                  <li className="flex items-start gap-1">
                    <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">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Cumul annuel</span>
                  </li>
                  <li className="flex items-start gap-1">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Taxe sur les salaires</span>
                  </li>
                  <li className="flex items-start gap-1">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Taxe d'apprentissage</span>
                  </li>
                  <li className="flex items-start gap-1">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Non-résidents fiscaux</span>
                  </li>
                  <li className="flex items-start gap-1">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>Contrats multi-mois</span>
                  </li>
                  <li className="flex items-start gap-1">
                    <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 mt-3 pt-3 border-t border-amber-200/50">
              <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-xs font-semibold text-amber-900 mb-1">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.
                </p>
              </div>
            </div>
          </div>

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