import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

export const revalidate = 300;

export const metadata = { title: "Staff" };

type StaffMember = {
  username: string;
  look: string;
  rank: number;
  motto: string;
};

type Team = {
  id: string;
  rankName: string;
  badge: string | null;
  jobDescription: string | null;
  staffColor: string;
};

export default async function StaffPage() {
  const t = await getTranslations("pages.staff");
  const minStaffRank = Number(await siteSettings.get("min_staff_rank", "7")) || 7;

  let staff: StaffMember[] = [];
  try {
    staff = await prisma.user.findMany({
      where: { rank: { gte: minStaffRank } },
      select: { username: true, look: true, rank: true, motto: true },
      orderBy: [{ rank: "desc" }, { username: "asc" }],
      take: 100,
    });
  } catch {
    staff = [];
  }

  let teams: Team[] = [];
  try {
    const rows = await prisma.websiteTeams.findMany({
      where: { hiddenRank: false },
      select: {
        id: true,
        rankName: true,
        badge: true,
        jobDescription: true,
        staffColor: true,
      },
      orderBy: { id: "asc" },
    });
    teams = rows.map((t) => ({ ...t, id: String(t.id) }));
  } catch {
    teams = [];
  }

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard icon="🛡️" title={t("title")} subtitle={t("subtitle")} />

      {teams.length > 0 ? (
        <ContentCard icon="⭐" title={t("ranksTitle")} subtitle={t("ranksSubtitle")}>
          <div className="card-grid sm-2 lg-3">
            {teams.map((t) => (
              <div key={t.id} className="card">
                <h3 style={{ margin: "0 0 0.25rem", color: t.staffColor }}>{t.rankName}</h3>
                {t.jobDescription ? (
                  <p className="muted" style={{ margin: 0 }}>
                    {t.jobDescription}
                  </p>
                ) : null}
              </div>
            ))}
          </div>
        </ContentCard>
      ) : null}

      <ContentCard
        icon="👥"
        title={t("membersTitle")}
        subtitle={
          staff.length === 0 ? t("membersEmptySubtitle") : t("membersSubtitle", { count: staff.length })
        }
        padded={staff.length === 0}
      >
        {staff.length === 0 ? (
          <EmptyState icon="🛡️">{t("emptyState")}</EmptyState>
        ) : (
          <table>
            <thead>
              <tr>
                <th>{t("colUsername")}</th>
                <th>{t("colRank")}</th>
                <th>{t("colMotto")}</th>
              </tr>
            </thead>
            <tbody>
              {staff.map((u) => (
                <tr key={u.username}>
                  <td>
                    <Link href={`/u/${u.username}`}>{u.username}</Link>
                  </td>
                  <td>{u.rank}</td>
                  <td className="muted">{u.motto || "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </ContentCard>
    </main>
  );
}