// routes/tenant/payments/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { getPaymentTransactionsByUser } from "../../../services/paymentService.ts";
import { PaymentTransaction } from "../../../db/interfaces.ts";

const LATE_FEE_AMOUNT = 50;

function getTransactionDate(transaction: PaymentTransaction): Date {
  const timestamp = transaction.payment_date ?? transaction.created_on ?? 0;
  return new Date(timestamp);
}

function isLatePayment(transaction: PaymentTransaction): boolean {
  const date = getTransactionDate(transaction);
  return date.getUTCDate() > 5;
}

function formatCurrency(value: number): string {
  return `$${value.toLocaleString()}`;
}

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

    try {
      const transactions = await getPaymentTransactionsByUser(user_id);

      return page({
        transactions,
      });
    } catch (error) {
      console.error("Error loading payment history:", error);
      return page({
        error: "Failed to load payment history",
      });
    }
  },
});

export default define.page(function TenantPayments({ data }) {
  const { transactions, error: _error } = data as {
    transactions: PaymentTransaction[];
    error?: string;
  };

  const rows = (transactions || []).map((transaction) => {
    const status = transaction.transaction_status || "pending";
    const lateFee = isLatePayment(transaction) ? LATE_FEE_AMOUNT : 0;
    const lateFeeDue = status !== "completed" ? lateFee : 0;

    return {
      ...transaction,
      status,
      date: getTransactionDate(transaction),
      lateFee,
      lateFeeDue,
    };
  });

  const totalPaid = rows
    .filter((row) => row.status === "completed")
    .reduce((sum, row) => sum + (row.amount || 0), 0);
  const pendingCount = rows.filter((row) => row.status !== "completed").length;
  const lateFeesDue = rows.reduce((sum, row) => sum + row.lateFeeDue, 0);

  return (
    <div class="min-h-screen bg-gray-50 tenant-route">
      <div class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between items-center py-6">
            <div>
              <h1 class="text-3xl font-bold text-gray-900">
                Payment History
              </h1>
              <p class="mt-1 text-sm text-gray-500">
                View your past transactions and manage payment methods.
              </p>
            </div>
            <a
              href="/tenant/payments/new" // Placeholder for new payment/scheduling
              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              Make a Payment
            </a>
          </div>
        </div>
      </div>

      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 py-8">
        {/* Payment Methods Management */}
        <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8">
          <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
              Payment Methods
            </h3>
            <a
              href="/tenant/payment-methods"
              class="text-sm font-medium text-blue-600 hover:text-blue-500"
            >
              Manage Payment Methods
            </a>
          </div>
          <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
            <p class="text-sm text-gray-500">
              Set up auto-payments, update your card or bank details, and view
              scheduled payments.
            </p>
          </div>
        </div>

        {/* Summary Cards */}
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-3 mb-8">
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-gray-500 truncate">
                Total Paid
              </dt>
              <dd class="mt-1 text-3xl font-semibold text-gray-900">
                {formatCurrency(totalPaid)}
              </dd>
            </div>
          </div>
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-gray-500 truncate">
                Pending Payments
              </dt>
              <dd class="mt-1 text-3xl font-semibold text-gray-900">
                {pendingCount}
              </dd>
            </div>
          </div>
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-gray-500 truncate">
                Late Fees Due
              </dt>
              <dd class="mt-1 text-3xl font-semibold text-gray-900">
                {formatCurrency(lateFeesDue)}
              </dd>
            </div>
          </div>
        </div>

        {/* Payment History Table */}
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
          <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
              Transaction History
            </h3>
          </div>
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Date
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Method
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Amount
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Status
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Late Fee
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Receipt
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {rows.length > 0
                ? (
                  rows.map((transaction) => (
                    <tr key={transaction.id}>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.date.toLocaleDateString()}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.payment_method || "ach"}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {formatCurrency(transaction.amount || 0)}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <span
                          class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                            transaction.status === "completed"
                              ? "bg-green-100 text-green-800"
                              : transaction.status === "pending"
                              ? "bg-yellow-100 text-yellow-800"
                              : "bg-red-100 text-red-800"
                          }`}
                        >
                          {transaction.status}
                        </span>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.lateFee
                          ? formatCurrency(transaction.lateFee)
                          : "-"}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.stripe_payment_id
                          ? (
                            <a
                              href={`/api/receipt/${transaction.stripe_payment_id}`}
                              target="_blank"
                              class="text-blue-600 hover:text-blue-500"
                            >
                              View
                            </a>
                          )
                          : "-"}
                      </td>
                    </tr>
                  ))
                )
                : (
                  <tr>
                    <td
                      colspan={6}
                      class="px-6 py-4 text-center text-sm text-gray-500"
                    >
                      No payment history yet
                    </td>
                  </tr>
                )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
});