import { useState } from "react";
import { Check, Copy, Info } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  paymentMethods,
  sendMoneyImage,
  type PaymentMethod,
  type PaymentMethodId,
} from "@/data/payment-methods";
import { useI18n } from "@/i18n";

export function PaymentPanel({
  selectedMethodId,
  onSelectMethod,
  amountLabel,
}: {
  selectedMethodId: PaymentMethodId;
  onSelectMethod: (id: PaymentMethodId) => void;
  amountLabel: string | null;
}) {
  const { t } = useI18n();
  const [copied, setCopied] = useState(false);
  const method =
    paymentMethods.find((m) => m.id === selectedMethodId) ?? (paymentMethods[0] as PaymentMethod);

  async function copyNumber() {
    try {
      await navigator.clipboard.writeText(method.number);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1800);
    } catch {
      setCopied(false);
    }
  }

  return (
    <div className="space-y-4">
      <div role="radiogroup" aria-label={t("pay.group")} className="grid grid-cols-2 gap-2.5">
        {paymentMethods.map((m) => {
          const active = m.id === selectedMethodId;
          return (
            <button
              key={m.id}
              type="button"
              role="radio"
              aria-checked={active}
              onClick={() => onSelectMethod(m.id)}
              className={cn(
                "panel flex items-center gap-3 rounded-2xl p-3 transition-all",
                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
                active ? "neon-glow border-primary/70" : "hover:border-primary/40",
              )}
            >
              <img
                src={m.logo}
                alt={`${m.name} logo`}
                className="size-9 shrink-0 rounded-lg object-cover"
                loading="lazy"
              />
              <span className="min-w-0 text-left">
                <span className="block truncate font-display text-sm font-semibold">{m.name}</span>
                <span className="block text-xs text-muted-foreground">{t("pay.personal")}</span>
              </span>
            </button>
          );
        })}
      </div>

      <div className="panel rounded-2xl p-4">
        <div className="mb-3 overflow-hidden rounded-xl border border-border/70 bg-white">
          <img
            src={sendMoneyImage}
            alt={t("pay.sendMoneyAlt")}
            className="block h-auto w-full object-contain"
            loading="lazy"
          />
        </div>
        <p className="text-xs tracking-wide text-muted-foreground uppercase">
          {t("pay.sendTo", { name: method.name })}
        </p>
        <div className="mt-2 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
          <p className="neon-text truncate font-display text-2xl font-bold tabular-nums">
            {method.number}
          </p>
          <button
            type="button"
            onClick={copyNumber}
            aria-label={t("pay.copyAria", { name: method.name })}
            className="flex shrink-0 items-center gap-1.5 rounded-xl bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
          >
            {copied ? (
              <Check className="size-4" aria-hidden />
            ) : (
              <Copy className="size-4" aria-hidden />
            )}
            {copied ? t("pay.copied") : t("pay.copy")}
          </button>
        </div>
        <span aria-live="polite" className="sr-only">
          {copied ? t("pay.copiedLive") : ""}
        </span>
        <ol className="mt-4 space-y-2 text-sm text-muted-foreground">
          {[t("pay.step1"), t("pay.step2"), t("pay.step3")].map((step, i) => (
            <li key={step} className="flex gap-2">
              <span className="grid size-5 shrink-0 place-items-center rounded-full bg-secondary text-[11px] font-semibold text-secondary-foreground">
                {i + 1}
              </span>
              <span>{step}</span>
            </li>
          ))}
        </ol>
        {amountLabel && (
          <p className="mt-4 flex items-start gap-2 rounded-xl bg-accent/40 p-3 text-sm">
            <Info className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden />
            <span>{t("pay.exact", { amount: amountLabel })}</span>
          </p>
        )}
      </div>
    </div>
  );
}