import Link from "next/link";
import { DirectoryRow } from "@/components/cards";
import { PageShell } from "@/components/page";
import { prisma } from "@/lib/prisma";
import { isMemberVerified } from "@/lib/roles";
import { readSession } from "@/lib/session";

const TABS = [
  { value: "", label: "All" },
  { value: "dealer", label: "Dealers" },
  { value: "cutter", label: "Cutters" },
  { value: "miner", label: "Miners" },
  { value: "jeweler", label: "Jewelers" },
  { value: "lab", label: "Labs" },
  { value: "collector", label: "Collectors" },
  { value: "company", label: "Companies" },
] as const;

function tabHref(value: string, query: string) {
  if (value) {
    return `/directory?type=${value}${query ? `&q=${encodeURIComponent(query)}` : ""}`;
  }
  return query ? `/directory?q=${encodeURIComponent(query)}` : "/directory";
}

export default async function DirectoryPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; type?: string }>;
}) {
  const { q = "", type = "" } = await searchParams;
  const session = await readSession();
  const term = q.trim().toLowerCase();
  const active = TABS.some((tab) => tab.value === type) ? type : "";

  const members = await prisma.user.findMany({
    include: { profile: true },
    orderBy: [{ featured: "desc" }, { name: "asc" }],
  });

  const matchesSearch = (member: (typeof members)[number]) => {
    if (!term) return true;
    const blob = [
      member.name,
      member.profile?.company,
      member.profile?.location,
      member.profile?.country,
      member.profile?.specialties,
      member.profile?.originFocus,
      member.profile?.type,
      member.profile?.bio,
    ]
      .join(" ")
      .toLowerCase();
    return blob.includes(term);
  };

  const matches = (member: (typeof members)[number]) => {
    if (active && member.profile?.type !== active) return false;
    return matchesSearch(member);
  };

  const filtered = members.filter(matches);
  const featured = !term ? filtered.filter((member) => member.featured).slice(0, 4) : [];
  const featuredIds = new Set(featured.map((member) => member.id));
  const rest = filtered.filter((member) => !featuredIds.has(member.id));
  const counts = Object.fromEntries(
    TABS.map((tab) => [
      tab.value || "all",
      members.filter((member) => (!tab.value || member.profile?.type === tab.value) && matchesSearch(member)).length,
    ]),
  );

  return (
    <PageShell
      wide
      eyebrow="Members"
      title="Who is on the floor"
      lede="Dealers, cutters, miners, labs, and collectors — search by craft, origin, or stone."
    >
      <div className="dir-toolbar">
        <form className="dir-search" action="/directory">
          {active ? <input type="hidden" name="type" value={active} /> : null}
          <input
            id="q"
            name="q"
            defaultValue={q}
            placeholder="Colombian emeralds, sapphire cutter, Bangkok…"
            aria-label="Search the directory"
          />
          <button className="eg-btn eg-btn-solid" type="submit">
            Search
          </button>
        </form>
        <nav className="floor-tabs dir-tabs" aria-label="Filter by craft">
          {TABS.map((tab) => (
            <Link
              key={tab.value || "all"}
              href={tabHref(tab.value, q)}
              className={active === tab.value ? "is-on" : undefined}
            >
              {tab.label}
              <small>{counts[tab.value || "all"]}</small>
            </Link>
          ))}
        </nav>
      </div>

      {featured.length ? (
        <section className="dir-featured">
          <div className="portal-col__head">
            <div>
              <p className="eg-eyebrow">Pinned</p>
              <h2>Featured members</h2>
            </div>
          </div>
          <div className="dir-grid dir-grid--4">
            {featured.map((member) => (
              <DirectoryRow
                key={member.id}
                href={`/members/${member.id}`}
                name={session || member.featured ? member.name : member.name.split(" ")[0]}
                photoUrl={member.profile?.photoUrl}
                type={member.profile?.type || "collector"}
                company={member.profile?.company}
                country={member.profile?.country}
                location={member.profile?.location}
                origin={member.profile?.originFocus}
                specialties={member.profile?.specialties}
                verified={isMemberVerified(member)}
                featured
                wholesale={
                  member.wholesaleStatus === "approved" ||
                  member.role === "wholesale" ||
                  member.role === "admin"
                }
              />
            ))}
          </div>
        </section>
      ) : null}

      <div className="dir-count">
        <h2>{term || active ? "Matches" : "Everyone on the floor"}</h2>
        <p>
          {filtered.length} {filtered.length === 1 ? "person" : "people"}
          {active ? ` · ${TABS.find((tab) => tab.value === active)?.label}` : ""}
          {term ? ` · “${q.trim()}”` : ""}
        </p>
      </div>

      {rest.length === 0 && featured.length === 0 ? (
        <p className="dir-empty">No one matches that search. Try a stone, a city, or another craft.</p>
      ) : rest.length === 0 ? (
        <p className="dir-empty">Everyone in this view is in Featured above.</p>
      ) : (
        <div className="dir-grid dir-grid--4">
          {rest.map((member) => (
            <DirectoryRow
              key={member.id}
              href={`/members/${member.id}`}
              name={session || member.featured ? member.name : member.name.split(" ")[0]}
              photoUrl={member.profile?.photoUrl}
              type={member.profile?.type || "collector"}
              company={member.profile?.company}
              country={member.profile?.country}
              location={member.profile?.location}
              origin={member.profile?.originFocus}
              specialties={member.profile?.specialties}
              verified={isMemberVerified(member)}
              wholesale={
                member.wholesaleStatus === "approved" ||
                member.role === "wholesale" ||
                member.role === "admin"
              }
            />
          ))}
        </div>
      )}
    </PageShell>
  );
}