"use client";

import React, { useState } from 'react';
import { Music2, Users, Star, Calendar } 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 ArtistesLyriquesContent() {
  const [activeSection, setActiveSection] = useState<'choeurs' | 'solistes'>('choeurs');

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-purple-50 to-fuchsia-50 p-4">
        <h2 className="text-lg font-semibold text-purple-900 mb-1">
          Artistes lyriques
        </h2>
        <p className="text-sm text-purple-700">
          Minima conventionnels pour les artistes lyriques (chœurs et solistes)
        </p>
        <p className="text-xs text-purple-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('choeurs')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'choeurs'
              ? 'bg-gradient-to-r from-purple-500 to-fuchsia-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Users className="w-4 h-4 inline-block mr-1" />
          Chœurs
        </button>
        <button
          onClick={() => setActiveSection('solistes')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'solistes'
              ? 'bg-gradient-to-r from-purple-500 to-fuchsia-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Star className="w-4 h-4 inline-block mr-1" />
          Solistes
        </button>
      </div>

      {/* Section Chœurs */}
      {activeSection === 'choeurs' && (
        <div className="space-y-6">
          {/* Minima mensuels avec ancienneté */}
          <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 - Artistes lyriques (chœurs)
            </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">Conditions</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="bg-purple-100">
                    <td rowSpan={7} className="p-3 border border-purple-200 font-bold text-purple-900">
                      CDI
                    </td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">De la 1re à la 3e année</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2143.56)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">De la 4e à la 6e année</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(2192.52)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">De la 7e à la 9e année</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(2262.78)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">De la 10e à la 12e année</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(2335.51)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">De la 13e à la 15e année</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(2410.77)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">De la 16e à la 18e année</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(2477.55)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200 font-semibold" colSpan={2}>À partir de la 19e année</td>
                    <td className="text-center p-3 text-xs text-purple-700 border border-purple-200 bg-purple-50 italic">+3% tous les 3 ans</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200 font-semibold">CDD droit commun &gt; 1 mois</td>
                    <td className="p-3 border border-purple-200 text-center">—</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2143.56)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200 font-semibold">CDD d'usage &gt; 1 mois</td>
                    <td className="p-3 border border-purple-200 text-center">—</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2259.69)}</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 - Chœurs
            </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 font-semibold">Journée de répétition (2 services)</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(140.95)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Garantie journalière si service totalement isolé</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(105.72)}</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(140.95)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Représentation (période continue &gt; 1 semaine)</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(102.63)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200 font-semibold">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(228.29)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Prime de feux (article XVI-5)</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(61.14)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

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

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