"use client"

import { motion, AnimatePresence } from "framer-motion"
import { ChevronDown, X, SlidersHorizontal, MapPin, Clock, Briefcase } from "lucide-react"
import { useState } from "react"
import { useOffres } from "@/app/hooks/useOffres"
import type { FiltresActifs } from "../page"

const OPTIONS_LIEU = ["Tous", "Abidjan", "Plateau", "Cocody", "Marcory", "Remote"]
const OPTIONS_TYPE = ["Tous", "CDI", "CDD", "Interim", "Freelance"]
const OPTIONS_DATE = ["Tous", "Aujourd'hui", "7 derniers jours", "30 derniers jours", "3 derniers mois"]

interface Props {
  filtres: FiltresActifs
  onChange: (filtres: FiltresActifs) => void
}

function FiltreDropdown({
  label, valeur, options, icon, onChange
}: {
  label: string
  valeur: string
  options: string[]
  icon: React.ReactNode
  onChange: (v: string) => void
}) {
  const [ouvert, setOuvert] = useState(false)
  const actif = valeur !== "Tous"

  return (
    <div className="relative">
      <motion.button
        whileTap={{ scale: 0.97 }}
        onClick={() => setOuvert(!ouvert)}
        className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-sm font-medium border transition-all ${
          actif
            ? "bg-blue-600 text-white border-blue-600 shadow-md shadow-blue-200 dark:shadow-blue-900/30"
            : "bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-blue-300 hover:bg-blue-50/50 dark:hover:bg-slate-800"
        }`}
      >
        <span className={actif ? "text-white" : "text-slate-400"}>{icon}</span>
        <span>{actif ? valeur : label}</span>
        <motion.div animate={{ rotate: ouvert ? 180 : 0 }} transition={{ duration: 0.2 }}>
          <ChevronDown size={14} className={actif ? "text-white/80" : "text-slate-400"} />
        </motion.div>
        {actif && (
          <span
            onClick={(e) => { e.stopPropagation(); onChange("Tous") }}
            className="ml-0.5 hover:bg-blue-500 rounded-full p-0.5 transition-colors"
          >
            <X size={12} />
          </span>
        )}
      </motion.button>

      <AnimatePresence>
        {ouvert && (
          <motion.div
            initial={{ opacity: 0, y: -6, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.97 }}
            transition={{ duration: 0.15 }}
            className="absolute left-0 top-full mt-2 z-50 w-48 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-xl overflow-hidden"
          >
            <div className="px-3 py-2 border-b border-slate-100 dark:border-slate-800">
              <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{label}</p>
            </div>
            {options.map((opt) => (
              <button
                key={opt}
                onClick={() => { onChange(opt); setOuvert(false) }}
                className={`w-full flex items-center justify-between px-3 py-2.5 text-sm transition-colors ${
                  valeur === opt
                    ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-semibold"
                    : "text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
                }`}
              >
                {opt}
                {valeur === opt && (
                  <motion.div
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    className="w-1.5 h-1.5 rounded-full bg-blue-600"
                  />
                )}
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>

      {ouvert && <div className="fixed inset-0 z-40" onClick={() => setOuvert(false)} />}
    </div>
  )
}

export default function FiltreOffres({ filtres, onChange }: Props) {
  const { offres } = useOffres()

  const nbFiltresActifs = Object.values(filtres).filter(v => v !== "Tous").length

  const setFiltre = (key: keyof FiltresActifs) => (val: string) =>
    onChange({ ...filtres, [key]: val })

  const resetTout = () => onChange({ lieu: "Tous", type: "Tous", date: "Tous" })

  // Compteur dynamique filtré
  const maintenant = Date.now()
  const offresAffichees = offres.filter(o => {
    const matchType = filtres.type === "Tous" || o.contrat === filtres.type
    const matchLieu = filtres.lieu === "Tous" ||
      o.localisation.toLowerCase().includes(filtres.lieu.toLowerCase())
    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
    })()
    return matchType && matchLieu && matchDate
  }).length

  return (
    <div className="space-y-3 mb-6">
      <div className="flex flex-wrap items-center gap-2">

        {/* Icône + label */}
        <div className="flex items-center gap-2 text-slate-500 dark:text-slate-400 mr-1">
          <SlidersHorizontal size={16} />
          <span className="text-sm font-semibold hidden sm:block">Filtres</span>
          {nbFiltresActifs > 0 && (
            <motion.span
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              className="w-5 h-5 rounded-full bg-blue-600 text-white text-[10px] font-bold flex items-center justify-center"
            >
              {nbFiltresActifs}
            </motion.span>
          )}
        </div>

        <div className="h-6 w-px bg-slate-200 dark:bg-slate-700 mr-1" />

        <FiltreDropdown
          label="Lieu"
          valeur={filtres.lieu}
          options={OPTIONS_LIEU}
          icon={<MapPin size={14} />}
          onChange={setFiltre("lieu")}
        />
        <FiltreDropdown
          label="Type de contrat"
          valeur={filtres.type}
          options={OPTIONS_TYPE}
          icon={<Briefcase size={14} />}
          onChange={setFiltre("type")}
        />
        <FiltreDropdown
          label="Période"
          valeur={filtres.date}
          options={OPTIONS_DATE}
          icon={<Clock size={14} />}
          onChange={setFiltre("date")}
        />

        <AnimatePresence>
          {nbFiltresActifs > 0 && (
            <motion.button
              initial={{ opacity: 0, x: -8 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -8 }}
              onClick={resetTout}
              className="flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-slate-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all"
            >
              <X size={13} /> Réinitialiser
            </motion.button>
          )}
        </AnimatePresence>

        {/* Compteur */}
        <div className="ml-auto flex items-center gap-2">
          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
          <span className="text-sm text-slate-500 dark:text-slate-400">
            <span className="font-bold text-slate-900 dark:text-white">{offresAffichees}</span>
            {" "}offre{offresAffichees > 1 ? "s" : ""} trouvée{offresAffichees > 1 ? "s" : ""}
          </span>
        </div>
      </div>

      {/* Tags filtres actifs */}
      <AnimatePresence>
        {nbFiltresActifs > 0 && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="flex flex-wrap gap-2"
          >
            {Object.entries(filtres)
              .filter(([_, v]) => v !== "Tous")
              .map(([key, val]) => (
                <motion.span
                  key={key}
                  initial={{ scale: 0.8, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0.8, opacity: 0 }}
                  className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs font-semibold rounded-full border border-blue-100 dark:border-blue-800"
                >
                  {val}
                  <button onClick={() => setFiltre(key as keyof FiltresActifs)("Tous")} className="hover:text-blue-900 transition-colors">
                    <X size={11} />
                  </button>
                </motion.span>
              ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}