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 } from '@/components/docs/blocks';

const PAGE = DOCS_PAGES['live-urls'];

export const metadata: Metadata = createDocsMetadata(PAGE);

const breadcrumbSchema = createBreadcrumbSchema([
  { name: 'Home', path: '/' },
  { name: 'Documentation', path: '/docs/' },
  { name: 'Live URLs', path: '/docs/live-urls/' },
]);

const articleSchema = createTechArticleSchema(PAGE);

const tocItems = [
  { id: 'the-concept', text: 'The Concept', level: 2 },
  { id: 'url-format', text: 'URL Format', level: 2 },
  { id: 'try-it', text: 'Try It', level: 2 },
  { id: 'placeholder-images', text: 'Placeholder Images', level: 2 },
  { id: 'caching-behavior', text: 'Caching Behavior', level: 2 },
  { id: 'scopes', text: 'Scopes', level: 2 },
  { id: 'rate-limits', text: 'Rate Limits', level: 2 },
  { id: 'use-cases', text: 'Use Cases', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function LiveUrlsPage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <JsonLd data={articleSchema} />
      <DocPage
        breadcrumbItems={[{ label: 'Documentation', href: '/docs/' }, { label: 'Live URLs' }]}
        tocItems={tocItems}
        nextSteps={{
          links: [
            {
              href: '/docs/api/live-scopes/',
              title: 'API Reference: Live Scopes',
              description: 'Manage scopes and generation limits.',
              accent: 'primary',
            },
            {
              href: '/docs/generation/',
              title: 'Image Generation',
              description: 'Full control via the generations API.',
              accent: 'secondary',
            },
          ],
        }}
      >
        <Hero
          title="Live URLs"
          subtitle="Generate images directly from URL parameters. No API calls needed — just use the URL in your HTML."
        />

        <section id="the-concept" className="mb-12">
          <SectionHeader level={2} id="the-concept">
            The Concept
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            Put your prompt in a URL. Use it directly in an{' '}
            <InlineCode>&lt;img src="..."&gt;</InlineCode> tag.
          </p>
          <p className="text-gray-300 leading-relaxed">
            First request generates the image. All subsequent requests serve it from cache
            instantly.
          </p>
        </section>

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

          <CodeBlock
            code={`https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt=...&aspectRatio=...`}
            language="text"
            filename="Live URL Format"
          />

          <p className="text-gray-300 leading-relaxed mt-6 mb-4">Query parameters:</p>

          <Table
            headers={['Parameter', 'Required', 'Description']}
            rows={[
              [
                <InlineCode key="p">prompt</InlineCode>,
                <span key="r" className="text-green-400">
                  Yes
                </span>,
                'Text description of the image to generate',
              ],
              [
                <InlineCode key="p">aspectRatio</InlineCode>,
                <span key="r" className="text-gray-500">
                  No
                </span>,
                'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 16:9)',
              ],
              [
                <InlineCode key="p">template</InlineCode>,
                <span key="r" className="text-gray-500">
                  No
                </span>,
                'Enhancement template to use',
              ],
              [
                <InlineCode key="p">autoEnhance</InlineCode>,
                <span key="r" className="text-gray-500">
                  No
                </span>,
                'Enable prompt enhancement (default: true)',
              ],
            ]}
          />
        </section>

        <section id="try-it" className="mb-12">
          <SectionHeader level={2} id="try-it">
            Try It
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">Open this URL in your browser:</p>

          <CodeBlock
            code={`https://cdn.banatie.app/my-org/my-project/live/demo?prompt=a+friendly+robot+waving+hello&aspectRatio=16:9`}
            language="text"
            filename="Example Live URL"
          />

          <p className="text-gray-300 leading-relaxed mt-6 mb-4">Or use it directly in HTML:</p>

          <CodeBlock
            code={`<img
  src="https://cdn.banatie.app/my-org/my-project/live/hero?prompt=mountain+landscape+at+sunset&aspectRatio=16:9"
  alt="Mountain landscape"
/>`}
            language="html"
            filename="HTML Usage"
          />
        </section>

        <section id="caching-behavior" className="mb-12">
          <SectionHeader level={2} id="caching-behavior">
            Caching Behavior
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            The response includes an <InlineCode>X-Cache-Status</InlineCode> header:
          </p>

          <Table
            headers={['Status', 'Meaning', 'Response Time']}
            rows={[
              [
                <InlineCode key="s" color="success">
                  HIT
                </InlineCode>,
                'Image served from cache',
                'Instant (milliseconds)',
              ],
              [<InlineCode key="s">MISS</InlineCode>, 'New image generated', 'A few seconds'],
            ]}
          />

          <p className="text-gray-300 leading-relaxed mt-6">
            Cache hits are unlimited and don't count toward rate limits. Only new generations (cache
            MISS) are rate limited.
          </p>
        </section>

        <section id="scopes" className="mb-12">
          <SectionHeader level={2} id="scopes">
            Scopes
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            Scopes organize your live generations. Each scope has its own generation limit.
          </p>

          <CodeBlock
            code={`# Different scopes for different purposes
https://cdn.banatie.app/my-org/my-project/live/hero-section?prompt=...
https://cdn.banatie.app/my-org/my-project/live/product-gallery?prompt=...
https://cdn.banatie.app/my-org/my-project/live/blog-images?prompt=...`}
            language="text"
            filename="Scope Examples"
          />

          <p className="text-gray-300 leading-relaxed mt-6">
            Scopes are auto-created on first use. You can also pre-configure them via the API to set
            custom limits.
          </p>
        </section>

        {/* <section id="rate-limits" className="mb-12">
          <SectionHeader level={2} id="rate-limits">
            Rate Limits
          </SectionHeader>

          <Table
            headers={['Limit Type', 'Value', 'Notes']}
            rows={[
              [
                'Per IP',
                <span key="v" className="text-amber-400">
                  10 new generations/hour
                </span>,
                'Only applies to cache MISS',
              ],
              [
                'Per Scope',
                <span key="v" className="text-amber-400">
                  30 generations
                </span>,
                'Configurable via API',
              ],
              [
                'Cache Hits',
                <span key="v" className="text-green-400">
                  Unlimited
                </span>,
                'No limits on cached images',
              ],
            ]}
          />

          <div className="mt-6">
            <TipBox variant="compact" type="info">
              Rate limits protect the service from abuse. For high-volume needs, use the generations
              API directly.
            </TipBox>
          </div>
        </section> */}

        <section id="use-cases" className="mb-12">
          <SectionHeader level={2} id="use-cases">
            Use Cases
          </SectionHeader>

          <ul className="space-y-4 text-gray-300">
            <li className="flex items-start gap-3">
              <span className="text-purple-400 mt-1">•</span>
              <div>
                <strong className="text-white">Static HTML & serverless sites</strong>
                <p className="text-gray-400 text-sm mt-1">
                  Deploy HTML pages without configuring asset hosting or CDN infrastructure. Images
                  are served directly from Banatie's edge network.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="text-purple-400 mt-1">•</span>
              <div>
                <strong className="text-white">AI-assisted development</strong>
                <p className="text-gray-400 text-sm mt-1">
                  Enable AI coding assistants to generate complete HTML or JSX with contextual
                  images in a single pass—no asset pipeline required.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="text-purple-400 mt-1">•</span>
              <div>
                <strong className="text-white">Rapid prototyping</strong>
                <p className="text-gray-400 text-sm mt-1">
                  Test different visuals without writing backend code.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="text-purple-400 mt-1">•</span>
              <div>
                <strong className="text-white">AI placeholder images</strong>
                <p className="text-gray-400 text-sm mt-1">
                  Replace gray boxes and random stock photos with contextual AI images. Perfect for
                  prototypes, client demos, and design mockups.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="text-purple-400 mt-1">•</span>
              <div>
                <strong className="text-white">Personalized content</strong>
                <p className="text-gray-400 text-sm mt-1">
                  Generate unique images based on user data or preferences for dynamic,
                  individualized experiences.
                </p>
              </div>
            </li>
          </ul>
        </section>


        <section id="placeholder-images" className="mb-12">
          <TipBox variant="protip">
            Use Live URLs as intelligent placeholder images during development. Generate contextual
            visuals that match your design intent—no more gray boxes or random stock photos.
          </TipBox>

          <p className="text-gray-400 text-sm mt-6 mb-4">Common placeholder configurations:</p>

          <CodeBlock
            code={`<!-- Avatar placeholder (200×200) -->
<img src="https://cdn.banatie.app/.../live/avatars?prompt=professional+headshot&aspectRatio=1:1" />

<!-- Thumbnail placeholder (300×200) -->
<img src="https://cdn.banatie.app/.../live/thumbs?prompt=product+photo&aspectRatio=3:2" />

<!-- Hero placeholder (1200×630) -->
<img src="https://cdn.banatie.app/.../live/hero?prompt=modern+office+interior&aspectRatio=1200:630" />

<!-- Card image placeholder (400×300) -->
<img src="https://cdn.banatie.app/.../live/cards?prompt=abstract+gradient+background&aspectRatio=4:3" />`}
            language="html"
            filename="Placeholder Examples"
          />

          <div className="mt-6">
            <TipBox variant="compact" type="info">
              For dark mode interfaces, include "dark theme" or "dark background" in your prompt.
            </TipBox>
          </div>
        </section>

      </DocPage>
    </>
  );
}