// components/recruiter/job-visibility.tsx
"use client";

export type JobPlan = "free" | "middle" | "premium";

type Props = {
  plan: JobPlan;
  onPlanChange: (p: JobPlan) => void;
  score: number;
};

function scoreLabel(score: number) {
  if (score >= 80) return { text: "Excellent", cls: "text-green-700 bg-green-50 border-green-100" };
  if (score >= 60) return { text: "Bon", cls: "text-emerald-700 bg-emerald-50 border-emerald-100" };
  if (score >= 40) return { text: "Moyen", cls: "text-amber-700 bg-amber-50 border-amber-100" };
  return { text: "À améliorer", cls: "text-red-700 bg-red-50 border-red-100" };
}

export default function JobVisibility({ plan, onPlanChange, score }: Props) {
  const badge = scoreLabel(score);

  return (
    <div className="bg-white rounded-xl p-6 shadow-sm border space-y-5">
      <div>
        <h3 className="text-sm font-semibold text-slate-700">
          Score Senior-Ready
        </h3>
        <p className="text-xs text-slate-500 mt-1">
          Calcul en temps réel à partir des adaptations et contraintes.
        </p>
      </div>

      <div className="flex items-center justify-between gap-4">
        <div className="text-3xl font-bold text-slate-900">{score}%</div>
        <span
          className={`text-xs px-3 py-1 rounded-full border ${badge.cls}`}
        >
          {badge.text}
        </span>
      </div>

      <hr />

      <div>
        <h3 className="text-sm font-semibold text-slate-700">
          Visibilité de l’offre
        </h3>
        <p className="text-xs text-slate-500 mt-1">
          Les annonces employeurs ne sont pas gratuites : choisissez une formule.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-3">
        <button
          type="button"
          onClick={() => onPlanChange("free")}
          className={`rounded-lg border p-4 text-left ${
            plan === "free"
              ? "border-blue-300 bg-blue-50"
              : "border-slate-200 bg-white hover:bg-slate-50"
          }`}
        >
          <div className="flex items-center justify-between">
            <div className="font-semibold text-slate-900">Base</div>
            <div className="text-sm font-semibold text-slate-900">Gratuit</div>
          </div>
          <ul className="mt-2 text-sm text-slate-600 space-y-1">
            <li>• Publication standard</li>
            <li>• Affichage basique</li>
            <li>• Sans mise en avant</li>
          </ul>
        </button>

        <button
          type="button"
          onClick={() => onPlanChange("middle")}
          className={`rounded-lg border p-4 text-left ${
            plan === "middle"
              ? "border-blue-300 bg-blue-50"
              : "border-slate-200 bg-white hover:bg-slate-50"
          }`}
        >
          <div className="flex items-center justify-between">
            <div className="font-semibold text-slate-900">Middle</div>
            <div className="text-sm font-semibold text-slate-900">49 €</div>
          </div>
          <ul className="mt-2 text-sm text-slate-600 space-y-1">
            <li>• Mise en avant légère (listing)</li>
            <li>• Badge “Senior-Friendly”</li>
            <li>• Priorité modérée</li>
          </ul>
        </button>

        <button
          type="button"
          onClick={() => onPlanChange("premium")}
          className={`rounded-lg border p-4 text-left ${
            plan === "premium"
              ? "border-blue-300 bg-blue-50"
              : "border-slate-200 bg-white hover:bg-slate-50"
          }`}
        >
          <div className="flex items-center justify-between">
            <div className="font-semibold text-slate-900">Premium</div>
            <div className="text-sm font-semibold text-slate-900">99 €</div>
          </div>
          <ul className="mt-2 text-sm text-slate-600 space-y-1">
            <li>• Boost fort (listing + modules)</li>
            <li>• Bandeau publicitaire entreprise (fiche)</li>
            <li>• Priorité haute</li>
          </ul>
        </button>
      </div>

      <button type="button" className="btn btn-outline w-full">
        Activer la formule sélectionnée
      </button>

      <p className="text-xs text-slate-500">
        Le paiement (Stripe) sera branché sur ce bloc. Le plan sélectionné doit
        être persisté côté DB (entreprise/offre).
      </p>
    </div>
  );
}