"use client";

import React, { useState } from 'react';
import { Music, Music2, Guitar, Piano } from 'lucide-react';

const euro = (n: number) => new Intl.NumberFormat('fr-FR', {
  minimumFractionDigits: Number.isInteger(n) ? 0 : 2,
  maximumFractionDigits: 2
}).format(n) + '€';

export default function ArtistesMusiciensContent() {
  const [activeSection, setActiveSection] = useState<'orchestres' | 'lyriques' | 'actuelles' | 'chambre'>('orchestres');

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-blue-50 to-cyan-50 p-4">
        <h2 className="text-lg font-semibold text-blue-900 mb-1">
          Artistes musiciens
        </h2>
        <p className="text-sm text-blue-700">
          Minima conventionnels pour les artistes musiciens selon le type d'activité
        </p>
        <p className="text-xs text-blue-600 mt-2">
          Grille de salaires applicable au 1er juin 2024
        </p>
      </div>

      {/* Navigation */}
      <div className="flex gap-3 border-b pb-2 flex-wrap">
        <button
          onClick={() => setActiveSection('orchestres')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'orchestres'
              ? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Music className="w-4 h-4 inline-block mr-1" />
          Orchestres permanents
        </button>
        <button
          onClick={() => setActiveSection('lyriques')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'lyriques'
              ? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Music2 className="w-4 h-4 inline-block mr-1" />
          Lyriques
        </button>
        <button
          onClick={() => setActiveSection('actuelles')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'actuelles'
              ? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Guitar className="w-4 h-4 inline-block mr-1" />
          Musiques actuelles
        </button>
        <button
          onClick={() => setActiveSection('chambre')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'chambre'
              ? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Piano className="w-4 h-4 inline-block mr-1" />
          Engagés au sein d'autres entreprises
        </button>
      </div>

      {/* Section Orchestres permanents */}
      {activeSection === 'orchestres' && (
        <div className="space-y-6">
          {/* Minima mensuels orchestres CDI */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-blue-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-blue-500"></span>
              Musiciens d'orchestres permanents en CDI
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-blue-50">
                    <th className="text-left p-3 text-blue-900 font-bold border border-blue-200">Catégorie</th>
                    <th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Minimum brut mensuel</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-blue-50/30">
                    <td className="p-3 border border-blue-200 font-semibold">Tuttiste</td>
                    <td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(3250.97)}</td>
                  </tr>
                  <tr className="hover:bg-blue-50/30">
                    <td className="p-3 border border-blue-200 font-semibold">Soliste</td>
                    <td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(3364.52)}</td>
                  </tr>
                  <tr className="hover:bg-blue-50/30">
                    <td className="p-3 border border-blue-200 font-semibold">Chef de pupitre</td>
                    <td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(3580.29)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 text-xs text-slate-600 bg-blue-50 border border-blue-200 rounded-lg p-3">
              <span className="font-semibold">Note :</span> Ces minima s'articulent avec les catégories définies dans les orchestres par accord d'entreprise.
            </div>
          </div>

          {/* Cachet service */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-cyan-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-cyan-500"></span>
              Cachet minimum par service
            </h3>
            
            <div className="bg-cyan-50 border border-cyan-200 rounded-lg p-4 text-center">
              <div className="text-sm text-cyan-700 mb-2">Service indivisible de 3 heures</div>
              <div className="text-3xl font-bold text-cyan-900">{euro(116.34)}</div>
              <div className="text-xs text-cyan-600 mt-2">Au-delà, rémunération au pro rata temporis</div>
            </div>
          </div>
        </div>
      )}

      {/* Section Lyriques */}
      {activeSection === 'lyriques' && (
        <div className="space-y-6">
          {/* Minima mensuels */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-purple-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-purple-500"></span>
              Minima mensuels - Musiciens lyriques
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-purple-50">
                    <th className="text-left p-3 text-purple-900 font-bold border border-purple-200">Type de contrat</th>
                    <th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Minimum brut mensuel</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200 font-semibold">CDI</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2859.19)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">CDD droit commun &gt; 1 mois</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(2919.06)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">CDD d'usage &gt; 1 mois</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(3077.15)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Cachets et services */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-fuchsia-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-fuchsia-500"></span>
              Cachets et services
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-fuchsia-50">
                    <th className="text-left p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Type de prestation</th>
                    <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Journée de répétition (2 services / 6h)</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(164.29)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Garantie journalière si service isolé</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(116.34)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200 font-semibold">Représentation (cas général)</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(164.29)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Représentation (7 ou + par 15 jours)</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(144.57)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Journée mixte (répétition + représentation)</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(251.62)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {/* Section Musiques actuelles */}
      {activeSection === 'actuelles' && (
        <div className="space-y-6">
          {/* Minima mensuels */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-pink-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-pink-500"></span>
              Minima mensuels - Musiques actuelles
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-pink-50">
                    <th className="text-left p-3 text-pink-900 font-bold border border-pink-200">Type de contrat</th>
                    <th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Minimum brut mensuel</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200 font-semibold">CDI</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2814.03)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">CDD droit commun &gt; 1 mois</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(2919.06)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">CDD d'usage &gt; 1 mois</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(3077.15)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Cachets répétitions et représentations */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-rose-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-rose-500"></span>
              Cachets répétitions et représentations
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-rose-50">
                    <th className="text-left p-3 text-rose-900 font-bold border border-rose-200">Type de prestation</th>
                    <th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Journée de répétition (2 services / 2 cachets)</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(116.45)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Garantie journalière si service isolé</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(87.33)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200 font-semibold">Représentation (cas général)</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(164.29)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Représentation (7 ou + par 15 jours)</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(144.57)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Salles musiques actuelles &lt; 300 places</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(116.34)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Première partie</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(116.34)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Plateau découverte</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(116.34)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {/* Section Engagés au sein d'autres entreprises */}
      {activeSection === 'chambre' && (
        <div className="space-y-6">
          {/* Minima mensuels */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-indigo-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-indigo-500"></span>
              Minima mensuels
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-indigo-50">
                    <th className="text-left p-3 text-indigo-900 font-bold border border-indigo-200">Type de contrat</th>
                    <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Minimum brut mensuel</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200 font-semibold">CDI</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2814.14)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200">CDD droit commun &gt; 1 mois</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(2919.06)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200">CDD d'usage &gt; 1 mois</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(3077.15)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Services */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-violet-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-violet-500"></span>
              Services de répétition et représentation
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-violet-50">
                    <th className="text-left p-3 text-violet-900 font-bold border border-violet-200">Type de prestation</th>
                    <th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-violet-50/30">
                    <td className="p-3 border border-violet-200 font-semibold">Un service de répétition (3 heures)</td>
                    <td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(116.34)}</td>
                  </tr>
                  <tr className="hover:bg-violet-50/30">
                    <td className="p-3 border border-violet-200 font-semibold">Représentation</td>
                    <td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(116.34)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
