"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { LabelCard, type LabelCardData } from "@/components/labels/LabelCard";

export function FolderSelectGrid({ cards }: { cards: LabelCardData[] }) {
  const router = useRouter();
  const [selectMode, setSelectMode] = useState(false);
  const [selected, setSelected] = useState<Set<string>>(new Set());

  function toggle(id: string) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function handleAddToSheet() {
    router.push(`/sheet-builder?labels=${Array.from(selected).join(",")}`);
  }

  return (
    <div>
      <div className="mb-4 flex items-center gap-4">
        <button
          type="button"
          onClick={() => {
            setSelectMode((s) => !s);
            setSelected(new Set());
          }}
          className="text-sm font-medium text-terracotta hover:underline"
        >
          {selectMode ? "Cancel selecting" : "Select labels to print"}
        </button>
        {selectMode && selected.size > 0 && (
          <button
            type="button"
            onClick={handleAddToSheet}
            className="rounded-full bg-terracotta px-4 py-1.5 text-sm font-medium text-white hover:bg-terracotta/90"
          >
            Add {selected.size} to sheet
          </button>
        )}
      </div>

      <ul className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5">
        {cards.map((card) =>
          selectMode ? (
            <li key={card.id}>
              <button
                type="button"
                onClick={() => toggle(card.id)}
                className="relative block w-full"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={card.fileUrl}
                  alt={`${card.brandName} ${card.blendName}`}
                  className={`aspect-square w-full rounded-full border object-cover ${
                    selected.has(card.id)
                      ? "border-terracotta ring-2 ring-terracotta"
                      : "border-charcoal/10"
                  }`}
                />
                {selected.has(card.id) && (
                  <span className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-terracotta text-xs text-white">
                    &#10003;
                  </span>
                )}
                <p className="mt-2 text-center text-xs text-charcoal/70">
                  {card.brandName} - {card.blendName}
                </p>
              </button>
            </li>
          ) : (
            <li key={card.id}>
              <LabelCard label={card} />
            </li>
          ),
        )}
      </ul>
    </div>
  );
}