import Link from "next/link";
import { and, asc, eq, gte, lt } from "drizzle-orm";
import { redirect } from "next/navigation";
import { connection } from "next/server";
import { AdminHeader } from "@/components/admin/admin-header";
import { CommissionIncomeCalendar } from "@/components/commission/income-calendar";
import { getDb } from "@/db";
import { commissionPayments, commissionTickets, users } from "@/db/schema";
import { getAdminSession } from "@/lib/auth/server";
import { commissionIncomeMonth } from "@/lib/commission/income";

export const instant = false;

export default async function CommissionIncomePage({ searchParams }: PageProps<"/admin/commission/income">) {
  await connection();
  if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin%2Fcommission%2Fincome");
  const { month: rawMonth } = await searchParams;
  const period = commissionIncomeMonth(rawMonth);
  const rows = await getDb().select({
    ticketId: commissionTickets.id,
    title: commissionTickets.title,
    creatorName: users.name,
    amountBaht: commissionPayments.amountBaht,
    transferredAt: commissionPayments.transferredAt,
  }).from(commissionPayments)
    .innerJoin(commissionTickets, eq(commissionTickets.id, commissionPayments.ticketId))
    .innerJoin(users, eq(users.id, commissionTickets.userId))
    .where(and(gte(commissionPayments.transferredAt, period.from), lt(commissionPayments.transferredAt, period.to)))
    .orderBy(asc(commissionPayments.transferredAt), asc(commissionPayments.id));

  return <div className="min-h-svh"><AdminHeader />
    <main className="mx-auto flex max-w-6xl flex-col gap-5 p-4 py-10 sm:p-8">
      <Link href="/admin/commission" className="w-fit text-sm underline">กลับไป Commission tickets</Link>
      <header><h1 className="font-heading text-3xl font-semibold">Commission income</h1>
        <p className="text-muted-foreground">รายได้ประจำเดือนจาก Commision</p></header>
      <CommissionIncomeCalendar period={{ month: period.month, year: period.year, number: period.number,
        previous: period.previous, next: period.next, days: period.days, leadingDays: period.leadingDays }} rows={rows} />
    </main>
  </div>;
}