import type { Metadata } from "next";
import Link from "next/link";
import { Search, Users } from "lucide-react";
import { Container } from "@/components/Container";
import { Breadcrumbs } from "@/components/Breadcrumbs";
import { listInvestigatorsDirectory } from "@/lib/research/queries";

export const metadata: Metadata = {
  title: "Investigators — Research Portal",
  description:
    "Directory of OrthoGlobe investigators across every published multicentre study.",
};

export const dynamic = "force-dynamic";

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

  return (
    <>
      <section className="border-b border-[var(--color-line)] bg-gradient-to-b from-[var(--color-mist)]/60 to-white pb-10 pt-10 md:pb-14 md:pt-14">
        <Container>
          <div className="mx-auto max-w-5xl">
            <Breadcrumbs
              items={[
                { label: "Research Portal", href: "/products/research" },
                { label: "Investigators" },
              ]}
            />
            <h1 className="mt-6 font-display text-[36px] md:text-[48px] font-extrabold leading-[1.05] tracking-[-0.02em] text-[var(--color-ink)]">
              Investigators directory
            </h1>
            <p className="mt-3 text-[17px] leading-relaxed text-[var(--color-slate)]">
              Every investigator across OrthoGlobe&rsquo;s published studies. Search by name, institution, or role.
            </p>
            <form method="GET" className="mt-6 flex flex-wrap items-center gap-3">
              <div className="relative w-full flex-1 sm:min-w-[280px] sm:w-auto">
                <Search
                  className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--color-slate)]"
                  aria-hidden
                />
                <input
                  type="search"
                  name="q"
                  defaultValue={q}
                  placeholder="Search investigators…"
                  className="w-full rounded-lg border border-[var(--color-line)] bg-white py-2.5 pl-9 pr-3 text-[14px] focus:border-[var(--color-blue)] focus:outline-none focus:ring-2 focus:ring-[var(--color-mist)]"
                />
              </div>
              <button
                type="submit"
                className="rounded-lg bg-[var(--color-blue)] px-4 py-2.5 text-[13px] font-semibold text-white hover:opacity-90"
              >
                Search
              </button>
              {q && (
                <Link
                  href="/products/research/investigators"
                  className="rounded-lg border border-[var(--color-line)] bg-white px-4 py-2.5 text-[13px] font-semibold text-[var(--color-ink)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
                >
                  Clear
                </Link>
              )}
            </form>
          </div>
        </Container>
      </section>

      <section className="bg-white py-12 md:py-16">
        <Container>
          <div className="mx-auto max-w-5xl">
            {rows.length === 0 ? (
              <div className="rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)]/40 p-10 text-center">
                <Users className="mx-auto h-8 w-8 text-[var(--color-slate)]" aria-hidden />
                <h2 className="mt-4 font-display text-[22px] font-extrabold text-[var(--color-ink)]">
                  {q ? "No matching investigators" : "No investigators yet"}
                </h2>
                <p className="mt-2 text-[15px] text-[var(--color-slate)]">
                  {q
                    ? "Try a different search term."
                    : "Investigators appear here as studies are published."}
                </p>
              </div>
            ) : (
              <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {rows.map((inv) => (
                  <li
                    key={`${inv.name}::${inv.institution}`}
                    className="flex flex-col rounded-2xl border border-[var(--color-line)] bg-white p-5 transition-[border-color] hover:border-[var(--color-blue)]"
                  >
                    <div className="flex items-start gap-3">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--color-mist)] text-[14px] font-bold text-[var(--color-blue)]">
                        {(inv.name || "?")
                          .split(" ")
                          .map((part) => part[0]?.toUpperCase() ?? "")
                          .slice(0, 2)
                          .join("")}
                      </div>
                      <div className="min-w-0 flex-1">
                        <div className="font-display text-[17px] font-extrabold text-[var(--color-ink)]">
                          {inv.name}
                        </div>
                        <div className="mt-0.5 text-[13px] text-[var(--color-slate)]">
                          {inv.institution}
                        </div>
                        {inv.role && (
                          <div className="mt-1 inline-block rounded-full bg-[var(--color-mist)] px-2 py-0.5 text-[11px] font-semibold text-[var(--color-blue)]">
                            {inv.role}
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="mt-4 border-t border-[var(--color-line)] pt-3">
                      <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
                        On {inv.studyCount} published stud{inv.studyCount === 1 ? "y" : "ies"}
                      </div>
                      <ul className="mt-2 space-y-1 text-[13px]">
                        {inv.studies.map((s) => (
                          <li key={s.slug}>
                            <Link
                              href={`/products/research/studies/${s.slug}`}
                              className="text-[var(--color-blue)] hover:underline"
                            >
                              {s.title}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </Container>
      </section>
    </>
  );
}
