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

const TYPED = "  if (!query) return items;";
const CHARS_PER_STEP = 3;
const STEPS = Math.ceil(TYPED.length / CHARS_PER_STEP);
const INTERVAL_MS = 160;

const TREE = [
  { name: "src/", depth: 0 },
  { name: "palette/", depth: 1 },
  { name: "rank.ts", depth: 2, active: true },
  { name: "fuzzy.ts", depth: 2, agent: true },
  { name: "README.md", depth: 0 },
] as const;

const BEFORE = ['import { fuzzy } from "./fuzzy";', "", "export function rank(items: Item[], query: string) {"];
const AFTER = ["  return [...exact(items, query), ...fuzzy(items, query)];", "}"];

const INDENT = ["pl-2", "pl-5", "pl-8"] as const;

export function EditorDemo({ className }: { className?: string }) {
  const step = useDemoTimeline(STEPS, INTERVAL_MS);
  const typed = TYPED.slice(0, step * CHARS_PER_STEP);
  return (
    <DemoWindow
      title="acme/web — edit main"
      label="A browser editor where you type while an agent works in another file"
      className={className}
    >
      <div className="grid grid-cols-[9rem_1fr]">
        <ul className="space-y-0.5 border-r border-kumo-hairline bg-kumo-base/40 py-3 font-mono text-xs text-kumo-subtle">
          {TREE.map((file) => (
            <li
              key={file.name}
              className={cn(
                "flex items-center gap-1.5 py-0.5 pr-2",
                INDENT[file.depth],
                "active" in file && "bg-kumo-fill/70 text-kumo-strong",
              )}
            >
              <span className="truncate">{file.name}</span>
              {"agent" in file && <span className="ml-auto size-1.5 rounded-full bg-success-400" title="agent" />}
            </li>
          ))}
        </ul>
        <div className="relative py-3 font-mono text-xs leading-5 text-kumo-default">
          {BEFORE.map((line, index) => (
            <p key={line || "blank"} className="flex gap-3 px-3">
              <span className="w-4 text-right text-kumo-inactive">{index + 1}</span>
              <span className="truncate">{line || " "}</span>
            </p>
          ))}
          <p className="flex gap-3 bg-accent-950/60 px-3">
            <span className="w-4 text-right text-kumo-inactive">{BEFORE.length + 1}</span>
            <span className="relative truncate text-kumo-strong">
              {typed}
              <span className="animate-caret ml-px inline-block h-3.5 w-0.5 translate-y-0.5 bg-accent-400" />
              <span className="absolute -top-4 left-full ml-1 rounded-sm bg-accent-500 px-1 text-2xs text-gray-950">
                you
              </span>
            </span>
          </p>
          {AFTER.map((line, index) => (
            <p key={line} className="flex gap-3 px-3">
              <span className="w-4 text-right text-kumo-inactive">{BEFORE.length + 2 + index}</span>
              <span className="truncate">{line}</span>
            </p>
          ))}
          <p className="mt-3 px-3 text-2xs text-kumo-subtle">
            <span className="text-kumo-success">●</span> agent is editing fuzzy.ts
          </p>
        </div>
      </div>
    </DemoWindow>
  );
}