"use client";

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

export default function EmergencyActions({ eventId, status }: { eventId: string; status: string }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  async function act(action: "ACKNOWLEDGE" | "RESOLVE") {
    setLoading(true);
    try {
      await fetch(`/api/emergency/${eventId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action }),
      });
      router.refresh();
    } finally {
      setLoading(false);
    }
  }

  if (status === "RESOLVED") return <span className="text-slate-500 text-xs">Resolved</span>;

  return (
    <div className="flex gap-2 justify-end">
      {status === "ACTIVE" && (
        <button disabled={loading} onClick={() => act("ACKNOWLEDGE")} className="text-amber-400 hover:text-amber-300 text-xs">
          Acknowledge
        </button>
      )}
      <button disabled={loading} onClick={() => act("RESOLVE")} className="text-emerald-400 hover:text-emerald-300 text-xs">
        Resolve
      </button>
    </div>
  );
}