"use client";

import { useTransition } from 'react';
import { updateReportStatus } from '@/app/actions/moderation';
import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
import { toast } from 'react-hot-toast';

interface Props {
  reportId: string;
}

export default function ReportActionButtons({ reportId }: Props) {
  const [isPending, startTransition] = useTransition();

  const handleAction = (status: 'RESOLVED' | 'DISMISSED') => {
    startTransition(async () => {
      const result = await updateReportStatus(reportId, status);
      if (result.success) {
        toast.success(status === 'RESOLVED' ? "Signalement résolu" : "Signalement rejeté");
      } else {
        toast.error(result.error || "Une erreur est survenue");
      }
    });
  };

  return (
    <div className="flex gap-2 justify-end">
      <button 
        onClick={() => handleAction('RESOLVED')}
        disabled={isPending}
        className="btn-verify px-3 py-1.5 text-xs"
        title="Marquer comme résolu"
      >
        <div className="flex items-center gap-1.5">
          {isPending ? <Loader2 className="w-3 h-3 animate-spin" /> : <CheckCircle className="w-3 h-3" />}
          Résoudre
        </div>
      </button>
      
      <button 
        onClick={() => handleAction('DISMISSED')}
        disabled={isPending}
        className="btn-unverify px-3 py-1.5 text-xs bg-slate-700 hover:bg-slate-600 border-none"
        title="Rejeter le signalement"
      >
        <div className="flex items-center gap-1.5">
          {isPending ? <Loader2 className="w-3 h-3 animate-spin" /> : <XCircle className="w-3 h-3" />}
          Rejeter
        </div>
      </button>
    </div>
  );
}
