'use client';

import Link from 'next/link';
import { ArrowRight, BookOpen, Code2, Rocket, Shield } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { docNavigation, groupDocNavigation } from '@/lib/navigation';
import { usePublicSettings } from '@/providers/public-settings-provider';

const highlights = [
  {
    icon: Rocket,
    title: 'Быстрый старт',
    description: 'Локальный запуск через Docker Compose за несколько минут.',
    href: '/docs/getting-started'
  },
  {
    icon: Code2,
    title: 'OAuth 2.0',
    description: 'Примеры интеграции на JavaScript, Python, PHP, Go и других языках.',
    href: '/docs/oauth'
  },
  {
    icon: Shield,
    title: 'Безопасность',
    description: 'PIN-код, сессии, LDAP/LDAPS и управление устройствами.',
    href: '/docs/sessions'
  },
  {
    icon: BookOpen,
    title: 'Справочник API',
    description: 'Полный список REST endpoints и ссылка на Swagger.',
    href: '/docs/api-reference'
  }
];

export function DocsHomeContent() {
  const { projectName, projectTagline } = usePublicSettings();
  const groups = groupDocNavigation(docNavigation);

  return (
    <main className="min-w-0 pb-16 xl:col-span-1">
      <section className="relative overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50 px-6 py-12 dark:border-zinc-800 dark:bg-zinc-900/50 sm:px-10 sm:py-16">
        <p className="text-sm font-medium text-zinc-500">Документация</p>
        <h1 className="mt-3 max-w-2xl text-4xl font-bold tracking-tight text-zinc-950 dark:text-zinc-50 sm:text-5xl">{projectName}</h1>
        <p className="mt-4 max-w-2xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">{projectTagline}</p>
        <p className="mt-4 max-w-2xl text-zinc-600 dark:text-zinc-400">
          Enterprise Identity Provider: единый вход, OAuth 2.0, корпоративный LDAP, семейные группы, чат и админ-панель.
        </p>
        <div className="mt-8 flex flex-wrap gap-3">
          <Button asChild size="lg">
            <Link href="/docs/getting-started">
              Начать
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
          <Button asChild variant="outline" size="lg">
            <Link href="/docs/deployment">Развёртывание</Link>
          </Button>
        </div>
      </section>

      <section className="mt-10 grid gap-4 sm:grid-cols-2">
        {highlights.map((item) => (
          <Link key={item.href} href={item.href}>
            <Card className="h-full transition-colors hover:border-zinc-300 dark:hover:border-zinc-700">
              <CardHeader>
                <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-100 dark:bg-zinc-800">
                  <item.icon className="h-5 w-5" />
                </div>
                <CardTitle>{item.title}</CardTitle>
                <CardDescription>{item.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <span className="text-sm font-medium text-zinc-500">Читать →</span>
              </CardContent>
            </Card>
          </Link>
        ))}
      </section>

      <section className="mt-12">
        <h2 className="text-xl font-semibold">Все разделы</h2>
        <div className="mt-4 grid gap-6 sm:grid-cols-2">
          {groups.map(([group, items]) => (
            <div key={group}>
              <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-zinc-500">{group}</p>
              <ul className="space-y-2">
                {items.map((item) => (
                  <li key={item.slug}>
                    <Link href={`/docs/${item.slug}`} className="text-sm text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-50">
                      {item.title}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}