WeeklySummaryCard.tsx

// @ts-nocheck
"use client";

import { ChevronDown } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { useAccount } from "@/components/AccountContext";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

interface WeeklySummaryData {
  commits: {
    current: number;
    previous: number;
    delta: number;
    trend: "up" | "down" | "same";
  };
  prs: {
    thisWeek: { opened: number; merged: number };
    lastWeek: { opened: number; merged: number };
  };
  activeDays: { thisWeek: number; lastWeek: number };
  streak: number;
  topRepo: string | null;
}

export default function WeeklySummaryCard() {
  const { selectedAccount } = useAccount();
  const [summary, setSummary] = useState<WeeklySummaryData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isCollapsed, setIsCollapsed] = useState(false);

const maxCommits = summary?.commits
  ? Math.max(summary.commits.current, summary.commits.previous, 1)
  : 1;

const maxPRs = summary?.prs
  ? Math.max(summary.prs.thisWeek.merged, summary.prs.lastWeek.merged, 1)
  : 1;

const maxActiveDays = summary?.activeDays
  ? Math.max(summary.activeDays.thisWeek, summary.activeDays.lastWeek, 1)
  : 1;

  const fetchSummary = useCallback(() => {
    setLoading(true);
    setError(null);

    const url = selectedAccount !== null
      ? `/api/metrics/weekly-summary?accountId=${encodeURIComponent(selectedAccount)}`
      : "/api/metrics/weekly-summary";

    fetch(url)
      .then((r) => {
        if (!r.ok) throw new Error("API error");
        return r.json();
      })
      .then((data: WeeklySummaryData) => setSummary(data))
      .catch(() =>
        setError(
          "We couldn't load your weekly summary right now. Please try again in a moment."
        )
      )
      .finally(() => setLoading(false));
  }, [selectedAccount]);

  useEffect(() => {
    fetchSummary();
  }, [fetchSummary]);

  return (
    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
          This Week
        </h2>
        <button
          type="button"
          onClick={() => setIsCollapsed((value) => !value)}
          className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
          aria-expanded={!isCollapsed}
          aria-label={
            isCollapsed ? "Expand weekly summary" : "Collapse weekly summary"
          }
          suppressHydrationWarning
        >
          {isCollapsed ? ">" : "v"}
        </Button>
      </CardHeader>

      {!isCollapsed &&
        (loading ? (
          <div
            role="status"
            aria-live="polite"
            aria-busy="true"
            className="mt-4 space-y-3"
          >
            <span className="sr-only">Loading weekly summary</span>
            {[1, 2, 3, 4, 5].map((i) => (
              <div
                key={i}
                aria-hidden="true"
                className="h-14 rounded-lg skeleton-shimmer"
              />
            ))}
          </div>
        ) : error ? (
          <CardContent>
            <div className="mt-4 rounded-lg border border-[var(--destructive)]/20 bg-[var(--destructive)]/10 p-4 text-sm text-[var(--destructive)]">
              {error}
            </div>
          </CardContent>
        ) : summary && summary.commits && summary.prs && summary.activeDays ? (
          <CardContent>
            <div className="space-y-4 pt-2">
            {/* Commits Comparison */}
            <div className="rounded-lg bg-[var(--control)] p-4 stat-cell">
              <div className="mb-3 flex items-center justify-between">
                <span className="text-sm text-[var(--muted-foreground)]">
                  Commits
                </span>
                <span className="text-base font-semibold text-[var(--card-foreground)]">
                  {summary.commits.current}
                  {summary.commits.trend !== "same" && (
                    <span
                      className="ml-2 text-sm font-medium"
                      style={{
                        color: summary.commits.trend === "up" ? "var(--success)" : "var(--destructive)",
                      }}
                    >
                      {summary.commits.trend === "up" ? "+" : "-"}
                      {Math.abs(summary.commits.delta)}
                    </span>
                  )}
                </span>
              </div>
              <div className="space-y-1.5">
                <div className="flex items-center gap-2">
                  <span className="w-16 text-xs text-[var(--muted-foreground)]">Last week</span>
                  <div className="flex-1">
                    <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                      <div
                        className="h-full bg-[var(--muted-foreground)] progress-fill"
                        style={{
                          width: `${((summary.commits.previous / maxCommits) * 100).toFixed(0)}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-16 text-xs text-[var(--muted-foreground)]">This week</span>
                  <div className="flex-1">
                    <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                      <div
                        className="h-full bg-[var(--success)] progress-fill"
                        style={{
                          width: `${((summary.commits.current / maxCommits) * 100).toFixed(0)}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* PRs Comparison */}
            <div className="rounded-lg bg-[var(--control)] p-4 stat-cell">
              <div className="mb-3 flex items-center justify-between">
                <span className="text-sm text-[var(--muted-foreground)]">PRs Merged</span>
                <span className="text-base font-semibold text-[var(--card-foreground)]">
                  {summary.prs.thisWeek.merged}
                </span>
              </div>
              <div className="space-y-1.5">
                <div className="flex items-center gap-2">
                  <span className="w-16 text-xs text-[var(--muted-foreground)]">Last week</span>
                  <div className="flex-1">
                    <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                      <div
                        className="h-full bg-[var(--muted-foreground)]"
                        style={{
                          width: `${((summary.prs.lastWeek.merged / maxPRs) * 100).toFixed(0)}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-16 text-xs text-[var(--muted-foreground)]">This week</span>
                  <div className="flex-1">
                    <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                      <div
                        className="h-full bg-[var(--success)]"
                        style={{
                          width: `${((summary.prs.thisWeek.merged / maxPRs) * 100).toFixed(0)}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Active Days Comparison */}
            <div className="rounded-lg bg-[var(--control)] p-4 stat-cell">
              <div className="mb-3 flex items-center justify-between">
                <span className="text-sm text-[var(--muted-foreground)]">Active Days</span>
                <span className="text-base font-semibold text-[var(--card-foreground)]">
                  {summary.activeDays.thisWeek} / 7
                </span>
              </div>
              <div className="space-y-1.5">
                <div className="flex items-center gap-2">
                  <span className="w-16 text-xs text-[var(--muted-foreground)]">Last week</span>
                  <div className="flex-1">
                    <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                      <div
                        className="h-full bg-[var(--muted-foreground)]"
                        style={{
                          width: `${((summary.activeDays.lastWeek / maxActiveDays) * 100).toFixed(0)}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-16 text-xs text-[var(--muted-foreground)]">This week</span>
                  <div className="flex-1">
                    <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                      <div
                        className="h-full bg-[var(--success)]"
                        style={{
                          width: `${((summary.activeDays.thisWeek / maxActiveDays) * 100).toFixed(0)}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Streak & Top Repo */}
            <div className="space-y-3">
              <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-4 stat-cell">
                <span className="text-sm text-[var(--muted-foreground)]">Streak</span>
                <span className="text-base font-semibold text-[var(--card-foreground)]">
                  {summary.streak} day streak
                </span>
              </div>
              <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-4 stat-cell">
                <span className="text-sm text-[var(--muted-foreground)]">Top repo</span>
                <span className="text-base font-semibold text-[var(--card-foreground)]">
                  {summary.topRepo ?? "-"}
                </span>
              </div>
            </div>
            </div>
          </CardContent>
        ) : null)}
    </Card>
  );
}