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 { buttonClass } from "~/ui/Button";
import { Breadcrumbs } from "./RefNavigation";
import { RefSwitcher } from "./RefSwitcher";
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;
};

function EntryCommit({ commit }: { commit: CommitBrief | null | undefined }) {
  if (commit === undefined) return <span className="ml-auto h-3 w-24 animate-pulse rounded bg-gray-900" />;
  if (commit === null) return null;
  return (
    <span className="ml-auto flex min-w-0 items-center gap-3 font-sans text-xs text-gray-500">
      <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"], string> = { tree: "▸", blob: "·", exec: "⚙", symlink: "↪", gitlink: "⊙" };

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">
      <div className="flex flex-wrap items-center gap-3">
        <RefSwitcher
          owner={owner}
          repo={repo}
          current={gitRef.name}
          branches={branches}
          tags={tags}
          path={path}
          mode="tree"
        />
        <Breadcrumbs owner={owner} repo={repo} gitRef={gitRef.name} path={path} />
        <div className="ml-auto flex gap-2">
          <Link
            to="/$owner/$repo/find/$"
            params={{ owner, repo, _splat: gitRef.name }}
            className={buttonClass("ghost", "sm")}
          >
            Go to file
          </Link>
          {canWrite && gitRef.kind === "branch" && (
            <Link
              to="/$owner/$repo/edit/$"
              params={{ owner, repo, _splat: gitRef.name }}
              className={buttonClass("ghost", "sm")}
              title="Open this branch in the browser editor (or press .)"
            >
              Open in editor
            </Link>
          )}
          {containersAllowed && gitRef.kind === "branch" && (
            <Link
              to="/$owner/$repo/edit/$"
              params={{ owner, repo, _splat: gitRef.name }}
              search={{ container: 1 }}
              className={buttonClass("ghost", "sm")}
              title="Open the editor and start a metered container with a terminal"
            >
              Open in container
            </Link>
          )}
          <Link to="/$owner/$repo/search" params={{ owner, repo }} className={buttonClass("ghost", "sm")}>
            Search code
          </Link>
          <Link
            to="/$owner/$repo/commits/$"
            params={{ owner, repo, _splat: path ? `${gitRef.name}/${path}` : gitRef.name }}
            className={buttonClass("ghost", "sm")}
          >
            History
          </Link>
          <Link to="/$owner/$repo/branches" params={{ owner, repo }} className={buttonClass("ghost", "sm")}>
            {branches.length} branches
          </Link>
          {canWrite && gitRef.kind === "branch" && (
            <Link
              to="/$owner/$repo/new/$"
              params={{ owner, repo, _splat: path ? `${gitRef.name}/${path}` : gitRef.name }}
              className={buttonClass("secondary", "sm")}
            >
              Add file
            </Link>
          )}
          <a href={`/${owner}/${repo}/archive/${gitRef.name}.tar.gz`} className={buttonClass("secondary", "sm")}>
            Download
          </a>
        </div>
      </div>
      <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-gray-400 hover:text-accent-400"
            >
              {commit.subject}
            </Link>
          </div>
        }
        actions={
          <span className="font-mono text-xs text-gray-500">
            <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-gray-800/70">
          {path && (
            <li>
              <Link
                to="/$owner/$repo/tree/$"
                params={{ owner, repo, _splat: parent ? `${gitRef.name}/${parent}` : gitRef.name }}
                className="block px-4 py-2 font-mono text-sm text-gray-400 hover:bg-gray-900/60"
              >
                ..
              </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-gray-900/60"
              >
                <span aria-hidden className={entry.type === "tree" ? "w-3 text-accent-400" : "w-3 text-gray-600"}>
                  {ICONS[entry.type]}
                </span>
                <span className={entry.type === "tree" ? "text-gray-100" : "text-gray-300"}>{entry.name}</span>
                <EntryCommit
                  commit={
                    lastCommits
                      ? (lastCommits.commits[entry.name] ?? (lastCommits.complete ? null : undefined))
                      : undefined
                  }
                />
              </Link>
            </li>
          ))}
        </ul>
      </Panel>
      {readme && (
        <Panel title={<span className="font-mono">{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-gray-300">{readme.text}</pre>
            )}
          </div>
        </Panel>
      )}
    </div>
  );
}