import { CommissionCard } from "@/components/commissions/CommissionCard";
import { CommissionCustomCard } from "@/components/commissions/CommissionCustomCard";
import CommissionGuidelines from "@/components/commissions/CommissionGuidelines";
import { CommissionOrderForm } from "@/components/commissions/CommissionOrderForm";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { prisma } from "@/lib/prisma";
import Image from "next/image";

export default async function CommissionsPage() {
  const [commissions, customCards, guidelines] = await Promise.all([
    prisma.commissionType.findMany({
      include: {
        options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
        extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
        customInputs: { include: { customInput: true }, orderBy: { sortIndex: "asc" } },
      },
      orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
    }),
    prisma.commissionCustomCard.findMany({
      where: { isVisible: true },
      include: {
        options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
        extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
      },
      orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
    }),
    prisma.commissionGuidelines.findFirst({
      where: { isActive: true },
      orderBy: { createdAt: "desc" },
      select: { exampleImageUrl: true },
    }),
  ]);

  return (
    <div className="mx-auto w-full max-w-6xl px-4 py-8 flex flex-col gap-8">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <h1 className="text-3xl font-bold">Commission Pricing</h1>
        <div className="flex flex-wrap gap-3">
          <Button asChild>
            <a href="#commission-request-form">Get to the request form</a>
          </Button>
          {guidelines?.exampleImageUrl ? (
            <Dialog>
              <DialogTrigger asChild>
                <Button variant="secondary">View example</Button>
              </DialogTrigger>
              <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
                <DialogHeader className="sr-only">
                  <DialogTitle>Commission example</DialogTitle>
                </DialogHeader>
                <div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
                  <Image
                    src={guidelines.exampleImageUrl}
                    alt="Commission example"
                    width={1600}
                    height={1200}
                    sizes="85vw"
                    className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
                  />
                </div>
              </DialogContent>
            </Dialog>
          ) : null}
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-start">
        {commissions.map((commission) => (
          <CommissionCard key={commission.id} commission={commission} />
        ))}
        {customCards.map((card) => (
          <CommissionCustomCard key={card.id} card={card} />
        ))}
        <CommissionGuidelines />
      </div>
      <hr />
      <h2 id="commission-request-form" className="text-2xl font-semibold scroll-mt-24">
        Request a Commission
      </h2>
      <CommissionOrderForm types={commissions} customCards={customCards} />
    </div>
  );
}