---
import { getCollection } from "astro:content";
import BaseLayout from "@/layouts/BaseLayout.astro";
import HeroCard from "@/components/HeroCard.astro";
import MusicPlayer from "@/components/MusicPlayer.astro";
import ActivityRow from "@/components/ActivityRow.astro";
import RepoList from "@/components/RepoList.astro";
import RecentPosts from "@/components/RecentPosts.astro";

import { fetchGitHubUser, fetchGitHubRepos, fetchContributions } from "@/lib/github";
import { fetchWakaTimeData } from "@/lib/wakatime";
import { mergeActivity } from "@/lib/activity";
import { fetchListenBrainzData } from "@/lib/listenbrainz";

const [user, repos, contributions, wakatime, allPosts, listenBrainz] = await Promise.all([
  fetchGitHubUser(),
  fetchGitHubRepos(),
  fetchContributions(),
  fetchWakaTimeData(),
  getCollection("posts", ({ data }) => !data.draft),
  fetchListenBrainzData(),
]);

const activity = mergeActivity(contributions, wakatime);

const recentPosts = allPosts
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
  .slice(0, 5);

const personLd = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: "Avinal Kumar",
  url: "https://avinal.space",
  image: user?.avatar_url,
  jobTitle: "Software Engineer II (Team Lead)",
  worksFor: { "@type": "Organization", name: "Red Hat", url: "https://www.redhat.com" },
  sameAs: [
    "https://github.com/avinal",
    "https://linkedin.com/in/avinal",
    "https://twitter.com/Avinal_",
  ],
};
---

<BaseLayout title="Home" jsonLd={personLd}>
  <div class="bento">
    <!-- Row 1: Hero (profile+about+skills+links) | Now Playing widget -->
    <div class="bento-8">
      <HeroCard
        name="Avinal Kumar"
        role="Software Engineer II at Red Hat"
        bio="Leading OpenShift Builds at Red Hat by day, contributing to the Linux kernel and GNU toolchain by night. Free software advocate, self-hoster, and GSoC mentor."
        avatarUrl={user?.avatar_url}
      />
    </div>

    <div class="bento-4">
      <MusicPlayer lb={listenBrainz} />
    </div>

    <!-- Row 2: Activity graph + stats (side by side in one card) -->
    <div class="bento-full">
      <ActivityRow activity={activity} user={user} />
    </div>

    <!-- Row 3: Repos -->
    <div class="bento-full">
      <RepoList repos={repos} />
    </div>

    <!-- Row 4: Recent Posts -->
    <div class="bento-full">
      <RecentPosts posts={recentPosts} />
    </div>
  </div>
</BaseLayout>