"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/lib/auth";

export default function Sidebar() {
  const pathname = usePathname();
  const { user, logout } = useAuth();

  const navItems = [
    // Dashboard para todos: el equipo ve el global (o su área) y los
    // usuarios normales ven solo sus tickets (sin mensaje de permisos).
    { href: "/", icon: "bi-speedometer2", label: "Dashboard" },
    { href: "/tickets", icon: "bi-ticket-detailed", label: "Tickets" },
    { href: "/knowledge-base", icon: "bi-journal-bookmark", label: "Knowledge Base" },
  ];

  const configItems = [
    { href: "/settings/departments", icon: "bi-diagram-3", label: "Departamentos" },
    { href: "/settings/team", icon: "bi-people", label: "Equipo" },
    { href: "/settings/sla", icon: "bi-stopwatch", label: "SLA" },
    { href: "/settings/email", icon: "bi-envelope", label: "Correo" },
  ];

  const isActive = (href: string) =>
    pathname === href || (href !== "/" && pathname.startsWith(href));

  const fullName = user ? `${user.nombres} ${user.apPaterno}` : "Usuario";
  const isAdmin = user?.role === "admin";
  const roleLabel =
    user?.role === "admin"
      ? "Administrador"
      : user?.role === "supervisor"
        ? "Supervisor"
        : user?.role === "agent"
          ? "Agente"
          : "Usuario";
  const initials = user?.nombres
    ?.split(" ")
    .map((n: string) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2) || "U";

  return (
    <aside className="sidebar" id="sidebar">
      <div className="sidebar-brand">
        <i className="bi bi-headset fs-3"></i>
        <h5>HelpDesk ICHN</h5>
      </div>

      <nav className="flex-column mt-3">
        {navItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={`nav-link ${
              pathname === item.href ||
              (item.href !== "/" && pathname.startsWith(item.href))
                ? "active"
                : ""
            }`}
          >
            <i className={`bi ${item.icon}`}></i>
            <span>{item.label}</span>
          </Link>
        ))}
        {isAdmin && (
          <>
            <div
              className="text-uppercase mt-3 mb-1 px-3"
              style={{ fontSize: "0.7rem", letterSpacing: "0.08em", opacity: 0.6 }}
            >
              Configuración
            </div>
            {configItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={`nav-link ${isActive(item.href) ? "active" : ""}`}
          >
            <i className={`bi ${item.icon}`}></i>
            <span>{item.label}</span>
          </Link>
            ))}
          </>
        )}
      </nav>

      <div className="sidebar-user">
        <div className="avatar">{initials}</div>
        <div className="sidebar-user-info">
          <div className="name">{fullName}</div>
          <div className="role">{roleLabel}</div>
        </div>
        <button
          onClick={logout}
          className="btn btn-link text-white p-1"
          title="Cerrar sesión"
        >
          <i className="bi bi-box-arrow-right fs-5"></i>
        </button>
      </div>
    </aside>
  );
}