import Link from "next/link";
import type { Metadata } from "next";
import { prisma } from "@/app/lib/db";
import {
  EmptyState,
  PageHeader,
  StatusBadge,
} from "@/app/admin/_components/ui";
import { formatDate } from "@/app/admin/_components/utils";

export const metadata: Metadata = {
  title: "Contact inbox",
};

export default async function ContactsPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; status?: string }>;
}) {
  const params = await searchParams;
  const q = params.q?.trim() ?? "";
  const status = params.status?.trim() ?? "";

  const contacts = await prisma.contactSubmission.findMany({
    where: {
      AND: [
        status ? { status } : {},
        q
          ? {
              OR: [
                { name: { contains: q } },
                { email: { contains: q } },
                { subject: { contains: q } },
                { message: { contains: q } },
              ],
            }
          : {},
      ],
    },
    orderBy: { createdAt: "desc" },
  });

  return (
    <div>
      <PageHeader
        title="Contact inbox"
        description="Messages submitted through the website contact form."
      />

      <form className="mb-5 flex flex-col gap-3 sm:flex-row">
        <input
          type="search"
          name="q"
          defaultValue={q}
          placeholder="Search name, email, subject..."
          className="w-full rounded-lg border border-[#d9e2f7] bg-white px-3.5 py-2.5 text-sm"
        />
        <select
          name="status"
          defaultValue={status}
          className="rounded-lg border border-[#d9e2f7] bg-white px-3.5 py-2.5 text-sm sm:w-48"
        >
          <option value="">All statuses</option>
          <option value="new">New</option>
          <option value="in_progress">In progress</option>
          <option value="resolved">Resolved</option>
        </select>
        <button
          type="submit"
          className="rounded-full bg-[#1f3fb8] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#18339a]"
        >
          Filter
        </button>
      </form>

      {contacts.length === 0 ? (
        <EmptyState message="No contact messages match your filters." />
      ) : (
        <div className="overflow-hidden rounded-2xl border border-[#d9e2f7] bg-white">
          <ul className="divide-y divide-[#eef1fb]">
            {contacts.map((item) => (
              <li key={item.id}>
                <Link
                  href={`/admin/contacts/${item.id}`}
                  className="flex flex-col gap-2 px-4 py-4 hover:bg-[#f8faff] sm:flex-row sm:items-center sm:justify-between"
                >
                  <div>
                    <p className="font-semibold">{item.name}</p>
                    <p className="text-sm text-[#5a688d]">
                      {item.subject} · {item.email}
                    </p>
                  </div>
                  <div className="flex items-center gap-3">
                    <StatusBadge status={item.status} />
                    <span className="text-xs text-[#7a88ad]">
                      {formatDate(item.createdAt)}
                    </span>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}
