import { prisma } from "@/lib/prisma";
import { EnquiryForm } from "./EnquiryForm";

export default async function ContactPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const sp = await searchParams;
  const submitted = sp.submitted === "1";
  const propertyIdParam = typeof sp.propertyId === "string" ? Number(sp.propertyId) : undefined;

  const [areas, property] = await Promise.all([
    prisma.area.findMany({ orderBy: { name: "asc" } }),
    propertyIdParam ? prisma.property.findUnique({ where: { id: propertyIdParam }, include: { area: true } }) : null,
  ]);

  return (
    <main className="mx-auto max-w-6xl px-6 py-10">
      <p className="text-xs font-bold tracking-widest text-brand uppercase">Get in touch</p>
      <h1 className="mt-2 text-2xl font-bold text-[#231f20]">Speak to a broker</h1>

      <div className="mt-8 grid grid-cols-1 gap-10 lg:grid-cols-[1fr_1.3fr]">
        <div className="text-sm text-stone-600">
          <h2 className="text-[1.05rem] font-bold text-[#231f20]">Richland Properties</h2>
          <p className="mt-4">
            Johnathan Wilkins (Pretoria &amp; Centurion) —{" "}
            <a href="tel:+27825685707" className="font-semibold text-brand hover:text-brand-deep">
              082 568 5707
            </a>
          </p>
          <p className="mt-3">
            Ferdi Coetzee (Johannesburg &amp; East Rand) —{" "}
            <a href="tel:+27829234565" className="font-semibold text-brand hover:text-brand-deep">
              082 923 4565
            </a>
          </p>
          <p className="mt-3">Serving Gauteng, with brokers assigned by region and property type.</p>
          <p className="mt-6">
            Prefer to fill in details first? Use the enquiry form and we&apos;ll route it to the broker who covers
            your area.
          </p>
        </div>

        <div>
          {submitted ? (
            <div className="rounded border border-stone-200 bg-white p-10 text-center">
              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-emerald-600 text-xl text-white">✓</div>
              <h2 className="mt-4 text-lg font-bold text-[#231f20]">Enquiry received</h2>
              <p className="mt-2 text-sm text-stone-500">
                Thanks — this has been routed to the broker covering your area. Expect a call back shortly.
              </p>
            </div>
          ) : (
            <EnquiryForm
              areas={areas}
              defaultArea={property?.area.name}
              defaultType={property?.type}
              propertyId={property?.id}
            />
          )}
        </div>
      </div>
    </main>
  );
}