"use client"

import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useLocale, useTranslations } from "next-intl"
import {
  LayoutDashboard,
  Users,
  Building2,
  Shield,
  FileText,
  MessageSquare,
  BarChart3,
  Plug,
  Settings,
} from "lucide-react"
import { useAuth } from "@/src/features/auth/auth-context"

const NAVY  = "#1a3578"
const NAVY2 = "#152b63"
const NAVY3 = "#0f1f47"
const TEAL  = "#4dba96"

const NAV_PATHS = [
  { path: "/admin",                key: "dashboard",      icon: LayoutDashboard },
  { path: "/admin/tenants",        key: "tenants",        icon: Building2 },
  { path: "/admin/users",          key: "users",          icon: Users },
  { path: "/admin/security",       key: "security",       icon: Shield },
  { path: "/admin/documents",      key: "documents",      icon: FileText },
  { path: "/admin/communications", key: "communications", icon: MessageSquare },
  { path: "/admin/reporting",      key: "reporting",      icon: BarChart3 },
  { path: "/admin/integrations",   key: "integrations",   icon: Plug },
  { path: "/admin/settings",       key: "settings",       icon: Settings },
]

function isActive(pathname: string, path: string) {
  if (path === "/admin") return pathname.endsWith("/admin")
  return pathname.includes(path)
}

export function Sidebar() {
  const pathname = usePathname()
  const locale   = useLocale()
  const t        = useTranslations("admin.menu")
  const { me }   = useAuth()

  const username     = me?.username ?? "—"
  const firstName    = me?.first_name ?? ""
  const lastName     = me?.last_name  ?? ""
  const displayName  = [firstName, lastName].filter(Boolean).join(" ") || username
  const profileLabel = me?.is_superuser ? "Super Admin" : me?.is_staff ? "Admin" : "Utilisateur"
  const initial      = (firstName[0] ?? username[0] ?? "U").toUpperCase()

  return (
    <aside
      className="sticky top-0 h-screen w-[272px] shrink-0 flex flex-col text-white"
      style={{
        background: `linear-gradient(175deg, ${NAVY} 0%, ${NAVY2} 55%, ${NAVY3} 100%)`,
        borderRight: "1px solid rgba(255,255,255,0.07)",
      }}
    >
      {/* ── Logo ──────────────────────────────────────────────────────── */}
      <div className="p-5" style={{ borderBottom: "1px solid rgba(255,255,255,0.07)" }}>
        <div className="flex items-center justify-center">
          <Image
            src="/brand/logo-acx-blanc.png"
            alt="ACX"
            width={160}
            height={52}
            unoptimized
            className="object-contain"
            priority
          />
        </div>

        {/* Badge Super Admin */}
        <div
          className="mt-4 rounded-xl px-3 py-2"
          style={{
            background: "rgba(255,255,255,0.06)",
            border: "1px solid rgba(255,255,255,0.10)",
          }}
        >
          <div className="text-[10px] font-semibold uppercase tracking-widest text-white/45 mb-0.5">
            Interface
          </div>
          <div className="flex items-center gap-2">
            <span className="h-2 w-2 rounded-full shrink-0 animate-pulse" style={{ backgroundColor: TEAL }} />
            <div className="text-sm font-semibold">Super Administration</div>
          </div>
        </div>
      </div>

      {/* ── Navigation ──────────────────────────────────────────────── */}
      <nav className="flex-1 overflow-y-auto p-3 space-y-0.5">
        <div className="text-[10px] font-semibold uppercase tracking-widest text-white/30 px-3 py-2">
          Navigation
        </div>
        {NAV_PATHS.map((item) => {
          const href   = `/${locale}${item.path}`
          const active = isActive(pathname, item.path)
          const Icon   = item.icon

          return (
            <Link
              key={item.path}
              href={href}
              className="group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all"
              style={
                active
                  ? {
                      background: `linear-gradient(135deg, rgba(77,186,150,0.18) 0%, rgba(77,186,150,0.08) 100%)`,
                      border: "1px solid rgba(77,186,150,0.25)",
                      color: "#fff",
                    }
                  : {
                      border: "1px solid transparent",
                      color: "rgba(255,255,255,0.70)",
                    }
              }
              onMouseEnter={(e) => {
                if (!active) {
                  (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.05)"
                  ;(e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.08)"
                  ;(e.currentTarget as HTMLElement).style.color = "#fff"
                }
              }}
              onMouseLeave={(e) => {
                if (!active) {
                  (e.currentTarget as HTMLElement).style.background = "transparent"
                  ;(e.currentTarget as HTMLElement).style.borderColor = "transparent"
                  ;(e.currentTarget as HTMLElement).style.color = "rgba(255,255,255,0.70)"
                }
              }}
            >
              <span
                className="h-8 w-8 rounded-lg flex items-center justify-center shrink-0 transition-all"
                style={
                  active
                    ? { background: "rgba(77,186,150,0.25)", border: "1px solid rgba(77,186,150,0.35)" }
                    : { background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.10)" }
                }
              >
                <Icon className="h-4 w-4" style={{ color: active ? TEAL : "rgba(255,255,255,0.75)" }} />
              </span>

              <span className="flex-1 truncate font-medium">{t(item.key as any)}</span>

              {active && (
                <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ backgroundColor: TEAL }} />
              )}
            </Link>
          )
        })}
      </nav>

      {/* ── Footer profil ──────────────────────────────────────────── */}
      <div className="p-4" style={{ borderTop: "1px solid rgba(255,255,255,0.07)" }}>
        <div
          className="flex items-center gap-3 rounded-xl p-3"
          style={{
            background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.09)",
          }}
        >
          <div
            className="h-9 w-9 rounded-xl flex items-center justify-center text-sm font-bold text-white shrink-0"
            style={{ background: `linear-gradient(135deg, ${TEAL} 0%, #2d9073 100%)` }}
          >
            {initial}
          </div>
          <div className="leading-tight min-w-0">
            <div className="text-sm font-semibold truncate text-white">{displayName}</div>
            <div className="text-[11px] text-white/50">{profileLabel}</div>
          </div>
        </div>
      </div>
    </aside>
  )
}