import { define } from "../../../utils.ts";
import LeasedHome from "../../../islands/LeasedHome.tsx";
import { page } from "fresh";
import { SessionCookie } from "../../auth/callback.ts";
import { getAllProperties } from "../../../services/propertyService.ts";
import { getLeasesByOwner } from "../../../services/leaseService.ts";
import type { Lease, Property } from "../../../db/interfaces.ts";

export const handler = define.handlers({
  async GET(ctx) {
    const stateData: SessionCookie = ctx.state.data;

    const ownerId = stateData.user_id;
    let leases: Lease[] = [];
    let properties: Property[] = [];

    leases = await getLeasesByOwner(ownerId);
    properties = await getAllProperties();

    return page({
      stateData,
      leases,
      properties,
    });
  },
});

export default define.page(
  (
    { data }: {
      data: {
        stateData: SessionCookie;
        leases: Lease[];
        properties: Property[];
      };
    },
  ) => (
    <main class="min-h-screen flex flex-col items-center justify-start pt-0 landlord-route">
      <div class="w-full max-w-4xl px-8 sm:px-12 lg:px-24 mt-8">
        <LeasedHome
          leases={data.leases || []}
          properties={data.properties || []}
        />
      </div>
    </main>
  ),
);