import { redirect } from "next/navigation";
import { applyTeam } from "@/actions/applications";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

export const dynamic = "force-dynamic";

// Canonical Habbo badge image CDN (same base used by the profile page).
const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";

export default async function ApplyTeamPage() {
  const session = await auth();
  if (!session?.user?.id) redirect("/login");

  const userId = Number(session.user.id);
  const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";

  // ── Teams open for application ──────────────────────────────
  // The Prisma slice exposes teams directly (no separate team-position table
  // with position_kind), so the team application concept lists website_teams.
  // Hidden ranks are excluded from the public apply page.
  const teams = await prisma.websiteTeams
    .findMany({
      where: { hiddenRank: false },
      orderBy: { rankName: "asc" },
    })
    .catch(() => []);

  // Teams this user has already applied to. Team applications reuse the staff
  // applications table with rank_id carrying the team id (the team flag).
  const myApps = await prisma.websiteStaffApplications
    .findMany({ where: { userId }, select: { rankId: true } })
    .catch(() => []);
  const appliedTeamIds = new Set(myApps.map((a) => a.rankId));

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🤝"
        title={`Apply for the ${hotelName} team`}
        subtitle="We open team applications periodically. If you see a team you fit, do not hesitate to apply!"
      />

      {teams.length === 0 ? (
        <ContentCard icon="🤝" title="No team positions open">
          <EmptyState icon="🤝">
            There are currently no open team positions. Please come back later to check for new
            openings. Thank you!
          </EmptyState>
        </ContentCard>
      ) : (
        <div className="card-grid sm-2">
          {teams.map((team) => {
            const teamId = Number(team.id);
            const alreadyApplied = appliedTeamIds.has(teamId);
            return (
              <article key={String(team.id)} className="content-card">
                <div className="content-card-head">
                  {team.badge ? (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img
                      src={`${BADGE_IMG_BASE}/${team.badge}.gif`}
                      alt={team.rankName}
                      width={40}
                      height={40}
                    />
                  ) : (
                    <span className="content-card-icon" aria-hidden>
                      🤝
                    </span>
                  )}
                  <div className="content-card-head-text">
                    <p className="content-card-title" style={{ color: team.staffColor || undefined }}>
                      {team.rankName}
                    </p>
                    {team.jobDescription ? (
                      <p className="content-card-subtitle">{team.jobDescription}</p>
                    ) : null}
                  </div>
                </div>

                <div className="content-card-body">
                  {alreadyApplied ? (
                    <button
                      type="button"
                      className="btn btn-danger"
                      disabled
                      style={{ width: "100%" }}
                    >
                      Your application is pending
                    </button>
                  ) : (
                    <form action={applyTeam}>
                      {/* The team id is the application's rank flag; the applicant
                          is re-read from the session inside the action. */}
                      <input type="hidden" name="teamId" value={String(team.id)} />
                      <label htmlFor={`content-${team.id}`} className="muted">
                        About you
                      </label>
                      <textarea
                        id={`content-${team.id}`}
                        name="content"
                        required
                        minLength={10}
                        rows={5}
                        placeholder={`Tell us why you'd be a great fit for ${team.rankName}…`}
                        style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
                      />
                      <button type="submit" className="btn btn-primary" style={{ width: "100%" }}>
                        Apply for {team.rankName}
                      </button>
                    </form>
                  )}
                </div>
              </article>
            );
          })}
        </div>
      )}
    </main>
  );
}