"use client";

import { useMemo, useState } from "react";
import type { DiffSummary } from "@/lib/api";

type Tab = "unified" | "split" | "semantic" | "raw";

interface Line {
  kind: "add" | "del" | "ctx" | "hunk" | "meta";
  text: string;
}

function parseUnified(patch: string): Line[] {
  return patch.split("\n").map((l): Line => {
    if (l.startsWith("+++") || l.startsWith("---") || l.startsWith("Index:") || l.startsWith("====")) return { kind: "meta", text: l };
    if (l.startsWith("@@")) return { kind: "hunk", text: l };
    if (l.startsWith("+")) return { kind: "add", text: l.slice(1) };
    if (l.startsWith("-")) return { kind: "del", text: l.slice(1) };
    return { kind: "ctx", text: l.startsWith(" ") ? l.slice(1) : l };
  });
}

/** Pair deletions and additions inside each hunk into left/right rows. */
function splitRows(lines: Line[]): { left: Line | null; right: Line | null }[] {
  const rows: { left: Line | null; right: Line | null }[] = [];
  let i = 0;
  while (i < lines.length) {
    const l = lines[i]!;
    if (l.kind === "ctx" || l.kind === "hunk" || l.kind === "meta") {
      rows.push({ left: l, right: l });
      i++;
      continue;
    }
    const dels: Line[] = [];
    const adds: Line[] = [];
    while (i < lines.length && lines[i]!.kind === "del") dels.push(lines[i++]!);
    while (i < lines.length && lines[i]!.kind === "add") adds.push(lines[i++]!);
    const n = Math.max(dels.length, adds.length);
    for (let k = 0; k < n; k++) rows.push({ left: dels[k] ?? null, right: adds[k] ?? null });
  }
  return rows;
}

const cls = (k: Line["kind"] | undefined): string => (k === "add" ? "diff-line-add" : k === "del" ? "diff-line-del" : k === "hunk" ? "diff-line-hunk" : k === "meta" ? "diff-line-meta" : "");

export function DiffViewer({ unified, summary, defaultTab = "semantic" }: { unified: string | null; summary: DiffSummary | null | undefined; defaultTab?: Tab }) {
  const [tab, setTab] = useState<Tab>(unified ? defaultTab : "semantic");
  const lines = useMemo(() => (unified ? parseUnified(unified) : []), [unified]);
  const rows = useMemo(() => splitRows(lines), [lines]);
  const tabs: [Tab, string][] = [
    ["unified", "Unified"],
    ["split", "Side-by-side"],
    ["semantic", "Semantic"],
    ["raw", "Raw"],
  ];
  return (
    <div className="panel overflow-hidden">
      <div className="flex items-center gap-1 border-b border-line px-2 py-1.5">
        {tabs.map(([k, label]) => (
          <button key={k} type="button" onClick={() => setTab(k)} className={`rounded-md px-2 py-1 text-[12px] ${tab === k ? "bg-panel-2 text-fg" : "text-fg-muted hover:text-fg"}`}>
            {label}
          </button>
        ))}
        {summary?.stats && (
          <span className="ml-auto font-mono text-[11px] text-fg-subtle tabular">
            <span className="text-ok">+{summary.stats.added}</span> <span className="text-danger">−{summary.stats.removed}</span> <span className="text-info">~{summary.stats.modified}</span>
          </span>
        )}
        {summary?.counts && (
          <span className="ml-auto font-mono text-[11px] text-fg-subtle tabular">
            <span className="text-ok">+{summary.counts.added}</span> <span className="text-danger">−{summary.counts.removed}</span> <span className="text-info">~{summary.counts.modified}</span>
          </span>
        )}
      </div>
      <div className="max-h-[70vh] overflow-auto font-mono text-[12px] leading-5">
        {tab === "unified" && (lines.length ? lines.map((l, i) => (
          <div key={i} className={`grid grid-cols-[1.25rem_1fr] whitespace-pre-wrap break-words px-2 ${cls(l.kind)}`}>
            <span className="select-none text-fg-subtle">{l.kind === "add" ? "+" : l.kind === "del" ? "−" : " "}</span>
            <span>{l.text}</span>
          </div>
        )) : <NoPatch />)}
        {tab === "split" && (rows.length ? (
          <div className="grid grid-cols-2 divide-x divide-line">
            <div>{rows.map((r, i) => <div key={i} className={`min-h-5 whitespace-pre-wrap break-words px-2 ${cls(r.left?.kind === "add" ? "ctx" : r.left?.kind)}`}>{r.left?.kind === "add" ? "" : r.left?.text ?? ""}</div>)}</div>
            <div>{rows.map((r, i) => <div key={i} className={`min-h-5 whitespace-pre-wrap break-words px-2 ${cls(r.right?.kind === "del" ? "ctx" : r.right?.kind)}`}>{r.right?.kind === "del" ? "" : r.right?.text ?? ""}</div>)}</div>
          </div>
        ) : <NoPatch />)}
        {tab === "semantic" && <Semantic summary={summary} />}
        {tab === "raw" && (unified ? <pre className="whitespace-pre-wrap break-words p-3">{unified}</pre> : <NoPatch />)}
      </div>
    </div>
  );
}

