"use client";

import { useEffect, useState } from "react";

import { api, downloadUrl, type AdminEvent } from "@/lib/api/browser";

import { Card, Empty, ErrorNote, Loading } from "./ui";

/**
 * Per-event QR download (task 3.10, spec qr-codes).
 *
 * SVG for print because it stays sharp at any size a printer is given; PNG for anything
 * that will not take vector artwork. Both are generated at error-correction level H, so a
 * code survives a fingerprint, a fold, or a badly lit hall.
 */
export default function QrView() {
  const [events, setEvents] = useState<AdminEvent[] | null>(null);
  const [error, setError] = useState<unknown>(null);

  useEffect(() => {
    api
      .events()
      .then(setEvents)
      .catch(setError);
  }, []);

  if (error) return <ErrorNote error={error} />;
  if (!events) return <Loading />;
  if (events.length === 0)
    return (
      <Card>
        <Empty>No events yet.</Empty>
      </Card>
    );

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {events.map((event) => (
        <Card key={event.id}>
          <h2 className="font-semibold">{event.title_en}</h2>
          <p className="mt-0.5 text-xs text-stone-500">/e/{event.slug}</p>

          <div className="mt-3 rounded-lg border border-stone-200 bg-white p-3">
            {/* The API returns the SVG directly, so this renders the real artwork the host
                is about to print rather than a mock-up of it. `next/image` is wrong here:
                it would proxy an authenticated, session-scoped endpoint through the image
                optimizer, and there is nothing to optimize about vector output. */}
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={downloadUrl.eventQr(event.slug, "svg")}
              alt={`QR code linking to the ${event.title_en} invitation page`}
              className="mx-auto block size-40"
            />
          </div>

          <div className="mt-3 flex gap-2">
            <a
              href={downloadUrl.eventQr(event.slug, "svg")}
              download={`qr-${event.slug}.svg`}
              className="inline-flex min-h-11 flex-1 items-center justify-center rounded-md border border-stone-300 bg-white text-sm font-medium hover:bg-stone-50"
            >
              SVG
            </a>
            <a
              href={downloadUrl.eventQr(event.slug, "png")}
              download={`qr-${event.slug}.png`}
              className="inline-flex min-h-11 flex-1 items-center justify-center rounded-md border border-stone-300 bg-white text-sm font-medium hover:bg-stone-50"
            >
              PNG
            </a>
          </div>

          {!event.is_published && (
            <p className="mt-3 rounded-md bg-amber-50 px-2 py-1.5 text-xs text-amber-900">
              This event is not published, so the linked page returns a 404. Publish it
              before printing.
            </p>
          )}
        </Card>
      ))}
    </div>
  );
}