"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { LogOut, Menu } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { getArchetypeById } from "@/data/archetypes";
import { USER_SIDEBAR_ITEMS } from "@/navigation/user-sidebar-items";
import { useAuthStore } from "@/stores/auth-store";
import { cn } from "@/lib/utils";

function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  const router = useRouter();
  const { user, logout } = useAuthStore();

  const archetype = user?.archetypeResult
    ? getArchetypeById(user.archetypeResult.primaryArchetype)
    : null;

  const handleLogout = () => {
    logout();
    router.push("/");
  };

  return (
    <div className="flex flex-col h-full">
      {/* Logo */}
      <div className="px-5 py-4 border-b border-gray-100">
        <Link href="/dashboard" className="flex items-center gap-2 group" onClick={onNavigate}>
          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-teal-600">
            <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 3l14 9-14 9V3z" />
            </svg>
          </div>
          <span className="text-base font-bold text-gray-900">
            Nova<span className="text-teal-600">life</span>
          </span>
        </Link>
      </div>

      {/* User info */}
      <div className="px-4 py-5 border-b border-gray-100">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-teal-100 text-teal-700 font-bold text-sm flex-shrink-0">
            {user ? `${user.firstName[0]}${user.lastName[0]}` : "?"}
          </div>
          <div className="min-w-0">
            <p className="text-sm font-semibold text-gray-900 truncate">
              {user ? `${user.firstName} ${user.lastName}` : "Guest"}
            </p>
            <p className="text-xs text-gray-400 truncate">{user?.email}</p>
          </div>
        </div>

        {archetype && (
          <div
            className="mt-3 flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-semibold text-white"
            style={{ backgroundColor: archetype.color }}
          >
            <span className="w-1.5 h-1.5 rounded-full bg-white/60" />
            {archetype.name}
          </div>
        )}
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-3 py-4 overflow-y-auto">
        <ul className="space-y-0.5">
          {USER_SIDEBAR_ITEMS.map((item) => {
            const isActive =
              item.url === "/dashboard"
                ? pathname === "/dashboard"
                : pathname.startsWith(item.url) && item.url !== "/dashboard";
            const Icon = item.icon;

            return (
              <li key={item.url}>
                <Link
                  href={item.url}
                  onClick={onNavigate}
                  className={cn(
                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
                    isActive
                      ? "bg-teal-50 text-teal-700"
                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
                  )}
                >
                  <Icon
                    className={cn("h-4.5 w-4.5 flex-shrink-0", isActive ? "text-teal-600" : "text-gray-400")}
                    style={{ width: "18px", height: "18px" }}
                  />
                  {item.title}
                  {item.badge && (
                    <span className="ml-auto text-xs bg-teal-100 text-teal-700 px-1.5 py-0.5 rounded-full font-semibold">
                      {item.badge}
                    </span>
                  )}
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>

      {/* Bottom logout */}
      <div className="px-3 py-4 border-t border-gray-100">
        <button
          onClick={handleLogout}
          className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-500 hover:bg-red-50 hover:text-red-600 transition-colors"
        >
          <LogOut className="h-4 w-4 flex-shrink-0" />
          Sign Out
        </button>
      </div>
    </div>
  );
}

export function UserSidebar() {
  return (
    <>
      {/* Desktop sidebar */}
      <aside className="hidden lg:flex flex-col w-64 border-r border-gray-100 bg-white h-full fixed top-0 left-0 z-30">
        <SidebarContent />
      </aside>

      {/* Mobile sidebar (Sheet) */}
      <Sheet>
        <SheetTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="lg:hidden fixed top-3 left-3 z-50 bg-white shadow-sm border border-gray-200 rounded-lg"
          >
            <Menu className="h-5 w-5 text-gray-600" />
          </Button>
        </SheetTrigger>
        <SheetContent side="left" className="p-0 w-64">
          <SidebarContent />
        </SheetContent>
      </Sheet>
    </>
  );
}