"use client";

import React, { useState } from 'react';
import CategorieBHorsData from './categorie-b-hors-data';
import CategorieBHorsDataPart2 from './categorie-b-hors-data-part2';
import CategorieBHorsDataPart3 from './categorie-b-hors-data-part3';

type Filiere = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';

const filieres: { code: Filiere; nom: string; part: 1 | 2 | 3 }[] = [
  { code: 'A', nom: 'Contenu du programme et collaboration artistique', part: 1 },
  { code: 'B', nom: 'Costumes, décor', part: 1 },
  { code: 'C', nom: 'Image', part: 1 },
  { code: 'D', nom: 'Plateaux et tournage', part: 2 },
  { code: 'E', nom: 'Postproduction', part: 2 },
  { code: 'F', nom: 'Production', part: 2 },
  { code: 'G', nom: 'Réalisation', part: 3 },
  { code: 'H', nom: 'Son', part: 3 },
  { code: 'I', nom: 'Web', part: 3 },
];

export default function CategorieBHors() {
  const [activeFiliere, setActiveFiliere] = useState<Filiere>('A');
  const [hoveredFiliere, setHoveredFiliere] = useState<Filiere | null>(null);

  const activePart = filieres.find(f => f.code === activeFiliere)?.part || 1;

  return (
    <div className="space-y-4">
      {/* En-tête de la catégorie */}
      <div className="rounded-xl border bg-gradient-to-br from-emerald-50 to-teal-50 p-4">
        <h2 className="text-lg font-semibold text-emerald-900 mb-1">
          Catégorie B - Hors fiction & flux
        </h2>
        <p className="text-sm text-emerald-700">
          Grille des salaires par filière - Programmes ni fiction, ni flux
        </p>
        {/* Ligne d'information globale supprimée pour alléger l'en-tête */}
      </div>

      {/* Sélection des filières */}
      <div className="space-y-3">
        <p className="text-xs text-slate-600">
          Sélectionnez une filière pour explorer les emplois :
        </p>

        <div className="flex flex-wrap gap-2">
          {filieres.map((filiere) => (
            <div key={filiere.code} className="relative">
              <button
                onClick={() => setActiveFiliere(filiere.code)}
                onMouseEnter={() => setHoveredFiliere(filiere.code)}
                onMouseLeave={() => setHoveredFiliere(null)}
                className={`relative px-4 py-2 rounded-full text-sm font-semibold transition-all ${
                  activeFiliere === filiere.code
                    ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md'
                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                }`}
              >
                Filière {filiere.code}
                {activeFiliere === filiere.code && (
                  <span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-white flex items-center justify-center">
                    <svg className="w-3 h-3 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                    </svg>
                  </span>
                )}
              </button>
              
              {/* Tooltip */}
              {hoveredFiliere === filiere.code && (
                <div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-slate-900 text-white text-xs font-medium rounded-lg shadow-lg whitespace-nowrap animate-in fade-in slide-in-from-bottom-1 duration-200">
                  {filiere.nom}
                  <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px">
                    <div className="border-4 border-transparent border-t-slate-900" />
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Contenu */}
        <div className="mt-4">
          {activePart === 1 && <CategorieBHorsData key={activeFiliere} activeFiliere={activeFiliere} />}
          {activePart === 2 && <CategorieBHorsDataPart2 key={activeFiliere} activeFiliere={activeFiliere} />}
          {activePart === 3 && <CategorieBHorsDataPart3 key={activeFiliere} activeFiliere={activeFiliere} />}
        </div>
      </div>
    </div>
  );
}
