import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { cn } from "~/utils/cn";
import type { ContributionDay } from "~/server/contributions";

const WEEK = 7;
const LEVELS = ["bg-kumo-base", "bg-accent-950", "bg-accent-800", "bg-accent-600", "bg-accent-400"];
const LEVEL_STEPS = [0, 1, 3, 6, 10];
const TOOLTIP_OFFSET_PX = 8;

const BREAKDOWN_LABELS = [
  { key: "commits", singular: "commit", plural: "commits" },
  { key: "pulls", singular: "pull request event", plural: "pull request events" },
  { key: "issues", singular: "issue opened", plural: "issues opened" },
  { key: "reviews", singular: "comment or review", plural: "comments and reviews" },
  { key: "other", singular: "other event", plural: "other events" },
  { key: "private", singular: "contribution in a private repository", plural: "contributions in private repositories" },
] as const;

const DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
  weekday: "short",
  month: "short",
  day: "numeric",
  year: "numeric",
  timeZone: "UTC",
});

type Hover = { day: ContributionDay; left: number; top: number };

function level(count: number): string {
  let index = 0;
  for (const [step, threshold] of LEVEL_STEPS.entries()) if (count >= threshold) index = step;
  return LEVELS[index];
}

function formatDay(date: string): string {
  return DATE_FORMAT.format(new Date(`${date}T00:00:00Z`));
}

function DayCard({ hover }: { hover: Hover }) {
  const { day } = hover;
  const lines = day.breakdown
    ? BREAKDOWN_LABELS.flatMap((label) => {
        const value = day.breakdown?.[label.key] ?? 0;
        return value > 0 ? [`${value} ${value === 1 ? label.singular : label.plural}`] : [];
      })
    : [];
  return (
    <div
      role="tooltip"
      className="pointer-events-none absolute z-30 w-56 -translate-x-1/2 -translate-y-full rounded-md border border-kumo-line bg-kumo-canvas px-3 py-2 text-xs shadow-2xl shadow-black/60"
      style={{ left: hover.left, top: hover.top - TOOLTIP_OFFSET_PX }}
    >
      <div className="font-medium text-kumo-strong">
        {day.count === 0 ? "No contributions" : `${day.count} contribution${day.count === 1 ? "" : "s"}`}
      </div>
      <div className="text-kumo-subtle">{formatDay(day.date)}</div>
      {lines.length > 0 && (
        <ul className="mt-1.5 space-y-0.5 text-kumo-default">
          {lines.map((line) => (
            <li key={line}>{line}</li>
          ))}
        </ul>
      )}
      {day.repos.length > 0 && (
        <div className="mt-1.5 border-t border-kumo-hairline pt-1.5 font-mono text-2xs text-accent-300">
          {day.repos.map((repo) => (
            <div key={repo} className="truncate">
              {repo}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

type Props = {
  days: ContributionDay[];
  years: number[];
  year: number | null;
  owner: string;
  /** The day whose details are open below the graph. */
  selected: string | null;
  actions?: React.ReactNode;
};

function YearList({ years, year, owner }: Pick<Props, "years" | "year" | "owner">) {
  if (years.length < 2) return null;
  const options = [{ value: null, label: "Last year" }, ...years.map((value) => ({ value, label: String(value) }))];
  return (
    <nav
      aria-label="Contribution year"
      className="flex shrink-0 gap-1 overflow-x-auto md:max-h-36 md:flex-col md:overflow-y-auto"
    >
      {options.map((option) => (
        <Link
          key={option.label}
          to="/$owner"
          params={{ owner }}
          search={(previous) => ({
            ...previous,
            year: option.value ?? undefined,
            day: undefined,
            repoPage: undefined,
            activityPage: undefined,
          })}
          resetScroll={false}
          aria-current={option.value === year ? "page" : undefined}
          className={cn(
            "rounded px-2.5 py-1 text-xs whitespace-nowrap",
            option.value === year
              ? "bg-accent-600 text-white"
              : "text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-strong",
          )}
        >
          {option.label}
        </Link>
      ))}
    </nav>
  );
}

export function ContributionGraph({ days, years, year, owner, selected, actions }: Props) {
  const [hover, setHover] = useState<Hover | null>(null);
  if (days.length === 0) return null;
  const weeks: ContributionDay[][] = [];
  for (let index = 0; index < days.length; index += WEEK) weeks.push(days.slice(index, index + WEEK));
  const total = days.reduce((sum, day) => sum + day.count, 0);

  function show(day: ContributionDay, target: HTMLElement) {
    const container = target.closest("[data-contribution-grid]");
    if (!(container instanceof HTMLElement)) return;
    const box = target.getBoundingClientRect();
    const frame = container.getBoundingClientRect();
    setHover({ day, left: box.left - frame.left + box.width / 2, top: box.top - frame.top });
  }

  return (
    <section className="space-y-2">
      <div className="flex flex-wrap items-center gap-3">
        <h2 className="label-small text-kumo-subtle">
          {total} contribution{total === 1 ? "" : "s"} {year === null ? "in the last year" : `in ${year}`}
        </h2>
        {actions}
      </div>
      <div className="flex flex-col gap-3 md:flex-row">
        <div className="relative min-w-0 flex-1" data-contribution-grid>
          <div className="overflow-x-auto rounded-md border border-kumo-hairline bg-kumo-canvas/60 p-3">
            <div className="flex gap-0.5" onMouseLeave={() => setHover(null)}>
              {weeks.map((week) => (
                <div key={week[0].date} className="flex flex-col gap-0.5">
                  {week.map((day) => (
                    <Link
                      key={day.date}
                      to="/$owner"
                      params={{ owner }}
                      search={(previous) => ({
                        ...previous,
                        day: selected === day.date ? undefined : day.date,
                        repoPage: undefined,
                        activityPage: undefined,
                      })}
                      resetScroll={false}
                      aria-label={`${day.count} contributions on ${formatDay(day.date)}`}
                      aria-current={selected === day.date ? "date" : undefined}
                      onMouseEnter={(event) => show(day, event.currentTarget)}
                      onFocus={(event) => show(day, event.currentTarget)}
                      onBlur={() => setHover(null)}
                      className={cn(
                        "block size-2.5 rounded-xs outline-offset-1 focus-visible:outline-2 focus-visible:outline-accent-500",
                        level(day.count),
                        hover?.day.date === day.date && "ring-1 ring-gray-300",
                        selected === day.date && "ring-2 ring-accent-400",
                      )}
                    />
                  ))}
                </div>
              ))}
            </div>
          </div>
          {hover && <DayCard hover={hover} />}
        </div>
        <YearList years={years} year={year} owner={owner} />
      </div>
    </section>
  );
}