// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import type { ComponentProps } from "react";
export interface Contribution {
  date: string;
  count: number;
  level?: number;
}
export type ContributionGraphProps = ComponentProps<"div"> & {
  data: readonly Contribution[];
  label?: string;
};
export function ContributionGraph({
  data,
  label = "Activity",
  className = "",
  ...props
}: ContributionGraphProps) {
  const sorted = [...data].sort((a, b) => a.date.localeCompare(b.date));
  const first = sorted[0],
    last = sorted.at(-1);
  const start = first ? Date.parse(first.date + "T00:00:00Z") : 0;
  const end = last ? Date.parse(last.date + "T00:00:00Z") : 0;
  const count = first ? Math.round((end - start) / 86400000) + 1 : 0;
  if (!Number.isFinite(count) || count < 0 || count > 3660)
    throw new Error(
      "Contribution dates must be ISO dates spanning at most 10 years.",
    );
  const lookup = new Map(data.map((item) => [item.date, item]));
  const total = data.reduce((sum, item) => sum + Math.max(0, item.count), 0);
  return (
    <div className={`ynr-contribution-graph ${className}`} {...props}>
      <p>
        {total} contributions · {label}
      </p>
      {!count ? (
        <p>No activity yet.</p>
      ) : (
        <>
          <div
            className="ynr-contribution-cells"
            role="img"
            aria-label={`${label}: ${total} contributions from ${first!.date} to ${last!.date}`}
          >
            {Array.from({ length: new Date(start).getUTCDay() }, (_, i) => (
              <span key={`pad-${i}`} className="ynr-contribution-pad" />
            ))}
            {Array.from({ length: count }, (_, i) => {
              const date = new Date(start + i * 86400000)
                .toISOString()
                .slice(0, 10);
              const item = lookup.get(date);
              return (
                <span
                  key={date}
                  data-level={Math.min(
                    4,
                    Math.max(
                      0,
                      item?.level ?? Math.ceil((item?.count ?? 0) / 3),
                    ),
                  )}
                  title={`${date}: ${item?.count ?? 0} contributions`}
                />
              );
            })}
          </div>
          <details>
            <summary>Activity data</summary>
            <ul>
              {sorted.map((item) => (
                <li key={item.date}>
                  {item.date}: {item.count}
                </li>
              ))}
            </ul>
          </details>
        </>
      )}
    </div>
  );
}