fristydev/components/discord-card.tsx

"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { GameProfileModal } from "@/components/game-profile-modal";
import type { Dictionary } from "@/lib/i18n/get-dictionary";
import { useLanyard } from "@/hooks/use-lanyard";
import {
    activityImageUrl,
    discordAvatarUrl,
    formatSpotifyList,
    spotifyTrackUrl,
    type DiscordStatus,
    type LanyardActivity,
    type LanyardData,
} from "@/lib/game/lanyard";
import { discordGameUrl, type DiscordAppInfo } from "@/lib/game/discord-app";
import { fetchJson } from "@/lib/client-fetch";
import { formatElapsed } from "@/lib/game/game-format";
import type { Locale } from "@/lib/i18n/locales";

const STATUS_DOT: Record<DiscordStatus, string> = {
    online: "bg-emerald-400",
    idle: "bg-amber-400",
    dnd: "bg-rose-500",
    offline: "bg-zinc-500",
};

const MS_PER_SECOND = 1000;
const SECONDS_PER_MINUTE = 60;

function formatTrackTime(ms: number): string {
    const totalSeconds = Math.max(0, Math.floor(ms / MS_PER_SECOND));
    const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE);
    const seconds = totalSeconds % SECONDS_PER_MINUTE;
    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

function SpotifyProgress({ start, end }: { start: number; end: number }) {
    const [now, setNow] = useState(start);

    useEffect(() => {
        const timer = window.setInterval(() => setNow(Date.now()), 1_000);
        return () => window.clearInterval(timer);
    }, []);

    const total = Math.max(1, end - start);
    const elapsed = Math.min(Math.max(0, now - start), total);
    const ratio = Math.min(1, Math.max(0, (now - start) / total));
    const percent = Math.round(ratio * 100);
    return (
        <div className="mt-1.5 flex max-w-60 items-center gap-1.5 font-mono text-[10px] text-zinc-500">
            <span>{formatTrackTime(elapsed)}</span>
            <div
                className="h-[3px] flex-1 overflow-hidden rounded-full bg-white/10"
                role="progressbar"
                aria-valuemin={0}
                aria-valuemax={100}
                aria-valuenow={percent}
            >
                <div className="h-full rounded-full bg-zinc-300" style={{ width: `${percent}%` }} />
            </div>
            <span>{formatTrackTime(total)}</span>
        </div>
    );
}

const DISCORD_APP_CACHE_LIMIT = 50;

const discordAppCache = new Map<string, DiscordAppInfo | null>();

export function _resetDiscordAppCache(): void {
    discordAppCache.clear();
}

function cacheDiscordApp(id: string, info: DiscordAppInfo): void {
    if (!discordAppCache.has(id) && discordAppCache.size >= DISCORD_APP_CACHE_LIMIT) {
        const oldest = discordAppCache.keys().next();
        if (!oldest.done) {
            discordAppCache.delete(oldest.value);
        }
    }
    discordAppCache.set(id, info);
}

function useDiscordApp(applicationId: string | null | undefined): DiscordAppInfo | null {
    const [info, setInfo] = useState<DiscordAppInfo | null>(() =>
        applicationId ? (discordAppCache.get(applicationId) ?? null) : null,
    );
    const [prevId, setPrevId] = useState<string | null | undefined>(applicationId);
    if (prevId !== applicationId) {
        setPrevId(applicationId);
        setInfo(applicationId ? (discordAppCache.get(applicationId) ?? null) : null);
    }

    useEffect(() => {
        if (!applicationId || discordAppCache.has(applicationId)) {
            return;
        }
        const id = applicationId;
        let cancelled = false;
        async function load(): Promise<void> {
            const resolved = await fetchJson<DiscordAppInfo>(`/api/discord-app/${id}`);
            if (resolved) {
                cacheDiscordApp(id, resolved);
            }
            if (!cancelled) {
                setInfo(resolved);
            }
        }
        void load();
        return () => {
            cancelled = true;
        };
    }, [applicationId]);

    return info;
}

function ActivityRow({
    activity,
    dict,
    locale,
}: {
    activity: LanyardActivity;
    dict: Dictionary["discord"];
    locale: Locale;
}) {
    const appInfo = useDiscordApp(activity.application_id);
    const [profileOpen, setProfileOpen] = useState(false);
    const [heroSeed, setHeroSeed] = useState(0);
    const large = activityImageUrl(activity, "large") ?? appInfo?.iconUrl ?? null;
    const small = activityImageUrl(activity, "small");
    const gameUrl = activity.application_id
        ? (appInfo?.gameUrl ?? discordGameUrl(activity.application_id))
        : null;
    return (
        <div className="flex items-center gap-3 rounded-xl border border-white/5 bg-white/[0.03] p-3">
            {large ? (
                <div className="relative shrink-0">
                    <Image
                        src={large}
                        alt={activity.assets?.large_text ?? activity.name}
                        width={56}
                        height={56}
                        className="rounded-xl"
                    />
                    {small ? (
                        <Image
                            src={small}
                            alt={activity.assets?.small_text ?? ""}
                            width={24}
                            height={24}
                            className="absolute -bottom-1.5 -right-1.5 rounded-full border-2 border-panel"
                        />
                    ) : null}
                </div>
            ) : (
                <div
                    aria-hidden
                    className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-blurple/20 text-xl font-bold text-blurple-soft"
                >
                    {activity.name.charAt(0).toUpperCase()}
                </div>
            )}
            <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-semibold">{activity.name}</p>
                {activity.details ? (
                    <p className="truncate text-sm text-zinc-300">{activity.details}</p>
                ) : null}
                {activity.state ? (
                    <p className="truncate text-sm text-zinc-500">{activity.state}</p>
                ) : null}
                <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5">
                    {activity.timestamps?.start ? (
                        <span className="font-mono text-xs text-zinc-500" suppressHydrationWarning>
                            {formatElapsed(activity.timestamps.start, locale)}
                        </span>
                    ) : null}
                    {gameUrl ? (
                        <button
                            type="button"
                            onClick={() => {
                                setHeroSeed(Date.now());
                                setProfileOpen(true);
                            }}
                            className="cursor-pointer text-xs font-medium text-blurple-soft transition-colors hover:text-white hover:underline hover:underline-offset-4"
                        >
                            {dict.gameProfile} ↗
                        </button>
                    ) : null}
                </div>
            </div>
            {profileOpen && activity.application_id ? (
                <GameProfileModal
                    applicationId={activity.application_id}
                    heroSeed={heroSeed}
                    lang={locale}
                    iconUrl={appInfo?.iconUrl ?? large}
                    fallbackName={activity.name}
                    fallbackGameUrl={gameUrl ?? ""}
                    dict={dict.gameModal}
                    onClose={() => setProfileOpen(false)}
                />
            ) : null}
        </div>
    );
}

