// routes/landlord/payments/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { getLeasesByOwner } from "../../../services/leaseService.ts";
import { getPaymentTransactionsByOwner } from "../../../services/paymentService.ts";
import { getUserById } from "../../../services/userService.ts";
import { Lease, PaymentTransaction } from "../../../db/interfaces.ts";

const LATE_FEE_AMOUNT = 50;

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

function getTransactionTimestamp(transaction: PaymentTransaction): number {
  return transaction.payment_date ?? transaction.created_on ?? 0;
}

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

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

    try {
      const leases = await getLeasesByOwner(user_id);
      const transactions = await getPaymentTransactionsByOwner(user_id);
      const tenantIds = Array.from(
        new Set(
          leases
            .map((lease) => lease.tenant_id)
            .filter((tenantId): tenantId is string => Boolean(tenantId)),
        ),
      );
      const tenantNames: Record<string, string> = {};
      for (const tenantId of tenantIds) {
        const tenant = await getUserById(tenantId);
        if (tenant?.name) {
          tenantNames[tenantId] = tenant.name;
        }
      }

      return page({
        leases,
        transactions,
        tenantNames,
      });
    } catch (error) {
      console.error("Error loading rent collection:", error);
      return page({
        error: "Failed to load rent collection",
      });
    }
  },
});

export default define.page(function LandlordPayments({ data }) {
  const { leases, transactions, tenantNames, error } = data as {
    leases: Lease[];
    transactions: PaymentTransaction[];
    tenantNames: Record<string, string>;
    error?: string;
  };

  const leaseMap = new Map(leases.map((lease) => [lease.id, lease]));

  const transactionsWithMeta = (transactions || []).map((transaction) => {
    const lease = leaseMap.get(transaction.lease_id || "");
    const tenantName = lease?.tenant_id
      ? tenantNames[lease.tenant_id] || "Tenant"
      : "Tenant";
    const status = transaction.transaction_status || "pending";
    const lateFee = isLatePayment(transaction) ? LATE_FEE_AMOUNT : 0;

    return {
      ...transaction,
      lease,
      tenantName,
      status,
      lateFee,
    };
  });

  const now = Date.now();
  const nowDate = new Date(now);
  const startOfMonth = new Date(
    nowDate.getFullYear(),
    nowDate.getMonth(),
    1,
  ).getTime();
  const endOfMonth = new Date(
    nowDate.getFullYear(),
    nowDate.getMonth() + 1,
    0,
    23,
    59,
    59,
    999,
  ).getTime();

  const monthlyTransactions = transactionsWithMeta.filter((transaction) => {
    const timestamp = getTransactionTimestamp(transaction);
    return timestamp >= startOfMonth && timestamp <= endOfMonth;
  });

  const expectedThisMonth = leases
    .filter((lease) => lease.lease_status === "active")
    .reduce((sum, lease) => sum + (lease.rent || 0), 0);
  const receivedThisMonth = monthlyTransactions
    .filter((transaction) => transaction.status === "completed")
    .reduce((sum, transaction) => sum + (transaction.amount || 0), 0);
  const overdueCount = monthlyTransactions.filter((transaction) =>
    transaction.status !== "completed"
  ).length;
  const lateFeesDue = monthlyTransactions
    .filter((transaction) =>
      transaction.status !== "completed"
    )
    .reduce((sum, transaction) => sum + (transaction.lateFee || 0), 0);

  return (
    <div class="min-h-screen bg-gray-50 landlord-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">Rent Collection</h1>
              <p class="mt-1 text-sm text-gray-500">
                Track rent payments across your portfolio
              </p>
            </div>
            <div class="flex space-x-3">
              <a
                href="/landlord/dashboard"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              >
                Back to Dashboard
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {error && (
          <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
            {error}
          </div>
        )}

        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
              <dt class="text-sm font-medium text-gray-500 truncate">
                Expected This Month
              </dt>
              <dd class="mt-1 text-2xl font-semibold text-gray-900">
                {formatCurrency(expectedThisMonth)}
              </dd>
            </div>
          </div>
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
              <dt class="text-sm font-medium text-gray-500 truncate">
                Received This Month
              </dt>
              <dd class="mt-1 text-2xl font-semibold text-emerald-600">
                {formatCurrency(receivedThisMonth)}
              </dd>
            </div>
          </div>
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
              <dt class="text-sm font-medium text-gray-500 truncate">
                Overdue Payments
              </dt>
              <dd class="mt-1 text-2xl font-semibold text-amber-600">
                {overdueCount}
              </dd>
            </div>
          </div>
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
              <dt class="text-sm font-medium text-gray-500 truncate">
                Late Fees Due
              </dt>
              <dd class="mt-1 text-2xl font-semibold text-rose-600">
                {formatCurrency(lateFeesDue)}
              </dd>
            </div>
          </div>
        </div>

        <div class="bg-white shadow overflow-hidden sm:rounded-md">
          <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">
                  Tenant
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Property
                </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">
                  Date
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {transactionsWithMeta.length > 0
                ? (
                  transactionsWithMeta.map((transaction) => (
                    <tr key={transaction.id}>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.tenantName}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.lease?.property_address || "Property"}
                      </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">
                        {new Date(getTransactionTimestamp(transaction))
                          .toLocaleDateString()}
                      </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>
  );
});