"use client";

import React, { useEffect, useState } from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';
import Link from 'next/link';
import { ArrowLeft, Scale, Calculator, X } from 'lucide-react';
import CategorieAContent from './categorie-a-data';
import CategorieBFiction from './categorie-b-fiction';
import CategorieBFlux from './categorie-b-flux';
import CategorieBHors from './categorie-b-hors';
import FictionRealisateur from './fiction-realisateur';
import CategorieC from './categorie-c';
import ArtistesMusiciens from './artistes-musiciens';
import ArtistesInterpretes from './artistes-interpretes';
import SimulateurContent from '@/components/simulateur/SimulateurContent';
import CalculatorComponent from '@/components/Calculator';
import { useDraggableModal } from '@/hooks/useDraggableModal';
import { useSearchParams } from 'next/navigation';

export default function CCNPAPage() {
  usePageTitle("Minima CCNPA");
  const searchParams = useSearchParams();
  const isEmbed = searchParams.get('embed') === '1';
  const [isSimulateurOpen, setIsSimulateurOpen] = useState(false);
  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
  const [modalPosition, setModalPosition] = useState({ x: 0, y: 0 });
  const modalRef = React.useRef<HTMLDivElement>(null);


  // Gestion du drag & drop du modal
  const { onPointerDown, onPointerMove, onPointerUp } = useDraggableModal(
    modalRef,
    setModalPosition,
    { constrainToViewport: true, disableIframeDuringDrag: true }
  );

  // Écouter les messages de l'iframe pour ouvrir la calculatrice
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.data?.type === 'openCalculator') {
        setIsCalculatorOpen(true);
      }
    };

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

  // Post height to parent if embedded
  useEffect(() => {
    if (!isEmbed) return;
    const styleTag = document.createElement('style');
    styleTag.textContent = `aside, header { display: none !important; } main { padding: 8px !important; } body { background: transparent; }`;
    document.head.appendChild(styleTag);
    function postHeight() {
      try {
        const h = document.documentElement.scrollHeight;
        window.parent?.postMessage({ type: 'minima-ccn:height', height: h }, '*');
      } catch {}
    }
    postHeight();
    const ro = new ResizeObserver(() => postHeight());
    ro.observe(document.body);
    window.addEventListener('load', postHeight);
    window.addEventListener('resize', postHeight);
    return () => {
      ro.disconnect();
      window.removeEventListener('load', postHeight);
      window.removeEventListener('resize', postHeight);
      styleTag.remove();
    };
  }, [isEmbed]);

  useEffect(() => {
    // Script de gestion des onglets
    const tabs = Array.from(document.querySelectorAll('[role="tab"]'));
    const panels = Array.from(document.querySelectorAll('.ccnpa-panel'));

    function activateTab(tab: Element) {
      tabs.forEach((t) => {
        const selected = t === tab;
        t.setAttribute('aria-selected', selected ? 'true' : 'false');
        (t as HTMLElement).tabIndex = selected ? 0 : -1;
      });

      panels.forEach((p) => {
        const active = p.id === tab.getAttribute('aria-controls');
        p.classList.toggle('active', active);
        if (active) {
          p.removeAttribute('hidden');
        } else {
          p.setAttribute('hidden', '');
        }
      });

      (tab as HTMLElement).focus({ preventScroll: true });
    }

    tabs.forEach((tab) => {
      tab.addEventListener('click', () => activateTab(tab));
    });

    // Navigation clavier
    document.addEventListener('keydown', (e) => {
      const current = document.querySelector('[role="tab"][aria-selected="true"]');
      if (!current) return;
      const i = tabs.indexOf(current);
      if (e.key === 'ArrowRight') {
        e.preventDefault();
        activateTab(tabs[(i + 1) % tabs.length]);
      }
      if (e.key === 'ArrowLeft') {
        e.preventDefault();
        activateTab(tabs[(i - 1 + tabs.length) % tabs.length]);
      }
      if (e.key === 'Home') {
        e.preventDefault();
        activateTab(tabs[0]);
      }
      if (e.key === 'End') {
        e.preventDefault();
        activateTab(tabs[tabs.length - 1]);
      }
    });
  }, []);

  return (
  <div className={isEmbed ? "space-y-4" : "space-y-6"}>
      <style jsx global>{`
        .ccnpa-tabs [role="tablist"] {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 20px;
        }
        
        .ccnpa-tabs [role="tab"] {
          appearance: none;
          border: 1px solid #e2e8f0;
          background: white;
          border-radius: 999px;
          padding: 9px 16px;
          cursor: pointer;
          font-weight: 600;
          font-size: 14px;
          color: #475569;
          transition: all 0.2s;
        }
        
        .ccnpa-tabs [role="tab"]:hover {
          background: #f8fafc;
          border-color: #cbd5e1;
        }
        
        .ccnpa-tabs [role="tab"][aria-selected="true"] {
          background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
          border-color: #06b6d4;
          color: white;
          box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
        }
        
        .ccnpa-tabs [role="tab"]:focus-visible {
          outline: 2px solid #0ea5e9;
          outline-offset: 2px;
        }
        
        .ccnpa-panel {
          display: none;
        }
        
        .ccnpa-panel.active {
          display: block;
        }
      `}</style>

      {/* Navigation retour */}
      {!isEmbed && (
        <Link
          href="/minima-ccn"
          className="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          Retour aux minima CCN
        </Link>
      )}

      {/* En-tête */}
      <section className={isEmbed ? "rounded-xl border bg-white p-4" : "rounded-2xl border bg-white p-6"}>
        <div className="flex items-start gap-3">
          {!isEmbed && (
            <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
              <Scale className="w-6 h-6 text-white" />
            </div>
          )}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-2">
              <h1 className={isEmbed ? "text-base font-semibold text-slate-900" : "text-2xl font-semibold text-slate-900"}>CCNPA (IDCC 2642)</h1>
              {!isEmbed && (
                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">
                  À jour 2025
                </span>
              )}
            </div>
            {!isEmbed && (
              <p className="text-sm text-slate-600 mb-2">
                Convention Collective Nationale de la Production Audiovisuelle
              </p>
            )}
            <p className="text-xs text-slate-500">
              Grille des minima conventionnels pour les salariés de la production audiovisuelle.
              <br />
              <strong>Tous les montants sont exprimés bruts.</strong>
            </p>
          </div>
        </div>
      </section>

      {/* Onglets */}
      <section className={isEmbed ? "rounded-xl border bg-white p-4 ccnpa-tabs" : "rounded-2xl border bg-white p-6 ccnpa-tabs"}>
        {!isEmbed && (
          <p className="text-sm text-slate-600 mb-4">
            Cliquez sur un onglet pour accéder aux minima par catégorie professionnelle.
          </p>
        )}

        <div role="tablist" aria-label="Onglets CCNPA">
          <button
            role="tab"
            aria-selected="true"
            aria-controls="ccnpa-categorie-a"
            tabIndex={0}
          >
            Catégorie A
          </button>
          <button
            role="tab"
            aria-selected="false"
            aria-controls="ccnpa-categorie-b-fiction"
            tabIndex={-1}
          >
            Catégorie B - Fiction
          </button>
          <button
            role="tab"
            aria-selected="false"
            aria-controls="ccnpa-categorie-b-flux"
            tabIndex={-1}
          >
            Catégorie B - Flux
          </button>
          <button
            role="tab"
            aria-selected="false"
            aria-controls="ccnpa-categorie-b-hors"
            tabIndex={-1}
          >
            Catégorie B - Hors fiction & flux
          </button>
          <button
            role="tab"
            aria-selected="false"
            aria-controls="ccnpa-categorie-c"
            tabIndex={-1}
          >
            Catégorie C
          </button>
          <button
            role="tab"
            aria-selected="false"
            aria-controls="ccnpa-artistes-musiciens"
            tabIndex={-1}
          >
            Artistes Musiciens
          </button>
          <button
            role="tab"
            aria-selected="false"
            aria-controls="ccnpa-artistes-interpretes"
            tabIndex={-1}
          >
            Artistes Interprètes
          </button>
          <button
            role="tab"
            aria-selected="false"
            aria-controls="ccnpa-fiction-realisateur"
            tabIndex={-1}
          >
            Fiction - Réalisateur
          </button>
        </div>

        {/* Panneaux */}
        <div id="ccnpa-categorie-a" className="ccnpa-panel active" role="tabpanel">
          <CategorieAContent />
        </div>
        
        <div id="ccnpa-categorie-b-fiction" className="ccnpa-panel" role="tabpanel" hidden>
          <CategorieBFiction />
        </div>
        
        <div id="ccnpa-categorie-b-flux" className="ccnpa-panel" role="tabpanel" hidden>
          <CategorieBFlux />
        </div>
        
        <div id="ccnpa-categorie-b-hors" className="ccnpa-panel" role="tabpanel" hidden>
          <CategorieBHors />
        </div>
        
        <div id="ccnpa-categorie-c" className="ccnpa-panel" role="tabpanel" hidden>
          <CategorieC />
        </div>

        <div id="ccnpa-fiction-realisateur" className="ccnpa-panel" role="tabpanel" hidden>
          <FictionRealisateur />
        </div>

        <div id="ccnpa-artistes-musiciens" className="ccnpa-panel" role="tabpanel" hidden>
          <ArtistesMusiciens />
        </div>

        <div id="ccnpa-artistes-interpretes" className="ccnpa-panel" role="tabpanel" hidden>
          <ArtistesInterpretes />
        </div>
      </section>

      {/* Bouton flottant Simulateur */}
      {!isEmbed && (
      <button
        onClick={() => setIsSimulateurOpen(!isSimulateurOpen)}
        className="fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 px-5 py-3 rounded-full text-sm font-bold bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 hover:from-amber-500 hover:to-amber-600 transition-all shadow-lg hover:shadow-xl hover:scale-105"
      >
        <Calculator className="w-5 h-5" />
        Simulateur
      </button>
      )}

      {/* Modale compacte qui sort du bouton */}
      {!isEmbed && isSimulateurOpen && (
        <>
          {/* Modale compacte déplaçable */}
          <div 
            ref={modalRef}
            className="fixed z-50 w-[500px] max-h-[680px] bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden"
            style={{
              left: modalPosition.x !== 0 ? `${modalPosition.x}px` : 'auto',
              top: modalPosition.y !== 0 ? `${modalPosition.y}px` : 'auto',
              bottom: modalPosition.x === 0 && modalPosition.y === 0 ? '6rem' : 'auto',
              right: modalPosition.x === 0 && modalPosition.y === 0 ? '1.5rem' : 'auto',
            }}
          >
            {/* Header draggable */}
            <div 
              className="flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-amber-50 to-orange-50 cursor-move select-none touch-none"
              onPointerDown={onPointerDown}
              onPointerMove={onPointerMove}
              onPointerUp={onPointerUp}
            >
              <h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
                <Calculator className="w-4 h-4 text-amber-600" />
                Simulateur de paie
              </h3>
              <button
                onClick={() => {
                  setIsSimulateurOpen(false);
                  setModalPosition({ x: 0, y: 0 }); // Réinitialiser la position
                }}
                className="p-1.5 rounded-lg hover:bg-slate-100 transition-colors"
                aria-label="Fermer le simulateur"
                onPointerDown={(e) => e.stopPropagation()}
              >
                <X className="w-4 h-4 text-slate-600" />
              </button>
            </div>
            
            {/* Content avec scroll */}
            <div className="flex-1 overflow-auto p-4">
              <SimulateurContent hideInfoPanel />
            </div>
          </div>
        </>
      )}

      {/* Calculatrice globale */}
      {!isEmbed && (
        <CalculatorComponent 
          isOpen={isCalculatorOpen}
          onClose={() => setIsCalculatorOpen(false)}
        />
      )}
    </div>
  );
}
