"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import { useOffres, type Offre } from "@/app/hooks/useOffres"

const COULEURS_STATUT: Record<string, string> = {
  "Actif":    "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
  "Urgent":   "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400",
  "Brouillon":"bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400",
  "Clôturé":  "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
}

const POINT_STATUT: Record<string, string> = {
  "Actif":    "bg-emerald-500",
  "Urgent":   "bg-orange-500",
  "Brouillon":"bg-slate-400",
  "Clôturé":  "bg-red-500",
}

export default function TableauOffres() {
  const router = useRouter()
  const { offres, supprimerOffre, changerStatut } = useOffres()
  const [menuOuvert, setMenuOuvert] = useState<string | null>(null)

  const toggleMenu = (id: string) => {
    setMenuOuvert(menuOuvert === id ? null : id)
  }

  return (
    <motion.section
      initial={{ opacity: 0, y: 40 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden"
    >
      {/* En-tête */}
      <div className="p-6 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
        <div>
          <h2 className="text-lg font-bold">Liste des offres</h2>
          <p className="text-sm text-slate-500">{offres.length} offre{offres.length > 1 ? "s" : ""} au total</p>
        </div>
        <button
          onClick={() => router.push("/entreprise/offres/creation/etape-1")}
          className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold hover:bg-primary/90 transition-colors"
        >
          <span className="material-symbols-outlined text-lg">add</span>
          Nouvelle offre
        </button>
      </div>

      {offres.length === 0 ? (
        /* État vide */
        <div className="flex flex-col items-center justify-center py-20 text-slate-400">
          <span className="material-symbols-outlined text-6xl mb-4">work_off</span>
          <p className="text-lg font-semibold text-slate-500">Aucune offre pour le moment</p>
          <p className="text-sm mt-1 mb-6">Créez votre première offre d&apos;emploi</p>
          <button
            onClick={() => router.push("/entreprise/offres/creation/etape-1")}
            className="flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-lg text-sm font-bold hover:bg-primary/90 transition-colors"
          >
            <span className="material-symbols-outlined text-lg">add</span>
            Créer une offre
          </button>
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead className="bg-slate-50 dark:bg-slate-800/50 text-slate-500 dark:text-slate-400 text-xs font-bold uppercase tracking-wider">
              <tr>
                <th className="px-6 py-4">Poste</th>
                <th className="px-6 py-4">Localisation</th>
                <th className="px-6 py-4">Contrat</th>
                <th className="px-6 py-4">Salaire</th>
                <th className="px-6 py-4">Candidats</th>
                <th className="px-6 py-4">Statut</th>
                <th className="px-6 py-4 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200 dark:divide-slate-800">
              <AnimatePresence>
                {offres.map((offre, index) => (
                  <motion.tr
                    key={offre.id}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: 20 }}
                    transition={{ delay: index * 0.05 }}
                    className="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors"
                  >
                    {/* Poste */}
                    <td className="px-6 py-4">
                      <div className="font-semibold text-slate-900 dark:text-white">{offre.poste}</div>
                      <div className="text-xs text-slate-500">
                        {new Date(offre.dateCreation).toLocaleDateString("fr-FR")}
                      </div>
                    </td>

                    {/* Localisation */}
                    <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-400">
                      {offre.localisation}
                    </td>

                    {/* Contrat */}
                    <td className="px-6 py-4 text-sm font-medium">{offre.contrat}</td>

                    {/* Salaire */}
                    <td className="px-6 py-4 text-sm">{offre.salaire}</td>

                    {/* Candidats */}
                    <td className="px-6 py-4 text-sm">
                      <div className="flex items-center gap-2">
                        <span className="font-bold">{offre.candidats}</span>
                        {offre.candidats > 0 && (
                          <span className={`w-2 h-2 rounded-full ${POINT_STATUT[offre.statut]}`} />
                        )}
                      </div>
                    </td>

                    {/* Statut */}
                    <td className="px-6 py-4">
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${COULEURS_STATUT[offre.statut]}`}>
                        {offre.statut}
                      </span>
                    </td>

                    {/* Actions */}
                    <td className="px-6 py-4 text-right">
                      <div className="relative inline-block">
                        <button
                          onClick={() => toggleMenu(offre.id)}
                          className="material-symbols-outlined text-slate-400 hover:text-primary transition-colors"
                        >
                          more_vert
                        </button>

                        <AnimatePresence>
                          {menuOuvert === offre.id && (
                            <motion.div
                              initial={{ opacity: 0, scale: 0.95, y: -8 }}
                              animate={{ opacity: 1, scale: 1, y: 0 }}
                              exit={{ opacity: 0, scale: 0.95, y: -8 }}
                              className="absolute right-0 z-50 mt-1 w-48 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-xl overflow-hidden"
                            >
                              {/* Changer statut */}
                              {(["Actif", "Urgent", "Clôturé", "Brouillon"] as Offre["statut"][])
                                .filter((s) => s !== offre.statut)
                                .map((s) => (
                                  <button
                                    key={s}
                                    onClick={() => { changerStatut(offre.id, s); setMenuOuvert(null) }}
                                    className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors text-left"
                                  >
                                    <span className={`w-2 h-2 rounded-full ${POINT_STATUT[s]}`} />
                                    Marquer comme {s}
                                  </button>
                                ))
                              }

                              <div className="border-t border-slate-100 dark:border-slate-800" />

                              {/* Supprimer */}
                              <button
                                onClick={() => { supprimerOffre(offre.id); setMenuOuvert(null) }}
                                className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-left"
                              >
                                <span className="material-symbols-outlined text-lg">delete</span>
                                Supprimer
                              </button>
                            </motion.div>
                          )}
                        </AnimatePresence>
                      </div>
                    </td>
                  </motion.tr>
                ))}
              </AnimatePresence>
            </tbody>
          </table>
        </div>
      )}
    </motion.section>
  )
}