"use client";

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

export function InboxStatusActions({
  emailId,
  currentStatus,
}: {
  emailId: string;
  currentStatus: string;
}) {
  const router = useRouter();
  const [status, setStatus] = useState(currentStatus);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  async function updateStatus(nextStatus: string) {
    setLoading(true);
    setMessage(null);
    const res = await fetch(`/api/inbox/${emailId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: nextStatus }),
    });
    const json = await res.json();
    setLoading(false);
    if (!res.ok) {
      setMessage(json.error ?? "فشل تحديث الحالة");
      return;
    }
    setStatus(nextStatus);
    setMessage("تم تحديث الحالة");
    router.refresh();
  }

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-2">
        <button
          type="button"
          onClick={() => void updateStatus("new")}
          disabled={loading}
          className="rounded border border-neutral-300 px-3 py-1 text-sm disabled:opacity-50"
        >
          تعليم كـ new
        </button>
        <button
          type="button"
          onClick={() => void updateStatus("ignored")}
          disabled={loading}
          className="rounded border border-neutral-300 px-3 py-1 text-sm disabled:opacity-50"
        >
          تعليم كـ ignored
        </button>
        <button
          type="button"
          onClick={() => void updateStatus("spam")}
          disabled={loading}
          className="rounded border border-neutral-300 px-3 py-1 text-sm disabled:opacity-50"
        >
          تعليم كـ spam
        </button>
      </div>
      <p className="text-sm text-neutral-600">الحالة الحالية: {status}</p>
      {message ? <p className="text-sm text-neutral-700">{message}</p> : null}
    </div>
  );
}