"use client";

import { 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);
  const [stock, setStock] = useState(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);
    }
  }

  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 && (
        <div role="dialog" aria-label="Adjust stock" 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>
      )}
    </>
  );
}

export default StockAdjustButton;