"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Notification } from "./ui";

export function CartLineControls({
  quantity,
  variantId,
}: Readonly<{ quantity: number; variantId: string }>) {
  const router = useRouter();
  const [pending, setPending] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  async function mutate(operation: "decrement" | "increment" | "remove") {
    setPending(true);
    setMessage(null);
    try {
      const response = await fetch("/api/cart/items", {
        body: JSON.stringify({
          idempotencyKey: crypto.randomUUID(),
          operation,
          ...(operation === "remove" ? {} : { quantity: 1 }),
          variantId,
        }),
        headers: { "content-type": "application/json" },
        method: "POST",
      });
      const payload: unknown = await response.json();
      if (!response.ok) {
        setMessage(readApiMessage(payload));
        return;
      }
      router.refresh();
    } catch {
      setMessage("The cart request could not be completed.");
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="form-stack">
      <div aria-label="Cart line actions" className="cluster" role="group">
        <button
          className="button button--secondary"
          disabled={pending}
          onClick={() => mutate(quantity === 1 ? "remove" : "decrement")}
          type="button"
        >
          Decrease
        </button>
        <button
          className="button button--secondary"
          disabled={pending || quantity >= 99}
          onClick={() => mutate("increment")}
          type="button"
        >
          Increase
        </button>
        <button
          className="button button--secondary"
          disabled={pending}
          onClick={() => mutate("remove")}
          type="button"
        >
          Remove
        </button>
      </div>
      {message === null ? null : (
        <Notification tone="error">
          <p>{message}</p>
        </Notification>
      )}
    </div>
  );
}

function readApiMessage(value: unknown): string {
  if (
    typeof value === "object" &&
    value !== null &&
    "error" in value &&
    typeof value.error === "object" &&
    value.error !== null &&
    "message" in value.error &&
    typeof value.error.message === "string"
  ) {
    return value.error.message;
  }
  return "The cart request could not be completed.";
}