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

const PAGE = DOCS_PAGES['getting-started'];

export const metadata: Metadata = createDocsMetadata(PAGE);

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

const articleSchema = createTechArticleSchema(PAGE);

const tocItems = [
  { id: 'what-is-banatie', text: 'What is Banatie?', level: 2 },
  { id: 'your-first-image', text: 'Your First Image', level: 2 },
  { id: 'production-ready', text: 'Production Ready', level: 2 },
  { id: 'live-urls', text: 'Live URLs', level: 2 },
  { id: 'get-your-api-key', text: 'Get Your API Key', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function GettingStartedPage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <JsonLd data={articleSchema} />
      <JsonLd data={HOW_TO_SCHEMA} />
      <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs' },
        { label: 'Getting Started' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        links: [
          {
            href: '/docs/generation',
            title: 'Image Generation',
            description: 'Aspect ratios, prompt templates, using references.',
            accent: 'primary',
          },
          {
            href: '/docs/images',
            title: 'Working with Images',
            description: 'Upload your own, organize with aliases.',
            accent: 'secondary',
          },
          {
            href: '/docs/live-urls',
            title: 'Live URLs',
            description: 'Generate images directly from URL parameters.',
            accent: 'primary',
          },
          {
            href: '/docs/api',
            title: 'API Reference',
            description: 'Full endpoint documentation.',
            accent: 'secondary',
          },
        ],
      }}
    >
      <Hero
        title="Get Started"
        subtitle="Generate your first AI image in a few simple steps."
      />

      <section id="what-is-banatie" className="mb-12">
        <SectionHeader level={2} id="what-is-banatie">
          What is Banatie?
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-4">
          Banatie is an image generation API for developers. Send a text prompt, get a production-ready image delivered via CDN.
        </p>
        <p className="text-gray-300 leading-relaxed">
          Simple REST API. Optimized AI models that deliver consistent results. Images ready for production use immediately.
        </p>
      </section>

      <section id="your-first-image" className="mb-12">
        <SectionHeader level={2} id="your-first-image">
          Your First Image
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Once you have your API key, generate an image with a single request:
        </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 friendly robot waving hello"}'`}
          language="bash"
          filename="Generate Image"
        />

        <p className="text-gray-300 leading-relaxed mt-6 mb-4">
          That's it. The response contains your image:
        </p>

        <ResponseBlock
          status="success"
          statusCode={200}
          statusLabel="200 OK"
          content={`{
  "success": true,
  "data": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "status": "success",
    "outputImage": {
      "storageUrl": "https://cdn.banatie.app/my-org/my-project/img/8a3b2c1d-4e5f-6789-abcd-ef0123456789",
      "width": 1792,
      "height": 1008
    }
  }
}`}
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          Open <code className="text-purple-400">storageUrl</code> in your browser — there's your robot.
        </p>
      </section>

      <section id="production-ready" className="mb-12">
        <SectionHeader level={2} id="production-ready">
          Production Ready
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          The image URL is permanent and served via global CDN. What this means for you:
        </p>

        <ul className="space-y-3 text-gray-300">
          <li className="flex items-start gap-3">
            <span className="text-purple-400 mt-1">•</span>
            <span><strong className="text-white">Fast access</strong> — images load in milliseconds</span>
          </li>
          <li className="flex items-start gap-3">
            <span className="text-purple-400 mt-1">•</span>
            <span><strong className="text-white">Edge cached</strong> — served from locations closest to your users</span>
          </li>
          <li className="flex items-start gap-3">
            <span className="text-purple-400 mt-1">•</span>
            <span><strong className="text-white">Global distribution</strong> — works fast everywhere in the world</span>
          </li>
        </ul>

        <p className="text-gray-300 leading-relaxed mt-6">
          One request. Production-ready result. Drop the URL into your app and ship.
        </p>
      </section>

      <section id="live-urls" className="mb-12">
        <SectionHeader level={2} id="live-urls">
          Live URLs
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Want to skip the API call entirely? Generate images directly from a URL:
        </p>

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

        <p className="text-gray-300 leading-relaxed mt-6 mb-6">
          Put this in an <code className="text-purple-400">&lt;img src="..."&gt;</code> tag. First request generates the image, all subsequent requests serve it from cache instantly.
        </p>

        <TipBox variant="compact" type="info">
          Perfect for placeholders, dynamic content, and rapid prototyping.
        </TipBox>

        <p className="text-gray-300 leading-relaxed mt-6">
          <a href="/docs/live-urls" className="text-purple-400 hover:underline">Learn more about Live URLs →</a>
        </p>
      </section>

      <section id="get-your-api-key" className="mb-12">
        <SectionHeader level={2} id="get-your-api-key">
          Get Your API Key
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          We're currently in early access. API keys are issued personally.
        </p>

        <div className="space-y-3 text-gray-300 mb-6">
          <p><strong className="text-white">To request access:</strong></p>
          <ol className="list-decimal list-inside space-y-2 pl-4">
            <li>Go to <a href="https://banatie.app" className="text-purple-400 hover:underline">banatie.app</a></li>
            <li>Enter your email in the signup form</li>
            <li>We'll send your API key within 24 hours</li>
          </ol>
        </div>
      </section>
    </DocPage>
    </>
  );
}