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

interface AddPaymentMethodDialogProps {
  onClose: () => void;
  userId?: string;
}

type FieldErrorState = {
  bank_name: boolean;
  account_type: boolean;
  routing_number: boolean;
  account_number: boolean;
};

export default function AddPaymentMethodDialog(
  { onClose, userId }: AddPaymentMethodDialogProps,
) {
  const formRef = useRef<HTMLFormElement>(null);
  const firstInputRef = useRef<HTMLInputElement>(null);
  const [loading, setLoading] = useState(false);
  const [fieldErrors, setFieldErrors] = useState<FieldErrorState>({
    bank_name: false,
    account_type: false,
    routing_number: false,
    account_number: false,
  });

  useEffect(() => {
    // Focus first input when dialog opens
    setTimeout(() => {
      firstInputRef.current?.focus();
    }, 100);
  }, []);

  const clearFieldError = (field: keyof FieldErrorState) => {
    setFieldErrors((prev) => ({ ...prev, [field]: false }));
  };

  const getInputErrorClass = (hasError: boolean) => {
    return hasError ? "border-red-500 focus:border-red-500" : "";
  };

  const addNewPaymentMethod = async () => {
    if (!formRef.current) return;

    // Collect form data
    const formData = new FormData(formRef.current);
    const bankName = formData.get("bank_name")?.toString().trim() || "";
    const accountType = formData.get("account_type")?.toString() || "";
    const routingNumber = formData.get("routing_number")?.toString().trim() ||
      "";
    const accountNumber = formData.get("account_number")?.toString().trim() ||
      "";
    const isDefault = formData.get("is_default") === "true";
    const sender = typeof location !== "undefined" ? location.pathname : "/";

    const validation = {
      bank_name: !bankName,
      account_type: !accountType,
      routing_number: !routingNumber || routingNumber.length !== 9,
      account_number: !accountNumber || accountNumber.length < 4,
    };
    setFieldErrors(validation);

    if (
      validation.bank_name || validation.account_type ||
      validation.routing_number || validation.account_number
    ) {
      return;
    }

    setLoading(true);
    localStorage.setItem("lock-route", "/tenant/payment-methods?modal=off");

    // Build submission data
    const submitData = new FormData();
    submitData.set("sender", sender);
    submitData.set("bank_name", bankName);
    submitData.set("account_type", accountType);
    submitData.set("is_default", isDefault ? "true" : "false");

    // Encrypt sensitive fields if password is available
    const encryptionPassword = userId ? getEncryptionPassword(userId) : null;

    if (encryptionPassword && (routingNumber || accountNumber)) {
      try {
        // Encrypt routing number
        const encryptedRoutingNumber = await encryptDataWithStoredPassword(
          userId!,
          routingNumber,
        );

        // Encrypt account number
        const encryptedAccountNumber = await encryptDataWithStoredPassword(
          userId!,
          accountNumber,
        );

        if (encryptedRoutingNumber && encryptedAccountNumber) {
          submitData.set("routing_number_encrypted", encryptedRoutingNumber);
          submitData.set("account_number_encrypted", encryptedAccountNumber);
          // Send empty plaintext when encrypted
          submitData.set("routing_number", "");
          submitData.set("account_number", "");
        } else {
          throw new Error("Encryption returned empty result");
        }
      } catch (error) {
        console.error("Encryption failed:", error);
        alert("Failed to encrypt payment method data. Please try again.");
        setLoading(false);
        return;
      }
    } else {
      // No encryption available, send plaintext (not recommended for production)
      console.warn("No encryption password available, sending plaintext");
      submitData.set("routing_number", routingNumber);
      submitData.set("account_number", accountNumber);
    }

    // Submit the form
    try {
      const response = await fetch("/api/create/payment_method", {
        method: "POST",
        body: submitData,
      });

      const data = await response.json();

      if (data.success) {
        // Redirect to payment methods page
        globalThis.location.href = "/tenant/payment-methods";
      } else {
        console.error("Failed to add payment method:", data.error);
        alert(data.error || "Failed to add payment method. Please try again.");
        setLoading(false);
      }
    } catch (error) {
      console.error("Error adding payment method:", error);
      alert("Failed to add payment method. Please try again.");
      setLoading(false);
    }
  };

  return (
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-gray-900 mb-4">
            Add Payment Method
          </h2>

          <form ref={formRef}>
            <div class="flex flex-col gap-1 my-4">
              <label
                for="bank_name"
                class="text-sm font-medium text-gray-700"
              >
                Bank Name
              </label>
              <input
                ref={firstInputRef}
                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                  getInputErrorClass(fieldErrors.bank_name)
                }`}
                name="bank_name"
                placeholder="e.g., Chase Bank"
                type="text"
                required
                onInput={() => clearFieldError("bank_name")}
              />
              <div
                class={`text-red-500 text-xs min-h-4 ${
                  fieldErrors.bank_name ? "visible" : "invisible"
                }`}
                aria-live="polite"
              >
                Bank name is required.
              </div>
            </div>

            <div class="flex flex-col gap-1 my-4">
              <label
                for="account_type"
                class="text-sm font-medium text-gray-700"
              >
                Account Type
              </label>
              <select
                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                  getInputErrorClass(fieldErrors.account_type)
                }`}
                name="account_type"
                required
                onInput={() => clearFieldError("account_type")}
              >
                <option value="">Select account type</option>
                <option value="checking">Checking</option>
                <option value="savings">Savings</option>
              </select>
              <div
                class={`text-red-500 text-xs min-h-4 ${
                  fieldErrors.account_type ? "visible" : "invisible"
                }`}
                aria-live="polite"
              >
                Account type is required.
              </div>
            </div>

            <div class="flex flex-col gap-1 my-4">
              <label
                for="routing_number"
                class="text-sm font-medium text-gray-700"
              >
                Routing Number
              </label>
              <input
                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                  getInputErrorClass(fieldErrors.routing_number)
                }`}
                name="routing_number"
                placeholder="9-digit routing number"
                type="text"
                inputMode="numeric"
                pattern="[0-9]{9}"
                maxLength={9}
                required
                onInput={() => clearFieldError("routing_number")}
              />
              <div
                class={`text-red-500 text-xs min-h-4 ${
                  fieldErrors.routing_number ? "visible" : "invisible"
                }`}
                aria-live="polite"
              >
                Routing number must be 9 digits.
              </div>
            </div>

            <div class="flex flex-col gap-1 my-4">
              <label
                for="account_number"
                class="text-sm font-medium text-gray-700"
              >
                Account Number
              </label>
              <input
                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                  getInputErrorClass(fieldErrors.account_number)
                }`}
                name="account_number"
                placeholder="Account number"
                type="text"
                inputMode="numeric"
                pattern="[0-9]+"
                minLength={4}
                required
                onInput={() => clearFieldError("account_number")}
              />
              <div
                class={`text-red-500 text-xs min-h-4 ${
                  fieldErrors.account_number ? "visible" : "invisible"
                }`}
                aria-live="polite"
              >
                Account number is required (min 4 digits).
              </div>
            </div>

            <div class="flex items-center gap-2 my-4">
              <input
                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 justify-end gap-2 mt-6">
            <button
              type="button"
              class={`px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 ${
                loading ? "opacity-70" : ""
              }`}
              onClick={() => {
                localStorage.setItem(
                  "lock-route",
                  "/tenant/payment-methods?modal=off",
                );
                setLoading(true);
                onClose();
              }}
              disabled={loading}
            >
              Cancel
            </button>
            <button
              type="button"
              class={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 ${
                loading ? "opacity-70" : ""
              }`}
              disabled={loading}
              onClick={addNewPaymentMethod}
            >
              {loading ? "Adding..." : "Add Payment Method"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}