import type { Dictionary } from "@/lib/i18n/get-dictionary";
import type { Locale } from "@/lib/i18n/locales";
import type { GiteaRepo } from "@/lib/gitea";
import { SectionHeading } from "@/components/section-heading";

const LANGUAGE_COLORS: Partial<Record<string, string>> = {
    "C#": "#178600",
    TypeScript: "#3178c6",
    JavaScript: "#f1e05a",
    Python: "#3572a5",
    Rust: "#dea584",
    Go: "#00add8",
};

export function ProjectsSection({
    repos,
    dict,
    locale,
}: {
    repos: GiteaRepo[];
    dict: Dictionary["projects"];
    locale: Locale;
}) {
    const dateFormat = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });

    return (
        <section id="projects" className="scroll-mt-24">
            <SectionHeading kicker="git.fristy.net" title={dict.title} subtitle={dict.subtitle} />
            {repos.length === 0 ? (
                <p className="rounded-2xl border border-white/10 bg-panel p-6 text-zinc-400">
                    {dict.empty}
                </p>
            ) : (
                <div className="grid gap-4 sm:grid-cols-2">
                    {repos.map((repo) => (
                        <div
                            key={repo.id}
                            className="group rounded-2xl border border-white/10 bg-panel p-5 transition-colors hover:border-blurple/60"
                        >
                            <p className="font-mono text-sm text-blurple-soft">{repo.fullName}</p>
                            <h3 className="mt-1 text-lg font-bold">
                                <a
                                    href={repo.website ?? repo.htmlUrl}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="transition-colors group-hover:text-white"
                                >
                                    {repo.name}
                                </a>
                            </h3>
                            <p className="mt-2 line-clamp-3 text-sm text-zinc-400">
                                {repo.description ?? dict.noDescription}
                            </p>
                            <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-zinc-500">
                                {repo.language ? (
                                    <span className="inline-flex items-center gap-1.5">
                                        <span
                                            className="h-2.5 w-2.5 rounded-full"
                                            style={{
                                                backgroundColor:
                                                    LANGUAGE_COLORS[repo.language] ?? "#5865f2",
                                            }}
                                        />
                                        {repo.language}
                                    </span>
                                ) : null}
                                <span>
                                    ★ {repo.stars} {dict.stars}
                                </span>
                                <span>
                                    ⑂ {repo.forks} {dict.forks}
                                </span>
                                <span>
                                    {dict.updated}: {dateFormat.format(new Date(repo.updatedAt))}
                                </span>
                            </div>
                            <div className="mt-3 flex items-center justify-between gap-4 text-xs font-medium">
                                <span>
                                    {repo.website ? (
                                        <a
                                            href={repo.website}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-blurple-soft transition-colors hover:text-white"
                                        >
                                            {dict.viewWebsite} ↗
                                        </a>
                                    ) : null}
                                </span>
                                <a
                                    href={repo.htmlUrl}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="text-zinc-500 transition-colors hover:text-white"
                                >
                                    {dict.viewOnGitea} →
                                </a>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </section>
    );
}