"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Compass, Infinity as InfinityIcon, History, UserCog } from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { Logo } from "@/components/shared/Logo";
import { LogoutButton } from "@/components/shared/LogoutButton";
import { ModeSwitch } from "@/components/shared/ModeSwitch";
import { FEATURES } from "@/config/features";

interface ParticipantSidebarProps {
  userName: string;
  onNavigate?: () => void;
}

const navItems = [
  { href: "/participant", label: "Survey Center", icon: Compass, exact: true },
  ...(FEATURES.domesticFeed
    ? [
        {
          href: "/participant/domestic",
          label: "Nonstop Questions",
          icon: InfinityIcon,
          exact: false,
        },
      ]
    : []),
  { href: "/participant/activity", label: "My Activity", icon: History, exact: false },
  { href: "/participant/profile", label: "Profile & Privacy", icon: UserCog, exact: false },
];

export function ParticipantSidebar({
  userName,
  onNavigate,
}: ParticipantSidebarProps) {
  const pathname = usePathname();
  const initials = userName
    .split(" ")
    .map((n) => n[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <aside className="flex h-full w-[236px] shrink-0 flex-col overflow-y-auto bg-navy px-3.5 py-5 text-white/75">
      <Logo
        className="px-2 pb-[18px] pt-1.5"
        textClassName="text-white text-base"
      />

      <ModeSwitch current="participant" onNavigate={onNavigate} />

      <nav className="flex-1">
        {navItems.map(({ href, label, icon: Icon, exact }) => {
          const active = exact ? pathname === href : pathname.startsWith(href);
          return (
            <Link
              key={href}
              href={href}
              onClick={onNavigate}
              className={cn(
                "mb-0.5 flex items-center gap-[11px] rounded-sm px-3 py-2.5 text-[13.5px] font-medium transition-colors",
                active
                  ? "bg-primary font-semibold text-white"
                  : "hover:bg-white/6 hover:text-white"
              )}
            >
              <Icon className="h-4 w-4 shrink-0" strokeWidth={2} />
              {label}
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto border-t border-white/10 pt-3.5">
        <Link
          href="/participant/profile"
          onClick={onNavigate}
          className="flex items-center gap-2.5 rounded-sm px-2 py-2 transition-colors hover:bg-white/6"
        >
          <div className="flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full bg-accent text-xs font-extrabold text-navy">
            {initials}
          </div>
          <div className="min-w-0">
            <div className="truncate text-[12.5px] font-semibold text-white">
              {userName}
            </div>
            <div className="text-[11px] opacity-60">Participant</div>
          </div>
        </Link>
        <LogoutButton onNavigate={onNavigate} />
      </div>
    </aside>
  );
}