import { useDemoTimeline } from "~/hooks/use-demo-timeline";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { cn } from "~/utils/cn";
import { DemoWindow } from "../DemoWindow";

const STEPS = 3;
const INTERVAL_MS = 1500;

const LINES = [
  { kind: "ctx", n: 41, text: "export function rank(items: Item[], query: string) {" },
  { kind: "del", n: 42, text: "  return items.filter((item) => item.name.includes(query));" },
  { kind: "add", n: 42, text: "  return items.filter((item) => fuzzy(item.name, query));" },
  { kind: "ctx", n: 43, text: "}" },
] as const;

const LINE_STYLES = {
  ctx: "text-kumo-subtle",
  del: "bg-danger-950/40 text-kumo-danger",
  add: "bg-success-950/40 text-kumo-success",
} as const;

const SIGN = { ctx: " ", del: "-", add: "+" } as const;

export function ReviewDemo({ className }: { className?: string }) {
  const step = useDemoTimeline(STEPS, INTERVAL_MS);
  return (
    <DemoWindow
      title="src/palette/rank.ts"
      label="An inline review comment with a suggested change that the author applies"
      className={className}
    >
      <div className="font-mono text-xs">
        {LINES.map((line) => (
          <div key={`${line.kind}${line.n}`} className={cn("flex gap-3 px-4 py-1", LINE_STYLES[line.kind])}>
            <span className="w-6 shrink-0 text-right text-kumo-inactive">{line.n}</span>
            <span className="shrink-0">{SIGN[line.kind]}</span>
            <span className="truncate">{line.text}</span>
          </div>
        ))}
      </div>
      <div
        className={cn(
          "space-y-3 border-t border-kumo-hairline p-4 transition-opacity",
          step >= 1 ? "opacity-100" : "opacity-0",
        )}
      >
        <div className="flex items-start gap-2">
          <Avatar name="devon" size="sm" src={null} />
          <div className="min-w-0 flex-1 space-y-2">
            <p className="text-xs text-kumo-default">
              <span className="font-medium text-kumo-strong">devon</span> Keep the exact match first so short queries
              stay predictable.
            </p>
            <div
              className={cn(
                "rounded-md border border-kumo-hairline transition-opacity",
                step >= 2 ? "opacity-100" : "opacity-0",
              )}
            >
              <p className="border-b border-kumo-hairline px-3 py-1 font-mono text-2xs text-kumo-subtle">
                Suggested change
              </p>
              <p className="truncate bg-success-950/40 px-3 py-1 font-mono text-xs text-kumo-success">
                + return [...exact(items, query), ...fuzzy(items, query)];
              </p>
            </div>
          </div>
        </div>
        <div className={cn("flex items-center gap-2 transition-opacity", step >= STEPS ? "opacity-100" : "opacity-0")}>
          <Badge tone="merged">Suggestion applied</Badge>
          <span className="text-xs text-kumo-subtle">by mara in 3f9a21c</span>
        </div>
      </div>
    </DemoWindow>
  );
}