'use client';

/**
 * API Reference: Text to Image
 *
 * Refactored to use block components from @/components/docs/blocks
 * Demonstrates API documentation patterns with semantic components
 */

import { DocsLayout } from '@/components/docs/layout/DocsLayout';
import { DocsSidebar } from '@/components/docs/layout/DocsSidebar';
import { DocsTOC } from '@/components/docs/layout/DocsTOC';
import { SubsectionNav } from '@/components/shared/SubsectionNav';
import { TipBox } from '@/components/docs/shared/TipBox';
import { Table } from '@/components/docs/shared/Table';
import { Breadcrumb } from '@/components/docs/shared/Breadcrumb';
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
import { InteractiveAPIWidget } from '@/components/docs/blocks/InteractiveAPIWidget';
import {
  Hero,
  SectionHeader,
  InlineCode,
  EndpointCard,
  LinkCard,
  LinkCardGrid,
} from '@/components/docs/blocks';

const tocItems = [
  { id: 'overview', text: 'Overview', level: 2 },
  { id: 'endpoint', text: 'Endpoint', level: 2 },
  { id: 'parameters', text: 'Parameters', level: 2 },
  { id: 'response', text: 'Response', level: 2 },
  { id: 'error-codes', text: 'Error Codes', level: 2 },
  { id: 'interactive', text: 'Try It Live', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

const navItems = [
  { label: 'Documentation', href: '/docs' },
  { label: 'Demo', href: '/demo' },
  { label: 'Examples', href: '/docs/examples' },
];

const parameters = [
  { name: 'prompt', type: 'string', required: true, description: 'Text description of the image to generate' },
  { name: 'filename', type: 'string', required: false, description: 'Output filename (without extension)' },
  { name: 'aspectRatio', type: 'string', required: false, description: 'Image aspect ratio: "1:1", "16:9", "9:16", "4:3"' },
  { name: 'autoEnhance', type: 'boolean', required: false, description: 'Enable AI prompt enhancement for better results' },
];

export default function TextToImageAPIPage() {
  return (
    <>
      {/* Subsection Navigation with API Key Input */}
      <SubsectionNav
        items={navItems}
        currentPath="/docs/api/text-to-image"
        showApiKeyInput={true}
      />

      <DocsLayout
        sidebar={<DocsSidebar currentPath="/docs/api/text-to-image" />}
        toc={<DocsTOC items={tocItems} />}
      >
        <Breadcrumb
          items={[
            { label: 'Documentation', href: '/docs' },
            { label: 'API Reference', href: '/docs/api' },
            { label: 'Text to Image' },
          ]}
        />

        {/* Hero Section */}
        <Hero
          title="Text to Image"
          subtitle="Generate high-quality images from text prompts using AI-powered models."
        />

        {/* Overview */}
        <section id="overview" className="mb-12">
          <SectionHeader level={2} id="overview">
            Overview
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            The Text to Image endpoint allows you to generate images from natural language descriptions.
            Powered by Google Gemini 2.5 Flash and Imagen 4.0, it produces photorealistic images
            optimized for your specified requirements.
          </p>
          <TipBox variant="compact" type="info">
            <strong>Tip:</strong> Enable <InlineCode>autoEnhance</InlineCode>
            to let AI improve your prompts for better image quality.
          </TipBox>
        </section>

        {/* Endpoint */}
        <section id="endpoint" className="mb-12">
          <SectionHeader level={2} id="endpoint">
            Endpoint
          </SectionHeader>
          <EndpointCard
            method="POST"
            endpoint="/api/text-to-image"
            baseUrl="https://api.banatie.com"
          />
        </section>

        {/* Parameters */}
        <section id="parameters" className="mb-12">
          <SectionHeader level={2} id="parameters" className="mb-6">
            Parameters
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            All parameters should be sent in the request body as JSON.
          </p>

          <Table
            headers={['Parameter', 'Type', 'Required', 'Description']}
            rows={parameters.map((param) => [
              <InlineCode key="name">{param.name}</InlineCode>,
              <span key="type" className="text-cyan-400">{param.type}</span>,
              <span key="required" className={param.required ? 'text-green-400' : 'text-gray-500'}>
                {param.required ? 'Yes' : 'No'}
              </span>,
              param.description,
            ])}
          />

          <div className="mt-6">
            <TipBox variant="compact" type="info">
              <strong>Default Values:</strong> If not specified, <InlineCode>filename</InlineCode> is
              auto-generated, <InlineCode>aspectRatio</InlineCode> defaults
              to "1:1", and <InlineCode>autoEnhance</InlineCode> is false.
            </TipBox>
          </div>
        </section>

        {/* Response */}
        <section id="response" className="mb-12">
          <SectionHeader level={2} id="response" className="mb-4">
            Response
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            On success, the API returns a JSON object containing the generated image URL and metadata.
          </p>

          <CodeBlock
            code={`{
  "success": true,
  "data": {
    "url": "https://cdn.banatie.com/org/project/generated/2025-01/image.png",
    "filepath": "org/project/generated/2025-01/image.png",
    "width": 1024,
    "height": 1024,
    "promptEnhancement": {
      "enhancedPrompt": "A highly detailed, photorealistic...",
      "wasEnhanced": true
    }
  },
  "metadata": {
    "generationTime": 3.42,
    "model": "imagen-4.0"
  }
}`}
            language="json"
            filename="Success Response"
          />
        </section>

        {/* Error Codes */}
        <section id="error-codes" className="mb-12">
          <SectionHeader level={2} id="error-codes" className="mb-6">
            Error Codes
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            The API uses standard HTTP status codes and returns descriptive error messages.
          </p>

          <Table
            headers={['Status Code', 'Error Type', 'Description']}
            rows={[
              [
                <InlineCode key="code" color="error">400</InlineCode>,
                'Bad Request',
                'Missing or invalid parameters in the request body',
              ],
              [
                <InlineCode key="code" color="error">401</InlineCode>,
                'Unauthorized',
                'Missing or invalid API key in X-API-Key header',
              ],
              [
                <InlineCode key="code" color="error">429</InlineCode>,
                'Rate Limit',
                'Too many requests. Check rate limit headers for retry timing',
              ],
              [
                <InlineCode key="code" color="error">500</InlineCode>,
                'Server Error',
                'Internal server error. Contact support if persists',
              ],
            ]}
          />

          <div className="mt-6">
            <TipBox variant="compact" type="warning">
              <strong>Rate Limits:</strong> Project API keys are limited to 100 requests per hour.
              Upgrade your plan for higher limits.
            </TipBox>
          </div>
        </section>

        {/* Interactive Widget */}
        <section id="interactive" className="mb-12">
          <SectionHeader level={2} id="interactive" className="mb-4">
            Try It Live
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            Test the API directly from this page. Enter your API key and customize the parameters below.
          </p>

          <InteractiveAPIWidget
            endpoint="/api/text-to-image"
            method="POST"
            description="Generate an image from a text prompt"
            parameters={parameters}
          />
        </section>

        {/* Next Steps */}
        <section id="next-steps" className="mb-12">
          <SectionHeader level={2} id="next-steps" className="mb-6">
            Next Steps
          </SectionHeader>

          <LinkCardGrid columns={2}>
            <LinkCard
              href="/docs/api/upload"
              title="Upload API"
              description="Learn how to upload reference images for image-to-image generation."
              accent="primary"
            />
            <LinkCard
              href="/docs/guides/error-handling"
              title="Error Handling"
              description="Best practices for handling errors and retries in production."
              accent="secondary"
            />
          </LinkCardGrid>
        </section>
      </DocsLayout>
    </>
  );
}