import { Link } from "@tanstack/react-router";
import { SNIPPET_CLOSE, SNIPPET_OPEN } from "~/lib/code-intel";
import type { CodeSearchHit, CodeSearchLine } from "~/lib/code-intel";
import { EmptyState } from "~/ui/EmptyState";
import { TextLink } from "~/ui/TextLink";

type Segment = { offset: number; text: string; marked: boolean };

function snippetSegments(text: string): Segment[] {
  const out: Segment[] = [];
  let offset = 0;
  for (const [position, part] of text.split(SNIPPET_OPEN).entries()) {
    const [marked, rest] =
      position === 0 ? ["", part] : [part.split(SNIPPET_CLOSE)[0] ?? "", part.split(SNIPPET_CLOSE)[1] ?? ""];
    if (marked) out.push({ offset, text: marked, marked: true });
    offset += marked.length + 1;
    if (rest) out.push({ offset, text: rest, marked: false });
    offset += rest.length + 1;
  }
  return out;
}

function lineSegments(line: CodeSearchLine): Segment[] {
  const out: Segment[] = [];
  let cursor = 0;
  for (const { start, end } of line.ranges) {
    if (start > cursor) out.push({ offset: cursor, text: line.text.slice(cursor, start), marked: false });
    out.push({ offset: start, text: line.text.slice(start, end), marked: true });
    cursor = end;
  }
  if (cursor < line.text.length) out.push({ offset: cursor, text: line.text.slice(cursor), marked: false });
  return out;
}

function Highlighted({ segments }: { segments: Segment[] }) {
  return segments.map((segment) =>
    segment.marked ? (
      <mark key={segment.offset} className="rounded-sm bg-accent-500/25 text-accent-200">
        {segment.text}
      </mark>
    ) : (
      <span key={segment.offset}>{segment.text}</span>
    ),
  );
}

function blobParams(hit: CodeSearchHit) {
  return { owner: hit.owner, repo: hit.repo, _splat: `${hit.ref}/${hit.path}` };
}

/** Path with the directory dimmed, so the file name is what the eye lands on. */
function FilePath({ path }: { path: string }) {
  const slash = path.lastIndexOf("/");
  return (
    <>
      {slash >= 0 && <span className="text-kumo-subtle">{path.slice(0, slash + 1)}</span>}
      <span>{path.slice(slash + 1)}</span>
    </>
  );
}

function MatchLines({ hit }: { hit: CodeSearchHit }) {
  if (hit.lines.length === 0) {
    return (
      <pre className="overflow-x-auto px-4 py-2 font-mono text-xs leading-5 whitespace-pre-wrap text-kumo-subtle">
        <Highlighted segments={snippetSegments(hit.snippet)} />
      </pre>
    );
  }
  return (
    <ol className="overflow-x-auto py-1 font-mono text-xs leading-5">
      {hit.lines.map((line) => (
        <li key={line.number} className="flex hover:bg-kumo-overlay/40">
          <Link
            to="/$owner/$repo/blob/$"
            params={blobParams(hit)}
            hash={`L${line.number}`}
            className="w-14 shrink-0 pr-3 text-right text-kumo-inactive select-none hover:text-accent-400"
            aria-label={`Line ${line.number}`}
          >
            {line.number}
          </Link>
          <code className="pr-4 whitespace-pre text-kumo-default">
            {line.clippedStart && <span className="text-kumo-inactive">…</span>}
            <Highlighted segments={lineSegments(line)} />
            {line.clippedEnd && <span className="text-kumo-inactive">…</span>}
          </code>
        </li>
      ))}
    </ol>
  );
}

export function CodeSearchResults({
  hits,
  showRepo,
  empty,
}: {
  hits: CodeSearchHit[];
  showRepo: boolean;
  empty: string;
}) {
  if (hits.length === 0) return <EmptyState title={empty} icon="code" />;
  return (
    <ul className="divide-y divide-kumo-hairline">
      {hits.map((hit) => {
        const more = hit.matchCount - hit.lines.length;
        return (
          <li key={`${hit.owner}/${hit.repo}/${hit.path}`} className="pb-2">
            <div className="flex min-w-0 items-center gap-2 px-4 pt-3 pb-1 font-mono text-sm">
              {showRepo && (
                <Link
                  to="/$owner/$repo"
                  params={{ owner: hit.owner, repo: hit.repo }}
                  className="shrink-0 text-kumo-subtle hover:text-accent-400"
                >
                  {hit.owner}/{hit.repo}
                </Link>
              )}
              {showRepo && (
                <span aria-hidden className="text-kumo-inactive">
                  ›
                </span>
              )}
              <TextLink to="/$owner/$repo/blob/$" params={blobParams(hit)} className="min-w-0 truncate">
                <FilePath path={hit.path} />
              </TextLink>
              {hit.matchCount > 0 && (
                <span className="ml-auto shrink-0 font-sans text-xs text-kumo-subtle">
                  {hit.matchCount} matching line{hit.matchCount === 1 ? "" : "s"}
                </span>
              )}
            </div>
            <MatchLines hit={hit} />
            {more > 0 && (
              <TextLink
                to="/$owner/$repo/blob/$"
                params={blobParams(hit)}
                hash={`L${hit.lines.at(-1)?.number ?? 1}`}
                tone="subtle"
                className="ml-14 text-xs"
              >
                {more} more in this file
              </TextLink>
            )}
          </li>
        );
      })}
    </ul>
  );
}