"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { useConfirm } from "@/components/shared/use-confirm";

export default function ReportActions({ reportId }: { reportId: number }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const { confirm: askConfirm, dialog: confirmDialog } = useConfirm();

  const handleDismiss = async () => {
    if (!(await askConfirm({ title: "Dismiss report", message: "Dismiss this report? It will be deleted." }))) return;
    setLoading(true);
    try {
      const res = await fetch(`/api/admin/reports/${reportId}`, {
        method: "DELETE",
      });
      if (res.ok) {
        router.refresh();
      }
    } catch {
      // ignore
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      {confirmDialog}
      <button
        onClick={handleDismiss}
        disabled={loading}
        className="text-red-400 hover:text-red-300 text-sm transition-colors disabled:opacity-50"
      >
        {loading ? "..." : "Dismiss"}
      </button>
    </>
  );
}