"use client";

import React, { useState, useMemo } from 'react';
import { Pencil, Palette, Camera, Search, ChevronDown, ChevronUp } from 'lucide-react';

const parseEuro = (str: string) => {
  if (!str || str === '-') return null;
  const cleaned = str.replace(/\s/g, '').replace('€', '').replace(',', '.');
  return parseFloat(cleaned);
};

const euro = (n: number | null) => {
  if (n === null) return '-';
  return new Intl.NumberFormat('fr-FR', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(n) + ' €';
};

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;
}

const emploisData: Emploi[] = [
  // Filière A - Écriture
  {
    nom: "Chargé de recherche",
    filiere: "A",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("803,07 €"),
      semaine39h: parseEuro("917,80 €"),
      jour7h: parseEuro("178,46 €"),
      jour8h: parseEuro("203,95 €"),
      mois35h: parseEuro("3 051,68 €"),
      mois39h: parseEuro("3 487,62 €"),
    },
    cdi: parseEuro("2 530,92 €"),
  },
  {
    nom: "Chargé de sélection",
    filiere: "A",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("822,67 €"),
      semaine39h: parseEuro("940,19 €"),
      jour7h: parseEuro("182,82 €"),
      jour8h: parseEuro("208,93 €"),
      mois35h: parseEuro("3 126,14 €"),
      mois39h: parseEuro("3 572,72 €"),
    },
    cdi: parseEuro("2 590,58 €"),
  },
  {
    nom: "Collaborateur artistique",
    filiere: "A",
    niveau: "IV",
    cddu: {
      semaine35h: parseEuro("534,27 €"),
      semaine39h: parseEuro("610,60 €"),
      jour7h: parseEuro("118,73 €"),
      jour8h: parseEuro("135,69 €"),
      mois35h: parseEuro("2 342,34 €"),
      mois39h: parseEuro("2 676,95 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Conseiller artistique d'émission",
    filiere: "A",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("807,61 €"),
      semaine39h: parseEuro("922,98 €"),
      jour7h: parseEuro("179,47 €"),
      jour8h: parseEuro("205,11 €"),
      mois35h: parseEuro("3 068,91 €"),
      mois39h: parseEuro("3 507,31 €"),
    },
    cdi: parseEuro("2 590,58 €"),
  },
  {
    nom: "Coordinateur d'écriture (ex script éditeur)",
    filiere: "A",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("877,44 €"),
      semaine39h: parseEuro("1 002,79 €"),
      jour7h: parseEuro("194,99 €"),
      jour8h: parseEuro("222,84 €"),
      mois35h: parseEuro("3 334,28 €"),
      mois39h: parseEuro("3 810,59 €"),
    },
    cdi: parseEuro("3 013,00 €"),
  },
  {
    nom: "Dir. de collection / Dir. de programmation",
    filiere: "A",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("1 127,35 €"),
      semaine39h: parseEuro("1 288,39 €"),
      jour7h: parseEuro("250,52 €"),
      jour8h: parseEuro("286,31 €"),
      mois35h: parseEuro("4 283,91 €"),
      mois39h: parseEuro("4 895,89 €"),
    },
    cdi: parseEuro("2 952,74 €"),
  },
  {
    nom: "Directeur artistique",
    filiere: "A",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("1 127,35 €"),
      semaine39h: parseEuro("1 288,39 €"),
      jour7h: parseEuro("250,52 €"),
      jour8h: parseEuro("286,31 €"),
      mois35h: parseEuro("4 283,91 €"),
      mois39h: parseEuro("4 895,89 €"),
    },
    cdi: parseEuro("2 952,74 €"),
  },
  {
    nom: "Directeur de la distribution",
    filiere: "A",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("877,44 €"),
      semaine39h: parseEuro("1 002,79 €"),
      jour7h: parseEuro("194,99 €"),
      jour8h: parseEuro("222,84 €"),
      mois35h: parseEuro("3 334,28 €"),
      mois39h: parseEuro("3 810,59 €"),
    },
    cdi: parseEuro("2 530,92 €"),
  },
  {
    nom: "Directeur des dialogues",
    filiere: "A",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("746,08 €"),
      semaine39h: parseEuro("852,66 €"),
      jour7h: parseEuro("165,80 €"),
      jour8h: parseEuro("189,48 €"),
      mois35h: parseEuro("2 835,09 €"),
      mois39h: parseEuro("3 240,10 €"),
    },
    cdi: parseEuro("2 048,84 €"),
  },
  {
    nom: "Documentaliste",
    filiere: "A",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("838,98 €"),
      semaine39h: parseEuro("958,83 €"),
      jour7h: parseEuro("186,44 €"),
      jour8h: parseEuro("213,07 €"),
      mois35h: parseEuro("3 188,12 €"),
      mois39h: parseEuro("3 643,55 €"),
    },
    cdi: parseEuro("2 892,47 €"),
  },
  {
    nom: "Enquêteur / Recherchiste",
    filiere: "A",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("768,45 €"),
      semaine39h: parseEuro("878,23 €"),
      jour7h: parseEuro("170,77 €"),
      jour8h: parseEuro("195,16 €"),
      mois35h: parseEuro("2 920,11 €"),
      mois39h: parseEuro("3 337,26 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Responsable d'enquête / de recherche",
    filiere: "A",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("838,98 €"),
      semaine39h: parseEuro("958,83 €"),
      jour7h: parseEuro("186,44 €"),
      jour8h: parseEuro("213,07 €"),
      mois35h: parseEuro("3 188,12 €"),
      mois39h: parseEuro("3 643,55 €"),
    },
    cdi: parseEuro("2 892,47 €"),
  },

  // Filière B - Décor & Costume
  {
    nom: "1er assistant décorateur",
    filiere: "B",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("962,49 €"),
      semaine39h: parseEuro("1 099,99 €"),
      jour7h: parseEuro("213,89 €"),
      jour8h: parseEuro("244,44 €"),
      mois35h: parseEuro("3 657,48 €"),
      mois39h: parseEuro("4 179,96 €"),
    },
    cdi: parseEuro("2 530,92 €"),
  },
  {
    nom: "2ème assistant décorateur",
    filiere: "B",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("839,05 €"),
      semaine39h: parseEuro("958,92 €"),
      jour7h: parseEuro("186,46 €"),
      jour8h: parseEuro("213,09 €"),
      mois35h: parseEuro("3 188,41 €"),
      mois39h: parseEuro("3 643,88 €"),
    },
    cdi: parseEuro("2 109,10 €"),
  },
  {
    nom: "Accessoiriste",
    filiere: "B",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("810,81 €"),
      semaine39h: parseEuro("926,64 €"),
      jour7h: parseEuro("180,18 €"),
      jour8h: parseEuro("205,92 €"),
      mois35h: parseEuro("3 081,06 €"),
      mois39h: parseEuro("3 521,20 €"),
    },
    cdi: parseEuro("2 048,84 €"),
  },
  {
    nom: "Assistant décorateur adjoint",
    filiere: "B",
    niveau: "VI",
    cddu: {
      semaine35h: parseEuro("463,28 €"),
      semaine39h: parseEuro("529,47 €"),
      jour7h: parseEuro("102,95 €"),
      jour8h: parseEuro("117,66 €"),
      mois35h: parseEuro("2 342,34 €"),
      mois39h: parseEuro("2 676,95 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Chef constructeur",
    filiere: "B",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("1 221,74 €"),
      semaine39h: parseEuro("1 396,28 €"),
      jour7h: parseEuro("271,50 €"),
      jour8h: parseEuro("310,28 €"),
      mois35h: parseEuro("4 642,63 €"),
      mois39h: parseEuro("5 305,84 €"),
    },
    cdi: parseEuro("2 651,44 €"),
  },
  {
    nom: "Chef costumier",
    filiere: "B",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("894,37 €"),
      semaine39h: parseEuro("1 022,14 €"),
      jour7h: parseEuro("198,75 €"),
      jour8h: parseEuro("227,14 €"),
      mois35h: parseEuro("3 398,61 €"),
      mois39h: parseEuro("3 884,11 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Chef d'équipe de décor",
    filiere: "B",
    niveau: "IV",
    cddu: {
      semaine35h: parseEuro("1 114,05 €"),
      semaine39h: parseEuro("1 273,20 €"),
      jour7h: parseEuro("247,57 €"),
      jour8h: parseEuro("282,93 €"),
      mois35h: parseEuro("4 233,38 €"),
      mois39h: parseEuro("4 838,13 €"),
    },
    cdi: parseEuro("2 530,92 €"),
  },
  {
    nom: "Chef décorateur",
    filiere: "B",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("1 664,48 €"),
      semaine39h: parseEuro("1 902,26 €"),
      jour7h: parseEuro("369,88 €"),
      jour8h: parseEuro("422,73 €"),
      mois35h: parseEuro("6 325,03 €"),
      mois39h: parseEuro("7 228,58 €"),
    },
    cdi: parseEuro("3 013,00 €"),
  },
  {
    nom: "Constructeur de décor",
    filiere: "B",
    niveau: "IV",
    cddu: {
      semaine35h: parseEuro("932,11 €"),
      semaine39h: parseEuro("1 065,27 €"),
      jour7h: parseEuro("207,14 €"),
      jour8h: parseEuro("236,73 €"),
      mois35h: parseEuro("3 542,03 €"),
      mois39h: parseEuro("4 048,02 €"),
    },
    cdi: parseEuro("2 481,29 €"),
  },
  {
    nom: "Costumier",
    filiere: "B",
    niveau: "IV",
    cddu: {
      semaine35h: parseEuro("714,32 €"),
      semaine39h: parseEuro("816,36 €"),
      jour7h: parseEuro("158,74 €"),
      jour8h: parseEuro("181,41 €"),
      mois35h: parseEuro("2 714,40 €"),
      mois39h: parseEuro("3 102,16 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Créateur de costume",
    filiere: "B",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("1 640,95 €"),
      semaine39h: parseEuro("1 875,37 €"),
      jour7h: parseEuro("364,66 €"),
      jour8h: parseEuro("416,75 €"),
      mois35h: parseEuro("6 235,62 €"),
      mois39h: parseEuro("7 126,40 €"),
    },
    cdi: parseEuro("3 013,00 €"),
  },
  {
    nom: "Décorateur",
    filiere: "B",
    niveau: "II",
    cddu: {
      semaine35h: parseEuro("1 069,70 €"),
      semaine39h: parseEuro("1 222,51 €"),
      jour7h: parseEuro("237,71 €"),
      jour8h: parseEuro("271,67 €"),
      mois35h: parseEuro("4 064,86 €"),
      mois39h: parseEuro("4 645,54 €"),
    },
    cdi: parseEuro("2 892,47 €"),
  },
  {
    nom: "Dessinateur en décor",
    filiere: "B",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("839,05 €"),
      semaine39h: parseEuro("958,92 €"),
      jour7h: parseEuro("186,46 €"),
      jour8h: parseEuro("213,09 €"),
      mois35h: parseEuro("3 188,41 €"),
      mois39h: parseEuro("3 643,88 €"),
    },
    cdi: parseEuro("2 109,10 €"),
  },
  {
    nom: "Électricien déco / Machiniste déco",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("920,25 €"),
      semaine39h: parseEuro("1 051,72 €"),
      jour7h: parseEuro("204,50 €"),
      jour8h: parseEuro("233,72 €"),
      mois35h: parseEuro("3 496,97 €"),
      mois39h: parseEuro("3 996,52 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Ensemblier - décorateur",
    filiere: "B",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("962,49 €"),
      semaine39h: parseEuro("1 099,99 €"),
      jour7h: parseEuro("213,89 €"),
      jour8h: parseEuro("244,44 €"),
      mois35h: parseEuro("3 657,48 €"),
      mois39h: parseEuro("4 179,96 €"),
    },
    cdi: parseEuro("2 530,92 €"),
  },
  {
    nom: "Habilleur",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("643,70 €"),
      semaine39h: parseEuro("735,66 €"),
      jour7h: parseEuro("143,04 €"),
      jour8h: parseEuro("163,48 €"),
      mois35h: parseEuro("2 446,06 €"),
      mois39h: parseEuro("2 795,49 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Maçon de décor",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("920,25 €"),
      semaine39h: parseEuro("1 051,72 €"),
      jour7h: parseEuro("204,50 €"),
      jour8h: parseEuro("233,72 €"),
      mois35h: parseEuro("3 496,97 €"),
      mois39h: parseEuro("3 996,52 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Menuisier-traceur-toupilleur de décor",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("949,67 €"),
      semaine39h: parseEuro("1 085,34 €"),
      jour7h: parseEuro("211,04 €"),
      jour8h: parseEuro("241,19 €"),
      mois35h: parseEuro("3 608,76 €"),
      mois39h: parseEuro("4 124,29 €"),
    },
    cdi: parseEuro("2 410,40 €"),
  },
  {
    nom: "Métallier / Serrurier / Mécanicien de décor",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("920,25 €"),
      semaine39h: parseEuro("1 051,72 €"),
      jour7h: parseEuro("204,50 €"),
      jour8h: parseEuro("233,72 €"),
      mois35h: parseEuro("3 496,97 €"),
      mois39h: parseEuro("3 996,52 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Peintre de décor",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("920,25 €"),
      semaine39h: parseEuro("1 051,72 €"),
      jour7h: parseEuro("204,50 €"),
      jour8h: parseEuro("233,72 €"),
      mois35h: parseEuro("3 496,97 €"),
      mois39h: parseEuro("3 996,52 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Peintre en lettres / en faux bois de décor",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("920,25 €"),
      semaine39h: parseEuro("1 051,72 €"),
      jour7h: parseEuro("204,50 €"),
      jour8h: parseEuro("233,72 €"),
      mois35h: parseEuro("3 496,97 €"),
      mois39h: parseEuro("3 996,52 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Régisseur d'extérieurs",
    filiere: "B",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("839,05 €"),
      semaine39h: parseEuro("958,92 €"),
      jour7h: parseEuro("186,46 €"),
      jour8h: parseEuro("213,09 €"),
      mois35h: parseEuro("3 188,41 €"),
      mois39h: parseEuro("3 643,88 €"),
    },
    cdi: parseEuro("2 109,10 €"),
  },
  {
    nom: "Rippeur",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("822,58 €"),
      semaine39h: parseEuro("940,09 €"),
      jour7h: parseEuro("182,80 €"),
      jour8h: parseEuro("208,91 €"),
      mois35h: parseEuro("3 125,81 €"),
      mois39h: parseEuro("3 572,35 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Staffeur de décor",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("949,67 €"),
      semaine39h: parseEuro("1 085,34 €"),
      jour7h: parseEuro("211,04 €"),
      jour8h: parseEuro("241,19 €"),
      mois35h: parseEuro("3 608,76 €"),
      mois39h: parseEuro("4 124,29 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },
  {
    nom: "Styliste",
    filiere: "B",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("804,93 €"),
      semaine39h: parseEuro("919,92 €"),
      jour7h: parseEuro("178,87 €"),
      jour8h: parseEuro("204,43 €"),
      mois35h: parseEuro("3 058,73 €"),
      mois39h: parseEuro("3 495,68 €"),
    },
    cdi: parseEuro("2 048,84 €"),
  },
  {
    nom: "Tapissier de décor",
    filiere: "B",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("920,25 €"),
      semaine39h: parseEuro("1 051,72 €"),
      jour7h: parseEuro("204,50 €"),
      jour8h: parseEuro("233,72 €"),
      mois35h: parseEuro("3 496,97 €"),
      mois39h: parseEuro("3 996,52 €"),
    },
    cdi: parseEuro("2 169,36 €"),
  },

  // Filière C - Image
  {
    nom: "1er assistant OPV / pointeur",
    filiere: "C",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("968,32 €"),
      semaine39h: parseEuro("1 106,66 €"),
      jour7h: parseEuro("215,18 €"),
      jour8h: parseEuro("245,92 €"),
      mois35h: parseEuro("3 679,63 €"),
      mois39h: parseEuro("4 205,28 €"),
    },
    cdi: parseEuro("2 651,44 €"),
  },
  {
    nom: "2ème assistant OPV",
    filiere: "C",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("714,32 €"),
      semaine39h: parseEuro("816,36 €"),
      jour7h: parseEuro("158,74 €"),
      jour8h: parseEuro("181,41 €"),
      mois35h: parseEuro("2 714,40 €"),
      mois39h: parseEuro("3 102,16 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Assistant lumière",
    filiere: "C",
    niveau: "IV",
    cddu: {
      semaine35h: parseEuro("764,93 €"),
      semaine39h: parseEuro("874,20 €"),
      jour7h: parseEuro("169,98 €"),
      jour8h: parseEuro("194,27 €"),
      mois35h: parseEuro("2 906,72 €"),
      mois39h: parseEuro("3 321,95 €"),
    },
    cdi: parseEuro("2 018,71 €"),
  },
  {
    nom: "Assistant OPV adjoint",
    filiere: "C",
    niveau: "VI",
    cddu: {
      semaine35h: parseEuro("463,28 €"),
      semaine39h: parseEuro("529,47 €"),
      jour7h: parseEuro("102,95 €"),
      jour8h: parseEuro("117,66 €"),
      mois35h: parseEuro("2 342,34 €"),
      mois39h: parseEuro("2 676,95 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Cadreur / OPV",
    filiere: "C",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("1 125,04 €"),
      semaine39h: parseEuro("1 285,76 €"),
      jour7h: parseEuro("250,01 €"),
      jour8h: parseEuro("285,72 €"),
      mois35h: parseEuro("4 275,15 €"),
      mois39h: parseEuro("4 885,87 €"),
    },
    cdi: parseEuro("2 651,44 €"),
  },
  {
    nom: "Directeur photo",
    filiere: "C",
    niveau: "I",
    cddu: {
      semaine35h: parseEuro("1 762,00 €"),
      semaine39h: parseEuro("2 013,72 €"),
      jour7h: parseEuro("391,56 €"),
      jour8h: parseEuro("447,49 €"),
      mois35h: parseEuro("6 695,61 €"),
      mois39h: parseEuro("7 652,11 €"),
    },
    cdi: parseEuro("3 314,29 €"),
  },
  {
    nom: "Opérateur de transfert et de traitement numérique",
    filiere: "C",
    niveau: "V",
    cddu: {
      semaine35h: parseEuro("714,32 €"),
      semaine39h: parseEuro("816,36 €"),
      jour7h: parseEuro("158,74 €"),
      jour8h: parseEuro("181,41 €"),
      mois35h: parseEuro("2 714,40 €"),
      mois39h: parseEuro("3 102,17 €"),
    },
    cdi: parseEuro("1 828,83 €"),
  },
  {
    nom: "Opérateur spécial (steadicamer)",
    filiere: "C",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("1 180,27 €"),
      semaine39h: parseEuro("1 348,88 €"),
      jour7h: parseEuro("262,28 €"),
      jour8h: parseEuro("299,75 €"),
      mois35h: parseEuro("4 485,04 €"),
      mois39h: parseEuro("5 125,75 €"),
    },
    cdi: parseEuro("2 651,44 €"),
  },
  {
    nom: "Photographe de plateau",
    filiere: "C",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("810,81 €"),
      semaine39h: parseEuro("926,64 €"),
      jour7h: parseEuro("180,18 €"),
      jour8h: parseEuro("205,92 €"),
      mois35h: parseEuro("3 081,06 €"),
      mois39h: parseEuro("3 521,20 €"),
    },
    cdi: parseEuro("2 229,61 €"),
  },
  {
    nom: "Pupitreur lumière",
    filiere: "C",
    niveau: "IIIB",
    cddu: {
      semaine35h: parseEuro("932,11 €"),
      semaine39h: parseEuro("1 065,27 €"),
      jour7h: parseEuro("207,14 €"),
      jour8h: parseEuro("236,73 €"),
      mois35h: parseEuro("3 542,03 €"),
      mois39h: parseEuro("4 048,02 €"),
    },
    cdi: parseEuro("2 481,29 €"),
  },
  {
    nom: "Superviseur d'effets spéciaux image",
    filiere: "C",
    niveau: "IIIA",
    cddu: {
      semaine35h: parseEuro("1 051,06 €"),
      semaine39h: parseEuro("1 201,21 €"),
      jour7h: parseEuro("233,57 €"),
      jour8h: parseEuro("266,94 €"),
      mois35h: parseEuro("3 994,02 €"),
      mois39h: parseEuro("4 564,58 €"),
    },
    cdi: parseEuro("2 530,92 €"),
  },
  {
    nom: "Technicien vidéo",
    filiere: "C",
    niveau: "IV",
    cddu: {
      semaine35h: parseEuro("822,58 €"),
      semaine39h: parseEuro("940,09 €"),
      jour7h: parseEuro("182,80 €"),
      jour8h: parseEuro("208,91 €"),
      mois35h: parseEuro("3 125,81 €"),
      mois39h: parseEuro("3 572,35 €"),
    },
    cdi: parseEuro("2 109,10 €"),
  },
];

const filieres = [
  { code: 'A', nom: 'Contenu du programme et collaboration artistique', icon: Pencil, color: 'violet' },
  { code: 'B', nom: 'Costumes, décor', icon: Palette, color: 'blue' },
  { code: 'C', nom: 'Image', icon: Camera, color: 'cyan' },
];

const colorClasses = {
  violet: {
    bg: 'bg-violet-50',
    border: 'border-violet-200',
    text: 'text-violet-900',
    hover: 'hover:bg-violet-100',
    gradient: 'from-violet-500 to-purple-600',
    ring: 'ring-violet-500',
  },
  blue: {
    bg: 'bg-blue-50',
    border: 'border-blue-200',
    text: 'text-blue-900',
    hover: 'hover:bg-blue-100',
    gradient: 'from-blue-500 to-indigo-600',
    ring: 'ring-blue-500',
  },
  cyan: {
    bg: 'bg-cyan-50',
    border: 'border-cyan-200',
    text: 'text-cyan-900',
    hover: 'hover:bg-cyan-100',
    gradient: 'from-cyan-500 to-blue-600',
    ring: 'ring-cyan-500',
  },
};

interface EmploiCardProps {
  emploi: Emploi;
  color: keyof typeof colorClasses;
}

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 ${colors.border} bg-white overflow-hidden transition-all duration-200 hover:shadow-md`}>
      {/* Header */}
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className={`w-full px-4 py-3 flex items-center justify-between ${colors.hover} transition-colors`}
      >
        <div className="flex items-center gap-3">
          <span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-semibold ${colors.bg} ${colors.text}`}>
            Niveau {emploi.niveau}
          </span>
          <h3 className="text-sm font-semibold text-slate-900">{emploi.nom}</h3>
        </div>
        {isExpanded ? (
          <ChevronUp className="w-4 h-4 text-slate-400" />
        ) : (
          <ChevronDown className="w-4 h-4 text-slate-400" />
        )}
      </button>

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

          {/* Content based on tab */}
          {activeTab === 'cdi' ? (
            <div className={`rounded-lg ${colors.bg} border ${colors.border} p-4`}>
              <p className="text-xs text-slate-600 mb-2">Salaire mensuel minimum</p>
              <p className={`text-2xl font-bold ${colors.text}`}>{euro(emploi.cdi)}</p>
            </div>
          ) : (
            <div className="space-y-3">
              {/* Par semaine */}
              <div className={`rounded-lg ${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>
  );
}

interface CategorieBFictionContentProps {
  activeFiliere: string;
}

export default function CategorieBFictionContent({ activeFiliere }: CategorieBFictionContentProps) {
  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]);

  // Obtenir les infos de la filière active
  const activeFiliereInfo = filieres.find(f => f.code === activeFiliere);
  const colorForActive = (activeFiliereInfo?.color as keyof typeof colorClasses) || 'violet';

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-orange-50 to-amber-50 p-4">
        <h2 className="text-lg font-semibold text-orange-900 mb-1">
          Filière {activeFiliere} - {activeFiliereInfo?.nom || 'Filière'}
        </h2>
        <p className="text-xs text-orange-600 mt-2">
          {filteredEmplois.length} emploi{filteredEmplois.length > 1 ? 's' : ''} - 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-cyan-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={colorForActive}
              />
            ))}
          </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>
  );
}
