'use client';

import { useState } from 'react';
import { Check, Copy, QrCode as QrIcon } from 'lucide-react';
import { Dialog } from '@/components/ui/Dialog';
import { QrCode, useShareUrl } from './QrCode';
import { useMessages } from '@/i18n/client';

/** Re-show a participant's QR (e.g. they walked away before scanning it). */
export function ParticipantQrButton({ token, name, claimed }: { token: string; name: string; claimed: boolean }) {
  const t = useMessages().admin.qr;
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const url = useShareUrl(`/r/${token}`);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label={t.show(name)}
        className="inline-flex size-9 items-center justify-center rounded-full text-ink-soft transition-colors hover:bg-canvas hover:text-ink"
      >
        <QrIcon className="size-4" />
      </button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title={name}
        description={
          claimed ? t.claimed : t.unclaimed
        }
      >
        <QrCode path={`/r/${token}`} className="mx-auto w-64 ring-1 ring-line" />
        <button
          type="button"
          onClick={async () => {
            await navigator.clipboard.writeText(url);
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
          }}
          className="mx-auto mt-6 flex items-center gap-2 text-[13px] font-medium text-ink-soft hover:text-ink"
        >
          {copied ? <Check className="size-4 text-wood" /> : <Copy className="size-4" />}
          {copied ? t.copied : t.copy}
        </button>
      </Dialog>
    </>
  );
}