"use client";

import { signOut } from "next-auth/react";
import Link from "next/link";
import type { Route } from "next";
import { usePathname } from "next/navigation";
import { clsx } from "clsx";
import { Suspense, useState } from "react";
import { PreferencesModal } from "./PreferencesModal.js";
import { ThemeProvider } from "./ThemeProvider.js";
import { NotificationBell } from "../notifications/NotificationBell.js";
import { NavProgressBar } from "~/components/ui/NavProgressBar.js";

const allNavItems = [
  { href: "/dashboard", label: "Dashboard", icon: "📊", roles: ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] },
  { href: "/resources", label: "Resources", icon: "👥", roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
  { href: "/projects", label: "Projects", icon: "📋", roles: ["ADMIN", "MANAGER", "CONTROLLER", "VIEWER"] },
  { href: "/estimates", label: "Estimates", icon: "🧮", roles: ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] },
  { href: "/allocations", label: "Allocations", icon: "📅", roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
  { href: "/timeline", label: "Timeline", icon: "🗓️", roles: ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] },
  { href: "/staffing", label: "Staffing", icon: "🎯", roles: ["ADMIN", "MANAGER"] },
  { href: "/vacations", label: "Vacations", icon: "🏖️", roles: ["ADMIN", "MANAGER"] },
  { href: "/vacations/my", label: "My Vacations", icon: "🌴", roles: ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] },
  { href: "/roles", label: "Roles", icon: "🏷️", roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
  { href: "/analytics/skills", label: "Skills Analytics", icon: "📈", roles: ["ADMIN", "MANAGER", "CONTROLLER", "VIEWER"] },
  { href: "/reports/chargeability", label: "Chargeability", icon: "📊", roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
];

const adminNavItems = [
  { href: "/admin/blueprints", label: "Blueprints", icon: "🏗️" },
  { href: "/admin/countries", label: "Countries", icon: "🌍" },
  { href: "/admin/org-units", label: "Org Units", icon: "🏢" },
  { href: "/admin/utilization-categories", label: "Util. Categories", icon: "📊" },
  { href: "/admin/clients", label: "Clients", icon: "🏦" },
  { href: "/admin/rate-cards", label: "Rate Cards", icon: "💲" },
  { href: "/admin/effort-rules", label: "Effort Rules", icon: "📐" },
  { href: "/admin/experience-multipliers", label: "Exp. Multipliers", icon: "📈" },
  { href: "/admin/management-levels", label: "Mgmt Levels", icon: "📶" },
  { href: "/admin/users", label: "Users", icon: "👤" },
  { href: "/admin/settings", label: "Settings", icon: "⚙️" },
  { href: "/admin/skill-import", label: "Skill Import", icon: "📥" },
];

const managerNavItems = [
  { href: "/admin/vacations", label: "Vacation Mgmt", icon: "🏖️" },
];

function Sidebar({ userRole }: { userRole: string }) {
  const pathname = usePathname();
  const [prefsOpen, setPrefsOpen] = useState(false);

  const visibleNavItems = allNavItems.filter((item) => item.roles.includes(userRole));
  const showAdmin = userRole === "ADMIN";
  const showManagerSection = userRole === "ADMIN" || userRole === "MANAGER";

  return (
    <>
      <nav className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col shrink-0">
        {/* Logo */}
        <div className="p-6 border-b border-gray-200 dark:border-gray-800">
          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-50">
            Pl<span className="text-brand-600">anarchy</span>
          </h1>
          <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">Resource Planning</p>
        </div>

        {/* Nav links */}
        <div className="flex-1 p-4 space-y-1 overflow-y-auto">
          {visibleNavItems.map((item) => (
            <Link
              key={item.href}
              href={item.href as Route}
              className={clsx(
                "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                pathname.startsWith(item.href)
                  ? "bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-400"
                  : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
              )}
            >
              <span>{item.icon}</span>
              {item.label}
            </Link>
          ))}

          {showManagerSection && (
            <>
              <div className="pt-3 pb-1">
                <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
                  <span className="px-3 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                    {showAdmin ? "Admin" : "Management"}
                  </span>
                </div>
              </div>
              {showAdmin && adminNavItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href as Route}
                  className={clsx(
                    "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                    pathname.startsWith(item.href)
                      ? "bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-400"
                      : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
                  )}
                >
                  <span>{item.icon}</span>
                  {item.label}
                </Link>
              ))}
              {managerNavItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href as Route}
                  className={clsx(
                    "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                    pathname.startsWith(item.href)
                      ? "bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-400"
                      : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
                  )}
                >
                  <span>{item.icon}</span>
                  {item.label}
                </Link>
              ))}
            </>
          )}
        </div>

        {/* Bottom actions */}
        <div className="p-4 border-t border-gray-200 dark:border-gray-800 space-y-1">
          <div className="flex items-center gap-2 px-3 py-1">
            <NotificationBell />
            <span className="text-xs text-gray-400 dark:text-gray-500">Notifications</span>
          </div>
          <button
            type="button"
            onClick={() => setPrefsOpen(true)}
            className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            Preferences
          </button>
          <button
            type="button"
            onClick={() => void signOut({ callbackUrl: "/auth/signin" })}
            className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
            </svg>
            Sign out
          </button>
        </div>
      </nav>

      {prefsOpen && <PreferencesModal onClose={() => setPrefsOpen(false)} />}
    </>
  );
}

export function AppShell({ children, userRole = "USER" }: { children: React.ReactNode; userRole?: string }) {
  return (
    <ThemeProvider>
      <Suspense>
        <NavProgressBar />
      </Suspense>
      <div className="flex h-screen bg-gray-50 dark:bg-gray-950">
        <Sidebar userRole={userRole} />
        <main className="flex-1 overflow-auto">{children}</main>
      </div>
    </ThemeProvider>
  );
}