'use client';

import { useState } from 'react';

type Result = {
  baseMensuel: number;
  baseAnnuel: number;
  aideFT: number;
  aideEF: number;
  aideReg: number;
  totalAnnuel: number;
  totalMensuel: number;
  netMensuel: number;
  netAnnuel: number;
};

export default function Recruiterview() {
  const [age, setAge] = useState(60);
  const [region, setRegion] = useState('PACA');
  const [brut, setBrut] = useState(2500);
  const [contract, setContract] = useState('CDI');
  const [situation, setSituation] = useState('plus_12_mois');
  const [result, setResult] = useState<Result | null>(null);

  function computeFactor(c: string) {
    if (c === 'CDD_12') return 0.7;
    if (c === 'CDD_24') return 0.9;
    if (c === 'Alternance') return 0.5;
    return 1;
  }

  function simulate() {
    const chargeRate = 0.42;

    const baseMensuel = brut * (1 + chargeRate);
    const baseAnnuel = baseMensuel * 12;

    const factor = computeFactor(contract);

    let aideFT = 0;
    if (
      age >= 55 &&
      (situation === 'plus_12_mois' || situation === 'non_indemnise')
    ) {
      aideFT = 4000;
    }

    const regionEligibles = ['PACA', 'IDF', 'Occitanie'];
    let aideEF = 0;
    if (
      regionEligibles.includes(region) &&
      situation === 'plus_12_mois'
    ) {
      aideEF = 6000;
    }

    let aideReg = 0;
    if (region === 'PACA' && age >= 60) {
      aideReg = 2000;
    }

    aideFT *= factor;
    aideEF *= factor;
    aideReg *= factor;

    const totalAnnuel = aideFT + aideEF + aideReg;
    const totalMensuel = totalAnnuel / 12;

    const netMensuel = baseMensuel - totalMensuel;
    const netAnnuel = baseAnnuel - totalAnnuel;

    setResult({
      baseMensuel,
      baseAnnuel,
      aideFT,
      aideEF,
      aideReg,
      totalAnnuel,
      totalMensuel,
      netMensuel,
      netAnnuel,
    });
  }

  function fmt(v: number) {
    return v.toLocaleString('fr-FR', {
      style: 'currency',
      currency: 'EUR',
      maximumFractionDigits: 0,
    });
  }

  return (
    <section className="max-w-6xl px-4 py-8">
      <div className="grid grid-cols-1 two-cols gap-6">
        {/* =========================
            COLONNE GAUCHE – FORMULAIRE
           ========================= */}
        <div className="card shadow-card">
          <h2 className="text-base font-semibold text-main mb-1">
            Simulateur coût net d’un recrutement senior
          </h2>

          <p className="text-xs text-muted mb-3">
            Estimation indicative intégrant les principaux dispositifs
            d’aide à l’embauche de profils expérimentés.
          </p>

          <div className="grid grid-cols-1 two-cols gap-3 mb-3">
            <div>
              <label className="block text-xs font-semibold text-main mb-1">
                Âge du candidat
              </label>
              <input
                type="number"
                className="input"
                min={50}
                max={67}
                value={age}
                onChange={(e) => setAge(Number(e.target.value || 0))}
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-main mb-1">
                Région
              </label>
              <select
                className="select"
                value={region}
                onChange={(e) => setRegion(e.target.value)}
              >
                <option value="PACA">PACA</option>
                <option value="IDF">Île-de-France</option>
                <option value="Occitanie">Occitanie</option>
                <option value="Autre">Autre région</option>
              </select>
            </div>
          </div>

          <div className="grid grid-cols-1 two-cols gap-3 mb-3">
            <div>
              <label className="block text-xs font-semibold text-main mb-1">
                Salaire brut mensuel (€)
              </label>
              <input
                type="number"
                className="input"
                min={800}
                value={brut}
                onChange={(e) => setBrut(Number(e.target.value || 0))}
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-main mb-1">
                Type de contrat
              </label>
              <select
                className="select"
                value={contract}
                onChange={(e) => setContract(e.target.value)}
              >
                <option value="CDI">CDI</option>
                <option value="CDD_12">CDD 12 mois</option>
                <option value="CDD_24">CDD 24 mois</option>
                <option value="Alternance">Alternance</option>
              </select>
            </div>
          </div>

          <div className="mb-3">
            <label className="block text-xs font-semibold text-main mb-1">
              Situation du candidat
            </label>
            <select
              className="select"
              value={situation}
              onChange={(e) => setSituation(e.target.value)}
            >
              <option value="moins_6_mois">
                Inscrit depuis moins de 6 mois
              </option>
              <option value="plus_12_mois">
                Chômage longue durée (≥ 12 mois)
              </option>
              <option value="non_indemnise">
                Recherche non indemnisée
              </option>
            </select>
          </div>

          <button
            type="button"
            className="btn btn-primary btn-sm mt-2"
            onClick={simulate}
          >
            Calculer la simulation
          </button>

          <p className="mt-2 text-xs text-muted">
            Simulation indicative à confirmer avec votre expert-comptable
            et les dispositifs officiels en vigueur.
          </p>
        </div>

        {/* =========================
            COLONNE DROITE – RÉSULTATS
           ========================= */}
        <div className="space-y-4">
          <div className="card shadow-soft">
            <h3 className="text-sm font-semibold text-main mb-2">
              Aides potentielles (simulation annuelle)
            </h3>

            {result ? (
              <div className="grid grid-cols-1 two-cols gap-3 text-xs">
                <div className="card-soft">
                  <p className="font-semibold mb-1">
                    France Travail (seniors)
                  </p>
                  <p>{fmt(result.aideFT)}</p>
                </div>

                <div className="card-soft">
                  <p className="font-semibold mb-1">
                    Emploi Franc+
                  </p>
                  <p>{fmt(result.aideEF)}</p>
                </div>

                <div className="card-soft">
                  <p className="font-semibold mb-1">
                    Aides régionales
                  </p>
                  <p>{fmt(result.aideReg)}</p>
                </div>

                <div
                  className="card-soft"
                  style={{ background: '#ecfdf5', borderColor: '#bbf7d0' }}
                >
                  <p className="font-semibold" style={{ color: '#047857' }}>
                    Total aides estimées
                  </p>
                  <p style={{ color: '#047857' }}>
                    {fmt(result.totalAnnuel)}
                  </p>
                </div>
              </div>
            ) : (
              <p className="text-xs text-muted">
                Lancez une simulation pour afficher les aides estimées.
              </p>
            )}
          </div>

          <div className="card shadow-soft">
            <h3 className="text-sm font-semibold text-main mb-2">
              Coût employeur estimé
            </h3>

            {result ? (
              <div className="grid grid-cols-1 two-cols gap-3 text-xs">
                <div className="card-soft">
                  <p className="font-semibold mb-1">
                    Coût brut chargé (mensuel)
                  </p>
                  <p>{fmt(result.baseMensuel)}</p>
                </div>

                <div
                  className="card-soft"
                  style={{ background: '#ecfdf5', borderColor: '#bbf7d0' }}
                >
                  <p className="font-semibold" style={{ color: '#047857' }}>
                    Coût net estimé
                  </p>
                  <p style={{ color: '#047857' }}>
                    {fmt(result.netMensuel)}
                  </p>
                </div>
              </div>
            ) : (
              <p className="text-xs text-muted">
                Aucune simulation encore effectuée.
              </p>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}