export const metadata = {
  title: "API Documentation | Cellar Labels",
};

function Endpoint({
  method,
  path,
  description,
  params,
  example,
}: {
  method: string;
  path: string;
  description: string;
  params?: { name: string; description: string }[];
  example: string;
}) {
  return (
    <div className="mt-10 border-t border-charcoal/10 pt-8">
      <div className="flex items-center gap-3">
        <span className="rounded bg-terracotta/10 px-2 py-1 font-mono text-xs font-semibold text-terracotta">
          {method}
        </span>
        <code className="font-mono text-sm text-charcoal">{path}</code>
      </div>
      <p className="mt-2 text-sm text-charcoal/70">{description}</p>
      {params && params.length > 0 && (
        <ul className="mt-3 flex flex-col gap-1">
          {params.map((param) => (
            <li key={param.name} className="text-sm text-charcoal/70">
              <code className="font-mono text-charcoal">{param.name}</code> -{" "}
              {param.description}
            </li>
          ))}
        </ul>
      )}
      <pre className="mt-3 overflow-x-auto rounded-lg bg-charcoal/5 p-4 text-xs text-charcoal">
        <code>{example}</code>
      </pre>
    </div>
  );
}

export default function ApiDocsPage() {
  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="font-heading text-4xl font-semibold text-terracotta">
        API Documentation
      </h1>
      <p className="mt-4 text-charcoal/70">
        Read-only access to the Cellar Labels catalog for approved
        integration partners (currently The Pipe Tool). All endpoints return
        JSON and only include active, publicly visible labels.
      </p>

      <div className="mt-10 border-t border-charcoal/10 pt-8">
        <h2 className="font-heading text-2xl font-semibold text-charcoal">
          Authentication
        </h2>
        <p className="mt-2 text-sm text-charcoal/70">
          Every request must include an API key in the Authorization header.
          API keys are issued by a Cellar Labels admin and are not
          self-service. Contact the site owner to request one.
        </p>
        <pre className="mt-3 overflow-x-auto rounded-lg bg-charcoal/5 p-4 text-xs text-charcoal">
          <code>Authorization: Bearer YOUR_API_KEY</code>
        </pre>
        <p className="mt-3 text-sm text-charcoal/70">
          Requests are limited to 60 per minute per API key. Exceeding this
          returns a 429 status.
        </p>
      </div>

      <Endpoint
        method="GET"
        path="/api/v1/labels/search"
        description="Search active labels by brand and/or blend name."
        params={[
          { name: "brand", description: "Exact brand name (optional)" },
          { name: "blend", description: "Exact blend name (optional)" },
        ]}
        example={`GET /api/v1/labels/search?brand=Dunhill&blend=Nightcap

{
  "results": [
    {
      "id": "cl_abc123",
      "brand": { "name": "Dunhill", "slug": "dunhill" },
      "blend": { "id": "bl_xyz", "name": "Nightcap", "slug": "nightcap" },
      "uploaderUsername": "collector1",
      "fileUrl": "https://cellarlabels.com/api/storage/labels/.../original.png",
      "width": 1600,
      "height": 1600,
      "thumbsUpCount": 12,
      "downloadCount": 40,
      "cellarChoice": true,
      "madeByRequest": false,
      "createdAt": "2026-07-01T12:00:00.000Z",
      "url": "https://cellarlabels.com/labels/cl_abc123"
    }
  ]
}`}
      />

      <Endpoint
        method="GET"
        path="/api/v1/labels/:id"
        description="Fetch a single active label by its ID."
        example={`GET /api/v1/labels/cl_abc123

{
  "id": "cl_abc123",
  "brand": { "name": "Dunhill", "slug": "dunhill" },
  "blend": { "id": "bl_xyz", "name": "Nightcap", "slug": "nightcap" },
  "uploaderUsername": "collector1",
  "fileUrl": "https://cellarlabels.com/api/storage/labels/.../original.png",
  "width": 1600,
  "height": 1600,
  "thumbsUpCount": 12,
  "downloadCount": 40,
  "cellarChoice": true,
  "madeByRequest": false,
  "createdAt": "2026-07-01T12:00:00.000Z",
  "url": "https://cellarlabels.com/labels/cl_abc123"
}`}
      />

      <Endpoint
        method="GET"
        path="/api/v1/brands/:slug/labels"
        description="All active labels for a brand, newest first (up to 100)."
        example={`GET /api/v1/brands/dunhill/labels

{ "results": [ /* same label shape as above */ ] }`}
      />

      <Endpoint
        method="GET"
        path="/api/v1/blends/:id/labels"
        description="All active labels for a specific blend, newest first (up to 100)."
        example={`GET /api/v1/blends/bl_xyz/labels

{ "results": [ /* same label shape as above */ ] }`}
      />

      <div className="mt-10 border-t border-charcoal/10 pt-8">
        <h2 className="font-heading text-2xl font-semibold text-charcoal">
          Errors
        </h2>
        <p className="mt-2 text-sm text-charcoal/70">
          Errors are returned as <code className="font-mono">{"{ \"error\": \"message\" }"}</code>{" "}
          with an appropriate status code (401 for missing/invalid keys, 404
          for unknown resources, 429 for rate limiting).
        </p>
      </div>
    </main>
  );
}