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

export const handler = define.handlers({
  GET: async (ctx) => {
    const stateData: SessionCookie = ctx.state.data;
    let leases: Lease[] = [];
    let properties = [];
    if (stateData?.user_id) {
      leases = await getLeasesByTenant(stateData.user_id);
    }
    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 bg-gradient-to-br from-slate-50 to-blue-100 flex flex-col items-center justify-start pt-0">
      <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>
  ),
);