"use client";

/**
 * Bulk-user-action toolbar + selection state.
 *
 * Wraps the users table. Each row has a checkbox (rendered by the parent
 * page); this component reads them via DOM query when an action fires —
 * keeps the table itself a pure server-rendered list and lets us avoid
 * passing the whole user array through React state.
 *
 * Actions:
 *   - Set role (USER / ADMIN)
 *   - Set plan (FREE / PREMIUM)
 *   - Delete (gated by typing confirmation count)
 */
import { useEffect, useRef, useState, useTransition } from "react";
import { Trash2, ShieldCheck, Crown, Check, AlertCircle, Loader2, X } from "lucide-react";
import { bulkSetRole, bulkSetPlan, bulkDelete } from "@/app/admin/users/_actions";

type Result = {
  ok: boolean;
  changed: number;
  skipped: number;
  message?: string;
};

export function BulkUserActions() {
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [pending, startTransition] = useTransition();
  const [result, setResult] = useState<Result | null>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [confirmText, setConfirmText] = useState("");
  const tickerRef = useRef<number | null>(null);

  // Watch checkbox changes via event delegation so server-rendered rows
  // can flow in/out without re-rendering this component's selection state.
  useEffect(() => {
    function update() {
      const boxes = document.querySelectorAll<HTMLInputElement>(
        'input[type="checkbox"][data-user-id]'
      );
      const next = new Set<string>();
      boxes.forEach((b) => {
        if (b.checked && b.dataset.userId) next.add(b.dataset.userId);
      });
      setSelected(next);
    }

    function onChange(e: Event) {
      const t = e.target as HTMLInputElement | null;
      if (t && t.dataset && t.dataset.userId) update();
    }

    document.addEventListener("change", onChange);
    // Initial sync (in case some boxes are pre-checked).
    update();

    // Master select-all checkbox
    const master = document.getElementById("user-select-all") as HTMLInputElement | null;
    function onMaster() {
      const boxes = document.querySelectorAll<HTMLInputElement>(
        'input[type="checkbox"][data-user-id]'
      );
      boxes.forEach((b) => {
        b.checked = !!master?.checked;
      });
      update();
    }
    master?.addEventListener("change", onMaster);

    return () => {
      document.removeEventListener("change", onChange);
      master?.removeEventListener("change", onMaster);
    };
  }, []);

  // Auto-clear result after 5s
  useEffect(() => {
    if (!result) return;
    if (tickerRef.current) window.clearTimeout(tickerRef.current);
    tickerRef.current = window.setTimeout(() => setResult(null), 5000);
    return () => {
      if (tickerRef.current) window.clearTimeout(tickerRef.current);
    };
  }, [result]);

  function buildFormData(extra: Record<string, string>): FormData {
    const fd = new FormData();
    selected.forEach((id) => fd.append("userIds", id));
    for (const [k, v] of Object.entries(extra)) fd.set(k, v);
    return fd;
  }

  function clearSelection() {
    document
      .querySelectorAll<HTMLInputElement>('input[type="checkbox"][data-user-id]')
      .forEach((b) => {
        b.checked = false;
      });
    const master = document.getElementById("user-select-all") as HTMLInputElement | null;
    if (master) master.checked = false;
    setSelected(new Set());
  }

  function runRole(role: "USER" | "ADMIN") {
    if (selected.size === 0) return;
    startTransition(async () => {
      const r = await bulkSetRole(buildFormData({ role }));
      setResult(r);
      if (r.ok) clearSelection();
    });
  }

  function runPlan(plan: "FREE" | "PREMIUM") {
    if (selected.size === 0) return;
    startTransition(async () => {
      const r = await bulkSetPlan(buildFormData({ plan }));
      setResult(r);
      if (r.ok) clearSelection();
    });
  }

  function runDelete() {
    if (selected.size === 0) return;
    if (confirmText !== String(selected.size)) return;
    startTransition(async () => {
      const r = await bulkDelete(buildFormData({ confirm: confirmText }));
      setResult(r);
      if (r.ok) {
        clearSelection();
        setConfirmDelete(false);
        setConfirmText("");
      }
    });
  }

  if (selected.size === 0 && !result) return null;

  return (
    <div className="border-brand-gold/30 bg-bg-elevated/80 sticky top-0 z-10 mb-3 rounded-xl border p-3 backdrop-blur-md">
      <div className="flex flex-wrap items-center gap-2">
        {selected.size > 0 ? (
          <>
            <span className="text-ink-primary text-xs font-semibold">{selected.size} đã chọn</span>
            <button
              type="button"
              onClick={clearSelection}
              className="text-ink-muted hover:text-brand-red inline-flex items-center gap-1 text-xs"
            >
              <X className="h-3 w-3" />
              Bỏ chọn
            </button>

            <div className="bg-stroke-subtle mx-1 h-4 w-px" aria-hidden="true" />

            <span className="text-ink-muted text-[11px] tracking-wider uppercase">Role:</span>
            <button
              type="button"
              onClick={() => runRole("USER")}
              disabled={pending}
              className="border-stroke-default hover:border-brand-gold/50 inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs disabled:opacity-50"
            >
              USER
            </button>
            <button
              type="button"
              onClick={() => runRole("ADMIN")}
              disabled={pending}
              className="border-stroke-default hover:border-brand-gold/50 inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs disabled:opacity-50"
            >
              <Crown className="h-3 w-3" />
              ADMIN
            </button>

            <span className="text-ink-muted ml-2 text-[11px] tracking-wider uppercase">Plan:</span>
            <button
              type="button"
              onClick={() => runPlan("FREE")}
              disabled={pending}
              className="border-stroke-default hover:border-brand-gold/50 inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs disabled:opacity-50"
            >
              FREE
            </button>
            <button
              type="button"
              onClick={() => runPlan("PREMIUM")}
              disabled={pending}
              className="border-stroke-default hover:border-brand-gold/50 inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs disabled:opacity-50"
            >
              <ShieldCheck className="h-3 w-3" />
              PREMIUM
            </button>

            <div className="bg-stroke-subtle mx-1 h-4 w-px" aria-hidden="true" />

            {confirmDelete ? (
              <div className="flex items-center gap-1.5">
                <span className="text-brand-red-light text-xs">
                  Gõ &quot;{selected.size}&quot; để xác nhận:
                </span>
                <input
                  autoFocus
                  value={confirmText}
                  onChange={(e) => setConfirmText(e.target.value)}
                  className="bg-bg-inset border-brand-red/40 text-ink-primary w-16 rounded border px-2 py-1 text-xs focus:outline-none"
                />
                <button
                  type="button"
                  onClick={runDelete}
                  disabled={pending || confirmText !== String(selected.size)}
                  className="bg-brand-red text-bg-base inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-semibold disabled:opacity-40"
                >
                  {pending ? (
                    <Loader2 className="h-3 w-3 animate-spin" />
                  ) : (
                    <Trash2 className="h-3 w-3" />
                  )}
                  Xóa hẳn
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setConfirmDelete(false);
                    setConfirmText("");
                  }}
                  className="text-ink-muted text-xs"
                >
                  Hủy
                </button>
              </div>
            ) : (
              <button
                type="button"
                onClick={() => setConfirmDelete(true)}
                disabled={pending}
                className="border-brand-red/40 text-brand-red-light hover:bg-brand-red/10 inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs disabled:opacity-50"
              >
                <Trash2 className="h-3 w-3" />
                Xóa
              </button>
            )}

            {pending ? (
              <span className="text-ink-muted ml-2 inline-flex items-center gap-1 text-xs">
                <Loader2 className="h-3 w-3 animate-spin" />
                Đang xử lý...
              </span>
            ) : null}
          </>
        ) : null}
      </div>

      {result ? (
        <div
          className={`mt-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs ${
            result.ok
              ? "border border-emerald-500/40 bg-emerald-500/10 text-emerald-300"
              : "border-brand-red/40 bg-brand-red/10 text-brand-red-light border"
          }`}
        >
          {result.ok ? <Check className="h-3 w-3" /> : <AlertCircle className="h-3 w-3" />}
          {result.ok
            ? `Đã cập nhật ${result.changed} user${result.skipped ? ` · bỏ qua ${result.skipped}` : ""}`
            : result.message || "Lỗi không xác định"}
        </div>
      ) : null}
    </div>
  );
}