'use client'

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  LayoutDashboard, Briefcase, Users,
  BarChart3, Settings, Plus, ChevronRight, LogOut
} from "lucide-react"
import { useOffres } from "@/app/hooks/useOffres"
import { useProfil } from "@/app/contexte/ProfilContext"

export default function BarreLaterale() {
  const pathname = usePathname()
  const { offres } = useOffres()
  const { profil } = useProfil()

  const totalOffres   = offres.length
  const offresActives = offres.filter(o => o.statut === "Actif").length
  const offresUrgent  = offres.filter(o => o.statut === "Urgent").length

  const initiales = `${profil.prenom.charAt(0)}${profil.nom.charAt(0)}`.toUpperCase()

  const menu = [
    { icon: LayoutDashboard, label: "Tableau de bord", href: "/composants/TABLEAU_DE_BORD_ENTREPRISE/", badge: null,    badgeUrgent: false },
    { icon: Briefcase,       label: "Mes offres",      href: "/entreprise/tableau-de-bord",             badge: totalOffres > 0 ? totalOffres : null, badgeUrgent: offresUrgent > 0 },
    { icon: Users,           label: "Candidatures",    href: "/composants/Candidature",                 badge: null,    badgeUrgent: false },
    { icon: BarChart3,       label: "Analyses",        href: "/entreprise/analyses",                    badge: null,    badgeUrgent: false },
    { icon: Settings,        label: "Paramètres",      href: "/entreprise/parametres",                  badge: null,    badgeUrgent: false },
  ]

  const isActive = (href: string) =>
    pathname.toLowerCase() === href.toLowerCase() ||
    pathname.toLowerCase().startsWith(href.toLowerCase())

  return (
    <motion.aside
      initial={{ x: -80, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
      className="w-64 bg-white dark:bg-slate-900 border-r border-slate-100 dark:border-slate-800 flex flex-col h-screen sticky top-0"
    >

      {/* Logo */}
      <div className="px-5 py-6 border-b border-slate-100 dark:border-slate-800">
        <div className="flex items-center gap-3">
          <motion.div
            whileHover={{ rotate: 15, scale: 1.1 }}
            transition={{ type: "spring", stiffness: 300 }}
            className="w-9 h-9 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center shadow-md shadow-blue-200 dark:shadow-blue-900/40 text-lg"
          >
            🚀
          </motion.div>
          <div>
            <h1 className="font-extrabold text-sm text-slate-900 dark:text-white tracking-tight">
              SCPro360°
            </h1>
            {/* Nom entreprise dynamique */}
            <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 truncate max-w-[140px]">
              {profil.nomEntreprise}
            </p>
          </div>
        </div>
      </div>

      {/* Statut rapide */}
      {offresActives > 0 && (
        <div className="mx-4 mt-4 px-3 py-2.5 bg-emerald-50 dark:bg-emerald-900/20 rounded-xl border border-emerald-100 dark:border-emerald-800 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
            <span className="text-xs font-semibold text-emerald-700 dark:text-emerald-400">
              {offresActives} offre{offresActives > 1 ? "s" : ""} active{offresActives > 1 ? "s" : ""}
            </span>
          </div>
          <ChevronRight size={14} className="text-emerald-500" />
        </div>
      )}

      {/* Label nav */}
      <div className="px-3 pt-4 pb-2">
        <p className="px-3 mb-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
          Navigation
        </p>
      </div>

      {/* Menu */}
      <nav className="flex-1 px-3 space-y-0.5 overflow-y-auto">
        {menu.map((item, i) => {
          const Icon = item.icon
          const active = isActive(item.href)
          return (
            <Link key={i} href={item.href}>
              <motion.div
                whileHover={{ x: 3 }}
                transition={{ type: "spring", stiffness: 400, damping: 25 }}
                className={`relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm cursor-pointer transition-all group ${
                  active
                    ? "bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-semibold"
                    : "text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white"
                }`}
              >
                {active && (
                  <motion.div
                    layoutId="activeIndicator"
                    className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-5 bg-blue-600 rounded-r-full"
                  />
                )}
                <Icon size={18} className={active ? "text-blue-600 dark:text-blue-400" : "text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300"} />
                <span className="flex-1">{item.label}</span>
                {item.badge && (
                  <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full ${
                    item.badgeUrgent
                      ? "bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
                      : "bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400"
                  }`}>
                    {item.badge}
                  </span>
                )}
              </motion.div>
            </Link>
          )
        })}
      </nav>

      {/* Bouton publier + Profil */}
      <div className="p-4 border-t border-slate-100 dark:border-slate-800 space-y-3">
        <Link href="/entreprise/offres/creation/etape-1">
          <motion.button
            whileHover={{ scale: 1.02, y: -1 }}
            whileTap={{ scale: 0.97 }}
            className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white py-2.5 rounded-xl font-semibold text-sm shadow-md shadow-blue-200 dark:shadow-blue-900/30 transition-colors"
          >
            <Plus size={16} />
            Publier une offre
          </motion.button>
        </Link>

        {/* Profil dynamique */}
        <Link href="/Entreprise/parametres">
          <motion.div
            whileHover={{ backgroundColor: "rgba(241,245,249,0.8)" }}
            className="flex items-center gap-3 px-2 py-2 rounded-xl cursor-pointer transition group"
          >
            {/* Avatar ou initiales */}
            {profil.avatar ? (
              <img
                src={profil.avatar}
                alt="Avatar"
                className="w-8 h-8 rounded-full object-cover ring-2 ring-blue-100 dark:ring-blue-900 shrink-0"
              />
            ) : (
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-xs font-bold shrink-0">
                {initiales}
              </div>
            )}
            <div className="flex-1 min-w-0">
              {/* Nom complet dynamique */}
              <p className="text-xs font-bold text-slate-900 dark:text-white truncate">
                {profil.prenom} {profil.nom}
              </p>
              <p className="text-[10px] text-slate-400 truncate">{profil.poste}</p>
            </div>
            <LogOut size={14} className="text-slate-300 group-hover:text-slate-500 transition-colors shrink-0" />
          </motion.div>
        </Link>
      </div>
    </motion.aside>
  )
}