"use client";

import { useState } from "react";

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

export default function RecruiterSimulator() {
  const [age, setAge] = useState(60);
  const [region, setRegion] = useState("PACA");
  const [salary, setSalary] = useState(2500);
  const [contract, setContract] = useState("CDI");
  const [situation, setSituation] = useState("long");
  const [computed, setComputed] = useState(false);

  // calcul simplifié (démo)
  const brutChargeMensuel = Math.round(salary * 1.42);
  const aidesAnnuelles = 12000;
  const aidesMensuelles = Math.round(aidesAnnuelles / 12);
  const coutNetMensuel = brutChargeMensuel - aidesMensuelles;
  const coutNetAnnuel = coutNetMensuel * 12;

  return (
    <section className="max-w-6xl mx-auto px-4 mt-20">

      {/* Séparateur éditorial */}
      <div className="mb-12">
        <hr className="border-slate-200" />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">

        {/* ===================== */}
        {/* COLONNE GAUCHE : FORM */}
        {/* ===================== */}
        <div className="rounded-2xl border bg-white p-6 shadow-sm space-y-4">
          <div>
            <h2 className="text-lg font-semibold">
              Simulateur coût net d’un recrutement senior
            </h2>
            <p className="text-sm text-slate-600 mt-1">
              Estimation indicative intégrant les principaux dispositifs d’aide.
            </p>
          </div>

          <div>
            <label className="text-sm font-semibold">Âge du candidat</label>
            <input
              type="number"
              className="input mt-1"
              value={age}
              min={50}
              max={67}
              onChange={(e) => setAge(Number(e.target.value))}
            />
          </div>

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

          <div>
            <label className="text-sm font-semibold">
              Salaire brut mensuel (€)
            </label>
            <input
              type="number"
              className="input mt-1"
              value={salary}
              onChange={(e) => setSalary(Number(e.target.value))}
            />
          </div>

          <div>
            <label className="text-sm font-semibold">Type de contrat</label>
            <select
              className="select mt-1"
              value={contract}
              onChange={(e) => setContract(e.target.value)}
            >
              <option value="CDI">CDI</option>
              <option value="CDD">CDD</option>
            </select>
          </div>

          <div>
            <label className="text-sm font-semibold">
              Situation du candidat
            </label>
            <select
              className="select mt-1"
              value={situation}
              onChange={(e) => setSituation(e.target.value)}
            >
              <option value="long">
                Chômage longue durée (≥ 12 mois)
              </option>
              <option value="court">
                Inscrit depuis moins de 12 mois
              </option>
            </select>
          </div>

          <button
            className="btn btn-primary mt-2"
            onClick={() => setComputed(true)}
          >
            Calculer la simulation
          </button>

          <p className="text-xs text-slate-500">
            Simulation indicative à confirmer avec votre expert-comptable.
          </p>
        </div>

        {/* ===================== */}
        {/* COLONNE DROITE : RÉSULTATS */}
        {/* ===================== */}
        <div className="rounded-2xl border bg-white p-6 shadow-sm">
          <h3 className="text-base font-semibold mb-4">
            Résultats de la simulation
          </h3>

          {!computed ? (
            <p className="text-sm text-slate-500">
              Lancez une simulation pour afficher les résultats.
            </p>
          ) : (
            <div className="space-y-4 text-sm">

              <div className="rounded-xl bg-slate-50 p-4 border">
                <div className="flex justify-between">
                  <span>Total aides estimées</span>
                  <strong>{euro(aidesAnnuelles)} / an</strong>
                </div>
                <div className="text-xs text-slate-500">
                  Soit {euro(aidesMensuelles)} / mois
                </div>
              </div>

              <div className="rounded-xl bg-slate-50 p-4 border">
                <div className="flex justify-between">
                  <span>Coût brut chargé</span>
                  <strong>{euro(brutChargeMensuel)} / mois</strong>
                </div>
                <div className="text-xs text-slate-500">
                  Charges patronales ≈ 42 %
                </div>
              </div>

              <div className="rounded-xl bg-green-50 p-4 border border-green-200">
                <div className="flex justify-between text-green-700">
                  <span className="font-semibold">Coût net estimé</span>
                  <strong>{euro(coutNetMensuel)} / mois</strong>
                </div>
                <div className="text-xs text-green-700">
                  Soit {euro(coutNetAnnuel)} / an
                </div>
              </div>

            </div>
          )}
        </div>

      </div>
    </section>
  );
}