'use client'

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Bell, Search, WifiOff, X, Check } from "lucide-react"
import { useProfil } from "@/app/contexte/ProfilContext"

const notifications = [
  { id: 1, texte: "Nouvelle candidature pour Maçon",    temps: "Il y a 2 min", lu: false, couleur: "bg-blue-500"    },
  { id: 2, texte: "Offre Chauffeur publiée avec succès",temps: "Il y a 1h",    lu: false, couleur: "bg-emerald-500" },
  { id: 3, texte: "3 candidats en attente de réponse",  temps: "Il y a 3h",    lu: true,  couleur: "bg-orange-500"  },
]

export default function BarreSuperieure() {
  const { profil } = useProfil()
  const [notifOuverte, setNotifOuverte] = useState(false)
  const [recherche, setRecherche]       = useState("")

  const nonLues  = notifications.filter(n => !n.lu).length
  const initiales = `${profil.prenom.charAt(0)}${profil.nom.charAt(0)}`.toUpperCase()

  return (
    <motion.header
      initial={{ y: -30, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.4 }}
      className="h-16 bg-white dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between px-6 sticky top-0 z-40 backdrop-blur-md"
    >

      {/* Recherche */}
      <div className="relative w-[420px]">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 size-4" />
        <motion.input
          type="text"
          value={recherche}
          onChange={e => setRecherche(e.target.value)}
          placeholder="Rechercher une offre ou un candidat..."
          whileFocus={{ scale: 1.01 }}
          className="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 pl-10 pr-4 outline-none text-sm focus:border-blue-400 focus:ring-2 focus:ring-blue-100 dark:focus:ring-blue-900 transition-all"
        />
        {recherche && (
          <button onClick={() => setRecherche("")} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
            <X size={14} />
          </button>
        )}
      </div>

      {/* Actions */}
      <div className="flex items-center gap-3">

        <motion.button
          whileHover={{ scale: 1.03 }}
          className="flex items-center gap-2 text-xs bg-slate-100 dark:bg-slate-800 px-3 py-2 rounded-xl font-semibold text-slate-500 transition-colors"
        >
          <WifiOff size={13} />
          <span className="hidden sm:block">Hors-ligne</span>
        </motion.button>

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

        {/* Notifications */}
        <div className="relative">
          <motion.button
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => setNotifOuverte(!notifOuverte)}
            className="relative p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <Bell className="text-slate-600 dark:text-slate-400" size={20} />
            {nonLues > 0 && (
              <motion.span
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center"
              >
                {nonLues}
              </motion.span>
            )}
          </motion.button>

          <AnimatePresence>
            {notifOuverte && (
              <motion.div
                initial={{ opacity: 0, y: -8, scale: 0.96 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={{ opacity: 0, y: -8, scale: 0.96 }}
                className="absolute right-0 top-12 w-80 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-xl overflow-hidden z-50"
              >
                <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 dark:border-slate-800">
                  <h3 className="text-sm font-bold text-slate-900 dark:text-white">Notifications</h3>
                  {nonLues > 0 && <span className="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Tout marquer lu</span>}
                </div>
                {notifications.map((n) => (
                  <div key={n.id} className={`flex items-start gap-3 px-4 py-3 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors ${!n.lu ? "bg-blue-50/50 dark:bg-blue-900/10" : ""}`}>
                    <div className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${n.couleur}`} />
                    <div className="flex-1">
                      <p className={`text-xs leading-relaxed ${!n.lu ? "font-semibold text-slate-900 dark:text-white" : "text-slate-500"}`}>{n.texte}</p>
                      <p className="text-[10px] text-slate-400 mt-0.5">{n.temps}</p>
                    </div>
                    {!n.lu && <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 shrink-0" />}
                  </div>
                ))}
                <div className="px-4 py-3 border-t border-slate-100 dark:border-slate-800 text-center">
                  <span className="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Voir toutes les notifications</span>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

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

        {/* Avatar + nom dynamiques */}
        <motion.div whileHover={{ scale: 1.03 }} className="flex items-center gap-2.5 cursor-pointer pl-1">
          {profil.avatar ? (
            <img
              src={profil.avatar}
              alt="Avatar"
              className="w-9 h-9 rounded-full object-cover ring-2 ring-blue-200 dark:ring-blue-900 shadow-md"
            />
          ) : (
            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-xs font-bold shadow-md">
              {initiales}
            </div>
          )}
          <div className="hidden md:block">
            <p className="text-xs font-bold text-slate-900 dark:text-white leading-none">
              {profil.prenom} {profil.nom}
            </p>
            <p className="text-[10px] text-slate-400 mt-0.5">{profil.nomEntreprise}</p>
          </div>
        </motion.div>

      </div>

      {notifOuverte && <div className="fixed inset-0 z-30" onClick={() => setNotifOuverte(false)} />}
    </motion.header>
  )
}