// islands/PaymentMethodsList.tsx
import { PaymentMethod } from "../services/paymentService.ts";
import { useEffect, useState } from "preact/hooks";
import { PopAddPaymentMethodDialog } from "./dialogs/PopAddPaymentMethodDialog.tsx";
import {
  decryptDataWithStoredPassword,
  getEncryptionPassword,
} from "../helpers.ts";

interface Props {
  paymentMethods: PaymentMethod[];
  userId?: string;
  openModal?: boolean;
}

interface ProcessedPaymentMethod extends PaymentMethod {
  maskedAccountNumber?: string;
  maskedRoutingNumber?: string;
}

export default function PaymentMethodsList(
  { paymentMethods, userId, openModal = false }: Props,
) {
  const [_popAddPaymentMethod, popupAddPaymentMethodDialog] =
    PopAddPaymentMethodDialog({
      userId,
      defaultOpen: openModal,
    });
  const [processedMethods, setProcessedMethods] = useState<
    ProcessedPaymentMethod[]
  >([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [_isOpeningModal, _setIsOpeningModal] = useState(openModal);

  // Process payment methods on component mount and when paymentMethods or userId change
  useEffect(() => {
    setTimeout(() => {
      const lockRoute = localStorage.getItem("lock-route");
      const url = new URL(globalThis.location.href);
      const currentRoute = url.pathname + url.search;

      if (lockRoute && lockRoute === currentRoute) {
        localStorage.removeItem("lock-route");
      }
    }, 100);

    if (!userId) {
      setProcessedMethods(paymentMethods as ProcessedPaymentMethod[]);
      return;
    }

    const processMethods = async () => {
      setIsProcessing(true);
      const encryptionPassword = getEncryptionPassword(userId);

      if (!encryptionPassword) {
        // No encryption key available, use methods as-is
        setProcessedMethods(paymentMethods as ProcessedPaymentMethod[]);
        setIsProcessing(false);
        return;
      }

      const updatedMethods: ProcessedPaymentMethod[] = [];

      for (const method of paymentMethods) {
        const processedMethod: ProcessedPaymentMethod = { ...method };

        // Decrypt and mask account number
        if (method.account_number_encrypted) {
          try {
            const decryptedData = await decryptDataWithStoredPassword(
              userId,
              method.account_number_encrypted,
            );
            if (decryptedData) {
              const accountNumber = decryptedData;
              // Show only last 4 digits
              processedMethod.maskedAccountNumber = "****" +
                accountNumber.slice(-4);
            }
          } catch (error) {
            console.error("Failed to decrypt account number:", error);
          }
        }

        // Decrypt and mask routing number
        if (method.routing_number_encrypted) {
          try {
            const decryptedData = await decryptDataWithStoredPassword(
              userId,
              method.routing_number_encrypted,
            );
            if (decryptedData) {
              const routingNumber = decryptedData;
              // Show only last 4 digits
              processedMethod.maskedRoutingNumber = "****" +
                routingNumber.slice(-4);
            }
          } catch (error) {
            console.error("Failed to decrypt routing number:", error);
          }
        }

        updatedMethods.push(processedMethod);
      }

      setProcessedMethods(updatedMethods);
      setIsProcessing(false);
    };

    processMethods();
  }, [paymentMethods, userId]);

  const handleSetDefault = async (methodId: string) => {
    try {
      const response = await fetch("/api/update/payment_method", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: methodId, is_default: true }),
      });

      const data = await response.json();

      if (data.success) {
        // Refresh the page to show updated default
        globalThis.location.reload();
      } else {
        console.error("Failed to set default payment method:", data.error);
        alert("Failed to set default payment method");
      }
    } catch (error) {
      console.error("Error setting default payment method:", error);
      alert("Failed to set default payment method");
    }
  };

  if (isProcessing) {
    return (
      <div class="flex items-center justify-center py-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
      </div>
    );
  }

  return (
    <>
      {popupAddPaymentMethodDialog}

      <div class="space-y-4">
        {processedMethods.length === 0
          ? (
            <div class="text-center py-12 bg-white rounded-lg shadow">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-16 w-16 mx-auto text-gray-400 mb-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
                />
              </svg>
              <h3 class="text-lg font-medium text-gray-900 mb-2">
                No payment methods
              </h3>
              <p class="text-gray-500 mb-6">
                Add a payment method to get started with rent payments.
              </p>
              <button
                type="button"
                onClick={() => _setIsOpeningModal(true)}
                class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors"
              >
                Add Payment Method
              </button>
            </div>
          )
          : (
            <>
              <ul class="space-y-4">
                {processedMethods.map((method) => (
                  <li
                    key={method.id}
                    class="bg-white rounded-lg shadow p-6 relative"
                  >
                    <div class="flex items-start justify-between">
                      <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                          <h3 class="text-lg font-semibold text-gray-900">
                            {method.bank_name || "Bank Account"}
                          </h3>
                          {method.is_default && (
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                              Default
                            </span>
                          )}
                        </div>
                        <div class="space-y-1 text-sm text-gray-600">
                          <div>
                            <span class="font-medium">Type:</span>{" "}
                            {method.account_type === "checking"
                              ? "Checking"
                              : method.account_type === "savings"
                              ? "Savings"
                              : method.account_type || "Unknown"}
                          </div>
                          <div>
                            <span class="font-medium">Account:</span>{" "}
                            {method.maskedAccountNumber || "****"}
                          </div>
                          <div>
                            <span class="font-medium">Routing:</span>{" "}
                            {method.maskedRoutingNumber || "****"}
                          </div>
                        </div>
                      </div>

                      <div class="flex items-center gap-2 ml-4">
                        {!method.is_default && (
                          <button
                            type="button"
                            onClick={() => handleSetDefault(method.id!)}
                            class="text-blue-600 hover:text-blue-700 text-sm font-medium px-3 py-1.5 rounded border border-blue-600 hover:bg-blue-50 transition-colors"
                          >
                            Set Default
                          </button>
                        )}

                        <form
                          method="POST"
                          action="/api/delete/payment_method"
                          class="inline"
                        >
                          <input type="hidden" name="id" value={method.id} />
                          <input
                            type="hidden"
                            name="sender"
                            value={typeof location !== "undefined"
                              ? location.pathname
                              : ""}
                          />
                          <button
                            type="submit"
                            aria-label="Delete payment method"
                            class="text-red-600 hover:text-red-700 p-2 rounded hover:bg-red-50 transition-colors"
                            title="Delete payment method"
                          >
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              class="h-5 w-5"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                              />
                            </svg>
                          </button>
                        </form>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>

              <div class="mt-6">
                <button
                  type="button"
                  onClick={() => _setIsOpeningModal(true)}
                  class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow transition-colors flex items-center justify-center gap-2"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 4v16m8-8H4"
                    />
                  </svg>
                  Add Payment Method
                </button>
              </div>
            </>
          )}
      </div>
    </>
  );
}