"use client";

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

const OPTIONS = {
  pickup: [
    ["processing", "Processing"],
    ["ready", "Ready for pickup"],
    ["collected", "Collected"],
  ],
  delivery: [
    ["processing", "Processing"],
    ["shipped", "Shipped"],
    ["delivered", "Delivered"],
  ],
} as const;

export default function FulfillmentControl({
  orderId,
  method,
  status,
  note,
}: {
  orderId: string;
  method: "pickup" | "delivery";
  status: string;
  note: string;
}) {
  const router = useRouter();
  const [value, setValue] = useState(status);
  const [trackingNote, setTrackingNote] = useState(note);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function save(next: string, nextNote: string) {
    setBusy(true);
    setError(null);
    const res = await fetch(`/api/dashboard/merch/orders/${orderId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: next, trackingNote: nextNote || null }),
    });
    setBusy(false);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(data.error ?? "Could not update");
      return;
    }
    router.refresh();
  }

  return (
    <div className="space-y-1">
      <select
        value={value}
        disabled={busy}
        onChange={(e) => {
          setValue(e.target.value);
          save(e.target.value, trackingNote);
        }}
        className="input"
      >
        {OPTIONS[method].map(([v, label]) => (
          <option key={v} value={v}>
            {label}
          </option>
        ))}
      </select>
      {method === "delivery" && (
        <input
          value={trackingNote}
          disabled={busy}
          onChange={(e) => setTrackingNote(e.target.value)}
          onBlur={() => trackingNote !== note && save(value, trackingNote)}
          placeholder="Courier / tracking note"
          className="input"
        />
      )}
      {error && <p className="text-xs text-red-600">{error}</p>}
    </div>
  );
}