import { Gem, Check } from "lucide-react";
import { cn } from "@/lib/utils";
import { formatBDT, formatDiamonds, packages, type TopUpPackage } from "@/data/packages";
import { useI18n } from "@/i18n";

function PackageCard({
  pack,
  label,
  selected,
  onSelect,
}: {
  pack: TopUpPackage;
  label: string;
  selected: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onSelect}
      aria-pressed={selected}
      className={cn(
        "panel relative flex min-h-[104px] flex-col justify-between rounded-2xl p-3 text-left transition-all duration-200",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:scale-[0.98]",
        selected
          ? "neon-glow border-primary/70"
          : "hover:border-primary/40 hover:shadow-[0_0_24px_-14px_var(--neon)]",
      )}
    >
      <div className="flex items-start gap-2">
        <Gem className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden />
        <span className="min-w-0 font-display text-sm leading-tight font-semibold">{label}</span>
      </div>
      <div className="mt-2 flex items-center justify-between gap-2">
        <span className="neon-text font-display text-lg font-bold">{formatBDT(pack.price)}</span>
        {selected && (
          <span className="grid size-5 shrink-0 place-items-center rounded-full bg-primary">
            <Check className="size-3.5 text-primary-foreground" aria-hidden />
          </span>
        )}
      </div>
    </button>
  );
}

export function PackageGrid({
  selectedId,
  onSelect,
}: {
  selectedId: number | null;
  onSelect: (id: number) => void;
}) {
  const { t } = useI18n();

  return (
    <div className="space-y-6">
      <section aria-labelledby="diamond-packs">
        <h3 id="diamond-packs" className="mb-3 text-sm font-semibold text-muted-foreground">
          {t("packs.heading")} ({packages.length})
        </h3>
        <div
          role="group"
          aria-label={t("packs.group")}
          className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-4"
        >
          {packages.map((pack) => (
            <PackageCard
              key={pack.id}
              pack={pack}
              label={`${formatDiamonds(pack.diamonds)} ${t("packs.diamonds")}`}
              selected={selectedId === pack.id}
              onSelect={() => onSelect(pack.id)}
            />
          ))}
        </div>
      </section>
    </div>
  );
}