// islands/LeaseApprovalButtons.tsx
import { useState } from "preact/hooks";

interface LeaseApprovalButtonsProps {
  approvalId: string;
}

export default function LeaseApprovalButtons({ approvalId }: LeaseApprovalButtonsProps) {
  const [isApproving, setIsApproving] = useState(false);
  const [isRejecting, setIsRejecting] = useState(false);

  const handleApprove = async () => {
    setIsApproving(true);
    try {
      const response = await fetch(`/api/lease/approve`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ lease_id: approvalId })
      });
      if (response.ok) {
        globalThis.location.reload();
      } else {
        alert('Failed to approve lease');
      }
    } catch (_error) {
      alert('Error approving lease');
    } finally {
      setIsApproving(false);
    }
  };

  const handleReject = async () => {
    const reason = prompt('Rejection reason (optional):');
    if (reason === null) return; // User cancelled
    
    setIsRejecting(true);
    try {
      const response = await fetch(`/api/lease/reject`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          lease_id: approvalId,
          rejection_reason: reason || ''
        })
      });
      if (response.ok) {
        globalThis.location.reload();
      } else {
        alert('Failed to reject lease');
      }
    } catch (_error) {
      alert('Error rejecting lease');
    } finally {
      setIsRejecting(false);
    }
  };

  return (
    <div class="flex space-x-2">
      <button
        type="button"
        onClick={handleApprove}
        disabled={isApproving || isRejecting}
        class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded hover:bg-green-200 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isApproving ? 'Approving...' : 'Approve'}
      </button>
      <button
        type="button"
        onClick={handleReject}
        disabled={isApproving || isRejecting}
        class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded hover:bg-red-200 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isRejecting ? 'Rejecting...' : 'Reject'}
      </button>
    </div>
  );
}