import type { Metadata } from 'next';
import { TipBox } from '@/components/docs/shared/TipBox';
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['images'];

export const metadata: Metadata = createDocsMetadata(PAGE);

const breadcrumbSchema = createBreadcrumbSchema([
  { name: 'Home', path: '/' },
  { name: 'Documentation', path: '/docs/' },
  { name: 'Working with Images', path: '/docs/images/' },
]);

const articleSchema = createTechArticleSchema(PAGE);

const tocItems = [
  { id: 'image-urls', text: 'Image URLs', level: 2 },
  { id: 'uploading-images', text: 'Uploading Images', level: 2 },
  { id: 'listing-images', text: 'Listing & Getting Images', level: 2 },
  { id: 'aliases', text: 'Aliases', level: 2 },
  { id: 'deleting-images', text: 'Deleting Images', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function ImagesPage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <JsonLd data={articleSchema} />
      <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs/' },
        { label: 'Working with Images' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        links: [
          {
            href: '/docs/api/images/',
            title: 'API Reference: Images',
            description: 'Full endpoint documentation for images.',
            accent: 'primary',
          },
          {
            href: '/docs/generation/',
            title: 'Image Generation',
            description: 'Use your images as references in generations.',
            accent: 'secondary',
          },
        ],
      }}
    >
      <Hero
        title="Working with Images"
        subtitle="Upload, manage, and organize your images. CDN delivery, aliases, and image management."
      />

      <section id="image-urls" className="mb-12">
        <SectionHeader level={2} id="image-urls">
          Image URLs
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          All images are served via CDN with this URL structure:
        </p>

        <CodeBlock
          code={`https://cdn.banatie.app/{org}/{project}/img/{imageId}`}
          language="text"
          filename="CDN URL Format"
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          URLs are permanent, fast, and cached globally. Use them directly in your applications.
        </p>
      </section>

      <section id="uploading-images" className="mb-12">
        <SectionHeader level={2} id="uploading-images">
          Uploading Images
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Upload your own images for use as brand assets, references, or logos:
        </p>

        <CodeBlock
          code={`curl -X POST https://api.banatie.app/api/v1/images/upload \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -F "file=@your-image.png" \\
  -F "alias=@brand-logo"`}
          language="bash"
          filename="Upload Image"
        />

        <p className="text-gray-300 leading-relaxed mt-6 mb-4">
          Response includes the CDN URL and image details:
        </p>

        <ResponseBlock
          status="success"
          statusCode={201}
          statusLabel="201 Created"
          content={`{
  "success": true,
  "data": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "storageUrl": "https://cdn.banatie.app/my-org/my-project/img/550e8400-e29b-41d4-a716-446655440000",
    "alias": "@brand-logo",
    "source": "uploaded",
    "width": 512,
    "height": 512,
    "mimeType": "image/png",
    "fileSize": 24576
  }
}`}
        />
      </section>

      <section id="listing-images" className="mb-12">
        <SectionHeader level={2} id="listing-images">
          Listing & Getting Images
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          List all images in your project:
        </p>

        <CodeBlock
          code={`curl https://api.banatie.app/api/v1/images \\
  -H "X-API-Key: YOUR_API_KEY"`}
          language="bash"
          filename="List Images"
        />

        <p className="text-gray-300 leading-relaxed mt-6 mb-6">
          Get a specific image by ID or alias:
        </p>

        <CodeBlock
          code={`# By UUID
curl https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000 \\
  -H "X-API-Key: YOUR_API_KEY"

# By alias
curl https://api.banatie.app/api/v1/images/@brand-logo \\
  -H "X-API-Key: YOUR_API_KEY"`}
          language="bash"
          filename="Get Image"
        />
      </section>

      <section id="aliases" className="mb-12">
        <SectionHeader level={2} id="aliases">
          Aliases
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Assign memorable names to images. Aliases start with <InlineCode>@</InlineCode> and make it easy to reference images without remembering UUIDs.
        </p>

        <CodeBlock
          code={`curl -X PUT https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000/alias \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"alias": "@hero-background"}'`}
          language="bash"
          filename="Assign Alias"
        />

        <p className="text-gray-300 leading-relaxed mt-6 mb-6">
          Access images via CDN using their alias:
        </p>

        <CodeBlock
          code={`https://cdn.banatie.app/my-org/my-project/img/@hero-background`}
          language="text"
          filename="CDN Alias URL"
        />

        <div className="mt-6">
          <TipBox variant="compact" type="info">
            <strong>Pro Tip:</strong> Use aliases for brand assets like <InlineCode>@logo</InlineCode>, <InlineCode>@brand-colors</InlineCode>. Reference them in generations without remembering UUIDs.
          </TipBox>
        </div>

        <p className="text-gray-300 leading-relaxed mt-6 mb-4">
          Remove an alias by setting it to null:
        </p>

        <CodeBlock
          code={`curl -X PUT https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000/alias \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"alias": null}'`}
          language="bash"
          filename="Remove Alias"
        />
      </section>

      <section id="deleting-images" className="mb-12">
        <SectionHeader level={2} id="deleting-images">
          Deleting Images
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Delete an image by ID or alias. This permanently removes the image from storage.
        </p>

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

        <div className="mt-6">
          <TipBox variant="compact" type="warning">
            Deletion is permanent. The image file and all references are removed.
          </TipBox>
        </div>
      </section>
    </DocPage>
    </>
  );
}
