// routes/tenant/payment-methods/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { PaymentMethod } from "../../../services/paymentService.ts";
import PaymentMethodsList from "../../../islands/PaymentMethodsList.tsx";

interface PaymentMethodsPageData {
  paymentMethods?: PaymentMethod[];
  error?: string;
}

export const handler = define.handlers({
  async GET(ctx) {
    const { user_id } = ctx.state.data;

    if (!user_id) {
      return new Response("", {
        status: 302,
        headers: { Location: "/auth/login" },
      });
    }

    try {
      const response = await fetch("/api/retrieve/payment_methods", {
        headers: {
          "Cookie": ctx.req.headers.get("Cookie") || "",
        },
      });

      const data = await response.json();

      if (!data.success) {
        console.error("Failed to fetch payment methods:", data.error);
        return page<PaymentMethodsPageData>({
          error: "Failed to load payment methods",
        });
      }

      return page<PaymentMethodsPageData>({
        paymentMethods: data.payment_methods || [],
      });
    } catch (error) {
      console.error("Error loading payment methods:", error);
      return page<PaymentMethodsPageData>({
        error: "Failed to load payment methods",
      });
    }
  },
});

export default define.page(function PaymentMethodsPage({
  data,
}: {
  data: PaymentMethodsPageData;
}) {
  const { paymentMethods, error } = data as PaymentMethodsPageData;

  if (error) {
    return (
      <div class="min-h-screen bg-gray-50 p-8">
        <div class="max-w-4xl mx-auto">
          <h1 class="text-3xl font-bold text-red-600 mb-4">Error</h1>
          <p class="text-gray-700">{error}</p>
          <div class="mt-6">
            <a
              href="/tenant/dashboard"
              class="text-blue-600 hover:text-blue-500 font-medium"
            >
              Go to Dashboard
            </a>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div class="min-h-screen bg-gray-50">
      <div class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="py-6">
            <h1 class="text-3xl font-bold text-gray-900">
              Payment Methods
            </h1>
            <p class="mt-1 text-sm text-gray-500">
              Manage your payment methods for rent payments.
            </p>
          </div>
        </div>
      </div>

      <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 py-8">
        <PaymentMethodsList paymentMethods={paymentMethods || []} />
      </div>
    </div>
  );
});