'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '../_lib/utils';
import { Separator } from '../_components/ui/separator';
import { Button } from '../_components/ui/button';
import { LayoutDashboard, Settings, Users, LogOut } from 'lucide-react';

const NAV = [
  { href: '/my', label: 'Dashboard', icon: <LayoutDashboard /> },
  { href: '/my/groups', label: 'My Groups', icon: <Users /> },
  { href: '/my/settings', label: 'Settings', icon: <Settings /> },
];

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

  async function logout() {
    await fetch('/api/my/logout', { method: 'POST' });
    window.location.href = '/member-login';
  }

  return (
    <nav className="w-56 shrink-0 flex flex-col h-full border-r bg-sidebar">
      <div className="px-4 py-5 flex items-center gap-2">
        <span className="font-bold text-base text-emerald-600">TOWER</span>
        <Separator orientation="vertical" className="h-4" />
        <span className="text-xs text-muted-foreground font-medium">Member</span>
      </div>
      <Separator />
      <div className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
        {NAV.map((item) => {
          const active = item.href === '/my' ? pathname === '/my' : pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
                active ? 'bg-accent text-accent-foreground font-medium' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
              )}
            >
              <span className="size-4 shrink-0">{item.icon}</span>
              {item.label}
            </Link>
          );
        })}
      </div>
      <Separator />
      <div className="p-3">
        <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground" onClick={() => void logout()}>
          <LogOut className="size-4" />
          Sign out
        </Button>
      </div>
    </nav>
  );
}