import { Link } from "@tanstack/react-router";
import { CommitAuthor } from "./CommitAuthor";
import { Markdown } from "~/ui/Markdown";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { StatusDot } from "~/ui/StatusDot";
import { SkeletonLine } from "@cloudflare/kumo/components/loader";
import {
  ArrowBendLeftUpIcon,
  BookOpenTextIcon,
  FileIcon,
  FolderSimpleIcon,
  type Icon as PhosphorIcon,
  LinkSimpleIcon,
  PackageIcon,
  TerminalWindowIcon,
} from "@phosphor-icons/react";
import { TreeToolbar } from "./TreeToolbar";
import { useLastCommits } from "~/hooks/use-last-commits";
import type { CommitSummary, StatusState, TreeEntry } from "~/lib/types";
import type { CommitBrief } from "~/lib/code-intel";

type Props = {
  owner: string;
  repo: string;
  gitRef: { kind: string; name: string; sha: string };
  path: string;
  entries: TreeEntry[];
  commit: CommitSummary & { authorAccount: string | null };
  commitStatus: StatusState | null;
  /** Latest workflow run for the commit; the status dot links to it, else to the commit's checks. */
  commitRun: number | null;
  readme: { path: string; html: string | null; text: string | null } | null;
  branches: string[];
  tags: string[];
  canWrite: boolean;
  /** The viewer may boot editor containers here (write access, containers on, plan includes them). */
  containersAllowed: boolean;
};

const SKELETON_FIXED = { minWidth: 100, maxWidth: 100, minDuration: 1.5, maxDuration: 1.5, minDelay: 0, maxDelay: 0 };

function EntryCommit({ commit }: { commit: CommitBrief | null | undefined }) {
  if (commit === undefined) return <SkeletonLine className="ml-auto w-24" {...SKELETON_FIXED} />;
  if (commit === null) return null;
  return (
    <span className="ml-auto flex min-w-0 items-center gap-3 font-sans text-xs text-kumo-subtle">
      <span className="hidden max-w-md truncate md:inline">{commit.subject}</span>
      <span className="shrink-0">
        <RelativeTime timestamp={commit.committedAt} />
      </span>
    </span>
  );
}

function CommitStatusLink({
  owner,
  repo,
  sha,
  state,
  run,
}: {
  owner: string;
  repo: string;
  sha: string;
  state: StatusState | null;
  run: number | null;
}) {
  if (!state) return null;
  const className = "flex rounded-full";
  if (run === null) {
    return (
      <Link to="/$owner/$repo/commit/$sha" params={{ owner, repo, sha }} className={className} aria-label="View checks">
        <StatusDot state={state} />
      </Link>
    );
  }
  return (
    <Link
      to="/$owner/$repo/actions/runs/$number"
      params={{ owner, repo, number: String(run) }}
      className={className}
      aria-label="View workflow run"
    >
      <StatusDot state={state} />
    </Link>
  );
}

const ICONS: Record<TreeEntry["type"], PhosphorIcon> = {
  tree: FolderSimpleIcon,
  blob: FileIcon,
  exec: TerminalWindowIcon,
  symlink: LinkSimpleIcon,
  gitlink: PackageIcon,
};

function EntryIcon({ type }: { type: TreeEntry["type"] }) {
  const EntryGlyph = ICONS[type];
  const isDir = type === "tree";
  return (
    <EntryGlyph
      aria-hidden
      weight={isDir ? "fill" : "regular"}
      className={isDir ? "size-4 shrink-0 text-kumo-link" : "size-4 shrink-0 text-kumo-subtle"}
    />
  );
}

export function TreeView({
  owner,
  repo,
  gitRef,
  path,
  entries,
  commit,
  commitStatus,
  commitRun,
  readme,
  branches,
  tags,
  canWrite,
  containersAllowed,
}: Props) {
  const parent = path.split("/").slice(0, -1).join("/");
  const lastCommits = useLastCommits(owner, repo, gitRef.sha, path);
  return (
    <div className="space-y-4">
      <TreeToolbar
        owner={owner}
        repo={repo}
        gitRef={gitRef}
        path={path}
        branches={branches}
        tags={tags}
        canWrite={canWrite}
        containersAllowed={containersAllowed}
      />
      <Panel
        title={
          <div className="flex min-w-0 items-center gap-2">
            <CommitStatusLink owner={owner} repo={repo} sha={commit.sha} state={commitStatus} run={commitRun} />
            <CommitAuthor authorName={commit.authorName} authorAccount={commit.authorAccount} avatar={false} />
            <Link
              to="/$owner/$repo/commit/$sha"
              params={{ owner, repo, sha: commit.sha }}
              className="truncate text-kumo-subtle hover:text-accent-400"
            >
              {commit.subject}
            </Link>
          </div>
        }
        actions={
          <span className="font-mono text-xs text-kumo-subtle">
            <Link
              to="/$owner/$repo/commit/$sha"
              params={{ owner, repo, sha: commit.sha }}
              className="hover:text-accent-400"
            >
              {commit.shortSha}
            </Link>{" "}
            · <RelativeTime timestamp={commit.committedAt} />
          </span>
        }
      >
        <ul className="divide-y divide-kumo-hairline">
          {path && (
            <li>
              <Link
                to="/$owner/$repo/tree/$"
                params={{ owner, repo, _splat: parent ? `${gitRef.name}/${parent}` : gitRef.name }}
                className="flex items-center gap-3 px-4 py-2 font-mono text-sm text-kumo-subtle hover:bg-kumo-tint"
              >
                <ArrowBendLeftUpIcon aria-hidden className="size-4 shrink-0" />
                ..
              </Link>
            </li>
          )}
          {entries.map((entry) => (
            <li key={entry.path}>
              <Link
                to={entry.type === "tree" ? "/$owner/$repo/tree/$" : "/$owner/$repo/blob/$"}
                params={{ owner, repo, _splat: `${gitRef.name}/${entry.path}` }}
                className="flex items-center gap-3 px-4 py-2 font-mono text-sm hover:bg-kumo-tint"
              >
                <EntryIcon type={entry.type} />
                <span className={entry.type === "tree" ? "text-kumo-strong" : "text-kumo-default"}>{entry.name}</span>
                <EntryCommit
                  commit={
                    lastCommits
                      ? (lastCommits.commits[entry.name] ?? (lastCommits.complete ? null : undefined))
                      : undefined
                  }
                />
              </Link>
            </li>
          ))}
        </ul>
      </Panel>
      {readme && (
        <Panel
          title={
            <span className="flex items-center gap-2 font-mono">
              <BookOpenTextIcon aria-hidden className="size-4 text-kumo-subtle" />
              {readme.path}
            </span>
          }
        >
          <div className="px-6 py-5">
            {readme.html !== null ? (
              <Markdown html={readme.html} />
            ) : (
              <pre className="font-mono text-sm whitespace-pre-wrap text-kumo-default">{readme.text}</pre>
            )}
          </div>
        </Panel>
      )}
    </div>
  );
}