'use client';

import {
  Activity,
  BookOpen,
  Crown,
  Flag,
  Info,
  LayoutDashboard,
  ListTodo,
  Radio,
  ScrollText,
  Server,
  Users,
  ArrowLeft
} from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTranslations } from '@/components/locale-provider';
import { cn } from '@/lib/utils';

export const OWNER_LINKS = [
  { href: '/owner', icon: LayoutDashboard, key: 'overview' },
  { href: '/owner/guilds', icon: Server, key: 'guilds' },
  { href: '/owner/users', icon: Users, key: 'users' },
  { href: '/owner/flags', icon: Flag, key: 'flags' },
  { href: '/owner/premium', icon: Crown, key: 'premium' },
  { href: '/owner/presence', icon: Radio, key: 'presence' },
  { href: '/owner/about', icon: Info, key: 'about' },
  { href: '/owner/team', icon: Users, key: 'team' },
  { href: '/owner/jobs', icon: ListTodo, key: 'jobs' },
  { href: '/owner/changelog', icon: BookOpen, key: 'changelog' },
  { href: '/owner/audit', icon: ScrollText, key: 'audit' }
] as const;

export function OwnerSidebarNav({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  const t = useTranslations();

  return (
    <nav className="flex h-full flex-col gap-5 overflow-y-auto px-3 py-4">
      <div className="flex items-center gap-2.5 px-2.5 py-1.5">
        <Image src="/nexumi-logo.svg" alt="" width={28} height={28} className="size-7" />
        <span className="text-base font-semibold tracking-tight">Nexumi</span>
      </div>
      <Link
        href="/dashboard"
        onClick={onNavigate}
        className="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
      >
        <ArrowLeft className="size-4" />
        {t('owner.nav.backToDashboard')}
      </Link>
      <div className="flex flex-col gap-0.5">
        <p className="mb-1 px-2.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/80">
          {t('owner.nav.title')}
        </p>
        {OWNER_LINKS.map((link) => {
          const active = link.href === '/owner' ? pathname === '/owner' : pathname.startsWith(link.href);
          const Icon = link.icon;
          return (
            <Link
              key={link.href}
              href={link.href}
              onClick={onNavigate}
              className={cn(
                'flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium transition-colors',
                active
                  ? 'border-l-2 border-primary bg-primary/10 pl-2 text-foreground'
                  : 'border-l-2 border-transparent text-muted-foreground hover:bg-accent/60 hover:text-foreground'
              )}
            >
              <Icon className="size-4 shrink-0" />
              {t(`owner.nav.${link.key}`)}
            </Link>
          );
        })}
      </div>
      <div className="mt-auto flex items-center gap-2 px-2.5 text-xs text-muted-foreground">
        <Activity className="size-3.5" />
        Nexumi Owner
      </div>
    </nav>
  );
}

export function OwnerSidebar() {
  return (
    <aside className="hidden h-screen w-60 shrink-0 border-r border-border bg-card/40 lg:sticky lg:top-0 lg:block">
      <OwnerSidebarNav />
    </aside>
  );
}
