"use client";

import { diffWords } from "diff";

export type DiffSnapshot = {
  title: string;
  description?: string | null;
  ingredients: Array<{ rawName: string; quantity?: string | number | null; unit?: string | null; note?: string | null }>;
  steps: Array<{ instruction: string; timerSeconds?: number | null }>;
};

function ingredientLine(i: DiffSnapshot["ingredients"][number]): string {
  return [i.quantity, i.unit, i.rawName, i.note && `(${i.note})`].filter(Boolean).join(" ");
}

function stepLine(s: DiffSnapshot["steps"][number]): string {
  return s.instruction;
}

function TextDiff({ before, after }: { before: string; after: string }) {
  const parts = diffWords(before, after);
  return (
    <p className="text-sm leading-relaxed">
      {parts.map((part, i) => (
        <span
          key={i}
          className={
            part.added
              ? "bg-green-500/20 text-green-700 dark:text-green-400"
              : part.removed
                ? "bg-red-500/20 text-red-700 dark:text-red-400 line-through"
                : undefined
          }
        >
          {part.value}
        </span>
      ))}
    </p>
  );
}

function ListDiff({ before, after }: { before: string[]; after: string[] }) {
  const max = Math.max(before.length, after.length);
  const rows = [];
  for (let i = 0; i < max; i++) {
    const b = before[i];
    const a = after[i];
    if (b === undefined) {
      rows.push(
        <div key={i} className="bg-green-500/10 rounded px-2 py-1 text-sm text-green-700 dark:text-green-400">
          + {a}
        </div>
      );
    } else if (a === undefined) {
      rows.push(
        <div key={i} className="bg-red-500/10 rounded px-2 py-1 text-sm text-red-700 dark:text-red-400 line-through">
          − {b}
        </div>
      );
    } else if (b === a) {
      rows.push(
        <div key={i} className="px-2 py-1 text-sm text-muted-foreground">
          {b}
        </div>
      );
    } else {
      rows.push(
        <div key={i} className="rounded px-2 py-1">
          <TextDiff before={b} after={a} />
        </div>
      );
    }
  }
  return <div className="space-y-1">{rows}</div>;
}

export function VersionDiffView({ before, after }: { before: DiffSnapshot; after: DiffSnapshot }) {
  return (
    <div className="space-y-6">
      <section className="space-y-2">
        <h3 className="text-sm font-semibold text-muted-foreground">Title</h3>
        <TextDiff before={before.title} after={after.title} />
      </section>

      {(before.description || after.description) && (
        <section className="space-y-2">
          <h3 className="text-sm font-semibold text-muted-foreground">Description</h3>
          <TextDiff before={before.description ?? ""} after={after.description ?? ""} />
        </section>
      )}

      <section className="space-y-2">
        <h3 className="text-sm font-semibold text-muted-foreground">Ingredients</h3>
        <ListDiff before={before.ingredients.map(ingredientLine)} after={after.ingredients.map(ingredientLine)} />
      </section>

      <section className="space-y-2">
        <h3 className="text-sm font-semibold text-muted-foreground">Steps</h3>
        <ListDiff before={before.steps.map(stepLine)} after={after.steps.map(stepLine)} />
      </section>
    </div>
  );
}