"use client";

import React from 'react';
import { Music, Info } from 'lucide-react';

function euro(n: number) {
  return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(n);
}

const MUSICIENS_CACHETS = [
  { def: 'Cachet initial (avec un mode) pour un service de 3 heures', montant: 106.05 },
  { def: 'Cachet initial (avec un mode) pour un service de 4 heures', montant: 137.87 },
  { def: 'Cachet initial (avec un mode) pour un engagement à la journée (isolée, enregistrement)', montant: 228.02 },
  { def: 'Cachet initial (avec un mode) pour un engagement à la journée (3 journées isolées ou 2 journées consécutives sur 7 jours)', montant: 217.41 },
  { def: 'Cachet initial (avec un mode) pour un engagement à la journée (5 journées isolées ou 3 journées consécutives sur 7 jours)', montant: 190.89 },
];

const MUSICIENS_ABATTEMENTS = [
  { seuil: '+ 10 musiciens', value: '-10%' },
  { seuil: '+ 20 musiciens', value: '-15%' },
  { seuil: '+ 30 musiciens', value: '-20%' },
  { seuil: '+ 40 musiciens', value: '-25%' },
];

const MUSICIENS_REPETITIONS = [
  { def: 'Cachet pour un service de trois heures', montant: 63.63 },
  { def: 'Cachet pour un double service de trois heures', montant: 106.05 },
];

const InfoRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="flex items-start gap-2">
    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center">
      <Info className="w-3.5 h-3.5 text-slate-600" aria-hidden="true" />
    </div>
    <p className="text-sm text-slate-600">{children}</p>
  </div>
);

export default function ArtistesMusiciens() {
  return (
    <div className="space-y-6">
      {/* En-tête */}
      <section className="rounded-2xl border bg-white p-6">
        <div className="flex items-start gap-3">
          <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-fuchsia-500 to-pink-600 flex items-center justify-center">
            <Music className="w-6 h-6 text-white" />
          </div>
          <div className="flex-1 min-w-0">
            <h2 className="text-xl font-semibold text-slate-900">Artistes Musiciens</h2>
            <p className="text-sm text-slate-600">Salaires applicables au 1er janvier 2025 (Avenant n°20 du 29 novembre 2024, non étendu)</p>
          </div>
        </div>
      </section>

      {/* Cachets minima */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="grid grid-cols-2 text-sm font-semibold text-white">
          <div className="bg-fuchsia-600 px-4 py-3">Définition du cachet</div>
          <div className="bg-fuchsia-600 px-4 py-3">Cachets minima</div>
        </div>
        {MUSICIENS_CACHETS.map((row, idx) => (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{row.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(row.montant)}</div>
          </div>
        ))}
      </section>

      {/* Abattement pour ensemble */}
      <section className="rounded-2xl border bg-white p-4">
        <div className="grid md:grid-cols-2 gap-4 items-start">
          <div>
            <h4 className="text-sm font-semibold text-slate-900 mb-1">Abattement pour ensemble</h4>
            <p className="text-sm text-slate-600">
              En cas d'interprétation d'ensemble, abattement appliqué sur les cachets définis ci-avant en fonction du nombre de musiciens participant à l'ensemble.
            </p>
          </div>
          <div className="rounded-xl border overflow-hidden">
            <div className="grid grid-cols-2 text-xs font-semibold text-white">
              <div className="bg-fuchsia-600 px-3 py-2">Seuil</div>
              <div className="bg-fuchsia-600 px-3 py-2">Abattement</div>
            </div>
            {MUSICIENS_ABATTEMENTS.map((a, i) => (
              <div key={i} className={`grid grid-cols-2 text-sm ${i % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
                <div className="border-t px-3 py-2 text-slate-900">{a.seuil}</div>
                <div className="border-t px-3 py-2 text-slate-900">{a.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cachets répétitions */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-800">Cachet pour répétitions</div>
        <div className="grid grid-cols-2 text-sm font-semibold text-white">
          <div className="bg-fuchsia-600 px-4 py-3">Définition</div>
          <div className="bg-fuchsia-600 px-4 py-3">Cachet</div>
        </div>
        {MUSICIENS_REPETITIONS.map((r, idx) => (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.montant)}</div>
          </div>
        ))}
      </section>
    </div>
  );
}
