"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  ClipboardList,
  Users,
  Settings,
  CreditCard,
} from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { Logo } from "@/components/shared/Logo";
import { LogoutButton } from "@/components/shared/LogoutButton";
import { formatNumber } from "@/lib/utils/format";
import type { PlanTier } from "@/types";

interface AppSidebarProps {
  userName: string;
  planTier: PlanTier;
  responseQuotaUsed: number;
  responseQuotaLimit: number;
  onNavigate?: () => void;
}

const navItems = [
  { href: "/app/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/app/surveys", label: "Surveys", icon: ClipboardList },
  { href: "/app/audience", label: "Audience", icon: Users },
];

const workspaceItems = [
  { href: "/app/settings/profile", label: "Settings", icon: Settings },
  { href: "/app/billing", label: "Billing", icon: CreditCard },
];

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

  const quotaPercent = Math.min(
    100,
    (responseQuotaUsed / Math.max(responseQuotaLimit, 1)) * 100
  );

  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-[22px] pt-1.5"
        textClassName="text-white text-base"
      />

      <nav className="flex-1">
        {navItems.map(({ href, label, icon: Icon }) => {
          const active =
            href === "/app/surveys"
              ? pathname.startsWith("/app/surveys")
              : pathname === href;
          return (
            <Link
              key={label}
              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>
          );
        })}

        <div className="px-3 pb-1.5 pt-4 text-[10.5px] font-bold uppercase tracking-wider text-white/35">
          Workspace
        </div>

        {workspaceItems.map(({ href, label, icon: Icon }) => {
          const active = pathname === href;
          return (
            <Link
              key={label}
              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">
        <div className="mb-3 rounded-[10px] bg-white/6 p-3 text-[11.5px]">
          <div className="flex justify-between">
            <span>Response quota</span>
            <b className="font-mono">
              {formatNumber(responseQuotaUsed)}/
              {responseQuotaLimit >= 1000
                ? `${responseQuotaLimit / 1000}k`
                : formatNumber(responseQuotaLimit)}
            </b>
          </div>
          <div className="my-2 h-[5px] overflow-hidden rounded-sm bg-white/15">
            <div
              className="h-full bg-accent"
              style={{ width: `${quotaPercent}%` }}
            />
          </div>
          <span className="opacity-70 capitalize">{planTier} plan</span>
        </div>

        <Link
          href="/app/settings/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">Admin · Edit profile</div>
          </div>
        </Link>
        <LogoutButton onNavigate={onNavigate} />
      </div>
    </aside>
  );
}