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['authentication'];

export const metadata: Metadata = createDocsMetadata(PAGE);

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

const articleSchema = createTechArticleSchema(PAGE);

const tocItems = [
  { id: 'early-access', text: 'Early Access', level: 2 },
  { id: 'using-your-api-key', text: 'Using Your API Key', level: 2 },
  { id: 'key-types', text: 'Key Types', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function AuthenticationPage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <JsonLd data={articleSchema} />
      <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs/' },
        { label: 'Authentication' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        links: [
          {
            href: '/docs/generation/',
            title: 'Start Generating',
            description: 'Create your first AI-generated image.',
            accent: 'primary',
          },
          {
            href: '/docs/api/',
            title: 'API Reference',
            description: 'Full endpoint documentation.',
            accent: 'secondary',
          },
        ],
      }}
    >
      <Hero
        title="Authentication"
        subtitle="How to authenticate with Banatie API using API keys."
      />

      <section id="early-access" className="mb-12">
        <SectionHeader level={2} id="early-access">
          Early Access
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          We're currently in early access phase. API keys are issued personally via email.
        </p>
        <p className="text-gray-300 leading-relaxed mb-6">
          <strong className="text-white">To request access:</strong> Sign up at <a href="https://banatie.app" className="text-purple-400 hover:underline">banatie.app</a>. We'll send your API key within 24 hours.
        </p>
      </section>

      <section id="using-your-api-key" className="mb-12">
        <SectionHeader level={2} id="using-your-api-key">
          Using Your API Key
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          All API requests require the <InlineCode>X-API-Key</InlineCode> header:
        </p>

        <CodeBlock
          code={`curl -X POST https://api.banatie.app/api/v1/generations \\
  -H "X-API-Key: your_key_here" \\
  -H "Content-Type: application/json" \\
  -d '{"prompt": "a sunset over the ocean"}'`}
          language="bash"
          filename="Authenticated Request"
        />

        <div className="mt-6">
          <TipBox variant="prominent" type="warning">
            <strong className="text-amber-300">Keep your API key secure.</strong> Don't commit it to version control or expose it in client-side code. Use environment variables in your applications.
          </TipBox>
        </div>
      </section>

      <section id="key-types" className="mb-12">
        <SectionHeader level={2} id="key-types">
          Key Types
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Banatie uses two types of API keys:
        </p>

        <Table
          headers={['Type', 'Permissions', 'Expiration', 'Use Case']}
          rows={[
            [
              <InlineCode key="t">Project Key</InlineCode>,
              'Image generation, uploads, images',
              <span key="e" className="text-amber-400">90 days</span>,
              'Your application integration',
            ],
            [
              <InlineCode key="t">Master Key</InlineCode>,
              'Full admin access, key management',
              <span key="e" className="text-green-400">Never expires</span>,
              'Server-side admin operations',
            ],
          ]}
        />

        <p className="text-gray-300 leading-relaxed mt-6">
          You'll receive a Project Key for your application. Master Keys are for administrative operations — you probably don't need one.
        </p>

        <div className="mt-6">
          <TipBox variant="compact" type="info">
            API key management dashboard coming soon. For now, contact us if you need to rotate your key.
          </TipBox>
        </div>
      </section>
    </DocPage>
    </>
  );
}
