"use client";
import { useEffect, useRef } from "react";
import type { GitStatus } from "~/utils/git";
import { parsePatchFiles } from "@pierre/diffs";
import type { FileDiff as FileDiffRenderer } from "@pierre/diffs";
import { cn } from "~/utils/cn";

type FileChange = { status: string; path: string };

export type StatusViewProps = {
  status: GitStatus;
  workingDiff: string;
  stagedDiff: string;
};

export function StatusView({ status, workingDiff, stagedDiff }: StatusViewProps) {
  const hasChanges = status.staged.length > 0 || status.unstaged.length > 0 || status.untracked.length > 0;

  if (!hasChanges) {
    return <div className="flex h-full items-center justify-center text-gray-500">Working tree clean</div>;
  }

  return (
    <div className="space-y-6 p-4">
      <DiffSection title="Staged" items={status.staged} color="text-emerald-400" diff={stagedDiff} />
      <DiffSection title="Unstaged" items={status.unstaged} color="text-amber-400" diff={workingDiff} />

      {status.untracked.length > 0 && (
        <section>
          <h2 className="mb-2 text-sm font-medium text-gray-400">Untracked ({status.untracked.length})</h2>
          <ul className="space-y-0.5 font-mono text-sm">
            {status.untracked.map((p) => (
              <li key={p} className="text-gray-500">
                <span className="mr-2 text-gray-600">?</span>
                {p}
              </li>
            ))}
          </ul>
        </section>
      )}
    </div>
  );
}

function DiffSection({
  title,
  items,
  color,
  diff,
}: {
  title: string;
  items: FileChange[];
  color: string;
  diff: string;
}) {
  if (items.length === 0) return null;
  return (
    <section>
      <h2 className={cn("mb-2 text-sm font-medium", color)}>
        {title} ({items.length})
      </h2>
      <FileList items={items} color={color} />
      {diff && <PatchRenderer patch={diff} />}
    </section>
  );
}

function FileList({ items, color }: { items: FileChange[]; color: string }) {
  return (
    <ul className="mb-3 space-y-0.5 font-mono text-sm">
      {items.map((item) => (
        <li key={item.path} className="text-gray-300">
          <span className={cn("mr-2", color)}>{item.status}</span>
          {item.path}
        </li>
      ))}
    </ul>
  );
}

function PatchRenderer({ patch }: { patch: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const instancesRef = useRef<FileDiffRenderer[]>([]);

  useEffect(() => {
    let mounted = true;

    async function render() {
      const { FileDiff } = await import("@pierre/diffs");

      if (!mounted || !containerRef.current) return;

      for (const inst of instancesRef.current) {
        inst.cleanUp();
      }
      instancesRef.current = [];
      containerRef.current.innerHTML = "";

      try {
        const parsed = parsePatchFiles(patch);
        const files = parsed.flatMap((p) => p.files);

        for (const fileDiff of files) {
          const wrapper = document.createElement("div");
          wrapper.className = "mb-3 overflow-hidden rounded-lg border border-gray-800";
          containerRef.current.appendChild(wrapper);

          const instance = new FileDiff({
            theme: "pierre-dark",
            diffStyle: "unified",
            diffIndicators: "bars",
            overflow: "scroll",
          });

          instance.render({
            fileDiff,
            containerWrapper: wrapper,
          });

          instancesRef.current.push(instance);
        }
      } catch {
        if (containerRef.current) {
          containerRef.current.innerHTML = '<p class="text-gray-500 text-sm py-2">Could not parse diff</p>';
        }
      }
    }

    render();

    return () => {
      mounted = false;
      for (const inst of instancesRef.current) {
        inst.cleanUp();
      }
      instancesRef.current = [];
    };
  }, [patch]);

  return <div ref={containerRef} className="mt-3 space-y-3" />;
}