'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '../_lib/utils';
import { Button } from '../_components/ui/button';
import { ScopeCard } from '../_components/scope-card';
import { PORTAL_THEMES } from '../_components/portal-theme';
import {
  LayoutDashboard, Newspaper, Calendar, HeartHandshake, Users2,
  BookOpen, Sparkles, Images, Contact, Settings, LogOut,
} from 'lucide-react';

interface MemberScope {
  member: { displayName: string | null };
  chapter: { id: string; slug: string; name: string };
  organization: { id: string; slug: string; name: string } | null;
}

const NAV = [
  { href: '/my', label: 'Dashboard', icon: <LayoutDashboard /> },
  { href: '/my/digest', label: 'Digest', icon: <Newspaper /> },
  { href: '/my/ask', label: 'Ask AI', icon: <Sparkles /> },
  { href: '/my/events', label: 'Events', icon: <Calendar /> },
  { href: '/my/seva', label: 'Seva & Points', icon: <HeartHandshake /> },
  { href: '/my/circles', label: 'Circles', icon: <Users2 /> },
  { href: '/my/directory', label: 'Directory', icon: <Contact /> },
  { href: '/my/knowledge', label: 'Knowledge', icon: <BookOpen /> },
  { href: '/my/memories', label: 'Memories', icon: <Images /> },
  { href: '/my/groups', label: 'My Groups', icon: <Users2 /> },
  { href: '/my/settings', label: 'Settings', icon: <Settings /> },
];

export function MemberNav({ scope }: { scope?: MemberScope | null }) {
  const pathname = usePathname();
  const t = PORTAL_THEMES.emerald;

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

  return (
    <aside className="w-60 shrink-0 flex flex-col border-r bg-sidebar">
      <div className="h-16 flex items-center gap-3 px-5 border-b">
        <div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-sm', t.gradient)}>
          T
        </div>
        <div className="flex flex-col leading-none">
          <span className="font-semibold text-sm tracking-tight">TOWER</span>
          <span className="text-[11px] text-muted-foreground mt-0.5">Member</span>
        </div>
      </div>

      {scope && (
        <ScopeCard accent="text-emerald-600" organization={scope.organization} chapter={scope.chapter} />
      )}

      <nav className="flex-1 overflow-y-auto p-3 space-y-1">
        {NAV.map((item) => {
          const isActive = item.href === '/my' ? pathname === '/my' : pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
                isActive ? cn(t.activeBg, t.activeText, 'font-medium') : 'text-muted-foreground hover:bg-accent hover:text-foreground',
              )}
            >
              {isActive && <span className={cn('absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full', t.bar)} />}
              <span className="size-4 shrink-0 [&_svg]:size-4">{item.icon}</span>
              {item.label}
            </Link>
          );
        })}
      </nav>

      <div className="p-3 border-t">
        <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground" onClick={() => void logout()}>
          <LogOut className="size-4" />
          Sign out
        </Button>
      </div>
    </aside>
  );
}