import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { apiReference, type ApiEndpoint } from '@/lib/api-endpoints';
import { cn } from '@/lib/utils';

const methodColors: Record<ApiEndpoint['method'], string> = {
  GET: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
  POST: 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300',
  PUT: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300',
  PATCH: 'bg-violet-100 text-violet-800 dark:bg-violet-950 dark:text-violet-300',
  DELETE: 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300'
};

export function ApiEndpointCard({ endpoint }: { endpoint: ApiEndpoint }) {
  return (
    <Card className="overflow-hidden">
      <CardContent className="flex flex-col gap-2 p-4 sm:flex-row sm:items-start sm:gap-4">
        <Badge className={cn('w-fit shrink-0 font-mono', methodColors[endpoint.method])}>{endpoint.method}</Badge>
        <div className="min-w-0 flex-1">
          <code className="break-all text-sm font-medium">{endpoint.path}</code>
          <p className="mt-1 text-sm font-medium">{endpoint.summary}</p>
          {endpoint.description ? <p className="mt-1 text-sm text-zinc-500">{endpoint.description}</p> : null}
          {endpoint.auth ? <p className="mt-2 text-xs text-zinc-400">Требуется Authorization: Bearer JWT</p> : null}
        </div>
      </CardContent>
    </Card>
  );
}

export function ApiReferenceSection() {
  return (
    <div className="space-y-8">
      {apiReference.map((group) => (
        <div key={group.tag}>
          <h3 className="mb-4 text-lg font-semibold">{group.tag}</h3>
          <div className="space-y-3">
            {group.endpoints.map((endpoint) => (
              <ApiEndpointCard key={`${endpoint.method}-${endpoint.path}`} endpoint={endpoint} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}