import { define } from "../../utils.ts";
import LeasedHome from "../../islands/LeasedHome.tsx";
import { page } from "fresh";
import { SessionCookie } from "../../routes/auth/callback.ts";
import WelcomeBar from "../../islands/WelcomeBar/WelcomeBar.tsx";
import {
  getAllProperties,
  getLeasesByTenant,
} from "../../services/propertyService.ts";
import { createPublicId } from "../../helpers.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();
    const publicId = stateData.user_id
      ? await createPublicId(stateData.user_id)
      : "";
    return page({
      stateData,
      leases,
      properties,
      user_name: stateData.user_name,
      isEncrypted: stateData.user_encrypted,
      publicId,
      stateId: ctx.state.stateId,
    });
  },
});

export default define.page(
  (
    { data }: {
      data: {
        stateData: SessionCookie;
        leases: Lease[];
        properties: Property[];
        user_name: string;
        isEncrypted: boolean;
        publicId: string;
        stateId: string;
      };
    },
  ) => (
    <main class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-100 flex flex-col items-center justify-start pt-0">
      <WelcomeBar
        publicId={data.publicId}
        user_name={data.user_name}
        isEncrypted={data.isEncrypted}
        currentRoute="/leased-home"
        stateId={data.stateId}
      />
      <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>
  ),
);