'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { ChevronsLeft, ShieldCheck, Sparkles, X } from 'lucide-react';

import { fetchMe, type AuthUser } from '@/lib/api';
import { getMenuIcon, getMenuSections } from '@/lib/menu';
import { siteConfig } from '@/lib/site';
import { cn } from '@/lib/utils';

const COLLAPSE_STORAGE_KEY = 'ccfn:sidebar-collapsed';

function initials(name: string): string {
  const parts = name.trim().split(/\s+/).filter(Boolean);

  if (parts.length === 0) {
    return '?';
  }

  return parts
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase() ?? '')
    .join('');
}

function NavSections({
  user,
  collapsed,
  onNavigate,
}: {
  user: AuthUser | null;
  collapsed: boolean;
  onNavigate?: () => void;
}) {
  const pathname = usePathname();
  // Les entrées dépendent du rôle et, pour un UTI-S, des fonctions de son
  // profil : tant que `/auth/me` n'a pas répondu, aucune n'est affichée.
  const sections = getMenuSections(user ?? undefined);

  return (
    <nav
      className={cn(
        'flex flex-1 flex-col gap-6 overflow-y-auto py-5',
        collapsed ? 'px-2.5' : 'px-3',
      )}
    >
      {sections.map((section) => (
        <div key={section.id} className="space-y-1.5">
          {section.label ? (
            collapsed ? (
              <div className="mx-auto mb-2 h-px w-6 bg-white/10" />
            ) : (
              <p className="px-3 pb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
                {section.label}
              </p>
            )
          ) : null}

          {section.items.map((item) => {
            const Icon = getMenuIcon(item.icon);
            const isActive =
              pathname === item.href || pathname.startsWith(`${item.href}/`);

            return (
              <Link
                key={item.id}
                href={item.href}
                onClick={onNavigate}
                title={collapsed ? item.label : undefined}
                aria-current={isActive ? 'page' : undefined}
                className={cn(
                  'group relative flex items-center rounded-xl text-sm font-medium outline-none transition-all duration-200',
                  'focus-visible:ring-2 focus-visible:ring-brand-400/70',
                  collapsed ? 'justify-center p-2' : 'gap-3 px-2.5 py-2',
                  isActive
                    ? 'bg-white/[0.09] text-white shadow-[inset_0_1px_0_0_rgba(255,255,255,0.08)]'
                    : 'text-white/60 hover:bg-white/[0.05] hover:text-white',
                )}
              >
                {/* Curseur néon de l'entrée active */}
                <span
                  aria-hidden
                  className={cn(
                    'absolute left-0 top-1/2 -translate-y-1/2 rounded-r-full bg-brand-400 transition-all duration-200',
                    isActive ? 'h-6 w-[3px] shadow-glow' : 'h-0 w-[3px]',
                  )}
                />

                <span
                  aria-hidden
                  className={cn(
                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all duration-200',
                    isActive
                      ? 'brand-gradient text-white shadow-brand'
                      : 'bg-white/[0.06] text-white/70 group-hover:bg-brand-500/25 group-hover:text-white',
                  )}
                >
                  <Icon className="h-[17px] w-[17px]" strokeWidth={1.9} />
                </span>

                {!collapsed && <span className="truncate">{item.label}</span>}
              </Link>
            );
          })}
        </div>
      ))}
    </nav>
  );
}

function SidebarBrand({ collapsed }: { collapsed: boolean }) {
  return (
    <div
      className={cn(
        'flex items-center gap-3 px-4 py-5',
        collapsed && 'justify-center px-0',
      )}
    >
      <div className="brand-gradient flex h-10 w-10 shrink-0 items-center justify-center rounded-xl shadow-brand">
        <ShieldCheck className="h-5 w-5 text-white" strokeWidth={2.1} />
      </div>

      {!collapsed && (
        <div className="min-w-0">
          <p className="truncate text-sm font-bold tracking-tight text-white">
            {siteConfig.product}
            <span className="ml-1.5 rounded-md bg-brand-500/25 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-brand-200">
              NF Z42-020
            </span>
          </p>
          <p className="truncate text-xs text-white/45">
            {siteConfig.editor} · {siteConfig.siteHost}
          </p>
        </div>
      )}
    </div>
  );
}

