import { Link } from "@tanstack/react-router";
import { Avatar } from "~/ui/Avatar";
import { Panel } from "~/ui/Panel";
import { cn } from "~/utils/cn";
import type { getRepoInsights } from "~/fns/insights";

type Insights = Awaited<ReturnType<typeof getRepoInsights>>;

const DAYS_PER_WEEK = 7;
const WEEK_MS = DAYS_PER_WEEK * 24 * 60 * 60 * 1000;
const MONTH_FORMAT = new Intl.DateTimeFormat(undefined, { month: "short", timeZone: "UTC" });
const WEEK_FORMAT = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", timeZone: "UTC" });

const PULSE_ITEMS = [
  { key: "pullsMerged", label: "Pull requests merged" },
  { key: "pullsOpened", label: "Pull requests opened" },
  { key: "issuesClosed", label: "Issues closed" },
  { key: "issuesOpened", label: "Issues opened" },
  { key: "activeAuthors", label: "Active authors" },
] as const;

export function PulseStats({ pulse }: { pulse: Insights["pulse"] }) {
  return (
    <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-kumo-hairline bg-kumo-fill sm:grid-cols-5">
      {PULSE_ITEMS.map((item) => (
        <div key={item.key} className="bg-kumo-canvas p-4 last:col-span-2 sm:last:col-span-1">
          <dt className="text-xs text-kumo-subtle">{item.label}</dt>
          <dd className="mt-1 text-2xl font-semibold text-kumo-strong tabular-nums">{pulse[item.key]}</dd>
        </div>
      ))}
    </dl>
  );
}

function Bars({ values, weekStart, className }: { values: number[]; weekStart: number; className?: string }) {
  const peak = Math.max(1, ...values);
  const total = values.reduce((sum, value) => sum + value, 0);
  return (
    <div className={cn("flex items-end gap-0.5", className)}>
      <span className="sr-only">
        {total} commits over {values.length} weeks, peaking at {peak} in one week
      </span>
      {values.map((value, week) => {
        const start = weekStart + week * WEEK_MS;
        const label = `${value} ${value === 1 ? "commit" : "commits"}, week of ${WEEK_FORMAT.format(start)}`;
        return (
          <div
            key={start}
            title={label}
            aria-hidden
            className={cn("flex-1 rounded-sm", value > 0 ? "bg-accent-500 hover:bg-accent-400" : "bg-kumo-base")}
            style={{ height: `${Math.max(4, (value / peak) * 100)}%` }}
          />
        );
      })}
    </div>
  );
}

export function CommitActivity({ insights }: { insights: Insights }) {
  const total = insights.weekly.reduce((sum, value) => sum + value, 0);
  const months = insights.weekly.flatMap((_, week) => {
    const start = new Date(insights.weekStart + week * WEEK_MS);
    return start.getUTCDate() <= DAYS_PER_WEEK ? [{ week, label: MONTH_FORMAT.format(start) }] : [];
  });
  return (
    <Panel
      title="Commit activity"
      actions={
        <span className="text-xs text-kumo-subtle">
          {total} {total === 1 ? "commit" : "commits"} on the default branch in the last year
        </span>
      }
    >
      <div className="p-4">
        <Bars values={insights.weekly} weekStart={insights.weekStart} className="h-32" />
        <div className="relative mt-1 h-4 text-2xs text-kumo-subtle">
          {months.map((month) => (
            <span
              key={month.week}
              className="absolute"
              style={{ left: `${(month.week / insights.weekly.length) * 100}%` }}
            >
              {month.label}
            </span>
          ))}
        </div>
      </div>
    </Panel>
  );
}

export function Contributors({ insights }: { insights: Insights }) {
  if (insights.contributors.length === 0) return null;
  return (
    <Panel title="Contributors" actions={<span className="text-xs text-kumo-subtle">Last 52 weeks</span>}>
      <ol className="divide-y divide-kumo-hairline">
        {insights.contributors.map((person, rank) => (
          <li key={person.account ?? `${person.name}-${rank}`} className="flex items-center gap-3 px-4 py-3">
            <span className="w-6 text-right text-xs text-kumo-inactive tabular-nums">{rank + 1}</span>
            <Avatar name={person.account ?? person.name} src={person.account ? undefined : null} size="sm" />
            <div className="min-w-0 flex-1">
              {person.account ? (
                <Link
                  to="/$owner"
                  params={{ owner: person.account }}
                  className="font-medium text-kumo-strong hover:text-accent-400"
                  data-hovercard="user"
                  data-ref={person.account}
                >
                  {person.account}
                </Link>
              ) : (
                <span className="font-medium text-kumo-default">{person.name}</span>
              )}
              <p className="text-xs text-kumo-subtle">
                {person.commits} {person.commits === 1 ? "commit" : "commits"}
              </p>
            </div>
            {person.weekly.length > 0 && (
              <Bars values={person.weekly} weekStart={insights.weekStart} className="hidden h-8 w-48 sm:flex" />
            )}
          </li>
        ))}
      </ol>
    </Panel>
  );
}