"use client";

import { useEffect, useState } from "react";

const activitySvg =
  "https://gitact.spaceistyping.com/activity.svg?days=365&source=all&theme=dark";

export function Activity() {
  const [dailyActivity, setDailyActivity] = useState<string | null>(null);
  const [projectCount, setProjectCount] = useState<number | null>(null);

  useEffect(() => {
    // Fetch a string of how long i have coded today, e.g. "2h 35m"
    fetch(
      "https://shsf-api.reversed.dev/api/exec/6/842aa52f-1a9e-43e1-b630-00286b44897a",
    )
      .then((response) => response.json())
      .then((hourText) => {
        setDailyActivity(hourText.text);
        setProjectCount(hourText.across);
      });
  }, []);

  return (
    <section className="w-full max-w-6xl mx-auto space-y-6 px-4 sm:space-y-8">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
          Code Activity
        </h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
          Today, i've already been coding for
          <span className="font-mono text-base text-green-400 ml-1">
            {dailyActivity || "..."}
          </span>
          , across approximately
          <span className="font-mono text-base text-green-400 ml-1">
            {projectCount !== null ? projectCount : "..."}
          </span>{" "}
          projects .
        </p>
      </div>

      <div className="mx-auto max-w-5xl rounded-3xl border border-white/10 bg-white/5 p-3 shadow-[0_20px_80px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:p-4 md:p-6">
        <div className="overflow-hidden rounded-2xl border border-white/10 bg-[#0a0a12]">
          <img
            src={activitySvg}
            alt="Git activity graph"
            className="block h-auto w-full object-contain"
            loading="lazy"
            referrerPolicy="no-referrer"
          />
        </div>
      </div>

      <div>
        <p className="text-center text-gray-500 text-sm">
          Data from my & my agents <strong>public</strong>{" "}
          <a
            href="https://github.com/Space-Banane"
            className="text-blue-400 hover:underline"
          >
            Github
          </a>{" "}
          &{" "}
          <a
            href="https://gitea.reversed.dev/space"
            className="text-blue-400 hover:underline"
          >
            Gitea
          </a>{" "}
          contributions. Via{" "}
          <a
            href="https://gitea.reversed.dev/space/git-activity-merger"
            className="text-blue-400 hover:underline"
          >
            Git Activity Merger
          </a>
          . Possibly cached & delayed.
        </p>
        <p className="text-center text-gray-500 text-sm max-w-2xl justify-center mx-auto mt-1">
          Coding time is estimated based on Wakapi data, which tracks my coding
          activity across a lot of projects, but also gets things wrong. So take
          it with a grain of salt. An <a href="https://github.com/Space-Banane/shsf" className="text-blue-400 hover:underline">SHSF Function</a> fetches the data and makes it available via an API.
        </p>
      </div>
    </section>
  );
}
