"use client";

import React, { useState, useMemo } from 'react';
import { Sparkles, Film, ClipboardList, Search, ChevronDown, ChevronUp } from 'lucide-react';

// Fonction pour parser les montants en euros
function parseEuro(value: string | null): number | null {
  if (!value || value === '-') return null;
  const cleaned = value.replace(/\s/g, '').replace('€', '').replace(',', '.');
  const parsed = parseFloat(cleaned);
  return isNaN(parsed) ? null : parsed;
}

// Fonction pour formater en euros
function euro(value: number | null): string {
  if (value === null) return '-';
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: 'EUR'
  }).format(value);
}

// Interface pour un emploi
interface Emploi {
  nom: string;
  filiere: string;
  niveau: string;
  cddu: {
    semaine35h: number | null;
    semaine39h: number | null;
    jour7h: number | null;
    jour8h: number | null;
    mois35h: number | null;
    mois39h: number | null;
  };
  cdi: number | null;
}

// Données des emplois - Filières D, E, F
const emploisData: Emploi[] = [
  // Filière D - Maquillage & Coiffure
  { nom: "Blocker / Rigger", filiere: "D", niveau: "IV", cddu: { semaine35h: 852.54, semaine39h: 974.34, jour7h: 189.45, jour8h: 216.52, mois35h: 3239.67, mois39h: 3702.47 }, cdi: 1828.83 },
  { nom: "Chef électricien", filiere: "D", niveau: "IIIB", cddu: { semaine35h: 965.54, semaine39h: 1103.47, jour7h: 214.56, jour8h: 245.22, mois35h: 3669.05, mois39h: 4193.19 }, cdi: 2289.87 },
  { nom: "Chef machiniste", filiere: "D", niveau: "IIIB", cddu: { semaine35h: 965.54, semaine39h: 1103.47, jour7h: 214.56, jour8h: 245.22, mois35h: 3669.05, mois39h: 4193.19 }, cdi: 2289.87 },
  { nom: "Chef maquilleur", filiere: "D", niveau: "IIIA", cddu: { semaine35h: 862.86, semaine39h: 986.13, jour7h: 191.75, jour8h: 219.14, mois35h: 3278.87, mois39h: 3747.27 }, cdi: 2410.40 },
  { nom: "Coiffeur", filiere: "D", niveau: "V", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1828.83 },
  { nom: "Coiffeur perruquier", filiere: "D", niveau: "IV", cddu: { semaine35h: 871.40, semaine39h: 995.89, jour7h: 193.65, jour8h: 221.31, mois35h: 3311.33, mois39h: 3784.37 }, cdi: 1988.58 },
  { nom: "Conducteur de groupe", filiere: "D", niveau: "IV", cddu: { semaine35h: 859.91, semaine39h: 982.76, jour7h: 191.09, jour8h: 218.39, mois35h: 3267.67, mois39h: 3734.47 }, cdi: 1988.58 },
  { nom: "Électricien / Éclairagiste", filiere: "D", niveau: "V", cddu: { semaine35h: 792.18, semaine39h: 905.35, jour7h: 176.04, jour8h: 201.19, mois35h: 3010.30, mois39h: 3440.33 }, cdi: 1828.83 },
  { nom: "Machiniste", filiere: "D", niveau: "V", cddu: { semaine35h: 792.18, semaine39h: 905.35, jour7h: 176.04, jour8h: 201.19, mois35h: 3010.30, mois39h: 3440.33 }, cdi: 1828.83 },
  { nom: "Maquilleur", filiere: "D", niveau: "V", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1828.83 },
  { nom: "Maquilleur et coiffeur effets spéciaux", filiere: "D", niveau: "IIIB", cddu: { semaine35h: 1045.91, semaine39h: 1195.33, jour7h: 232.42, jour8h: 265.63, mois35h: 3974.47, mois39h: 4542.23 }, cdi: 2169.36 },
  { nom: "Prothésiste", filiere: "D", niveau: "IIIB", cddu: { semaine35h: 1045.91, semaine39h: 1195.33, jour7h: 232.42, jour8h: 265.63, mois35h: 3974.47, mois39h: 4542.23 }, cdi: 2169.36 },

  // Filière E - Post-production
  { nom: "Assistant de post-production", filiere: "E", niveau: "IV", cddu: { semaine35h: 610.78, semaine39h: 698.03, jour7h: 135.73, jour8h: 155.12, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Assistant monteur", filiere: "E", niveau: "IV", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1928.32 },
  { nom: "Assistant monteur adjoint", filiere: "E", niveau: "VI", cddu: { semaine35h: 451.99, semaine39h: 516.55, jour7h: 100.44, jour8h: 114.79, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Chargé de post-production", filiere: "E", niveau: "IIIA", cddu: { semaine35h: 1025.42, semaine39h: 1171.91, jour7h: 227.87, jour8h: 260.42, mois35h: 3896.61, mois39h: 4453.25 }, cdi: 2651.44 },
  { nom: "Chef monteur", filiere: "E", niveau: "IIIA", cddu: { semaine35h: 1099.85, semaine39h: 1256.97, jour7h: 244.41, jour8h: 279.33, mois35h: 4179.43, mois39h: 4776.47 }, cdi: 2651.44 },
  { nom: "Conformateur", filiere: "E", niveau: "IIIB", cddu: { semaine35h: 941.43, semaine39h: 1075.92, jour7h: 209.21, jour8h: 239.09, mois35h: 3577.43, mois39h: 4088.48 }, cdi: 2169.36 },
  { nom: "Directeur de post-production", filiere: "E", niveau: "II", cddu: { semaine35h: 1245.64, semaine39h: 1423.59, jour7h: 276.81, jour8h: 316.35, mois35h: 4733.44, mois39h: 5409.64 }, cdi: 2892.47 },
  { nom: "Étalonneur", filiere: "E", niveau: "IIIB", cddu: { semaine35h: 941.43, semaine39h: 1075.92, jour7h: 209.21, jour8h: 239.09, mois35h: 3577.43, mois39h: 4088.48 }, cdi: 2169.36 },
  { nom: "Infographiste", filiere: "E", niveau: "IIIA", cddu: { semaine35h: 1025.42, semaine39h: 1171.91, jour7h: 227.87, jour8h: 260.42, mois35h: 3896.61, mois39h: 4453.25 }, cdi: 2530.92 },
  { nom: "Mixeur", filiere: "E", niveau: "II", cddu: { semaine35h: 1328.48, semaine39h: 1518.26, jour7h: 295.22, jour8h: 337.39, mois35h: 5048.21, mois39h: 5769.37 }, cdi: 2892.47 },
  { nom: "Mixeur (direct ou conditions du direct)", filiere: "E", niveau: "IIIA", cddu: { semaine35h: 1025.42, semaine39h: 1171.91, jour7h: 227.87, jour8h: 260.42, mois35h: 3896.61, mois39h: 4453.25 }, cdi: 2530.92 },
  { nom: "Superviseur d'effets spéciaux postproduction", filiere: "E", niveau: "IIIA", cddu: { semaine35h: 1162.83, semaine39h: 1328.95, jour7h: 258.41, jour8h: 295.32, mois35h: 4418.76, mois39h: 5050.00 }, cdi: 2651.44 },
  { nom: "Truquiste", filiere: "E", niveau: "IIIA", cddu: { semaine35h: 956.07, semaine39h: 1092.65, jour7h: 212.46, jour8h: 242.81, mois35h: 3633.08, mois39h: 4152.08 }, cdi: 2530.92 },

  // Filière F - Production
  { nom: "Administrateur de production", filiere: "F", niveau: "IIIA", cddu: { semaine35h: 856.04, semaine39h: 978.33, jour7h: 190.23, jour8h: 217.41, mois35h: 3252.95, mois39h: 3717.65 }, cdi: 2591.18 },
  { nom: "Aide de plateau", filiere: "F", niveau: "VI", cddu: { semaine35h: 470.71, semaine39h: 537.96, jour7h: 104.60, jour8h: 119.55, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Assistant d'émission", filiere: "F", niveau: "VI", cddu: { semaine35h: 451.99, semaine39h: 516.55, jour7h: 100.44, jour8h: 114.79, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Assistant de production", filiere: "F", niveau: "IV", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1988.58 },
  { nom: "Assistant de production adjoint", filiere: "F", niveau: "VI", cddu: { semaine35h: 451.99, semaine39h: 516.55, jour7h: 100.44, jour8h: 114.79, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Assistant régisseur adjoint", filiere: "F", niveau: "VI", cddu: { semaine35h: 451.99, semaine39h: 516.55, jour7h: 100.44, jour8h: 114.79, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Chargé de production", filiere: "F", niveau: "II", cddu: { semaine35h: 939.02, semaine39h: 1073.16, jour7h: 208.67, jour8h: 238.48, mois35h: 3568.27, mois39h: 4078.01 }, cdi: 2892.47 },
  { nom: "Chauffeur", filiere: "F", niveau: "VI", cddu: { semaine35h: 470.71, semaine39h: 537.96, jour7h: 104.60, jour8h: 119.55, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Chauffeur de salle", filiere: "F", niveau: "IIIB", cddu: { semaine35h: 871.40, semaine39h: 995.89, jour7h: 193.65, jour8h: 221.31, mois35h: 3311.33, mois39h: 3784.37 }, cdi: 2169.36 },
  { nom: "Comptable de production", filiere: "F", niveau: "IV", cddu: { semaine35h: 732.47, semaine39h: 837.11, jour7h: 162.77, jour8h: 186.02, mois35h: 2783.39, mois39h: 3181.01 }, cdi: 2169.36 },
  { nom: "Coordinateur d'émission", filiere: "F", niveau: "IIIB", cddu: { semaine35h: 727.88, semaine39h: 831.86, jour7h: 161.75, jour8h: 184.86, mois35h: 2765.95, mois39h: 3161.07 }, cdi: 2147.87 },
  { nom: "Directeur de production", filiere: "F", niveau: "I", cddu: { semaine35h: 1509.58, semaine39h: 1725.23, jour7h: 335.46, jour8h: 383.39, mois35h: 5736.40, mois39h: 6555.86 }, cdi: 3314.29 },
  { nom: "Dresseur", filiere: "F", niveau: "II", cddu: { semaine35h: 1099.85, semaine39h: 1256.97, jour7h: 244.41, jour8h: 279.33, mois35h: 4179.43, mois39h: 4776.47 }, cdi: 2952.74 },
  { nom: "Producteur exécutif", filiere: "", niveau: "HN", cddu: { semaine35h: null, semaine39h: null, jour7h: null, jour8h: null, mois35h: null, mois39h: null }, cdi: null },
  { nom: "Régisseur / Responsable des repérages", filiere: "F", niveau: "IIIB", cddu: { semaine35h: 810.55, semaine39h: 926.34, jour7h: 180.12, jour8h: 205.85, mois35h: 3080.09, mois39h: 3520.09 }, cdi: 2169.36 },
  { nom: "Régisseur adjoint", filiere: "F", niveau: "IV", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1988.58 },
  { nom: "Régisseur de plateau / Chef de plateau", filiere: "F", niveau: "IV", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1828.83 },
  { nom: "Régisseur général", filiere: "F", niveau: "IIIA", cddu: { semaine35h: 939.02, semaine39h: 1073.16, jour7h: 208.67, jour8h: 238.48, mois35h: 3568.27, mois39h: 4078.01 }, cdi: 2651.44 },
  { nom: "Régulateur de stationnement", filiere: "F", niveau: "VI", cddu: { semaine35h: 451.99, semaine39h: 516.55, jour7h: 100.44, jour8h: 114.79, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
  { nom: "Responsable des enfants", filiere: "F", niveau: "IIIB", cddu: { semaine35h: 727.88, semaine39h: 831.86, jour7h: 161.75, jour8h: 184.86, mois35h: 2765.95, mois39h: 3161.07 }, cdi: 2048.84 },
  { nom: "Secrétaire de production", filiere: "F", niveau: "V", cddu: { semaine35h: 610.78, semaine39h: 698.03, jour7h: 135.73, jour8h: 155.12, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
];

// Définition des filières
const filieres = [
  { code: 'D', nom: 'Plateaux et tournage', icon: Sparkles, color: 'pink' },
  { code: 'E', nom: 'Postproduction', icon: Film, color: 'indigo' },
  { code: 'F', nom: 'Production', icon: ClipboardList, color: 'green' },
];

// Classes de couleurs pour chaque filière
const colorClasses: Record<string, {
  bg: string;
  border: string;
  text: string;
  hover: string;
  gradient: string;
  ring: string;
}> = {
  pink: {
    bg: 'from-pink-50 to-rose-50',
    border: 'border-pink-200',
    text: 'text-pink-700',
    hover: 'hover:border-pink-300',
    gradient: 'from-pink-500 to-rose-600',
    ring: 'ring-pink-200',
  },
  indigo: {
    bg: 'from-indigo-50 to-purple-50',
    border: 'border-indigo-200',
    text: 'text-indigo-700',
    hover: 'hover:border-indigo-300',
    gradient: 'from-indigo-500 to-purple-600',
    ring: 'ring-indigo-200',
  },
  green: {
    bg: 'from-green-50 to-emerald-50',
    border: 'border-green-200',
    text: 'text-green-700',
    hover: 'hover:border-green-300',
    gradient: 'from-green-500 to-emerald-600',
    ring: 'ring-green-200',
  },
};

// Composant pour une carte d'emploi
interface EmploiCardProps {
  emploi: Emploi;
  color: string;
}

function EmploiCard({ emploi, color }: EmploiCardProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [activeTab, setActiveTab] = useState<'cddu' | 'cdi'>('cdi');
  const colors = colorClasses[color];

  return (
    <div className={`rounded-xl border-2 ${colors.border} bg-white overflow-hidden transition-all ${colors.hover}`}>
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full p-4 text-left flex items-center justify-between hover:bg-slate-50 transition-colors"
      >
        <div className="flex-1">
          <h4 className="font-semibold text-slate-900">{emploi.nom}</h4>
          <p className="text-xs text-slate-500 mt-0.5">
            {emploi.niveau !== 'HN' ? (
              <>
                Niveau {emploi.niveau} • CDI mensuel : <span className="font-semibold">{euro(emploi.cdi)}</span>
              </>
            ) : (
              <>Niveau Hors Niveau • <span className="font-semibold">Rémunération non définie par la CCN</span></>
            )}
          </p>
        </div>
        {isExpanded ? (
          <ChevronUp className="w-5 h-5 text-slate-400 flex-shrink-0" />
        ) : (
          <ChevronDown className="w-5 h-5 text-slate-400 flex-shrink-0" />
        )}
      </button>

      {isExpanded && emploi.niveau !== 'HN' && (
        <div className="border-t p-4 bg-slate-50">
          {/* Tabs CDI / CDDU */}
          <div className="flex gap-2 mb-4">
            <button
              onClick={() => setActiveTab('cdi')}
              className={`flex-1 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
                activeTab === 'cdi'
                  ? `bg-gradient-to-r ${colors.gradient} text-white shadow-sm`
                  : 'bg-white text-slate-600 hover:bg-slate-100'
              }`}
            >
              CDI / CDD
            </button>
            <button
              onClick={() => setActiveTab('cddu')}
              className={`flex-1 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
                activeTab === 'cddu'
                  ? `bg-gradient-to-r ${colors.gradient} text-white shadow-sm`
                  : 'bg-white text-slate-600 hover:bg-slate-100'
              }`}
            >
              CDDU
            </button>
          </div>

          {/* Contenu CDI */}
          {activeTab === 'cdi' && (
            <div className={`rounded-lg bg-gradient-to-br ${colors.bg} border ${colors.border} p-4`}>
              <p className="text-xs font-semibold text-slate-700 mb-2">Salaire mensuel</p>
              <p className={`text-2xl font-bold ${colors.text}`}>{euro(emploi.cdi)}</p>
              <p className="text-xs text-slate-500 mt-1">Base 35h / mois</p>
            </div>
          )}

          {/* Contenu CDDU */}
          {activeTab === 'cddu' && (
            <div className="space-y-3">
              {/* Par semaine */}
              <div className={`rounded-lg bg-gradient-to-br ${colors.bg} border ${colors.border} p-3`}>
                <p className="text-xs font-semibold text-slate-700 mb-2">Par semaine</p>
                <div className="grid grid-cols-2 gap-3 text-xs">
                  <div>
                    <p className="text-slate-500">Base 35h</p>
                    <p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.semaine35h)}</p>
                  </div>
                  <div>
                    <p className="text-slate-500">Base 39h</p>
                    <p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.semaine39h)}</p>
                  </div>
                </div>
              </div>

              {/* Par jour */}
              <div className={`rounded-lg ${colors.bg} border ${colors.border} p-3`}>
                <p className="text-xs font-semibold text-slate-700 mb-2">Par jour</p>
                <div className="grid grid-cols-2 gap-3 text-xs">
                  <div>
                    <p className="text-slate-500">Base 7h</p>
                    <p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.jour7h)}</p>
                  </div>
                  <div>
                    <p className="text-slate-500">Base 8h</p>
                    <p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.jour8h)}</p>
                  </div>
                </div>
              </div>

              {/* Par mois */}
              <div className={`rounded-lg ${colors.bg} border ${colors.border} p-3`}>
                <p className="text-xs font-semibold text-slate-700 mb-2">Par mois</p>
                <div className="grid grid-cols-2 gap-3 text-xs">
                  <div>
                    <p className="text-slate-500">Base 35h</p>
                    <p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.mois35h)}</p>
                  </div>
                  <div>
                    <p className="text-slate-500">Base 39h</p>
                    <p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.mois39h)}</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// Composant principal
interface CategorieBHorsDataPart2Props {
  activeFiliere: string;
}

export default function CategorieBHorsDataPart2({ activeFiliere }: CategorieBHorsDataPart2Props) {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredEmplois = useMemo(() => {
    // D'abord filtrer par la filière active
    let result = emploisData.filter(e => e.filiere === activeFiliere);

    // Puis appliquer le filtre de recherche
    if (searchTerm) {
      result = result.filter(e =>
        e.nom.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    return result.sort((a, b) => a.nom.localeCompare(b.nom));
  }, [activeFiliere, searchTerm]);

  // Déterminer la couleur en fonction de la filière
  const getColorForFiliere = (filiereCode: string): keyof typeof colorClasses => {
    const filiere = filieres.find(f => f.code === filiereCode);
    return (filiere?.color as keyof typeof colorClasses) || 'blue';
  };
  const activeFiliereInfo = filieres.find(f => f.code === activeFiliere);

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <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">
          Filière {activeFiliere} - {activeFiliereInfo?.nom || 'Filière'}
        </h2>
        <p className="text-xs text-emerald-600 mt-2">
          {emploisData.length} emplois - Grille de salaires CCNPA (IDCC 2642) - Valeurs 2025
        </p>
      </div>

      {/* Recherche */}
      <div className="space-y-4">
        {/* Barre de recherche */}
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder={`Rechercher dans ${activeFiliereInfo?.nom || 'la filière'}...`}
            className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-slate-200 focus:ring-2 focus:ring-emerald-500 focus:border-transparent text-sm"
          />
        </div>

        {/* Résultats */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-semibold text-slate-700">
              {filteredEmplois.length} emploi{filteredEmplois.length > 1 ? 's' : ''} trouvé{filteredEmplois.length > 1 ? 's' : ''}
            </h3>
            {searchTerm && (
              <button
                onClick={() => setSearchTerm('')}
                className="text-xs text-slate-500 hover:text-slate-700"
              >
                Effacer la recherche
              </button>
            )}
          </div>

          <div className="space-y-2">
            {filteredEmplois.map((emploi, index) => (
              <EmploiCard
                key={index}
                emploi={emploi}
                color={getColorForFiliere(emploi.filiere)}
              />
            ))}
          </div>

          {filteredEmplois.length === 0 && (
            <div className="text-center py-12">
              <p className="text-sm text-slate-500">Aucun emploi trouvé pour cette recherche.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
