import { TONE_SURFACE } from "~/ui/tones";
import { useDemoTimeline } from "~/hooks/use-demo-timeline";
import { ProgressTrack } from "~/ui/ProgressTrack";
import { StatusDot } from "~/ui/StatusDot";
import { cn } from "~/utils/cn";
import { DemoWindow } from "../DemoWindow";

const STEPS = 4;
const INTERVAL_MS = 1300;
const ANALYZING_AT = 1;
const SCORED_AT = 2;
const REVEALED_AT = 3;

const CONFLICT = [
  { text: "<<<<<<< main", tone: "text-kumo-subtle" },
  { text: "const TIMEOUT_MS = 30_000;", tone: "text-kumo-danger" },
  { text: "=======", tone: "text-kumo-subtle" },
  { text: "const TIMEOUT_MS = Number(env.TIMEOUT ?? 15_000);", tone: "text-kumo-success" },
  { text: ">>>>>>> feat/configurable-timeout", tone: "text-kumo-subtle" },
] as const;

const CANDIDATES = [
  { label: "Keep env override, default 30s", percent: 94 },
  { label: "Keep main", percent: 4 },
] as const;

export function AiDemo({ className }: { className?: string }) {
  const step = useDemoTimeline(STEPS, INTERVAL_MS);
  const resolved = step >= STEPS;
  return (
    <DemoWindow
      title="acme/api · merge fix for #77"
      label="An AI merge fix scores two candidate resolutions and commits the confident one"
      className={className}
    >
      <div className="space-y-px bg-kumo-base/40 px-4 py-3 font-mono text-xs">
        {CONFLICT.map((line) => (
          <p key={line.text} className={cn("truncate", line.tone)}>
            {line.text}
          </p>
        ))}
      </div>
      <div className="space-y-3 border-t border-kumo-hairline p-4">
        <p className="flex items-center gap-2 text-xs text-kumo-subtle">
          <StatusDot state={step >= SCORED_AT ? "success" : step >= ANALYZING_AT ? "in_progress" : "queued"} />
          {step >= SCORED_AT ? "Candidates scored" : "Analyzing conflicts"}
        </p>
        <ul className={cn("space-y-2 transition-opacity", step >= SCORED_AT ? "opacity-100" : "opacity-0")}>
          {CANDIDATES.map((candidate, index) => (
            <li key={candidate.label} className="space-y-1">
              <div className="flex justify-between text-xs">
                <span className={index === 0 ? "text-kumo-default" : "text-kumo-subtle"}>{candidate.label}</span>
                <span className="font-mono text-kumo-subtle">
                  {step >= REVEALED_AT ? `${candidate.percent}%` : "—"}
                </span>
              </div>
              <ProgressTrack
                percent={step >= REVEALED_AT ? candidate.percent : 0}
                tone={index === 0 ? "merged" : "neutral"}
              />
            </li>
          ))}
        </ul>
        <p
          className={cn(
            "rounded-md px-3 py-2 text-xs transition-colors",
            TONE_SURFACE[resolved ? "success" : "neutral"],
          )}
        >
          {resolved
            ? "Clears the 0.8 confidence bar · committed as a merge, CI running"
            : "Waiting for a confident answer"}
        </p>
      </div>
    </DemoWindow>
  );
}