"use client"

import { useState, useMemo } from "react"
import { motion, AnimatePresence } from "framer-motion"
import {
  Search, TrendingUp, Edit3, XCircle, Eye,
  ChevronUp, ChevronDown, Users, CheckCircle,
  Clock, Archive, Plus
} from "lucide-react"
import { useOffres, type Offre } from "@/app/hooks/useOffres"
import { useRouter } from "next/navigation"
import type { FiltresActifs } from "../page"

interface Props {
  filtres: FiltresActifs
}

const CONFIG_STATUT: Record<string, { bg: string; text: string; dot: string }> = {
  Actif:    { bg: "bg-emerald-50 dark:bg-emerald-900/20",  text: "text-emerald-700 dark:text-emerald-400", dot: "bg-emerald-500" },
  Brouillon:{ bg: "bg-amber-50 dark:bg-amber-900/20",      text: "text-amber-700 dark:text-amber-400",     dot: "bg-amber-400"   },
  Urgent:   { bg: "bg-orange-50 dark:bg-orange-900/20",    text: "text-orange-700 dark:text-orange-400",   dot: "bg-orange-500"  },
  Clôturé:  { bg: "bg-slate-100 dark:bg-slate-800",        text: "text-slate-500 dark:text-slate-400",     dot: "bg-slate-400"   },
}

type SortKey = "poste" | "candidats" | "dateCreation"
type SortDir  = "asc" | "desc"

