"use client";

import { useState } from "react";
import { createClient } from "@/lib/supabase/client";

export function JudgePointControls({
  memberId,
  onApplyDelta,
  compact = false,
}: {
  memberId: string;
  onApplyDelta: (id: string, delta: number) => void;
  compact?: boolean;
}) {
  const [amount, setAmount] = useState("1");
  const [reason, setReason] = useState("");
  const [pending, setPending] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const parsedAmount = Math.max(1, Math.abs(Number.parseInt(amount, 10) || 1));

  function handleCancel() {
    setPending(0);
    setReason("");
    setError(null);
  }

  async function handleConfirm() {
    if (pending === 0) return;
    setSubmitting(true);
    setError(null);

    const supabase = createClient();
    const { error: rpcError } = await supabase.rpc("award_points", {
      p_target_id: memberId,
      p_delta: pending,
      p_reason: reason.trim() || null,
    });

    setSubmitting(false);

    if (rpcError) {
      setError("Échec, réessaie.");
      return;
    }

    onApplyDelta(memberId, pending);
    setPending(0);
    setReason("");
  }

  const buttonHeight = compact ? "h-6" : "h-7";
  const buttonWidth = compact ? "w-6" : "w-7";
  const inputWidth = compact ? "w-9" : "w-12";

  return (
    <div className="flex flex-wrap items-center gap-1 sm:gap-1.5">
      <button
        type="button"
        onClick={() => setPending((p) => p - parsedAmount)}
        className={`${buttonHeight} ${buttonWidth} shrink-0 rounded-md border border-navy/20 text-sm font-bold text-navy hover:bg-navy/5`}
        aria-label={`Retirer ${parsedAmount} points`}
      >
        −
      </button>
      <input
        type="number"
        min={1}
        value={amount}
        onChange={(event) => setAmount(event.target.value)}
        className={`${buttonHeight} ${inputWidth} rounded-md border border-navy/20 px-1 text-center text-xs`}
      />
      <button
        type="button"
        onClick={() => setPending((p) => p + parsedAmount)}
        className={`${buttonHeight} ${buttonWidth} shrink-0 rounded-md border border-navy/20 text-sm font-bold text-navy hover:bg-navy/5`}
        aria-label={`Ajouter ${parsedAmount} points`}
      >
        +
      </button>

      {!compact && pending !== 0 && (
        <input
          type="text"
          value={reason}
          onChange={(event) => setReason(event.target.value)}
          placeholder="motif (optionnel)"
          className="h-7 w-28 rounded-md border border-navy/20 px-2 text-xs sm:w-36"
        />
      )}

      {pending !== 0 && (
        <>
          <span
            className={`text-sm font-semibold ${pending > 0 ? "text-green-700" : "text-red-700"}`}
          >
            {pending > 0 ? `+${pending}` : pending}
          </span>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={submitting}
            className="rounded-md bg-navy px-2 py-1 text-xs font-medium text-ivory hover:bg-navy/90 disabled:opacity-50"
          >
            {submitting ? "…" : "Confirmer"}
          </button>
          <button
            type="button"
            onClick={handleCancel}
            disabled={submitting}
            className="rounded-md border border-navy/20 px-2 py-1 text-xs text-navy hover:bg-navy/5 disabled:opacity-50"
          >
            Annuler
          </button>
        </>
      )}

      {error && <span className="text-xs text-red-700">{error}</span>}
    </div>
  );
}