import * as React from "react";
import { AlertCircle, Info } from "lucide-react";
import { affiliatesTexts } from "@/lib/i18n/affiliates";
import { AUTH_PARAMS, buildCurl, type ApiAction, type ApiExample } from "@/lib/api-docs";
import { CodeBlock } from "./code-block";
import { ParamTable } from "./param-table";

const texts = affiliatesTexts.api;

function ExamplePair({
  endpoint,
  example,
}: {
  endpoint: string;
  example: ApiExample;
}) {
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <div className="space-y-2">
        <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
          {texts.exampleRequest}
        </p>
        <CodeBlock
          tone="request"
          label={`POST — ${example.label}`}
          code={buildCurl(endpoint, example.request)}
        />
      </div>
      <div className="space-y-2">
        <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
          {texts.exampleResponse}
        </p>
        <CodeBlock tone="response" label="200 OK — application/json" code={example.response} />
      </div>
    </div>
  );
}

export function ActionSection({
  action,
  endpoint,
  index,
}: {
  action: ApiAction;
  endpoint: string;
  index: number;
}) {
  const params = [...AUTH_PARAMS, ...action.params];
  const variants = action.variants ?? [];
  const notes = action.notes ?? [];

  return (
    <section id={action.id} className="scroll-mt-24">
      <div className="rounded-2xl border bg-card shadow-sm">
        <div className="flex flex-col gap-3 border-b px-5 py-5 sm:flex-row sm:items-start sm:justify-between sm:px-6">
          <div className="space-y-1.5">
            <div className="flex flex-wrap items-center gap-2">
              <span className="font-mono text-[11px] text-muted-foreground">
                {String(index).padStart(2, "0")}
              </span>
              <h2 className="font-display text-lg font-semibold tracking-tight">
                {action.title}
              </h2>
              <code className="rounded-md bg-primary/10 px-2 py-0.5 font-mono text-xs font-medium text-primary">
                action={action.action}
              </code>
            </div>
            <p className="max-w-3xl text-sm text-muted-foreground">{action.summary}</p>
          </div>
        </div>

        <div className="space-y-6 px-5 py-5 sm:px-6">
          <div className="space-y-2">
            <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
              {texts.parameters}
            </p>
            <ParamTable params={params} />
          </div>

          {variants.length > 0 ? (
            <div className="space-y-4">
              <div className="space-y-1">
                <p className="font-display text-sm font-semibold">
                  {action.variantsTitle ?? texts.serviceTypesTitle}
                </p>
                {action.variantsHint ? (
                  <p className="text-sm text-muted-foreground">{action.variantsHint}</p>
                ) : null}
              </div>

              <div className="space-y-4">
                {variants.map((variant) => (
                  <div
                    key={variant.id}
                    id={`add-${variant.id}`}
                    className="scroll-mt-24 space-y-4 rounded-2xl border bg-muted/25 p-4 sm:p-5"
                  >
                    <div className="space-y-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <h3 className="font-display text-base font-semibold">
                          {variant.label}
                        </h3>
                        <code className="rounded-md bg-cyan-500/10 px-2 py-0.5 font-mono text-[11px] font-medium text-cyan-700 dark:text-cyan-400">
                          {variant.serviceType}
                        </code>
                      </div>
                      <p className="text-sm text-muted-foreground">{variant.description}</p>
                    </div>
                    <ParamTable params={variant.params} className="bg-card" />
                    <ExamplePair endpoint={endpoint} example={variant.example} />
                  </div>
                ))}
              </div>
            </div>
          ) : null}

          {action.examples.map((example) => (
            <ExamplePair key={example.label} endpoint={endpoint} example={example} />
          ))}

          {notes.length > 0 ? (
            <div className="flex gap-2.5 rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900 dark:border-blue-500/25 dark:bg-blue-500/10 dark:text-blue-200">
              <Info className="mt-0.5 size-4 shrink-0" />
              <ul className="space-y-1.5">
                {notes.map((note) => (
                  <li key={note}>{note}</li>
                ))}
              </ul>
            </div>
          ) : null}

          {action.errors.length ? (
            <div className="flex flex-wrap items-center gap-2">
              <span className="inline-flex items-center gap-1.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                <AlertCircle className="size-3.5" />
                {texts.errorsTitle}
              </span>
              {action.errors.map((error) => (
                <code
                  key={error}
                  className="rounded-md bg-rose-100 px-2 py-0.5 font-mono text-[11px] text-rose-700 dark:bg-rose-500/15 dark:text-rose-400"
                >
                  {error}
                </code>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}

export default ActionSection;