"use client";

import { useState, useEffect, useRef, useEffectEvent } from "react";
import { type WholesaleOrder, recordWholesaleDeposit } from "@/actions/wholesale";

type Props = {
  order: WholesaleOrder;
  onClose: () => void;
  onFulfilled: () => void;
};

export default function DepositModal({ order, onClose, onFulfilled }: Props) {
  const maxDeposit = Number(order.balance_due);
  const [amount, setAmount] = useState(
    maxDeposit > 0 ? maxDeposit.toFixed(2) : ""
  );
  const [method, setMethod] = useState("cash");
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<{ kind: "success" | "error"; text: string } | null>(null);
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    dialog.showModal();
    return () => {
      dialog.close();
    };
  }, []);

  const onCloseEvent = useEffectEvent(() => {
    onClose();
  });

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    const handleCancel = (e: Event) => {
      e.preventDefault();
      onCloseEvent();
    };
    dialog.addEventListener("cancel", handleCancel);
    return () => dialog.removeEventListener("cancel", handleCancel);
  }, []);

  const handleBackdropClick = (e: React.MouseEvent) => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    const rect = dialog.getBoundingClientRect();
    if (
      e.clientX < rect.left ||
      e.clientX > rect.right ||
      e.clientY < rect.top ||
      e.clientY > rect.bottom
    ) {
      onClose();
    }
  };

  useEffect(() => {
    function onPointerDown(e: PointerEvent) {
      const dialog = dialogRef.current;
      if (!dialog || !dialog.open) return;
      const rect = dialog.getBoundingClientRect();
      if (
        e.clientX < rect.left ||
        e.clientX > rect.right ||
        e.clientY < rect.top ||
        e.clientY > rect.bottom
      ) {
        onClose();
      }
    }
    document.addEventListener("pointerdown", onPointerDown);
    return () => document.removeEventListener("pointerdown", onPointerDown);
  }, [onClose]);

  async function handleConfirm() {
    const parsed = Number(amount);
    if (!amount || isNaN(parsed) || parsed <= 0) {
      setMsg({ kind: "error", text: "Please enter a valid amount." });
      return;
    }
    if (parsed > maxDeposit) {
      setMsg({ kind: "error", text: `Deposit cannot exceed the remaining balance of $${maxDeposit.toFixed(2)}.` });
      return;
    }
    setSaving(true);
    const result = await recordWholesaleDeposit(order.id, parsed, method);
    setSaving(false);
    if (result.success) {
      onFulfilled();
      onClose();
    } else {
      setMsg({ kind: "error", text: result.error ?? "Failed to record deposit." });
    }
  }

  return (
    <dialog
      ref={dialogRef}
      aria-label="Record deposit"
      className="bg-transparent backdrop:bg-black/30 p-4 border-0 max-w-none max-h-none"
    >
      <div className="bg-white rounded-2xl p-6 w-96 shadow-xl mx-auto my-auto">
        <h3 className="font-semibold text-slate-900 mb-4">Record Deposit</h3>
        <p className="text-sm text-slate-500 mb-4">
          Balance due: <span className="font-semibold text-slate-700">${Number(order.balance_due).toFixed(2)}</span>
        </p>
        {msg && (
          <div className={`mb-3 rounded-lg border px-3 py-2 text-sm ${
            msg.kind === "success"
              ? "border-green-200 bg-green-50 text-green-700"
              : "border-red-200 bg-red-50 text-red-700"
          }`}>{msg.text}</div>
        )}
        <div className="space-y-3">
          <div>
            <label htmlFor="fld-1-amount"  className="block text-sm font-medium text-slate-700 mb-1">Amount ($)</label>
            <input id="fld-1-amount"  aria-label="Number"
              type="number"
              value={amount}
              onChange={e => setAmount(e.target.value)}
              step="0.01"
              min="0"
              max={maxDeposit}
              className="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-slate-900"
            />
          </div>
          <div>
            <label htmlFor="fld-2-method"  className="block text-sm font-medium text-slate-700 mb-1">Method</label>
            <select id="fld-2-method"  aria-label="Select"
              value={method}
              onChange={e => setMethod(e.target.value)}
              className="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-slate-900"
            >
              <option value="cash">Cash</option>
              <option value="check">Check</option>
              <option value="wire">Wire</option>
              <option value="card">Card</option>
            </select>
          </div>
        </div>
        <div className="mt-4 flex gap-3">
          <button type="button"
            onClick={handleConfirm}
            disabled={saving || !amount || Number(amount) > maxDeposit}
            className="rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700 disabled:opacity-50"
          >
            {saving ? "Saving..." : "Record Deposit"}
          </button>
          <button type="button"
            onClick={onClose}
            className="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
          >
            Cancel
          </button>
        </div>
      </div>
    </dialog>
  );
}
