import { useState } from "react";
import { cn } from "~/utils/cn";
import type { ContributionDay } from "~/server/profiles";

const WEEK = 7;
const LEVELS = ["bg-gray-900", "bg-orange-950", "bg-orange-800", "bg-orange-600", "bg-orange-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" },
] 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-gray-700 bg-gray-950 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-gray-100">
        {day.count === 0 ? "No contributions" : `${day.count} contribution${day.count === 1 ? "" : "s"}`}
      </div>
      <div className="text-gray-500">{formatDay(day.date)}</div>
      {lines.length > 0 && (
        <ul className="mt-1.5 space-y-0.5 text-gray-300">
          {lines.map((line) => (
            <li key={line}>{line}</li>
          ))}
        </ul>
      )}
      {day.repos.length > 0 && (
        <div className="mt-1.5 border-t border-gray-800 pt-1.5 font-mono text-[11px] text-accent-300">
          {day.repos.map((repo) => (
            <div key={repo} className="truncate">
              {repo}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export function ContributionGraph({ days }: { days: ContributionDay[] }) {
  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">
      <h2 className="label-caps text-gray-500">
        {total} contribution{total === 1 ? "" : "s"} in the last year
      </h2>
      <div className="relative" data-contribution-grid>
        <div className="overflow-x-auto rounded-md border border-gray-800 bg-gray-950/60 p-3">
          <div className="flex gap-[3px]" onMouseLeave={() => setHover(null)}>
            {weeks.map((week) => (
              <div key={week[0].date} className="flex flex-col gap-[3px]">
                {week.map((day) => (
                  <button
                    key={day.date}
                    type="button"
                    aria-label={`${day.count} contributions on ${formatDay(day.date)}`}
                    onMouseEnter={(event) => show(day, event.currentTarget)}
                    onFocus={(event) => show(day, event.currentTarget)}
                    onBlur={() => setHover(null)}
                    className={cn(
                      "size-2.5 rounded-[2px] 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",
                    )}
                  />
                ))}
              </div>
            ))}
          </div>
        </div>
        {hover && <DayCard hover={hover} />}
      </div>
    </section>
  );
}