function SidebarUser({
  user,
  collapsed,
}: {
  user: AuthUser | null;
  collapsed: boolean;
}) {
  const displayName = user?.nom ?? 'Utilisateur';

  return (
    <div className={cn('px-3 pb-3', collapsed && 'px-2.5')}>
      <div
        className={cn(
          'flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.04] p-2.5',
          collapsed && 'justify-center p-2',
        )}
      >
        <span className="brand-gradient flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white">
          {initials(displayName)}
        </span>

        {!collapsed && (
          <div className="min-w-0">
            <p className="truncate text-xs font-semibold text-white">
              {displayName}
            </p>
            <p className="truncate text-[11px] text-white/45">
              {user?.role_ccfn ?? '—'}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

type SidebarProps = {
  mobileOpen: boolean;
  onMobileOpenChange: (open: boolean) => void;
};

export function Sidebar({
  mobileOpen,
  onMobileOpenChange: setMobileOpen,
}: SidebarProps) {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
    setCollapsed(
      window.localStorage.getItem(COLLAPSE_STORAGE_KEY) === 'true',
    );
  }, []);

  function toggleCollapsed() {
    setCollapsed((prev) => {
      const next = !prev;
      window.localStorage.setItem(COLLAPSE_STORAGE_KEY, String(next));
      return next;
    });
  }

  useEffect(() => {
    let cancelled = false;

    fetchMe()
      .then((me) => {
        if (!cancelled) {
          setUser(me);
        }
      })
      .catch(() => {
        // Erreur silencieuse si l'utilisateur n'est pas authentifié
      });

    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <>
      {/* Overlay mobile */}
      {mobileOpen ? (
        <button
          type="button"
          aria-label="Fermer le menu"
          className="fixed inset-0 z-40 bg-brand-950/60 backdrop-blur-sm lg:hidden"
          onClick={() => setMobileOpen(false)}
        />
      ) : null}

      {/* Panneau latéral */}
      <aside
        className={cn(
          'sidebar-gradient fixed inset-y-0 left-0 z-50 flex shrink-0 flex-col border-r border-white/[0.07] transition-[transform,width] duration-300 ease-out lg:static lg:translate-x-0',
          collapsed ? 'w-[76px]' : 'w-[268px]',
          mobileOpen ? 'w-[268px] translate-x-0' : '-translate-x-full lg:translate-x-0',
        )}
      >
        {/* Halo décoratif */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0 h-64 overflow-hidden"
        >
          <div className="absolute -left-16 -top-24 h-56 w-56 rounded-full bg-brand-500/25 blur-3xl" />
        </div>

        <div className="relative flex items-center justify-between border-b border-white/[0.07]">
          <SidebarBrand collapsed={collapsed && !mobileOpen} />

          <button
            type="button"
            className="mr-3 shrink-0 rounded-lg p-2 text-white/60 transition-colors hover:bg-white/10 hover:text-white lg:hidden"
            aria-label="Fermer le menu"
            onClick={() => setMobileOpen(false)}
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <NavSections
          user={user}
          collapsed={collapsed && !mobileOpen}
          onNavigate={() => setMobileOpen(false)}
        />

     

        <SidebarUser user={user} collapsed={collapsed && !mobileOpen} />

        {/* Réduction du menu — desktop */}
        <div className="hidden border-t border-white/[0.07] px-3 py-2 lg:block">
          <button
            type="button"
            onClick={toggleCollapsed}
            aria-label={collapsed ? 'Déployer le menu' : 'Réduire le menu'}
            className={cn(
              'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs font-medium text-white/45 transition-colors hover:bg-white/[0.06] hover:text-white',
              collapsed && 'justify-center px-0',
            )}
          >
            <ChevronsLeft
              className={cn(
                'h-4 w-4 shrink-0 transition-transform duration-300',
                collapsed && 'rotate-180',
              )}
            />
            {!collapsed && <span>Réduire le menu</span>}
          </button>
        </div>
      </aside>
    </>
  );
}