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 } from '@/config/docs-schema';
import {
  Hero,
  SectionHeader,
  InlineCode,
  ResponseBlock,
} from '@/components/docs/blocks';

const PAGE = DOCS_PAGES['generation'];

export const metadata: Metadata = createDocsMetadata(PAGE);

const breadcrumbSchema = createBreadcrumbSchema([
  { name: 'Home', path: '/' },
  { name: 'Documentation', path: '/docs/' },
  { name: 'Image Generation', path: '/docs/generation/' },
]);

const articleSchema = createTechArticleSchema(PAGE);

const tocItems = [
  { id: 'basic-generation', text: 'Basic Generation', level: 2 },
  { id: 'aspect-ratios', text: 'Aspect Ratios', level: 2 },
  { id: 'prompt-templates', text: 'Prompt Templates', level: 2 },
  { id: 'reference-images', text: 'Using Reference Images', level: 2 },
  { id: 'continuing-generation', text: 'Continuing Generation', level: 2 },
  { id: 'regeneration', text: 'Regeneration', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function GenerationPage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <JsonLd data={articleSchema} />
      <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs/' },
        { label: 'Image Generation' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        links: [
          {
            href: '/docs/api/generations/',
            title: 'API Reference: Generations',
            description: 'Full endpoint documentation for generations.',
            accent: 'primary',
          },
          {
            href: '/docs/images/',
            title: 'Working with Images',
            description: 'Upload your own images and organize with aliases.',
            accent: 'secondary',
          },
        ],
      }}
    >
      <Hero
        title="Image Generation"
        subtitle="Generate AI images from text prompts with support for references, templates, and chaining."
      />

      <section id="basic-generation" className="mb-12">
        <SectionHeader level={2} id="basic-generation">
          Basic Generation
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Generate an image by sending a text prompt to the generations endpoint:
        </p>

        <CodeBlock
          code={`curl -X POST https://api.banatie.app/api/v1/generations \\
  -H "Content-Type: application/json" \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -d '{
    "prompt": "a serene mountain landscape at sunset",
    "aspectRatio": "16:9"
  }'`}
          language="bash"
          filename="Create Generation"
        />

        <p className="text-gray-300 leading-relaxed mt-6 mb-4">
          The response contains your generated image immediately:
        </p>

        <ResponseBlock
          status="success"
          statusCode={201}
          statusLabel="201 Created"
          content={`{
  "success": true,
  "data": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "status": "success",
    "prompt": "a serene mountain landscape at sunset",
    "aspectRatio": "16:9",
    "outputImage": {
      "id": "8a3b2c1d-4e5f-6789-abcd-ef0123456789",
      "storageUrl": "https://cdn.banatie.app/my-org/my-project/img/8a3b2c1d-4e5f-6789-abcd-ef0123456789",
      "width": 1792,
      "height": 1008
    },
    "flowId": "770e8400-e29b-41d4-a716-446655440002"
  }
}`}
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          One request, one result. The <InlineCode>storageUrl</InlineCode> is your production-ready image, served via CDN.
        </p>
      </section>

      <section id="aspect-ratios" className="mb-12">
        <SectionHeader level={2} id="aspect-ratios">
          Aspect Ratios
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Choose the aspect ratio that fits your use case:
        </p>

        <Table
          headers={['Ratio', 'Dimensions', 'Best For']}
          rows={[
            [
              <InlineCode key="ratio">1:1</InlineCode>,
              '1024 x 1024',
              'Social media posts, profile pictures, thumbnails',
            ],
            [
              <InlineCode key="ratio">16:9</InlineCode>,
              '1792 x 1008',
              'Blog headers, presentations, video thumbnails',
            ],
            [
              <InlineCode key="ratio">9:16</InlineCode>,
              '1008 x 1792',
              'Stories, mobile backgrounds, vertical banners',
            ],
            [
              <InlineCode key="ratio">3:2</InlineCode>,
              '1536 x 1024',
              'Photography-style images, print layouts',
            ],
            [
              <InlineCode key="ratio">21:9</InlineCode>,
              '2016 x 864',
              'Ultra-wide banners, cinematic headers',
            ],
          ]}
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          Default is <InlineCode>16:9</InlineCode> if not specified.
        </p>
      </section>

      <section id="prompt-templates" className="mb-12">
        <SectionHeader level={2} id="prompt-templates">
          Prompt Templates
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Templates improve your prompt for specific styles. Available templates:
        </p>

        <Table
          headers={['Template', 'Description']}
          rows={[
            [<InlineCode key="t">general</InlineCode>, 'Balanced style for most use cases'],
            [<InlineCode key="t">photorealistic</InlineCode>, 'Photo-like realism with natural lighting'],
            [<InlineCode key="t">illustration</InlineCode>, 'Artistic illustration style'],
            [<InlineCode key="t">minimalist</InlineCode>, 'Clean, simple compositions'],
            [<InlineCode key="t">sticker</InlineCode>, 'Sticker-style with clear edges'],
            [<InlineCode key="t">product</InlineCode>, 'E-commerce product photography'],
            [<InlineCode key="t">comic</InlineCode>, 'Comic book visual style'],
          ]}
        />

        <div className="mt-6">
          <TipBox variant="compact" type="info">
            Template selection coming soon. Currently uses general style for all generations.
          </TipBox>
        </div>
      </section>

      <section id="reference-images" className="mb-12">
        <SectionHeader level={2} id="reference-images">
          Using Reference Images
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Add reference images for style guidance or context. Pass image IDs or aliases in the <InlineCode>referenceImages</InlineCode> array:
        </p>

        <CodeBlock
          code={`curl -X POST https://api.banatie.app/api/v1/generations \\
  -H "Content-Type: application/json" \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -d '{
    "prompt": "product photo in this style",
    "referenceImages": ["@brand-style", "@product-template"],
    "aspectRatio": "1:1"
  }'`}
          language="bash"
          filename="With References"
        />

        <div className="mt-6">
          <TipBox variant="compact" type="info">
            <strong>Pro Tip:</strong> Use aliases like <InlineCode>@logo</InlineCode> instead of UUIDs. See <a href="/docs/images/" className="text-purple-400 hover:underline">Working with Images</a> to learn about aliases.
          </TipBox>
        </div>

        <p className="text-gray-300 leading-relaxed mt-6">
          You can also mention aliases directly in your prompt text — they're auto-detected:
        </p>

        <CodeBlock
          code={`{
  "prompt": "create a banner using @brand-colors and @logo style"
}`}
          language="json"
          filename="Auto-detected aliases"
        />
      </section>

      <section id="continuing-generation" className="mb-12">
        <SectionHeader level={2} id="continuing-generation">
          Continuing Generation
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Chain multiple generations together by passing the same <InlineCode>flowId</InlineCode>:
        </p>

        <CodeBlock
          code={`curl -X POST https://api.banatie.app/api/v1/generations \\
  -H "Content-Type: application/json" \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -d '{
    "prompt": "same scene but at night",
    "flowId": "770e8400-e29b-41d4-a716-446655440002"
  }'`}
          language="bash"
          filename="Continue in Flow"
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          Each response includes a <InlineCode>flowId</InlineCode> you can use to continue the sequence. Flows help organize related generations together.
        </p>
      </section>

      <section id="regeneration" className="mb-12">
        <SectionHeader level={2} id="regeneration">
          Regeneration
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Want a different result with the same parameters? Regenerate an existing generation:
        </p>

        <CodeBlock
          code={`curl -X POST https://api.banatie.app/api/v1/generations/550e8400-e29b-41d4-a716-446655440000/regenerate \\
  -H "X-API-Key: YOUR_API_KEY"`}
          language="bash"
          filename="Regenerate"
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          Same prompt, new image. The generation ID and URL stay the same — the image content is replaced.
        </p>
      </section>
    </DocPage>
    </>
  );
}