import type { Metadata } from "next";
import { prisma } from "@/lib/prisma";
import { SITE, whatsappLink } from "@/lib/site";
import { createTicket } from "@/lib/actions/support";
import { getCurrentCustomerId } from "@/lib/customer-auth";

export async function generateMetadata(): Promise<Metadata> {
  const page = await prisma.pageSeo.findUnique({ where: { path: "/contact" } });
  return {
    title: page?.title || "Contact — Iniyaval Return Gifts",
    description: page?.description || "Get in touch with Iniyaval Return Gifts for custom orders, bulk enquiries, and questions.",
  };
}

export default async function ContactPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;
  const { lat, lng } = SITE.mapCoords;
  const customerId = await getCurrentCustomerId();
  const customer = customerId ? await prisma.customer.findUnique({ where: { id: customerId } }) : null;

  return (
    <div className="mx-auto max-w-2xl px-4 py-14 sm:px-6">
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Contact us</h1>
      <p className="mt-2 text-sm text-stone-600">{SITE.tagline}</p>

      <div className="mt-8 grid gap-4 sm:grid-cols-2">
        <a
          href={whatsappLink("Hi! I'd like to ask about a custom order.")}
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-xl border border-emerald-200 bg-emerald-50 p-5 hover:bg-emerald-100"
        >
          <div className="text-sm font-semibold text-emerald-800">WhatsApp us</div>
          <div className="mt-1 text-sm text-emerald-700">{SITE.whatsappDisplay}</div>
          <p className="mt-2 text-xs text-emerald-700">Fastest way to reach us — great for custom designs, photos, and bulk orders.</p>
        </a>

        <a href={`mailto:${SITE.email}`} className="rounded-xl border border-rose-100 bg-white p-5 hover:bg-rose-50">
          <div className="text-sm font-semibold text-stone-800">Email us</div>
          <div className="mt-1 text-sm text-stone-600">{SITE.email}</div>
          <p className="mt-2 text-xs text-stone-500">For detailed enquiries or written quotes.</p>
        </a>
      </div>

      <div className="mt-8 overflow-hidden rounded-xl border border-rose-100 bg-white">
        <div className="p-5">
          <div className="text-sm font-semibold text-stone-800">Our address</div>
          {SITE.addressLines.map((line) => (
            <div key={line} className="mt-1 text-sm text-stone-600">{line}</div>
          ))}
          <a
            href={`https://www.google.com/maps/search/?api=1&query=${lat},${lng}`}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-3 inline-block text-sm font-medium text-rose-700 hover:underline"
          >
            Get directions →
          </a>
        </div>
        <iframe
          title="Iniyaval Return Gifts — shop location"
          src={`https://www.google.com/maps?q=${lat},${lng}&z=16&output=embed`}
          className="h-64 w-full border-0"
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
      </div>

      <div className="mt-8 rounded-xl border border-rose-100 bg-white p-5">
        <div className="text-sm font-semibold text-stone-800">Or send us a message</div>
        <p className="mt-1 text-xs text-stone-500">We&apos;ll reply by email — usually within a day.</p>
        {error && <p className="mt-3 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{decodeURIComponent(error)}</p>}
        <form action={createTicket} className="mt-4 space-y-3">
          <div className="grid gap-3 sm:grid-cols-2">
            <input name="name" required maxLength={100} defaultValue={customer?.name ?? ""} placeholder="Your name" className="rounded-md border border-stone-300 px-3 py-2 text-sm" />
            <input name="email" type="email" required defaultValue={customer?.email ?? ""} placeholder="Your email" className="rounded-md border border-stone-300 px-3 py-2 text-sm" />
          </div>
          <input name="subject" required maxLength={150} placeholder="Subject" className="block w-full rounded-md border border-stone-300 px-3 py-2 text-sm" />
          <textarea name="body" required maxLength={5000} rows={4} placeholder="How can we help?" className="block w-full rounded-md border border-stone-300 px-3 py-2 text-sm" />
          <button type="submit" className="rounded-md bg-rose-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
            Send message
          </button>
        </form>
      </div>
    </div>
  );
}