'use client';

/**
 * Getting Started Page - Production Documentation
 *
 * Refactored to use DocPage component for consistent layout
 * Layout handles SubsectionNav and Left Sidebar
 * DocPage handles Breadcrumb, Article structure, Next Steps, and TOC
 * This page provides only the content (Hero + sections)
 */

import { TipBox } from '@/components/docs/shared/TipBox';
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
import { DocPage } from '@/components/docs/layout/DocPage';
import {
  Hero,
  SectionHeader,
  ResponseBlock,
} from '@/components/docs/blocks';

const tocItems = [
  { id: 'introduction', text: 'Introduction', level: 2 },
  { id: 'quick-start', text: 'Quick Start', level: 2 },
  { id: 'installation', text: 'Installation', level: 3 },
  { id: 'authentication', text: 'Authentication', level: 3 },
  { id: 'first-request', text: 'Your First Request', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function GettingStartedPage() {
  return (
    <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs' },
        { label: 'Getting Started' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        description:
          'Now that you have generated your first image, explore these resources to build more advanced integrations:',
        links: [
          {
            href: '/docs/api/text-to-image',
            title: 'API Reference',
            description: 'Explore all available endpoints, parameters, and response formats.',
            accent: 'primary',
          },
          {
            href: '/docs/guides/authentication',
            title: 'Authentication Guide',
            description: 'Learn about API keys, rate limits, and security best practices.',
            accent: 'secondary',
          },
        ],
      }}
    >

        {/* Hero Section */}
        <Hero
          title="Getting Started"
          subtitle="Welcome to the Banatie API documentation. Learn how to integrate AI-powered image generation into your applications in minutes."
        />

        {/* Introduction */}
        <section id="introduction" className="mb-12">
          <SectionHeader level={2} id="introduction">
            Introduction
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            Banatie is a developer-first API for AI-powered image generation. Built on Google Gemini
            2.5 Flash and Imagen 4.0, it transforms text prompts and reference images into
            production-ready visuals.
          </p>
          <p className="text-gray-300 leading-relaxed mb-6">
            Whether you are building a content creation platform, e-commerce site, or creative tool,
            Banatie provides the infrastructure you need to generate high-quality images at scale.
          </p>

          {/* Compact Tip Box */}
          <TipBox variant="compact" type="info">
            <strong>New to API integration?</strong> Start with our{' '}
            <a href="/docs/examples" className="text-purple-400 hover:underline">
              code examples
            </a>{' '}
            to see common use cases in action.
          </TipBox>
        </section>

        {/* Quick Start */}
        <section id="quick-start" className="mb-12">
          <SectionHeader level={2} id="quick-start" className="mb-6">
            Quick Start
          </SectionHeader>

          <div id="installation" className="mb-8">
            <SectionHeader level={3} id="installation">
              Installation
            </SectionHeader>
            <p className="text-gray-300 leading-relaxed mb-4">
              Banatie is a REST API, so you do not need to install any libraries. However, we provide
              SDKs for popular languages to make integration easier.
            </p>

            <CodeBlock
              code={`# Using npm (JavaScript/TypeScript)
npm install @banatie/sdk

# Using pip (Python)
pip install banatie

# Using Go
go get github.com/banatie/sdk-go`}
              language="bash"
              filename="Installation"
            />
          </div>

          <div id="authentication" className="mb-8">
            <SectionHeader level={3} id="authentication">
              Authentication
            </SectionHeader>
            <p className="text-gray-300 leading-relaxed mb-4">
              All API requests require an API key. You can create an API key from your dashboard or
              using the bootstrap endpoint for initial setup.
            </p>

            {/* Prominent Tip Box for Security Warning */}
            <div className="mb-6">
              <TipBox variant="prominent" type="warning">
                <strong className="text-amber-300">Security Best Practice:</strong> Keep your API keys secure.
                Never commit them to public repositories or expose them in client-side code. Use environment
                variables and server-side implementations for production applications.
              </TipBox>
            </div>

            <CodeBlock
              code={`# Create your first API key (one-time bootstrap)
curl -X POST https://api.banatie.com/api/bootstrap/initial-key

# Save the returned key securely
export BANATIE_API_KEY="bnt_your_key_here"`}
              language="bash"
              filename="Get API Key"
            />
          </div>
        </section>

        {/* First Request */}
        <section id="first-request" className="mb-12">
          <SectionHeader level={2} id="first-request">
            Your First Request
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            Let's generate your first image! This example uses curl, but you can use any HTTP client
            or our SDKs.
          </p>

          <CodeBlock
            code={`curl -X POST https://api.banatie.com/api/text-to-image \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "prompt": "a serene mountain landscape at sunset",
    "filename": "mountain_sunset",
    "aspectRatio": "16:9",
    "autoEnhance": true
  }'`}
            language="bash"
            filename="Generate Image"
          />

          <div className="mt-6">
            <p className="text-sm font-semibold text-gray-300 mb-3">Expected Response:</p>
            <ResponseBlock
              status="success"
              statusCode={200}
              statusLabel="✓ 200 Success"
              content={`{
  "success": true,
  "data": {
    "url": "https://cdn.banatie.com/org/project/generated/2025-01/mountain_sunset.png",
    "filepath": "org/project/generated/2025-01/mountain_sunset.png",
    "width": 1920,
    "height": 1080,
    "promptEnhancement": {
      "enhancedPrompt": "A breathtaking mountain landscape..."
    }
  }
}`}
            />
          </div>
        </section>

    </DocPage>
  );
}