export function DiscordCard({
    initial,
    dict,
    locale,
}: {
    initial: LanyardData | null;
    dict: Dictionary["discord"];
    locale: Locale;
}) {
    const data = useLanyard(initial);

    if (!data) {
        return (
            <div className="rounded-2xl border border-white/10 bg-panel p-6 text-zinc-400">
                {dict.offline}
            </div>
        );
    }

    const user = data.discord_user;
    const displayName = user.display_name ?? user.global_name ?? user.username;
    const customStatus = data.activities.find((a) => a.type === 4);
    const games = data.activities.filter((a) => a.type === 0);

    return (
        <div className="rounded-2xl border border-white/10 bg-panel p-6">
            <div className="flex items-center gap-4">
                <div className="relative shrink-0">
                    <Image
                        src={discordAvatarUrl(user.id, user.avatar, 128)}
                        alt={displayName}
                        width={72}
                        height={72}
                        className="rounded-2xl"
                        priority
                    />
                    <span
                        title={dict[data.discord_status]}
                        className={`absolute -bottom-1 -right-1 h-5 w-5 rounded-full border-4 border-panel ${STATUS_DOT[data.discord_status]}`}
                    />
                </div>
                <div className="min-w-0">
                    <p className="truncate text-xl font-bold">{displayName}</p>
                    <p className="font-mono text-sm text-zinc-500">@{user.username}</p>
                    <p className="mt-1 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-0.5 text-xs text-zinc-300">
                        <span
                            className={`h-2 w-2 rounded-full ${STATUS_DOT[data.discord_status]}`}
                        />
                        {dict[data.discord_status]}
                        <span className="text-zinc-600">·</span>
                        <span className="text-mint">{dict.live}</span>
                    </p>
                </div>
            </div>

            {customStatus?.state ? (
                <p className="mt-4 rounded-xl border border-white/5 bg-white/[0.03] p-3 text-sm text-zinc-300">
                    <span className="mr-2 font-mono text-xs text-zinc-500">
                        {dict.customStatus}
                    </span>
                    {customStatus.emoji?.name ? (
                        <span className="mr-1">{customStatus.emoji.name}</span>
                    ) : null}
                    {customStatus.state}
                </p>
            ) : null}

            {games.length > 0 ? (
                <div className="mt-4 space-y-2">
                    <p className="font-mono text-xs uppercase tracking-wider text-zinc-500">
                        {dict.playing}
                    </p>
                    {games.map((game) => (
                        <ActivityRow key={game.id} activity={game} dict={dict} locale={locale} />
                    ))}
                </div>
            ) : null}

            {data.listening_to_spotify && data.spotify ? (
                <div className="mt-4 flex items-center gap-3 rounded-xl border border-white/5 bg-white/[0.03] p-3">
                    {data.spotify.album_art_url ? (
                        <Image
                            src={data.spotify.album_art_url}
                            alt={formatSpotifyList(data.spotify.song)}
                            width={48}
                            height={48}
                            className="rounded-lg"
                        />
                    ) : null}
                    <div className="min-w-0 flex-1">
                        <p className="font-mono text-xs uppercase tracking-wider text-mint">
                            {dict.listening} Spotify
                        </p>
                        <p className="truncate text-sm font-semibold">
                            {formatSpotifyList(data.spotify.song)}
                        </p>
                        <p className="truncate text-sm text-zinc-400">
                            {formatSpotifyList(data.spotify.artist)}
                        </p>
                        {data.spotify.timestamps ? (
                            <SpotifyProgress
                                key={`${data.spotify.track_id}-${data.spotify.timestamps.start}`}
                                start={data.spotify.timestamps.start}
                                end={data.spotify.timestamps.end}
                            />
                        ) : null}
                        <a
                            href={spotifyTrackUrl(data.spotify.track_id)}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="mt-1 inline-block text-xs font-medium text-blurple-soft transition-colors hover:text-white"
                        >
                            {dict.openOnSpotify} ↗
                        </a>
                    </div>
                </div>
            ) : null}

            {games.length === 0 && !data.listening_to_spotify && !customStatus?.state ? (
                <p className="mt-4 text-sm text-zinc-500">{dict.noActivity}</p>
            ) : null}
        </div>
    );
}