import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, Compass, MapPinned } from "lucide-react";
import { Footer, Header } from "@/components/Shell";
import { PlayerAvatar } from "@/components/PixelArt";
import { Username } from "@/components/Username";
import { getI18n } from "@/lib/i18n";
import { publicProfile } from "@/lib/public-profile";

export const dynamic = "force-dynamic";

export default async function PlayerProfilePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const profile = await publicProfile(id);
  if (!profile) notFound();
  const { t, formatDate, formatNumber } = await getI18n();

  return (
    <>
      <Header />
      <main className="section page-content public-profile-page">
        <Link className="text-link" href="/leaderboard">
          <ArrowLeft size={15} aria-hidden="true" /> {t("Back to leaderboard")}
        </Link>
        <section className="public-profile-hero">
          <PlayerAvatar
            id={profile.id}
            avatarPath={profile.avatar_path}
            effect={profile.profile_effect}
            className="public-profile-avatar"
          />
          <div className="public-profile-copy">
            <span className="eyebrow">{t("MINEGEO EXPLORER")}</span>
            <h1>
              <Username name={profile.display_name} appearance={profile} />
            </h1>
            <p className="muted">
              {t("Exploring since {date}", {
                date: formatDate(profile.created_at),
              })}
            </p>
          </div>
        </section>

        <section className="public-profile-about" aria-labelledby="profile-about">
          <h2 id="profile-about">{t("About this explorer")}</h2>
          <p className="public-profile-bio">
            {profile.bio || t("This explorer hasn’t added a description yet.")}
          </p>
        </section>

        <section className="public-profile-stats" aria-label={t("Profile stats")}>
          <article className="public-profile-stat">
            <Compass size={19} aria-hidden="true" />
            <span>{t("Completed journeys")}</span>
            <strong>{formatNumber(profile.completedGames)}</strong>
          </article>
          <article className="public-profile-stat">
            <MapPinned size={19} aria-hidden="true" />
            <span>{t("Published maps")}</span>
            <strong>{formatNumber(profile.publishedMaps)}</strong>
          </article>
        </section>

        <p className="public-profile-footnote">
          {t("Only public account details and published maps appear here.")}
        </p>
      </main>
      <Footer />
    </>
  );
}