"use client";

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

export function DefaultCapacityControl({ initialCapacity }: { initialCapacity: number }) {
  const router = useRouter();
  const [capacity, setCapacity] = useState(initialCapacity);
  const [draft, setDraft] = useState(String(initialCapacity));
  const [editing, setEditing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  async function saveCapacity(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const nextCapacity = Number(draft);
    if (!Number.isInteger(nextCapacity) || nextCapacity < 1 || nextCapacity > 500) {
      setError("Use a whole number from 1 to 500.");
      return;
    }

    setSaving(true);
    setError("");
    try {
      const response = await fetch("/api/admin/settings/default-capacity", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ capacity: nextCapacity }),
      });
      const body = (await response.json()) as { capacity?: number; error?: string };
      if (!response.ok || typeof body.capacity !== "number") {
        throw new Error(body.error || "Unable to save the default capacity.");
      }

      setCapacity(body.capacity);
      setDraft(String(body.capacity));
      setEditing(false);
      router.refresh();
    } catch (saveError) {
      setError(saveError instanceof Error ? saveError.message : "Unable to save the default capacity.");
    } finally {
      setSaving(false);
    }
  }

  if (!editing) {
    return (
      <button
        type="button"
        onClick={() => setEditing(true)}
        className="group inline-flex items-center gap-2 rounded-xl border border-slate-200/80 bg-white px-3.5 py-2 text-xs font-semibold text-[#0D1B2A] shadow-xs transition hover:border-slate-300 hover:shadow-sm"
        aria-label={`Edit default event capacity, currently ${capacity} players`}
      >
        <span>Default capacity · <strong className="text-[#1D4ED8]">{capacity} players</strong></span>
        <span className="material-symbols-outlined text-[16px] text-slate-400 transition group-hover:text-[#1D4ED8] group-hover:rotate-[-8deg]">
          edit
        </span>
      </button>
    );
  }

  return (
    <div>
      <form
        onSubmit={saveCapacity}
        className="flex items-center gap-1.5 rounded-xl border border-slate-200/80 bg-white p-1 shadow-xs"
      >
        <label className="flex items-center gap-2 pl-2 text-xs font-semibold text-slate-500">
          <span className="hidden sm:inline">Capacity</span>
          <input
            type="number"
            min="1"
            max="500"
            step="1"
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            className="h-8 w-16 rounded-lg bg-slate-100 px-2 text-center text-sm font-bold text-[#0D1B2A] outline-none ring-1 ring-transparent transition focus:bg-white focus:ring-2 focus:ring-[#1D4ED8]"
            autoFocus
            aria-label="Default event capacity"
          />
        </label>
        <button
          type="submit"
          disabled={saving}
          className="h-8 rounded-lg bg-[#1D4ED8] px-3 text-xs font-semibold text-white transition hover:bg-[#1e40af] disabled:cursor-wait disabled:opacity-60"
        >
          {saving ? "Saving" : "Save"}
        </button>
        <button
          type="button"
          onClick={() => {
            setDraft(String(capacity));
            setError("");
            setEditing(false);
          }}
          className="grid h-8 w-8 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
          aria-label="Cancel capacity edit"
        >
          <span className="material-symbols-outlined text-[17px]">close</span>
        </button>
      </form>
      {error ? <p className="mt-1 text-right text-[10px] font-semibold text-rose-600">{error}</p> : null}
      {!error ? <p className="mt-1 text-right text-[10px] font-medium text-slate-500">New events only</p> : null}
    </div>
  );
}