'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { BookOpen, ExternalLink, Moon, Sun } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { usePublicSettings } from '@/providers/public-settings-provider';
import { useTheme } from '@/providers/theme-provider';
import { getApiBaseUrl } from '@/lib/api';
import { cn } from '@/lib/utils';

export function DocsHeader() {
  const { projectName } = usePublicSettings();
  const { resolvedTheme, setTheme } = useTheme();
  const apiUrl = getApiBaseUrl();

  return (
    <header className="sticky top-0 z-50 w-full border-b border-zinc-200 bg-white/80 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/80">
      <div className="mx-auto flex h-14 max-w-screen-2xl items-center justify-between gap-4 px-4 lg:px-8">
        <Link href="/docs" className="flex items-center gap-2 font-semibold tracking-tight">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-white dark:bg-zinc-50 dark:text-zinc-900">
            <BookOpen className="h-4 w-4" />
          </div>
          <span className="hidden sm:inline">{projectName}</span>
          <span className="text-zinc-400 font-normal hidden sm:inline">Docs</span>
        </Link>

        <div className="flex items-center gap-2">
          <Button variant="ghost" size="sm" asChild className="hidden md:inline-flex">
            <a href={`${apiUrl}/docs`} target="_blank" rel="noreferrer">
              Swagger
              <ExternalLink className="h-3.5 w-3.5" />
            </a>
          </Button>
          <Button
            variant="outline"
            size="icon"
            aria-label="Переключить тему"
            onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
          >
            {resolvedTheme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          </Button>
        </div>
      </div>
    </header>
  );
}

export function DocsSidebar({ groups }: { groups: Array<[string, Array<{ slug: string; title: string }>]> }) {
  const pathname = usePathname();

  return (
    <nav className="space-y-6">
      <Link
        href="/docs"
        className={cn(
          'block rounded-lg px-3 py-2 text-sm font-medium transition-colors',
          pathname === '/docs'
            ? 'bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50'
            : 'text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-50'
        )}
      >
        Главная
      </Link>
      {groups.map(([group, items]) => (
        <div key={group}>
          <p className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-zinc-500">{group}</p>
          <div className="space-y-1">
            {items.map((item) => {
              const href = `/docs/${item.slug}`;
              const active = pathname === href;
              return (
                <Link
                  key={item.slug}
                  href={href}
                  className={cn(
                    'block rounded-lg px-3 py-2 text-sm transition-colors',
                    active
                      ? 'bg-zinc-100 font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50'
                      : 'text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-50'
                  )}
                >
                  {item.title}
                </Link>
              );
            })}
          </div>
        </div>
      ))}
    </nav>
  );
}

export function DocsToc({ sections }: { sections: Array<{ id: string; title: string }> }) {
  return (
    <nav className="space-y-2 text-sm">
      <p className="mb-3 font-semibold">На этой странице</p>
      {sections.map((section) => (
        <a
          key={section.id}
          href={`#${section.id}`}
          className="block text-zinc-500 transition-colors hover:text-zinc-900 dark:hover:text-zinc-50"
        >
          {section.title}
        </a>
      ))}
    </nav>
  );
}