"use client"

import { useState } from "react"

const suggestions = [
  "Améliorer la clarté",
  "Ajouter des avantages",
  "Optimiser pour le SEO",
]

interface Props {
  metier: string
}

export default function AssistantIA({ metier }: Props) {

  const [chargement, setChargement] = useState(false)
  const [contenuGenere, setContenuGenere] = useState("")

  const genererContenu = async () => {
    setChargement(true)
    // Remplacez ceci par votre vrai appel API
    await new Promise((r) => setTimeout(r, 1500))
    setContenuGenere(
      `Nous recherchons un(e) ${metier || "professionnel"} expérimenté(e) pour rejoindre notre équipe. Vous serez responsable de...`
    )
    setChargement(false)
  }

  return (
    <>
      {/* Panneau Assistant IA */}
      <div className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-primary/20 dark:border-primary/30 shadow-lg shadow-primary/5 flex flex-col gap-4">

        <div className="flex items-center gap-2 text-primary">
          <span className="material-symbols-outlined">auto_awesome</span>
          <h3 className="font-bold text-base">Assistant IA</h3>
        </div>

        <p className="text-sm text-slate-600 dark:text-slate-400">
          Générez une description percutante pour le poste de{" "}
          <span className="font-semibold text-primary">{metier || "..."}</span>.
        </p>

        <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg text-xs italic text-slate-500 border border-slate-100 dark:border-slate-700 min-h-[60px]">
          {contenuGenere || `"${metier ? `Poste de ${metier}...` : "Générez une description..."}"`}
        </div>

        <button
          onClick={genererContenu}
          disabled={chargement}
          className="w-full py-2.5 bg-primary text-white rounded-lg font-bold text-sm hover:bg-primary/90 transition-all flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
        >
          {chargement ? (
            <>
              <span className="material-symbols-outlined animate-spin text-lg">progress_activity</span>
              Génération...
            </>
          ) : (
            <>
              <span className="material-symbols-outlined text-lg">bolt</span>
              Générer le contenu
            </>
          )}
        </button>

        {/* Suggestions */}
        <div className="pt-2">
          <h4 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">
            Suggestions
          </h4>
          <ul className="space-y-2">
            {suggestions.map((s) => (
              <li
                key={s}
                className="p-2 text-xs border border-slate-100 dark:border-slate-800 rounded hover:border-primary/50 hover:text-primary cursor-pointer transition-colors text-slate-600 dark:text-slate-400"
              >
                {s}
              </li>
            ))}
          </ul>
        </div>

      </div>

      {/* Encart aide */}
      <div className="bg-primary/10 dark:bg-primary/5 p-5 rounded-xl border border-primary/10">
        <h3 className="font-bold text-primary text-sm mb-2">Besoin d&apos;aide ?</h3>
        <p className="text-xs text-primary/80 leading-relaxed mb-3">
          Consultez nos modèles d&apos;offres pour vous inspirer et gagner du temps.
        </p>
        <a href="#" className="text-xs font-bold text-primary underline hover:text-primary/70 transition-colors">
          Voir les modèles
        </a>
      </div>
    </>
  )
}