import Link from "next/link";

import { Icon } from "@/components/icons";
import { Badge, Notice } from "@/components/ui";
import { requirePageActor } from "@/lib/auth/guard";
import { getVisibleQrTypes } from "@/lib/qr/availability";

// Welche Typen sichtbar sind, steht in der Datenbank und ist jederzeit
// änderbar — die Startseite darf deshalb nicht vorgerendert werden.
export const dynamic = "force-dynamic";

export default async function HomePage() {
  await requirePageActor();
  const types = await getVisibleQrTypes();
  const usableCount = types.filter((entry) => entry.usable).length;

  return (
    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
      <div className="max-w-2xl">
        <h1 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
          Was möchtest du erstellen?
        </h1>
        <p className="mt-3 text-base text-slate-600">
          Wähle einen Typ, gib deine Daten ein und lade den fertigen QR-Code als
          PNG oder SVG herunter. Auf Wunsch als dynamischer Code, dessen Ziel du
          später änderst, ohne den Code neu drucken zu müssen.
        </p>
      </div>

      {usableCount === 0 ? (
        <div className="mt-9 max-w-2xl">
          <Notice tone="warning">
            {types.length === 0
              ? "Zurzeit ist kein QR-Typ freigegeben."
              : "Zurzeit ist kein QR-Typ zum Erstellen freigegeben — die unten gezeigten Typen folgen erst in einer späteren Version."}{" "}
            Unter{" "}
            <Link href="/verwaltung/typen" className="font-medium underline">
              Verwaltung → QR-Typen
            </Link>{" "}
            lassen sich Typen wieder freigeben.
          </Notice>
        </div>
      ) : null}

      {types.length === 0 ? null : (
        <ul className="mt-9 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {types.map(({ qrType, usable }) => {
            const tile = (
              <>
                <span
                  className={
                    usable
                      ? "flex size-11 shrink-0 items-center justify-center rounded-xl bg-accent-soft text-accent-text"
                      : "flex size-11 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-400"
                  }
                >
                  <Icon name={qrType.icon} className="size-6" />
                </span>
                <span className="min-w-0 flex-1">
                  <span className="flex flex-wrap items-center gap-2">
                    <span
                      className={
                        usable
                          ? "font-semibold text-slate-900"
                          : "font-semibold text-slate-500"
                      }
                    >
                      {qrType.title}
                    </span>
                    {/* Kein Abzeichen „Beliebt“ mehr: Es stand an jedem
                        nutzbaren Typ und sagte damit nichts. Hier steht nur
                        noch, was die Wahl beeinflusst — nämlich wenn ein Typ
                        zwingend eine Kurz-URL braucht und deshalb nicht ohne
                        diesen Server funktioniert. */}
                    {!usable ? (
                      <Badge tone="soon">Bald verfügbar</Badge>
                    ) : !qrType.supportsStatic ? (
                      <Badge tone="neutral">nur dynamisch</Badge>
                    ) : null}
                  </span>
                  <span
                    className={
                      usable
                        ? "mt-1 block text-sm text-slate-600"
                        : "mt-1 block text-sm text-slate-400"
                    }
                  >
                    {qrType.description}
                  </span>
                </span>
              </>
            );

            return (
              <li key={qrType.id}>
                {usable ? (
                  <Link
                    href={`/erstellen/${qrType.id}`}
                    className="flex h-full items-start gap-4 rounded-2xl border border-slate-200 bg-surface p-4 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
                  >
                    {tile}
                  </Link>
                ) : (
                  <div
                    aria-disabled="true"
                    title={`„${qrType.title}“ folgt in einer späteren Version`}
                    className="flex h-full cursor-not-allowed items-start gap-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50/60 p-4"
                  >
                    {tile}
                  </div>
                )}
              </li>
            );
          })}
        </ul>
      )}

      {usableCount > 0 && usableCount < types.length ? (
        <p className="mt-8 text-sm text-slate-500">
          Die übrigen Typen folgen in einer späteren Version. Welche Kacheln
          hier erscheinen, legst du unter{" "}
          <Link
            href="/verwaltung/typen"
            className="font-medium text-slate-600 underline"
          >
            Verwaltung → QR-Typen
          </Link>{" "}
          fest.
        </p>
      ) : null}
    </div>
  );
}