import Link from "next/link";
import type { CheckinAcceptedData } from "@alqove/api-client";
import { statusPath } from "@/lib/checkin/status-link";

/**
 * Success screen. Shows the short check-in code prominently, a "show staff your
 * phone" instruction, and a button to the signed status page. The status link
 * is persisted by the caller so it survives a reload / is reachable from the SMS.
 */
export function Confirmation({
  token,
  accepted,
  storeName,
}: {
  token: string;
  accepted: CheckinAcceptedData;
  storeName: string;
}) {
  const href =
    accepted.status_url ||
    (accepted.status_token ? statusPath(token, accepted.status_token) : "#");

  return (
    <div className="mx-auto flex w-full max-w-md flex-col items-center gap-6 text-center">
      <div>
        <div className="mb-2 text-4xl" aria-hidden="true">
          ✅
        </div>
        <h1 className="text-xl font-semibold text-slate-900">
          You&apos;re checked in at {storeName}
        </h1>
        <p className="mt-2 text-sm text-slate-600">
          Show staff your phone, or give them your check-in code. Bring your
          containers to the counter — no need to wait.
        </p>
      </div>

      {accepted.checkin_code ? (
        <div className="w-full rounded-xl border border-slate-200 bg-white p-6">
          <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
            Your check-in code
          </p>
          <p
            className="mt-1 text-3xl font-bold tracking-widest text-slate-900"
            data-testid="checkin-code"
          >
            {accepted.checkin_code}
          </p>
        </div>
      ) : null}

      <Link
        href={href}
        className="min-h-12 w-full rounded-lg bg-slate-900 px-4 py-3 text-base font-semibold text-white"
      >
        Track my check-in
      </Link>
    </div>
  );
}