"use client"

import { useState } from "react"

const competencesParMetier: Record<string, string[]> = {
  "Maçon": ["Maçonnerie", "Lecture de plans", "Travail en hauteur"],
  "Chauffeur": ["Permis B", "Permis C", "GPS / Logistique"],
  "Vendeur": ["Communication", "CRM", "Négociation"],
  "Cuisinier": ["Cuisine africaine", "HACCP", "Gestion des stocks"],
  "Mécanicien": ["Diagnostic moteur", "Électronique auto", "Hydraulique"],
  "Gardien": ["Surveillance", "Premiers secours", "Ronde sécurité"],
}

interface Props {
  metier: string
}

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

  const competencesInitiales = competencesParMetier[metier] ?? []

  const [competences, setCompetences] = useState<string[]>(competencesInitiales)
  const [nouvelleCompetence, setNouvelleCompetence] = useState("")
  const [ajouterVisible, setAjouterVisible] = useState(false)
  const [teletravail, setTeletravail] = useState(false)
  const [description, setDescription] = useState("")

  const supprimerCompetence = (index: number) => {
    setCompetences(competences.filter((_, i) => i !== index))
  }

  const ajouterCompetence = () => {
    if (nouvelleCompetence.trim()) {
      setCompetences([...competences, nouvelleCompetence.trim()])
      setNouvelleCompetence("")
      setAjouterVisible(false)
    }
  }

  return (
    <>
      {/* Zone de description */}
      <div className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
        <label className="block mb-4">
          <span className="text-slate-900 dark:text-white text-sm font-bold mb-2 block">
            Description de la mission
          </span>
          <textarea
            className="w-full rounded-lg border border-slate-200 dark:border-slate-700 dark:bg-slate-950 focus:border-primary focus:ring-primary transition-all text-slate-700 dark:text-slate-300 placeholder:text-slate-400 p-3 text-sm resize-none"
            placeholder={`Décrivez les responsabilités du poste ${metier ? `de ${metier}` : ""}...`}
            rows={10}
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </label>

        <div className="flex items-center gap-2 p-3 bg-primary/5 rounded-lg border border-primary/10">
          <span className="material-symbols-outlined text-primary text-lg">info</span>
          <span className="text-xs font-medium text-primary">
            Conseil : Une description détaillée attire 30% de candidats qualifiés en plus.
          </span>
        </div>
      </div>

      {/* Compétences + Télétravail */}
      <div className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm space-y-6">

        {/* Compétences clés */}
        <div>
          <span className="text-slate-900 dark:text-white text-sm font-bold mb-3 block">
            Compétences clés
          </span>
          <div className="flex flex-wrap gap-2 mb-3">
            {competences.map((comp, index) => (
              <span
                key={index}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-xs font-semibold"
              >
                {comp}
                <button
                  onClick={() => supprimerCompetence(index)}
                  className="hover:text-primary/60 transition-colors"
                >
                  <span className="material-symbols-outlined text-sm">close</span>
                </button>
              </span>
            ))}

            {ajouterVisible ? (
              <div className="flex items-center gap-1">
                <input
                  autoFocus
                  type="text"
                  value={nouvelleCompetence}
                  onChange={(e) => setNouvelleCompetence(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && ajouterCompetence()}
                  placeholder="Ex: Python"
                  className="border border-primary rounded-full px-3 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-primary dark:bg-slate-950 dark:text-white"
                />
                <button
                  onClick={ajouterCompetence}
                  className="text-xs px-2 py-1 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors"
                >
                  OK
                </button>
              </div>
            ) : (
              <button
                onClick={() => setAjouterVisible(true)}
                className="inline-flex items-center gap-1 px-3 py-1.5 border border-dashed border-slate-300 dark:border-slate-700 text-slate-500 rounded-full text-xs font-medium hover:border-primary hover:text-primary transition-colors"
              >
                <span className="material-symbols-outlined text-sm">add</span>
                Ajouter
              </button>
            )}
          </div>
          <p className="text-xs text-slate-400">
            Saisissez les compétences techniques ou relationnelles indispensables.
          </p>
        </div>

        {/* Toggle télétravail */}
        <div className="flex items-center justify-between py-4 border-t border-slate-100 dark:border-slate-800">
          <div>
            <span className="text-slate-900 dark:text-white text-sm font-bold block">
              Télétravail possible
            </span>
            <p className="text-xs text-slate-400">Le poste autorise-t-il le travail à distance ?</p>
          </div>
          <button
            role="switch"
            aria-checked={teletravail}
            onClick={() => setTeletravail(!teletravail)}
            className={`relative inline-flex items-center w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none ${
              teletravail ? "bg-primary" : "bg-slate-200 dark:bg-slate-700"
            }`}
          >
            <span
              className={`inline-block w-5 h-5 bg-white rounded-full shadow transform transition-transform duration-200 ${
                teletravail ? "translate-x-5" : "translate-x-1"
              }`}
            />
          </button>
        </div>

      </div>
    </>
  )
}