function NoPatch() {
  return <div className="p-4 text-fg-subtle">No textual patch stored for this change.</div>;
}

function Semantic({ summary }: { summary: DiffSummary | null | undefined }) {
  if (!summary) return <div className="p-4 text-fg-subtle">No structured summary.</div>;
  const str = (v: unknown): string => (typeof v === "string" ? v : v && typeof v === "object" ? String((v as { title?: unknown; url?: unknown; key?: unknown }).title ?? (v as { url?: unknown }).url ?? (v as { key?: unknown }).key ?? JSON.stringify(v)) : JSON.stringify(v));
  if (summary.kind === "json") {
    return (
      <div className="p-2">
        {(summary.changes ?? []).map((c, i) => (
          <div key={i} className="grid grid-cols-[auto_1fr] gap-x-3 px-2 py-1 hairline">
            <span className={c.op === "add" ? "text-ok" : c.op === "remove" ? "text-danger" : "text-info"}>{c.op}</span>
            <span className="whitespace-pre-wrap break-words">
              <span className="text-fg-muted">{c.path}</span>
              {c.op !== "add" && <span className="diff-line-del ml-2 rounded px-1">{JSON.stringify(c.before)}</span>}
              {c.op !== "remove" && <span className="diff-line-add ml-2 rounded px-1">{JSON.stringify(c.after)}</span>}
            </span>
          </div>
        ))}
        {!summary.changes?.length && <NoPatch />}
      </div>
    );
  }
  const mods = (summary.modified ?? []) as ({ before: unknown; after: unknown; fields?: string[]; key?: string })[];
  return (
    <div className="p-2 text-[12.5px]">
      {(summary.added ?? []).length > 0 && (
        <Section title={summary.kind === "list" ? "New items" : "Added"} tone="ok">
          {(summary.added ?? []).map((a, i) => (
            <Item key={i} tone="ok">
              {str(a)}
              {typeof a === "object" && a && (a as { summary?: string }).summary && <div className="text-fg-muted">{String((a as { summary?: string }).summary).slice(0, 400)}</div>}
              {typeof a === "object" && a && (a as { url?: string }).url && (a as { title?: string }).title && <div className="truncate text-fg-subtle">{String((a as { url?: string }).url)}</div>}
            </Item>
          ))}
        </Section>
      )}
      {(summary.removed ?? []).length > 0 && (
        <Section title={summary.kind === "list" ? "Removed items" : "Removed"} tone="danger">
          {(summary.removed ?? []).map((a, i) => <Item key={i} tone="danger">{str(a)}</Item>)}
        </Section>
      )}
      {mods.length > 0 && (
        <Section title={summary.kind === "list" ? "Updated items" : "Modified lines"} tone="info">
          {mods.map((m, i) => (
            <div key={i} className="px-2 py-1 hairline">
              {m.fields && <div className="text-[11px] text-fg-subtle">{str(m.after)} · {m.fields.join(", ")}</div>}
              <div className="diff-line-del whitespace-pre-wrap break-words rounded px-1">{m.fields ? m.fields.map((f) => `${f}: ${JSON.stringify((m.before as Record<string, unknown>)[f])}`).join(" · ") : str(m.before)}</div>
              <div className="diff-line-add mt-0.5 whitespace-pre-wrap break-words rounded px-1">{m.fields ? m.fields.map((f) => `${f}: ${JSON.stringify((m.after as Record<string, unknown>)[f])}`).join(" · ") : str(m.after)}</div>
            </div>
          ))}
        </Section>
      )}
      {summary.truncated && <div className="px-2 py-1 text-[11px] text-fg-subtle">Summary truncated — see the Unified tab for the full patch.</div>}
      {!(summary.added ?? []).length && !(summary.removed ?? []).length && !mods.length && <NoPatch />}
    </div>
  );
}

function Section({ title, tone, children }: { title: string; tone: "ok" | "danger" | "info"; children: React.ReactNode }) {
  return (
    <div className="mb-2">
      <div className={`label mb-1 px-2 ${tone === "ok" ? "!text-ok" : tone === "danger" ? "!text-danger" : "!text-info"}`}>{title}</div>
      {children}
    </div>
  );
}
function Item({ tone, children }: { tone: "ok" | "danger"; children: React.ReactNode }) {
  return <div className={`whitespace-pre-wrap break-words rounded px-2 py-0.5 ${tone === "ok" ? "diff-line-add" : "diff-line-del"}`}>{children}</div>;
}