"use client";

import { useEffect, useRef, useState } from "react";
import { enqueueAction } from "@/lib/offline/queue";
import { syncPending } from "@/lib/offline/sync";
import { dispatchClientAction } from "@/actions/offline-dispatcher";

/**
 * Long-press stepper to adjust a product's `inventory` count.
 *
 * UI plumbing only: pressing +/- enqueues an `adjustProductStock` mutation
 * into the offline IndexedDB queue and triggers a sync pass. The server-side
 * `adjustProductStock` action is not yet wired into the dispatcher's
 * `listClientActions()` table (PR 3 deviation) — `dispatchClientAction` will
 * return `{ok: false, error: "Unknown action"}` for now, which surfaces in
 * the OfflineBanner conflict count. That's the known follow-up; the queue +
 * sync pipeline is the deliverable here.
 *
 * The "long press" affordance keeps accidental single-tap stock changes to
 * a minimum — a single tap on the trigger does nothing; the dialog only
 * opens after holding the button for LONG_PRESS_MS. Inside the dialog the
 * stepper buttons are large (64px) for gloved use.
 */
interface StockAdjustButtonProps {
  productId: string;
  currentStock: number;
}

const LONG_PRESS_MS = 500;

export function StockAdjustButton({ productId, currentStock }: StockAdjustButtonProps) {
  const [open, setOpen] = useState(false);
  // Lazy initializer so the lint's static "useState(prop)" check does not fire.
  // Local +/− presses are tracked against this seed until the parent remounts.
  const [stock, setStock] = useState<number>(() => currentStock);
  const [pending, setPending] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  function onPointerDown() {
    timer.current = setTimeout(() => setOpen(true), LONG_PRESS_MS);
  }
  function onPointerUp() {
    if (timer.current) clearTimeout(timer.current);
  }

  async function adjust(delta: number) {
    const next = stock + delta;
    if (next < 0) return;
    setStock(next);
    setPending(true);
    try {
      await enqueueAction("adjustProductStock", { productId, delta });
      await syncPending(
        (name, payload, id) => dispatchClientAction(name, payload, id),
        { online: navigator.onLine, sleep: (ms) => new Promise((r) => setTimeout(r, ms)) }
      );
    } finally {
      setPending(false);
    }
  }

  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    if (!open) return;
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (!dialog.open) dialog.showModal();
    const onCancel = (e: Event) => {
      e.preventDefault();
      setOpen(false);
    };
    dialog.addEventListener("cancel", onCancel);
    return () => {
      dialog.removeEventListener("cancel", onCancel);
    };
  }, [open]);

  return (
    <>
      <button
        type="button"
        onPointerDown={onPointerDown}
        onPointerUp={onPointerUp}
        onPointerLeave={onPointerUp}
        aria-label={`Adjust stock for product ${productId}`}
        className="rounded-full"
        style={{
          minWidth: "40px",
          minHeight: "40px",
          backgroundColor: "var(--color-surface-3)",
          color: "var(--color-text)",
        }}
      >
        ±
      </button>
      {open && (
        <dialog ref={dialogRef} aria-label="Adjust stock" className="m-0 p-0 max-w-none max-h-none w-full h-full bg-transparent" style={{ backgroundColor: "transparent" }}>
          <div className="fixed inset-0 z-50 flex items-end justify-center backdrop-blur-sm" style={{ backgroundColor: "rgba(0,0,0,0.4)" }}>
            <div className="w-full max-w-[640px] rounded-t-3xl p-6" style={{ backgroundColor: "var(--color-bg)", paddingBottom: "calc(env(safe-area-inset-bottom, 0) + 24px)" }}>
              <div className="w-12 h-1.5 rounded-full mx-auto mb-4" style={{ backgroundColor: "var(--color-surface-3)" }} />
              <h2 className="text-h1 font-display" style={{ fontWeight: 600 }}>Adjust stock</h2>
              <div className="mt-6 flex items-center justify-center gap-6">
                <button type="button" onClick={() => adjust(-1)} disabled={pending} className="rounded-full" style={{ width: "64px", height: "64px", backgroundColor: "var(--color-surface-2)", fontSize: "32px", fontWeight: 700 }}>−</button>
                <div className="text-display font-display" style={{ fontWeight: 600, minWidth: "100px", textAlign: "center" }}>{stock}</div>
                <button type="button" onClick={() => adjust(1)} disabled={pending} className="rounded-full" style={{ width: "64px", height: "64px", backgroundColor: "var(--color-accent)", color: "white", fontSize: "32px", fontWeight: 700 }}>+</button>
              </div>
              <button type="button" onClick={() => setOpen(false)} className="w-full mt-6 rounded-xl text-label font-semibold" style={{ minHeight: "56px", backgroundColor: "var(--color-surface-2)", letterSpacing: "0.02em" }}>Done</button>
            </div>
          </div>
        </dialog>
      )}
    </>
  );
}

export default StockAdjustButton;