export default function TableauCandidatures({ filtres }: Props) {
  const router = useRouter()
  const { offres, supprimerOffre, changerStatut } = useOffres()

  const [recherche, setRecherche]   = useState("")
  const [sortKey, setSortKey]       = useState<SortKey>("dateCreation")
  const [sortDir, setSortDir]       = useState<SortDir>("desc")
  const [menuOuvert, setMenuOuvert] = useState<string | null>(null)

  const toggleSort = (key: SortKey) => {
    if (sortKey === key) setSortDir(d => d === "asc" ? "desc" : "asc")
    else { setSortKey(key); setSortDir("desc") }
  }

  const maintenant = Date.now()

  const offresFiltrees = useMemo(() => {
    return offres
      .filter(o => {
        // Filtre type contrat
        const matchType = filtres.type === "Tous" || o.contrat === filtres.type
        // Filtre lieu
        const matchLieu = filtres.lieu === "Tous" ||
          o.localisation.toLowerCase().includes(filtres.lieu.toLowerCase())
        // Filtre date
        const matchDate = (() => {
          if (filtres.date === "Tous") return true
          const age = maintenant - new Date(o.dateCreation).getTime()
          if (filtres.date === "Aujourd'hui")       return age < 86400000
          if (filtres.date === "7 derniers jours")  return age < 7  * 86400000
          if (filtres.date === "30 derniers jours") return age < 30 * 86400000
          if (filtres.date === "3 derniers mois")   return age < 90 * 86400000
          return true
        })()
        // Filtre recherche texte
        const matchRecherche =
          o.poste.toLowerCase().includes(recherche.toLowerCase()) ||
          o.localisation.toLowerCase().includes(recherche.toLowerCase()) ||
          o.contrat.toLowerCase().includes(recherche.toLowerCase())

        return matchType && matchLieu && matchDate && matchRecherche
      })
      .sort((a, b) => {
        const mult = sortDir === "asc" ? 1 : -1
        if (sortKey === "candidats")    return (a.candidats - b.candidats) * mult
        if (sortKey === "poste")        return a.poste.localeCompare(b.poste) * mult
        if (sortKey === "dateCreation") return (new Date(a.dateCreation).getTime() - new Date(b.dateCreation).getTime()) * mult
        return 0
      })
  }, [offres, filtres, recherche, sortKey, sortDir])

  const stats = {
    total:     offres.length,
    actives:   offres.filter(o => o.statut === "Actif").length,
    candidats: offres.reduce((acc, o) => acc + o.candidats, 0),
    urgent:    offres.filter(o => o.statut === "Urgent").length,
  }

  const SortIcon = ({ col }: { col: SortKey }) => (
    <span className="inline-flex flex-col ml-1 opacity-40">
      <ChevronUp size={10} className={sortKey === col && sortDir === "asc" ? "opacity-100 text-blue-600" : ""} />
      <ChevronDown size={10} className={sortKey === col && sortDir === "desc" ? "opacity-100 text-blue-600" : ""} />
    </span>
  )

  const formaterDate = (dateStr: string) => {
    const diff = Date.now() - new Date(dateStr).getTime()
    const min  = Math.floor(diff / 60000)
    const h    = Math.floor(diff / 3600000)
    const j    = Math.floor(diff / 86400000)
    if (min < 60) return `Il y a ${min} min`
    if (h < 24)   return `Il y a ${h}h`
    if (j === 1)  return "Hier"
    if (j < 7)    return `Il y a ${j} jours`
    return new Date(dateStr).toLocaleDateString("fr-FR")
  }

  return (
    <div className="space-y-5">

      {/* Stats dynamiques */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: "Total offres",   val: stats.total,     icon: Archive,     color: "text-slate-600",  bg: "bg-slate-100 dark:bg-slate-800"       },
          { label: "Offres actives", val: stats.actives,   icon: CheckCircle, color: "text-emerald-600",bg: "bg-emerald-50 dark:bg-emerald-900/20"  },
          { label: "Candidats",      val: stats.candidats, icon: Users,       color: "text-blue-600",   bg: "bg-blue-50 dark:bg-blue-900/20"        },
          { label: "Urgent",         val: stats.urgent,    icon: TrendingUp,  color: "text-orange-600", bg: "bg-orange-50 dark:bg-orange-900/20"    },
        ].map((s, i) => {
          const Icon = s.icon
          return (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.07 }}
              className="bg-white dark:bg-slate-900 rounded-xl border border-slate-100 dark:border-slate-800 p-4 flex items-center gap-3 shadow-sm"
            >
              <div className={`${s.bg} p-2.5 rounded-lg`}>
                <Icon size={16} className={s.color} />
              </div>
              <div>
                <p className="text-xl font-extrabold text-slate-900 dark:text-white leading-none">{s.val}</p>
                <p className="text-xs text-slate-400 mt-0.5">{s.label}</p>
              </div>
            </motion.div>
          )
        })}
      </div>

      {/* Tableau */}
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-2xl overflow-hidden shadow-sm"
      >
        {/* Header */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 px-6 py-4 border-b border-slate-100 dark:border-slate-800">
          <div>
            <h2 className="text-base font-bold text-slate-900 dark:text-white">Offres & Candidatures</h2>
            <p className="text-xs text-slate-400 mt-0.5">
              {offresFiltrees.length} offre{offresFiltrees.length > 1 ? "s" : ""} affichée{offresFiltrees.length > 1 ? "s" : ""}
            </p>
          </div>
          {/* Recherche texte */}
          <div className="relative w-full sm:w-56">
            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input
              type="text"
              value={recherche}
              onChange={e => setRecherche(e.target.value)}
              placeholder="Rechercher..."
              className="w-full pl-9 pr-3 py-2 text-xs bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 focus:border-blue-400 transition-all"
            />
          </div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead className="bg-slate-50/80 dark:bg-slate-800/50">
              <tr>
                <th onClick={() => toggleSort("poste")} className="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-400 cursor-pointer hover:text-slate-600 select-none">
                  Poste <SortIcon col="poste" />
                </th>
                <th className="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-400">Statut</th>
                <th onClick={() => toggleSort("candidats")} className="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-400 cursor-pointer hover:text-slate-600 select-none">
                  Candidats <SortIcon col="candidats" />
                </th>
                <th className="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-400">Salaire</th>
                <th onClick={() => toggleSort("dateCreation")} className="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-400 cursor-pointer hover:text-slate-600 select-none">
                  Publié <SortIcon col="dateCreation" />
                </th>
                <th className="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-400 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50 dark:divide-slate-800/80">
              <AnimatePresence mode="popLayout">
                {offres.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="px-6 py-20 text-center">
                      <div className="flex flex-col items-center gap-3 text-slate-400">
                        <Archive size={36} className="opacity-20" />
                        <p className="text-sm font-semibold text-slate-500">Aucune offre publiée</p>
                        <p className="text-xs">Créez votre première offre pour la voir apparaître ici</p>
                        <button
                          onClick={() => router.push("/entreprise/offres/creation/etape-1")}
                          className="mt-2 flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-xs font-bold rounded-lg hover:bg-blue-700 transition-colors"
                        >
                          <Plus size={13} /> Créer une offre
                        </button>
                      </div>
                    </td>
                  </tr>
                ) : offresFiltrees.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="px-6 py-16 text-center">
                      <div className="flex flex-col items-center gap-2 text-slate-400">
                        <Search size={28} className="opacity-30" />
                        <p className="text-sm font-medium">Aucun résultat pour ces filtres</p>
                        <p className="text-xs">Essayez de modifier vos filtres</p>
                      </div>
                    </td>
                  </tr>
                ) : (
                  offresFiltrees.map((o, i) => {
                    const cfg = CONFIG_STATUT[o.statut] ?? CONFIG_STATUT["Clôturé"]
                    return (
                      <motion.tr
                        key={o.id}
                        layout
                        initial={{ opacity: 0, x: -12 }}
                        animate={{ opacity: 1, x: 0 }}
                        exit={{ opacity: 0, x: 12 }}
                        transition={{ delay: i * 0.04 }}
                        className="hover:bg-slate-50/80 dark:hover:bg-slate-800/30 transition-colors group"
                      >
                        <td className="px-6 py-4">
                          <div className="flex flex-col gap-0.5">
                            <span className="text-sm font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 transition-colors">
                              {o.poste}
                            </span>
                            <div className="flex items-center gap-1.5">
                              <span className="text-xs text-slate-400">{o.contrat}</span>
                              <span className="text-slate-300 dark:text-slate-700">•</span>
                              <span className="text-xs text-slate-400">{o.localisation}</span>
                            </div>
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold ${cfg.bg} ${cfg.text}`}>
                            <span className={`w-1.5 h-1.5 rounded-full ${cfg.dot} ${o.statut === "Actif" ? "animate-pulse" : ""}`} />
                            {o.statut}
                          </span>
                        </td>
                        <td className="px-6 py-4">
                          <span className="text-sm font-bold text-slate-900 dark:text-white">{o.candidats}</span>
                        </td>
                        <td className="px-6 py-4">
                          <span className="text-xs text-slate-500">{o.salaire}</span>
                        </td>
                        <td className="px-6 py-4">
                          <span className="text-xs text-slate-400">{formaterDate(o.dateCreation)}</span>
                        </td>
                        <td className="px-6 py-4">
                          <div className="flex items-center justify-end gap-1">
                            <button className="p-1.5 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all opacity-0 group-hover:opacity-100">
                              <Eye size={15} />
                            </button>
                            <button className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all opacity-0 group-hover:opacity-100">
                              <Edit3 size={15} />
                            </button>
                            <div className="relative">
                              <button
                                onClick={() => setMenuOuvert(menuOuvert === o.id ? null : o.id)}
                                className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all"
                              >
                                <ChevronDown size={15} />
                              </button>
                              <AnimatePresence>
                                {menuOuvert === o.id && (
                                  <motion.div
                                    initial={{ opacity: 0, scale: 0.95, y: -4 }}
                                    animate={{ opacity: 1, scale: 1, y: 0 }}
                                    exit={{ opacity: 0, scale: 0.95, y: -4 }}
                                    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"
                                  >
                                    {(["Actif", "Urgent", "Clôturé", "Brouillon"] as Offre["statut"][])
                                      .filter(s => s !== o.statut)
                                      .map(s => (
                                        <button
                                          key={s}
                                          onClick={() => { changerStatut(o.id, s); setMenuOuvert(null) }}
                                          className="w-full flex items-center gap-2 px-3 py-2.5 text-xs text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                                        >
                                          <span className={`w-2 h-2 rounded-full ${CONFIG_STATUT[s]?.dot ?? "bg-slate-400"}`} />
                                          Marquer {s}
                                        </button>
                                      ))}
                                    <div className="border-t border-slate-100 dark:border-slate-800" />
                                    <button
                                      onClick={() => { supprimerOffre(o.id); setMenuOuvert(null) }}
                                      className="w-full flex items-center gap-2 px-3 py-2.5 text-xs text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                                    >
                                      <XCircle size={13} /> Supprimer
                                    </button>
                                  </motion.div>
                                )}
                              </AnimatePresence>
                            </div>
                          </div>
                        </td>
                      </motion.tr>
                    )
                  })
                )}
              </AnimatePresence>
            </tbody>
          </table>
        </div>

        {offres.length > 0 && (
          <div className="px-6 py-3 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between">
            <p className="text-xs text-slate-400">
              {offresFiltrees.length} résultat{offresFiltrees.length > 1 ? "s" : ""} sur {offres.length}
            </p>
            <button
              onClick={() => router.push("/entreprise/offres/creation/etape-1")}
              className="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition-colors"
            >
              <Plus size={13} /> Nouvelle offre
            </button>
          </div>
        )}
      </motion.div>

      {menuOuvert !== null && (
        <div className="fixed inset-0 z-40" onClick={() => setMenuOuvert(null)} />
      )}
    </div>
  )
}