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

interface DeleteTenantInviteButtonProps {
  inviteId: string;
  propertyAddress?: string;
  invitedEmails?: string[];
}

export default function DeleteTenantInviteButton({ 
  inviteId, 
  propertyAddress, 
  invitedEmails 
}: DeleteTenantInviteButtonProps) {
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    const propertyInfo = propertyAddress ? `"${propertyAddress}"` : "this property";
    const emailCount = invitedEmails?.length || 0;
    const emailInfo = emailCount > 0 ? ` with ${emailCount} invited email${emailCount > 1 ? 's' : ''}` : "";
    
    const confirmed = confirm(
      `Are you sure you want to delete the tenant invite for ${propertyInfo}${emailInfo}? This action cannot be undone.`
    );
    
    if (!confirmed) return;

    setIsDeleting(true);
    try {
      const formData = new FormData();
      formData.append('invite_id', inviteId);
      formData.append('sender', globalThis.location.pathname);

      const response = await fetch('/api/delete/tenant_invite', {
        method: 'POST',
        body: formData
      });

      if (response.redirected) {
        globalThis.location.href = response.url;
      } else if (response.ok) {
        globalThis.location.reload();
      } else {
        alert('Failed to delete tenant invite. Please try again.');
      }
    } catch (_error) {
      alert('Error deleting tenant invite');
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <button
      type="button"
      onClick={handleDelete}
      disabled={isDeleting}
      class="text-sm text-red-600 hover:text-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      {isDeleting ? 'Deleting...' : 'Delete'}
    </button>
  );
}