import type { Metadata } from 'next';
import { TipBox } from '@/components/docs/shared/TipBox';
import { Table } from '@/components/docs/shared/Table';
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
import { DocPage } from '@/components/docs/layout/DocPage';
import { JsonLd } from '@/components/seo/JsonLd';
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
import { createBreadcrumbSchema, createTechArticleSchema, API_REFERENCE_SCHEMA } from '@/config/docs-schema';
import {
  Hero,
  SectionHeader,
  InlineCode,
  LinkCard,
  LinkCardGrid,
} from '@/components/docs/blocks';

const PAGE = DOCS_PAGES['api-overview'];

export const metadata: Metadata = createDocsMetadata(PAGE);

const breadcrumbSchema = createBreadcrumbSchema([
  { name: 'Home', path: '/' },
  { name: 'Documentation', path: '/docs/' },
  { name: 'API Reference', path: '/docs/api/' },
]);

const articleSchema = createTechArticleSchema(PAGE);

const tocItems = [
  { id: 'base-url', text: 'Base URL', level: 2 },
  { id: 'authentication', text: 'Authentication', level: 2 },
  { id: 'response-format', text: 'Response Format', level: 2 },
  { id: 'error-codes', text: 'Common Error Codes', level: 2 },
  { id: 'rate-limits', text: 'Rate Limits', level: 2 },
  { id: 'endpoints', text: 'Endpoints', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function APIOverviewPage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <JsonLd data={articleSchema} />
      <JsonLd data={API_REFERENCE_SCHEMA} />
      <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs/' },
        { label: 'API Reference' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        links: [
          {
            href: '/docs/api/generations/',
            title: 'Generations API',
            description: 'Create and manage image generations.',
            accent: 'primary',
          },
          {
            href: '/docs/api/images/',
            title: 'Images API',
            description: 'Upload and organize images.',
            accent: 'secondary',
          },
        ],
      }}
    >
      <Hero
        title="API Reference"
        subtitle="Complete REST API reference for Banatie. All endpoints, parameters, and response formats."
      />

      <section id="base-url" className="mb-12">
        <SectionHeader level={2} id="base-url">
          Base URL
        </SectionHeader>

        <CodeBlock
          code={`https://api.banatie.app`}
          language="text"
          filename="Base URL"
        />
      </section>

      <section id="authentication" className="mb-12">
        <SectionHeader level={2} id="authentication">
          Authentication
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          All endpoints require the <InlineCode>X-API-Key</InlineCode> header:
        </p>

        <CodeBlock
          code={`X-API-Key: your_api_key_here`}
          language="text"
          filename="Header"
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          See <a href="/docs/authentication/" className="text-purple-400 hover:underline">Authentication</a> for details on obtaining and using API keys.
        </p>
      </section>

      <section id="response-format" className="mb-12">
        <SectionHeader level={2} id="response-format">
          Response Format
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          All responses follow a consistent JSON structure:
        </p>

        <div className="space-y-6">
          <div>
            <p className="text-sm font-medium text-gray-300 mb-3">Success Response:</p>
            <CodeBlock
              code={`{
  "success": true,
  "data": { ... }
}`}
              language="json"
              filename="Success"
            />
          </div>

          <div>
            <p className="text-sm font-medium text-gray-300 mb-3">Error Response:</p>
            <CodeBlock
              code={`{
  "success": false,
  "error": {
    "message": "Error description",
    "code": "ERROR_CODE"
  }
}`}
              language="json"
              filename="Error"
            />
          </div>

          <div>
            <p className="text-sm font-medium text-gray-300 mb-3">Paginated Response:</p>
            <CodeBlock
              code={`{
  "success": true,
  "data": [ ... ],
  "pagination": {
    "total": 100,
    "limit": 20,
    "offset": 0,
    "hasMore": true
  }
}`}
              language="json"
              filename="Paginated"
            />
          </div>
        </div>
      </section>

      <section id="error-codes" className="mb-12">
        <SectionHeader level={2} id="error-codes">
          Common Error Codes
        </SectionHeader>

        <Table
          headers={['Status', 'Code', 'Description']}
          rows={[
            [
              <InlineCode key="s" color="error">400</InlineCode>,
              'VALIDATION_ERROR',
              'Missing or invalid parameters',
            ],
            [
              <InlineCode key="s" color="error">401</InlineCode>,
              'UNAUTHORIZED',
              'Missing or invalid API key',
            ],
            [
              <InlineCode key="s" color="error">404</InlineCode>,
              '*_NOT_FOUND',
              'Requested resource not found',
            ],
            [
              <InlineCode key="s" color="error">409</InlineCode>,
              'ALIAS_CONFLICT',
              'Alias already exists',
            ],
            [
              <InlineCode key="s" color="error">429</InlineCode>,
              'RATE_LIMIT_EXCEEDED',
              'Too many requests',
            ],
            [
              <InlineCode key="s" color="error">500</InlineCode>,
              'INTERNAL_ERROR',
              'Server error',
            ],
          ]}
        />
      </section>

      <section id="rate-limits" className="mb-12">
        <SectionHeader level={2} id="rate-limits">
          Rate Limits
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          API requests are rate limited to 100 requests per hour per API key.
        </p>
        <p className="text-gray-300 leading-relaxed mb-6">
          Rate limit headers are included in every response:
        </p>

        <Table
          headers={['Header', 'Description']}
          rows={[
            [<InlineCode key="h">X-RateLimit-Limit</InlineCode>, 'Maximum requests per hour'],
            [<InlineCode key="h">X-RateLimit-Remaining</InlineCode>, 'Requests remaining in current window'],
            [<InlineCode key="h">X-RateLimit-Reset</InlineCode>, 'Unix timestamp when limit resets'],
          ]}
        />
      </section>

      <section id="endpoints" className="mb-12">
        <SectionHeader level={2} id="endpoints">
          Endpoints
        </SectionHeader>

        <LinkCardGrid columns={2}>
          <LinkCard
            href="/docs/api/generations/"
            title="Generations"
            description="Create and manage AI image generations"
            accent="primary"
          />
          <LinkCard
            href="/docs/api/images/"
            title="Images"
            description="Upload and organize images"
            accent="secondary"
          />
          <LinkCard
            href="/docs/api/flows/"
            title="Flows"
            description="Manage generation chains"
            accent="primary"
          />
          <LinkCard
            href="/docs/api/live-scopes/"
            title="Live Scopes"
            description="Control live URL generation"
            accent="secondary"
          />
        </LinkCardGrid>
      </section>
    </DocPage>
    </>
  );
}