'use client';

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 {
  Hero,
  SectionHeader,
  InlineCode,
  EndpointCard,
  ResponseBlock,
} from '@/components/docs/blocks';

const tocItems = [
  { id: 'overview', text: 'Overview', level: 2 },
  { id: 'list-flows', text: 'List Flows', level: 2 },
  { id: 'get-flow', text: 'Get Flow', level: 2 },
  { id: 'list-flow-generations', text: 'List Flow Generations', level: 2 },
  { id: 'list-flow-images', text: 'List Flow Images', level: 2 },
  { id: 'update-flow-aliases', text: 'Update Flow Aliases', level: 2 },
  { id: 'remove-flow-alias', text: 'Remove Flow Alias', level: 2 },
  { id: 'regenerate-flow', text: 'Regenerate Flow', level: 2 },
  { id: 'delete-flow', text: 'Delete Flow', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function FlowsAPIPage() {
  return (
    <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs' },
        { label: 'API Reference', href: '/docs/api' },
        { label: 'Flows' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        links: [
          {
            href: '/docs/generation',
            title: 'Image Generation Guide',
            description: 'Learn about chaining generations with flows.',
            accent: 'primary',
          },
          {
            href: '/docs/api/generations',
            title: 'Generations API',
            description: 'Create generations within flows.',
            accent: 'secondary',
          },
        ],
      }}
    >
      <Hero
        title="Flows API"
        subtitle="Manage generation chains and flow-scoped aliases."
      />

      <section id="overview" className="mb-12">
        <SectionHeader level={2} id="overview">
          Overview
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-4">
          Flows group related generations together. They're created automatically when you chain generations using the same flowId.
        </p>
        <p className="text-gray-300 leading-relaxed">
          Flows also support flow-scoped aliases — named references to images that are unique within a flow but don't conflict with project-level aliases.
        </p>
      </section>

      <section id="list-flows" className="mb-12">
        <SectionHeader level={2} id="list-flows">
          List Flows
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Retrieve all flows for your project with computed counts.
        </p>

        <EndpointCard
          method="GET"
          endpoint="/api/v1/flows"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Query Parameters</h4>
          <Table
            headers={['Parameter', 'Type', 'Description']}
            rows={[
              [<InlineCode key="p">limit</InlineCode>, 'number', 'Results per page (default: 20, max: 100)'],
              [<InlineCode key="p">offset</InlineCode>, 'number', 'Number of results to skip'],
            ]}
          />
        </div>

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl "https://api.banatie.app/api/v1/flows?limit=10" \\
  -H "X-API-Key: YOUR_API_KEY"`}
            language="bash"
            filename="Request"
          />
        </div>

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Response</h4>
          <ResponseBlock
            status="success"
            statusCode={200}
            statusLabel="200 OK"
            content={`{
  "success": true,
  "data": [
    {
      "id": "770e8400-e29b-41d4-a716-446655440002",
      "aliases": {"@hero": "img-uuid-1", "@background": "img-uuid-2"},
      "generationCount": 5,
      "imageCount": 5,
      "createdAt": "2025-01-15T10:00:00Z",
      "updatedAt": "2025-01-15T10:30:00Z"
    }
  ],
  "pagination": {
    "total": 1,
    "limit": 10,
    "offset": 0,
    "hasMore": false
  }
}`}
          />
        </div>
      </section>

      <section id="get-flow" className="mb-12">
        <SectionHeader level={2} id="get-flow">
          Get Flow
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Retrieve a single flow with detailed statistics.
        </p>

        <EndpointCard
          method="GET"
          endpoint="/api/v1/flows/:id"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002 \\
  -H "X-API-Key: YOUR_API_KEY"`}
            language="bash"
            filename="Request"
          />
        </div>
      </section>

      <section id="list-flow-generations" className="mb-12">
        <SectionHeader level={2} id="list-flow-generations">
          List Flow Generations
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Retrieve all generations in a specific flow.
        </p>

        <EndpointCard
          method="GET"
          endpoint="/api/v1/flows/:id/generations"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl "https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/generations?limit=20" \\
  -H "X-API-Key: YOUR_API_KEY"`}
            language="bash"
            filename="Request"
          />
        </div>
      </section>

      <section id="list-flow-images" className="mb-12">
        <SectionHeader level={2} id="list-flow-images">
          List Flow Images
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Retrieve all images (generated and uploaded) in a flow.
        </p>

        <EndpointCard
          method="GET"
          endpoint="/api/v1/flows/:id/images"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl "https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/images" \\
  -H "X-API-Key: YOUR_API_KEY"`}
            language="bash"
            filename="Request"
          />
        </div>
      </section>

      <section id="update-flow-aliases" className="mb-12">
        <SectionHeader level={2} id="update-flow-aliases">
          Update Flow Aliases
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Add or update flow-scoped aliases. Aliases are merged with existing ones.
        </p>

        <EndpointCard
          method="PUT"
          endpoint="/api/v1/flows/:id/aliases"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
          <Table
            headers={['Parameter', 'Type', 'Description']}
            rows={[
              [<InlineCode key="p">aliases</InlineCode>, 'object', 'Key-value pairs of aliases to add/update'],
            ]}
          />
        </div>

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl -X PUT https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/aliases \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "aliases": {
      "@hero": "image-id-123",
      "@background": "image-id-456"
    }
  }'`}
            language="bash"
            filename="Request"
          />
        </div>
      </section>

      <section id="remove-flow-alias" className="mb-12">
        <SectionHeader level={2} id="remove-flow-alias">
          Remove Flow Alias
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Remove a specific alias from a flow.
        </p>

        <EndpointCard
          method="DELETE"
          endpoint="/api/v1/flows/:id/aliases/:alias"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl -X DELETE https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/aliases/@hero \\
  -H "X-API-Key: YOUR_API_KEY"`}
            language="bash"
            filename="Request"
          />
        </div>
      </section>

      <section id="regenerate-flow" className="mb-12">
        <SectionHeader level={2} id="regenerate-flow">
          Regenerate Flow
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Regenerate the most recent generation in the flow.
        </p>

        <EndpointCard
          method="POST"
          endpoint="/api/v1/flows/:id/regenerate"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl -X POST https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/regenerate \\
  -H "X-API-Key: YOUR_API_KEY"`}
            language="bash"
            filename="Request"
          />
        </div>
      </section>

      <section id="delete-flow" className="mb-12">
        <SectionHeader level={2} id="delete-flow">
          Delete Flow
        </SectionHeader>
        <p className="text-gray-300 leading-relaxed mb-6">
          Delete a flow with cascade deletion. Images with project aliases are preserved.
        </p>

        <EndpointCard
          method="DELETE"
          endpoint="/api/v1/flows/:id"
          baseUrl="https://api.banatie.app"
        />

        <div className="mt-6">
          <h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
          <CodeBlock
            code={`curl -X DELETE https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002 \\
  -H "X-API-Key: YOUR_API_KEY"`}
            language="bash"
            filename="Request"
          />
        </div>

        <div className="mt-6">
          <TipBox variant="compact" type="warning">
            Deleting a flow removes all generations and images in it. Images with project aliases are preserved (unlinked from the flow).
          </TipBox>
        </div>
      </section>
    </DocPage>
  );
}