import { Link } from "@tanstack/react-router";
import { describeActivity } from "~/components/ActivityFeed";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";
import type { getContributions } from "~/fns/contributions";

type Detail = NonNullable<NonNullable<Awaited<ReturnType<typeof getContributions>>>["detail"]>;
type Activity = Detail["activity"]["items"][number];

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

function plural(count: number, word: string): string {
  return `${count} ${word}${count === 1 ? "" : "s"}`;
}

/** Issue and pull request activity links to the thread; everything else to the repository. */
function ActivityLink({ item }: { item: Activity }) {
  const number = typeof item.data.number === "number" ? item.data.number : null;
  const isPull = item.kind.startsWith("pull_") || item.data.isPull === true;
  const params = { owner: item.repo.owner, repo: item.repo.name };
  const label = describeActivity(item);
  if (number !== null && isPull) {
    return (
      <TextLink to="/$owner/$repo/pull/$number" params={{ ...params, number: String(number) }}>
        {label}
      </TextLink>
    );
  }
  if (number !== null && (item.kind.startsWith("issue_") || item.kind === "comment")) {
    return (
      <TextLink to="/$owner/$repo/issues/$number" params={{ ...params, number: String(number) }}>
        {label}
      </TextLink>
    );
  }
  return <span className="text-kumo-default">{label}</span>;
}

function PageLinks({
  owner,
  page,
  hasMore,
  param,
}: {
  owner: string;
  page: number;
  hasMore: boolean;
  param: "repoPage" | "activityPage";
}) {
  if (page === 1 && !hasMore) return null;
  return (
    <div className="flex justify-between border-t border-kumo-hairline px-4 py-2 text-xs">
      {page > 1 ? (
        <Link
          to="/$owner"
          params={{ owner }}
          search={(previous) => ({ ...previous, [param]: page - 1 === 1 ? undefined : page - 1 })}
          resetScroll={false}
          className="text-kumo-subtle hover:text-kumo-strong"
        >
          ← Newer
        </Link>
      ) : (
        <span />
      )}
      {hasMore && (
        <Link
          to="/$owner"
          params={{ owner }}
          search={(previous) => ({ ...previous, [param]: page + 1 })}
          resetScroll={false}
          className="text-kumo-subtle hover:text-kumo-strong"
        >
          More →
        </Link>
      )}
    </div>
  );
}

/** The selected day's contributions under the graph; each list pages on its own. */
export function ContributionDayDetails({ owner, detail }: { owner: string; detail: Detail }) {
  const title = DATE_FORMAT.format(new Date(`${detail.day}T00:00:00Z`));
  const empty = detail.commitRepos.total === 0 && detail.activity.total === 0 && detail.privateCount === 0;
  return (
    <Panel
      title={`Contributions on ${title}`}
      actions={
        <Link
          to="/$owner"
          params={{ owner }}
          search={(previous) => ({ ...previous, day: undefined, repoPage: undefined, activityPage: undefined })}
          resetScroll={false}
          className="text-xs text-kumo-subtle hover:text-kumo-strong"
        >
          Close
        </Link>
      }
    >
      {empty && <p className="px-4 py-3 text-sm text-kumo-subtle">No contributions on this day.</p>}
      {detail.commitRepos.total > 0 && (
        <section>
          <h3 className="px-4 pt-3 text-xs font-medium text-kumo-subtle">
            Committed to {detail.commitRepos.total} {detail.commitRepos.total === 1 ? "repository" : "repositories"}
          </h3>
          <ul className="divide-y divide-kumo-hairline">
            {detail.commitRepos.items.map((repo) => (
              <li key={`${repo.owner}/${repo.name}`} className="space-y-1 px-4 py-2.5 text-sm">
                <div className="flex items-center gap-2">
                  <TextLink to="/$owner/$repo" params={{ owner: repo.owner, repo: repo.name }} mono>
                    {repo.owner}/{repo.name}
                  </TextLink>
                  <Link
                    to="/$owner/$repo/commits/$"
                    params={{ owner: repo.owner, repo: repo.name, _splat: "" }}
                    className="ml-auto text-xs text-kumo-subtle hover:text-accent-400"
                  >
                    {plural(repo.commits, "commit")}
                  </Link>
                </div>
                {repo.sample.length > 0 && (
                  <ul className="space-y-0.5 pl-3">
                    {repo.sample.map((commit) => (
                      <li key={commit.sha} className="flex min-w-0 gap-2 text-xs">
                        <Link
                          to="/$owner/$repo/commit/$sha"
                          params={{ owner: repo.owner, repo: repo.name, sha: commit.sha }}
                          className="shrink-0 font-mono text-kumo-subtle hover:text-accent-400"
                        >
                          {commit.sha.slice(0, SHORT_SHA)}
                        </Link>
                        <span className="truncate text-kumo-default">{commit.subject}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            ))}
          </ul>
          <PageLinks
            owner={owner}
            page={detail.commitRepos.page}
            hasMore={detail.commitRepos.hasMore}
            param="repoPage"
          />
        </section>
      )}
      {detail.activity.total > 0 && (
        <section className="border-t border-kumo-hairline">
          <h3 className="px-4 pt-3 text-xs font-medium text-kumo-subtle">
            {plural(detail.activity.total, "other contribution")}
          </h3>
          <ol className="divide-y divide-kumo-hairline">
            {detail.activity.items.map((item) => (
              <li key={item.id} className="flex flex-wrap items-baseline gap-x-2 px-4 py-2 text-sm">
                <ActivityLink item={item} />
                <span className="text-kumo-inactive">in</span>
                <TextLink
                  to="/$owner/$repo"
                  params={{ owner: item.repo.owner, repo: item.repo.name }}
                  mono
                  className="text-xs"
                >
                  {item.repo.owner}/{item.repo.name}
                </TextLink>
                <span className="ml-auto text-xs text-kumo-inactive">
                  <RelativeTime timestamp={item.createdAt} />
                </span>
              </li>
            ))}
          </ol>
          <PageLinks owner={owner} page={detail.activity.page} hasMore={detail.activity.hasMore} param="activityPage" />
        </section>
      )}
      {detail.privateCount > 0 && (
        <p className="border-t border-kumo-hairline px-4 py-2.5 text-xs text-kumo-subtle">
          {plural(detail.privateCount, "contribution")} in private repositories.
        </p>
      )}
    </Panel>
  );
}