"use client";

import { useState } from "react";
import Link from "next/link";
import type { LabelStatus, RejectionReason } from "@prisma/client";
import { REJECTION_REASON_LABELS, REJECTION_REASONS } from "@/lib/rejection-reasons";
import { bulkDeleteLabels, bulkRejectLabels } from "@/lib/actions/labels";
import { RejectLabelForm } from "./RejectLabelForm";
import { DeleteLabelButton } from "./DeleteLabelButton";
import { CellarChoiceControl } from "./CellarChoiceControl";

type LabelRow = {
  id: string;
  status: LabelStatus;
  rejectionReason: RejectionReason | null;
  brandName: string;
  blendName: string;
  uploaderUsername: string;
  fileUrl: string | null;
  isCellarChoice: boolean;
};

export function LabelsBulkList({
  labels,
  viewerRole,
}: {
  labels: LabelRow[];
  viewerRole: string;
}) {
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [bulkReason, setBulkReason] = useState<RejectionReason>(REJECTION_REASONS[0]);
  const [bulkNote, setBulkNote] = useState("");
  const [isPending, setIsPending] = useState(false);

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

  async function handleBulkReject() {
    setIsPending(true);
    try {
      await bulkRejectLabels(Array.from(selected), bulkReason, bulkNote.trim() || null);
      setSelected(new Set());
      setBulkNote("");
    } finally {
      setIsPending(false);
    }
  }

  async function handleBulkDelete() {
    if (!confirm(`Delete ${selected.size} label(s) permanently?`)) return;
    setIsPending(true);
    try {
      await bulkDeleteLabels(Array.from(selected));
      setSelected(new Set());
    } finally {
      setIsPending(false);
    }
  }

  return (
    <div>
      {selected.size > 0 && (
        <div className="sticky top-0 z-10 mt-6 flex flex-wrap items-center gap-3 rounded-lg border border-terracotta/30 bg-warm-white p-4 shadow">
          <span className="text-sm font-medium text-charcoal">
            {selected.size} selected
          </span>
          <select
            value={bulkReason}
            onChange={(e) => setBulkReason(e.target.value as RejectionReason)}
            className="rounded border border-charcoal/20 bg-cream px-2 py-1.5 text-sm text-charcoal"
          >
            {REJECTION_REASONS.map((reason) => (
              <option key={reason} value={reason}>
                {REJECTION_REASON_LABELS[reason]}
              </option>
            ))}
          </select>
          <input
            type="text"
            value={bulkNote}
            onChange={(e) => setBulkNote(e.target.value)}
            placeholder="Note (optional)"
            className="rounded border border-charcoal/20 bg-cream px-2 py-1.5 text-sm text-charcoal"
          />
          <button
            type="button"
            onClick={handleBulkReject}
            disabled={isPending}
            className="rounded-full border border-terracotta px-4 py-1.5 text-sm font-medium text-terracotta hover:bg-terracotta/10 disabled:opacity-60"
          >
            Reject selected
          </button>
          <button
            type="button"
            onClick={handleBulkDelete}
            disabled={isPending}
            className="rounded-full bg-terracotta px-4 py-1.5 text-sm font-medium text-white hover:bg-terracotta/90 disabled:opacity-60"
          >
            Delete selected
          </button>
          <button
            type="button"
            onClick={() => setSelected(new Set())}
            className="text-sm text-charcoal/60 hover:underline"
          >
            Clear
          </button>
        </div>
      )}

      <ul className="mt-8 flex flex-col gap-4">
        {labels.map((label) => (
          <li
            key={label.id}
            className="flex flex-col gap-3 rounded-lg border border-charcoal/10 bg-warm-white p-4 sm:flex-row sm:items-start"
          >
            <input
              type="checkbox"
              checked={selected.has(label.id)}
              onChange={() => toggle(label.id)}
              className="mt-1"
              aria-label={`Select ${label.brandName} - ${label.blendName}`}
            />
            {label.fileUrl && (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={label.fileUrl}
                alt=""
                className="h-16 w-16 shrink-0 rounded-full border border-charcoal/10 object-cover"
              />
            )}
            <div className="flex-1">
              <Link
                href={`/labels/${label.id}`}
                className="font-medium text-charcoal hover:text-terracotta"
              >
                {label.brandName} - {label.blendName}
              </Link>
              <p className="text-sm text-charcoal/60">
                by {label.uploaderUsername} &middot; {label.status}
                {label.rejectionReason
                  ? ` (${REJECTION_REASON_LABELS[label.rejectionReason]})`
                  : ""}
              </p>
            </div>
            <div className="flex flex-col gap-2 sm:w-72">
              {label.status !== "rejected" && (
                <RejectLabelForm labelId={label.id} />
              )}
              {viewerRole === "admin" && (
                <CellarChoiceControl
                  labelId={label.id}
                  isCellarChoice={label.isCellarChoice}
                />
              )}
              <DeleteLabelButton labelId={label.id} />
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}