// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// Carte de membre IMPRIMABLE au format carte bancaire (CR80 : 85,6 × 54 mm),
// recto (identité) / verso (QR + zone NFC). À imprimer à l'échelle 100 %,
// avec les arrière-plans activés, puis coller un autocollant NFC (NTAG215)
// au dos, programmé avec l'URL d'identification du membre.
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import QRCode from "qrcode";
import { getSessionUser } from "@/lib/auth";
import { ensureKaId } from "@/lib/db";
import { roleCard } from "@/lib/roles";
import PrintButton from "./PrintButton";

export const metadata: Metadata = {
  title: "Carte imprimable | Groupe KA",
  robots: { index: false },
};

export const dynamic = "force-dynamic";

function fmtDate(iso: string | null): string {
  if (!iso) return "";
  const d = new Date(iso.includes("T") ? iso : iso.replace(" ", "T") + "Z");
  if (Number.isNaN(d.getTime())) return "";
  return d.toLocaleDateString("fr-CA", { month: "2-digit", year: "numeric" });
}

export default async function CarteImprimable() {
  const user = await getSessionUser();
  if (!user) redirect("/connexion?next=%2Fcompte%2Fcarte");
  const kaId = user.kaId ?? ensureKaId(user.id);
  const url = `https://www.groupe-ka.com/m/${kaId}`;
  const qr = await QRCode.toDataURL(url, {
    margin: 0,
    width: 400,
    color: { dark: "#141814", light: "#ffffff" },
  });

  return (
    <main className="print-page mx-auto max-w-2xl px-4 pb-16 sm:px-6">
      <section className="no-print pt-10">
        <p className="kicker">Carte physique · à imprimer</p>
        <h1 className="gk-display mt-3 text-[clamp(24px,4.5vw,36px)] leading-[1.02] font-bold tracking-[-0.03em] uppercase">
          Votre carte, <span className="hl">en vrai</span>
        </h1>
        <p className="mt-3 max-w-lg text-[13.5px] text-ink-2">
          Format carte bancaire (85,6 × 54 mm). Imprimez à l&apos;échelle
          100 % avec les arrière-plans activés, découpez le long des repères,
          et collez un autocollant NFC au dos (zone indiquée).
        </p>
        <div className="mt-5 flex flex-wrap gap-3">
          <PrintButton />
          <a href="/compte" className="btn btn-ghost">
            ← Mon compte
          </a>
        </div>
      </section>

      <div className="print-cards mt-8 flex flex-col items-center gap-8">
        {/* ---------- RECTO ---------- */}
        <div className="pcard pcard-front">
          <div className="pcard-watermark" aria-hidden="true">
            KA
          </div>
          <div className="pcard-head">
            <span className="pcard-brand">
              Groupe <span className="pcard-ka">KA</span>
            </span>
            <span className="pcard-label">CARTE DE MEMBRE</span>
          </div>
          <div className="pcard-id">
            <span className="pcard-id-label">KA-ID</span>
            <span className="pcard-id-value">{kaId}</span>
          </div>
          <div className="pcard-foot">
            <div className="pcard-holder">
              <span className="pcard-name">{user.name || user.email}</span>
              {roleCard(user.role) && (
                <span className="pcard-role">{roleCard(user.role)}</span>
              )}
              <span className="pcard-since">
                MEMBRE DEPUIS {fmtDate(user.createdAt)}
              </span>
            </div>
            {user.avatarUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img className="pcard-avatar" src={user.avatarUrl} alt="" />
            ) : (
              <span className="pcard-avatar pcard-avatar-empty">
                {(user.name || user.email).charAt(0).toUpperCase()}
              </span>
            )}
          </div>
        </div>

        {/* ---------- VERSO ---------- */}
        <div className="pcard pcard-back">
          <div className="pcard-back-left">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img className="pcard-qr" src={qr} alt={`Code QR — ${url}`} />
          </div>
          <div className="pcard-back-right">
            <p className="pcard-back-title">
              Tapez la carte (NFC)
              <br />
              ou scannez le code
            </p>
            <p className="pcard-back-url">groupe-ka.com/m/{kaId.slice(3)}</p>
            <div className="pcard-nfc" aria-hidden="true">
              <span className="pcard-nfc-ico">)))</span> zone NFC — coller la
              puce ici
            </div>
            <p className="pcard-back-foot">
              Identité vérifiable en ligne · Lou·Ka — Immo·Ka — Vrai-Prix —
              ValoPlex — Auto·Ka — Fabri·Ka — Food·Ka
            </p>
          </div>
        </div>
      </div>

      <p className="no-print gk-mono mt-8 text-[11px] text-ink-3">
        Astuce : imprimez sur du papier cartonné (200 g+) ou plastifiez.
        L&apos;autocollant NFC se colle au dos, dans la zone « NFC ».
      </p>
    </main>
  );
}