"use client";

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

const LABEL = { cancel: "Bestellung stornieren", "request-return": "Rücksendung anfragen" } as const;

export type ReturnableItem = { product: number; productName: string; quantity: number };

export function OrderActionButton({
  orderNumber,
  action,
  items,
}: {
  orderNumber: string;
  action: "cancel" | "request-return";
  items: ReturnableItem[];
}) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [formOpen, setFormOpen] = useState(false);
  const [returnReason, setReturnReason] = useState("");
  // Keyed by product id, string so the input can hold an empty/partial
  // value while typing — parsed to a number only on submit.
  const [quantities, setQuantities] = useState<Record<number, string>>({});

  async function submit(body: Record<string, unknown>) {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/account/orders/${encodeURIComponent(orderNumber)}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!data.ok) {
        setError(data.reason || "Aktion war nicht möglich.");
        setLoading(false);
        return;
      }
      router.refresh();
    } catch {
      setError("Aktion war gerade nicht möglich.");
      setLoading(false);
    }
  }

  async function handleCancel() {
    if (!window.confirm("Bestellung wirklich stornieren?")) return;
    await submit({ action: "cancel" });
  }

  async function handleReturnSubmit() {
    const trimmedReason = returnReason.trim();
    if (!trimmedReason) {
      setError("Bitte kurz einen Grund angeben.");
      return;
    }
    const returnItems = Object.entries(quantities)
      .map(([product, value]) => ({ product: Number(product), returnQuantity: Number(value) || 0 }))
      .filter((line) => line.returnQuantity > 0);
    if (returnItems.length === 0) {
      setError("Bitte mindestens einen Artikel mit Menge auswählen.");
      return;
    }
    await submit({ action: "request-return", returnReason: trimmedReason, returnItems });
  }

  if (action === "cancel") {
    return (
      <div className="flex flex-col gap-2 items-start">
        <button
          type="button"
          onClick={handleCancel}
          disabled={loading}
          className={`px-5 py-3 rounded-sm border border-border hover:border-brand font-bold text-body-sm text-text-primary transition-colors ${loading ? "opacity-70 pointer-events-none" : ""}`}
        >
          {loading ? "…" : LABEL.cancel}
        </button>
        {error && <p className="text-label text-red-600">{error}</p>}
      </div>
    );
  }

  // request-return: a short inline form, not window.prompt() — needs a
  // per-item quantity (partial returns are supported, see the Payload
  // README's "How a Stornorechnung/Gutschrift relates..." section), which
  // a single-line browser prompt can't reasonably capture.
  if (!formOpen) {
    return (
      <button
        type="button"
        onClick={() => setFormOpen(true)}
        className="px-5 py-3 rounded-sm border border-border hover:border-brand font-bold text-body-sm text-text-primary transition-colors"
      >
        {LABEL["request-return"]}
      </button>
    );
  }

  return (
    <div className="flex flex-col gap-4 w-full border border-border rounded-md p-5">
      <p className="font-semibold text-body-sm text-text-primary">Welche Artikel möchtest du zurücksenden?</p>
      <div className="flex flex-col gap-3">
        {items.map((item) => (
          <div key={item.product} className="flex items-center gap-4">
            <span className="flex-1 text-body-sm text-text-primary">{item.productName}</span>
            <label className="flex items-center gap-2 text-label text-text-muted">
              Menge
              <input
                type="number"
                min={0}
                max={item.quantity}
                value={quantities[item.product] ?? ""}
                onChange={(e) => setQuantities((prev) => ({ ...prev, [item.product]: e.target.value }))}
                placeholder="0"
                className="w-16 px-2 py-1 border border-border rounded-sm text-body-sm text-text-primary"
              />
            </label>
            <span className="text-label text-text-muted">/ {item.quantity}</span>
          </div>
        ))}
      </div>
      <label className="flex flex-col gap-1">
        <span className="text-label text-text-muted">Grund der Rücksendung</span>
        <textarea
          value={returnReason}
          onChange={(e) => setReturnReason(e.target.value)}
          rows={2}
          className="px-3 py-2 border border-border rounded-sm text-body-sm text-text-primary"
        />
      </label>
      <div className="flex gap-3 items-center">
        <button
          type="button"
          onClick={handleReturnSubmit}
          disabled={loading}
          className={`px-5 py-3 rounded-sm bg-brand font-bold text-body-sm text-text-primary transition-colors ${loading ? "opacity-70 pointer-events-none" : ""}`}
        >
          {loading ? "…" : "Rücksendung anfragen"}
        </button>
        <button type="button" onClick={() => setFormOpen(false)} className="text-body-sm text-text-muted hover:text-brand transition-colors">
          Abbrechen
        </button>
      </div>
      {error && <p className="text-label text-red-600">{error}</p>}
    </div>
  );
}
