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: "Admissions inbox",
};

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

  const admissions = await prisma.admissionSubmission.findMany({
    where: {
      AND: [
        status ? { status } : {},
        q
          ? {
              OR: [
                { studentFirstName: { contains: q } },
                { studentLastName: { contains: q } },
                { parentName: { contains: q } },
                { email: { contains: q } },
                { program: { contains: q } },
                { phone: { contains: q } },
              ],
            }
          : {},
      ],
    },
    orderBy: { createdAt: "desc" },
  });

  return (
    <div>
      <PageHeader
        title="Admissions inbox"
        description="Applications submitted through the admissions form."
      />

      <form className="mb-5 flex flex-col gap-3 sm:flex-row">
        <input
          type="search"
          name="q"
          defaultValue={q}
          placeholder="Search student, parent, email, program..."
          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>

      {admissions.length === 0 ? (
        <EmptyState message="No admission applications match your filters." />
      ) : (
        <div className="overflow-hidden rounded-2xl border border-[#d9e2f7] bg-white">
          <ul className="divide-y divide-[#eef1fb]">
            {admissions.map((item) => (
              <li key={item.id}>
                <Link
                  href={`/admin/admissions/${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.studentFirstName} {item.studentLastName}
                    </p>
                    <p className="text-sm text-[#5a688d]">
                      {item.program} · {item.parentName} · {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>
  );
}
