"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Trophy,
  Users,
  Settings,
  Shield,
} from "lucide-react";
import { cn } from "@/lib/utils";

const navItems = [
  { href: "/leagues", label: "Leagues", icon: Trophy },
  { href: "/players", label: "Players", icon: Users },
];

export function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="flex w-56 flex-col border-r border-white/10 bg-black/20">
      <div className="flex h-14 items-center gap-2 border-b border-white/10 px-4">
        <Shield className="h-6 w-6 text-cyan-400" />
        <span className="font-semibold tracking-tight">Yaltopia FIFA</span>
      </div>
      <nav className="flex-1 space-y-1 p-3">
        {navItems.map(({ href, label, icon: Icon }) => {
          const active =
            pathname === href || pathname.startsWith(href + "/");
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors",
                active
                  ? "bg-cyan-500/15 text-cyan-400"
                  : "text-[var(--color-muted)] hover:bg-white/5 hover:text-foreground"
              )}
            >
              <Icon className="h-4 w-4" />
              {label}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}

export function CompetitionSidebar({
  leagueId,
  competitionId,
  showMyTeam,
}: {
  leagueId: string;
  competitionId: string;
  showMyTeam?: boolean;
}) {
  const pathname = usePathname();
  const base = `/leagues/${leagueId}/competitions/${competitionId}`;

  const items = [
    { href: base, label: "Overview", icon: LayoutDashboard },
    ...(showMyTeam
      ? [{ href: `${base}/my-team`, label: "My Team", icon: Users }]
      : []),
    { href: `${base}/fixtures`, label: "Fixtures", icon: Trophy },
    { href: `${base}/transfers`, label: "Transfers", icon: Users },
    { href: `${base}/admin/results`, label: "Results Admin", icon: Settings },
  ];

  return (
    <aside className="flex w-56 flex-col border-r border-white/10 bg-black/20">
      <nav className="flex-1 space-y-1 p-3">
        {items.map(({ href, label, icon: Icon }) => {
          const active = pathname === href;
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors",
                active
                  ? "bg-cyan-500/15 text-cyan-400"
                  : "text-[var(--color-muted)] hover:bg-white/5 hover:text-foreground"
              )}
            >
              <Icon className="h-4 w-4" />
              {label}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}