integratedhub/islands/AddPaymentMethodModal.tsx

import { useCallback, useRef, useState } from "preact/hooks";
import {
  encryptDataWithStoredPassword,
  getEncryptionPassword,
} from "../helpers.ts";

interface AddPaymentMethodModalProps {
  userId?: string;
}

export default function AddPaymentMethodModal(
  { userId }: AddPaymentMethodModalProps,
) {
  const formRef = useRef<HTMLFormElement>(null);
  const encryptedRoutingNumberRef = useRef<HTMLInputElement>(null);
  const encryptedAccountNumberRef = useRef<HTMLInputElement>(null);
  const bankNameRef = useRef<HTMLInputElement>(null);
  const accountTypeRef = useRef<HTMLSelectElement>(null);
  const routingNumberRef = useRef<HTMLInputElement>(null);
  const accountNumberRef = useRef<HTMLInputElement>(null);
  const isDefaultRef = useRef<HTMLInputElement>(null);
  const [loading, setLoading] = useState(false);

  // Only encrypt on submit, not on every keystroke - prevents V8 overload
  const handleEncryptData = useCallback(async () => {
    // Get current values from the form inputs
    const routingNumber = routingNumberRef.current?.value || "";
    const accountNumber = accountNumberRef.current?.value || "";

    // Check if encryption is available and encrypt sensitive fields
    if (userId && (routingNumber || accountNumber)) {
      const encryptionPassword = getEncryptionPassword(userId);

      if (encryptionPassword) {
        try {
          // Encrypt routing number
          if (routingNumber && encryptedRoutingNumberRef.current) {
            const encryptedRoutingNumber = await encryptDataWithStoredPassword(
              userId,
              routingNumber,
            );
            if (encryptedRoutingNumber) {
              encryptedRoutingNumberRef.current.value = encryptedRoutingNumber;
            }
          }

          // Encrypt account number
          if (accountNumber && encryptedAccountNumberRef.current) {
            const encryptedAccountNumber = await encryptDataWithStoredPassword(
              userId,
              accountNumber,
            );
            if (encryptedAccountNumber) {
              encryptedAccountNumberRef.current.value = encryptedAccountNumber;
            }
          }
        } catch (error) {
          console.error("Failed to encrypt payment method data:", error);
        }
      }
    }
  }, [userId]);

  const handleAddClick = async () => {
    // Validate form
    const bankName = bankNameRef.current?.value?.trim() || "";
    const accountType = accountTypeRef.current?.value || "";
    const routingNumber = routingNumberRef.current?.value?.trim() || "";
    const accountNumber = accountNumberRef.current?.value?.trim() || "";

    if (!bankName || !accountType || !routingNumber || !accountNumber) {
      alert("Please fill in all required fields.");
      return;
    }

    if (routingNumber.length !== 9) {
      alert("Routing number must be 9 digits.");
      return;
    }

    if (accountNumber.length < 4) {
      alert("Account number must be at least 4 digits.");
      return;
    }

    setLoading(true);
    // Encrypt data before submission
    await handleEncryptData();

    // Clear plaintext fields if encryption was successful
    if (userId && (routingNumber || accountNumber)) {
      const encryptionPassword = getEncryptionPassword(userId);

      if (encryptionPassword) {
        if (routingNumberRef.current) routingNumberRef.current.value = "";
        if (accountNumberRef.current) accountNumberRef.current.value = "";
      }
    }

    // Submit the form
    setTimeout(() => {
      if (formRef.current) {
        formRef.current.submit();
      }
    }, 100);
  };

  return (
    <div class="bg-white rounded-lg p-8 shadow-lg max-w-md w-full">
      <h3 class="text-xl font-bold mb-4">Add Payment Method</h3>
      <form
        ref={formRef}
        method="POST"
        action="/api/create/payment_method"
        class="flex flex-col gap-4"
      >
        <input
          type="hidden"
          name="sender"
          value="/tenant/payment-methods"
        />
        <input
          ref={encryptedRoutingNumberRef}
          type="hidden"
          name="routing_number_encrypted"
          value=""
        />
        <input
          ref={encryptedAccountNumberRef}
          type="hidden"
          name="account_number_encrypted"
          value=""
        />

        <div class="flex flex-col gap-1">
          <label for="bank_name" class="text-sm font-medium text-gray-700">
            Bank Name
          </label>
          <input
            ref={bankNameRef}
            class="border rounded px-3 py-2"
            placeholder="e.g., Chase Bank"
            name="bank_name"
            required
          />
        </div>

        <div class="flex flex-col gap-1">
          <label for="account_type" class="text-sm font-medium text-gray-700">
            Account Type
          </label>
          <select
            ref={accountTypeRef}
            class="w-full border p-2 rounded"
            name="account_type"
            required
          >
            <option value="">Select account type</option>
            <option value="checking">Checking</option>
            <option value="savings">Savings</option>
          </select>
        </div>

        <div class="flex flex-col gap-1">
          <label for="routing_number" class="text-sm font-medium text-gray-700">
            Routing Number
          </label>
          <input
            ref={routingNumberRef}
            class="border rounded px-3 py-2"
            placeholder="9-digit routing number"
            type="text"
            inputMode="numeric"
            pattern="[0-9]{9}"
            maxLength={9}
            name="routing_number"
            required
          />
        </div>

        <div class="flex flex-col gap-1">
          <label for="account_number" class="text-sm font-medium text-gray-700">
            Account Number
          </label>
          <input
            ref={accountNumberRef}
            class="border rounded px-3 py-2"
            placeholder="Account number"
            type="text"
            inputMode="numeric"
            pattern="[0-9]+"
            minLength={4}
            name="account_number"
            required
          />
        </div>

        <div class="flex items-center gap-2">
          <input
            ref={isDefaultRef}
            id="is_default"
            name="is_default"
            type="checkbox"
            value="true"
            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
          />
          <label for="is_default" class="text-sm text-gray-700">
            Set as default payment method
          </label>
        </div>
      </form>

      <div class="flex gap-2 justify-end mt-4">
        <a
          href="/tenant/payment-methods"
          class="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400 text-center inline-block"
        >
          Cancel
        </a>
        <button
          type="button"
          onClick={handleAddClick}
          class="px-4 py-2 rounded bg-green-600 text-white hover:bg-green-700"
          disabled={loading}
        >
          {loading ? "Adding..." : "Add"}
        </button>
      </div>
    </div>
  );
}