import { useState, useEffect, useRef } from 'react';

// Inline SVG icons (Lucide-style paths). The artifact carries no external
// module dependency — the sandbox runtime doesn't register lucide-react, so
// importing it crashes the whole tree. Self-contained SVGs sidestep that.
function Svg({ size = 16, className = '', children }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size}
      viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" className={className}>
      {children}
    </svg>
  );
}
const GitFork = (p) => <Svg {...p}><circle cx="12" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><circle cx="18" cy="6" r="3" /><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" /><path d="M12 12v3" /></Svg>;
const GitBranch = (p) => <Svg {...p}><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></Svg>;
const Sparkles = (p) => <Svg {...p}><path d="M9.94 14.06A2 2 0 0 0 8.5 12.6L3 11l5.5-1.6A2 2 0 0 0 9.94 7.94L11.5 2.5l1.56 5.44A2 2 0 0 0 14.5 9.4L20 11l-5.5 1.6a2 2 0 0 0-1.44 1.46L11.5 19.5z" /><path d="M20 3v4" /><path d="M22 5h-4" /></Svg>;
const Boxes = (p) => <Svg {...p}><path d="m7.5 4.27 9 5.15" /><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></Svg>;
const Bell = (p) => <Svg {...p}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" /></Svg>;
const Check = (p) => <Svg {...p}><path d="M20 6 9 17l-5-5" /></Svg>;
const RotateCcw = (p) => <Svg {...p}><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /></Svg>;
const ChevronRight = (p) => <Svg {...p}><path d="m9 18 6-6-6-6" /></Svg>;
const Cpu = (p) => <Svg {...p}><rect width="16" height="16" x="4" y="4" rx="2" /><rect width="6" height="6" x="9" y="9" rx="1" /><path d="M15 2v2" /><path d="M15 20v2" /><path d="M2 15h2" /><path d="M2 9h2" /><path d="M20 15h2" /><path d="M20 9h2" /><path d="M9 2v2" /><path d="M9 20v2" /></Svg>;
const Zap = (p) => <Svg {...p}><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></Svg>;
const Play = (p) => <Svg {...p}><polygon points="6 3 20 12 6 21 6 3" fill="currentColor" /></Svg>;
const CircleDot = (p) => <Svg {...p}><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="1.5" fill="currentColor" /></Svg>;
const Database = (p) => <Svg {...p}><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14a9 3 0 0 0 18 0V5" /><path d="M3 12a9 3 0 0 0 18 0" /></Svg>;
const SkipForward = (p) => <Svg {...p}><polygon points="5 4 15 12 5 20 5 4" fill="currentColor" /><line x1="19" x2="19" y1="5" y2="19" /></Svg>;

// Category palette — mirrors forkhub's signal categories (models.py).
const CAT = {
  feature:    { chip: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30', bar: 'bg-emerald-400', dot: 'bg-emerald-400' },
  fix:        { chip: 'bg-sky-500/15 text-sky-300 border-sky-500/30',             bar: 'bg-sky-400',     dot: 'bg-sky-400' },
  refactor:   { chip: 'bg-violet-500/15 text-violet-300 border-violet-500/30',    bar: 'bg-violet-400',  dot: 'bg-violet-400' },
  dependency: { chip: 'bg-zinc-500/15 text-zinc-300 border-zinc-500/30',          bar: 'bg-zinc-400',    dot: 'bg-zinc-400' },
};

// The upstream repo and its fork constellation. All data is inline —
// the sandbox blocks network calls, so the "GitHub API" is faked here.
const UPSTREAM = { name: 'tldr-pages/tldr', head: 'a1f3c9d', stars: '52.1k' };

const FORKS = [
  {
    id: 'alice', head: '7b2e004', changed: true,
    commits: ['feat: add dark-mode theme', 'style: dim ANSI palette'],
    files: ['themes/dark.css', 'src/config.js'],
    signal: { category: 'feature', sig: 8, summary: 'Adds a dark-mode color theme with a dimmed ANSI palette' },
    cluster: 'dark-mode',
  },
  {
    id: 'carol', head: 'c40aa12', changed: true,
    commits: ['add dark theme support'],
    files: ['themes/dark.css'],
    signal: { category: 'feature', sig: 7, summary: 'Adds dark theme support for terminal output' },
    cluster: 'dark-mode',
  },
  {
    id: 'bob', head: 'd91f7a3', changed: true,
    commits: ['fix: unicode width on CJK glyphs'],
    files: ['src/render.py'],
    signal: { category: 'fix', sig: 5, summary: 'Fixes column alignment for wide CJK characters' },
  },
  {
    id: 'frank', head: 'f2b0c55', changed: true,
    commits: ['refactor: extract parser module'],
    files: ['src/parser.py', 'src/index.py'],
    signal: { category: 'refactor', sig: 4, summary: 'Extracts the page parser into its own module' },
  },
  {
    id: 'dave', head: '5e7c118', changed: true,
    commits: ['chore: bump deps'],
    files: ['package.json', 'package-lock.json'],
    signal: { category: 'dependency', sig: 2, summary: 'Routine dependency version bumps' },
  },
  {
    id: 'erin', head: 'a1f3c9d', changed: false, // HEAD == last sync → skipped
    commits: [],
    files: [],
  },
];

const STAGES = [
  { key: 'discover', label: 'Discover', icon: GitFork },
  { key: 'sync',     label: 'Sync',     icon: GitBranch },
  { key: 'analyze',  label: 'Analyze',  icon: Sparkles },
  { key: 'cluster',  label: 'Cluster',  icon: Boxes },
  { key: 'digest',   label: 'Digest',   icon: Bell },
];

const CAPTIONS = {
  discover: {
    title: 'Discover the forks',
    body: 'ForkHub asks the GitHub API for every fork of the upstream repo. Conditional requests with ETags keep this cheap against the rate limit — unchanged pages return 304 with no body.',
  },
  sync: {
    title: 'Sync — skip what hasn’t moved',
    body: 'Each fork’s HEAD SHA is compared to what was stored last run. erin/tldr still points at the upstream SHA, so it’s skipped — no diffs fetched, no tokens spent. Five forks actually diverged.',
  },
  analyze: {
    title: 'Analyze with an agent',
    body: 'A Claude Agent SDK coordinator dispatches a diff-analyst subagent (Sonnet) per changed fork. It starts with file lists + commit messages (cheap), pulls full diffs only when a file looks interesting, then calls store_signal with a category and a 1–10 significance score. A budget cap halts runaway cost.',
  },
  cluster: {
    title: 'Cluster the divergences',
    body: 'Each signal’s summary is embedded into a vector. sqlite-vec finds signals with high cosine similarity. alice and carol independently built dark mode — their signals collapse into one cluster, the kind of cross-fork convergence ForkHub exists to surface.',
  },
  digest: {
    title: 'Compose the digest',
    body: 'A digest-writer subagent (Haiku) writes the notification. A significance filter drops low-signal noise — dave’s dependency bump (2) and frank’s refactor (4) fall below the threshold. You get the interesting divergences, not every commit.',
  },
};

const SIG_THRESHOLD = 5;
const COST_PER_ANALYST = 0.012;
const MAX_BUDGET = 0.5;

function Avatar({ id, dim }) {
  return (
    <div className={`h-7 w-7 shrink-0 rounded-full grid place-items-center text-xs font-bold
      ${dim ? 'bg-[#21262d] text-[#6e7681]' : 'bg-[#2f81f7]/20 text-[#79c0ff]'}`}>
      {id[0].toUpperCase()}
    </div>
  );
}

function SigBar({ value, category }) {
  const c = CAT[category];
  return (
    <div className="flex items-center gap-2">
      <div className="flex gap-[2px]">
        {Array.from({ length: 10 }).map((_, i) => (
          <span key={i} className={`h-3 w-[6px] rounded-[1px] ${i < value ? c.bar : 'bg-[#21262d]'}`} />
        ))}
      </div>
      <span className="text-[11px] tabular-nums text-[#7d8590]">{value}/10</span>
    </div>
  );
}

function CategoryChip({ category }) {
  return (
    <span className={`inline-flex items-center gap-1 rounded-full border px-2 py-[1px] text-[11px] font-medium ${CAT[category].chip}`}>
      <CircleDot size={10} /> {category}
    </span>
  );
}

function ForkCard({ fork, stage }) {
  const idx = STAGES.findIndex((s) => s.key === stage);
  const synced = idx >= 1;
  const analyzed = idx >= 2 && fork.changed;
  const clustered = idx >= 3 && fork.cluster;
  const digested = idx >= 4 && fork.changed && fork.signal.sig >= SIG_THRESHOLD;
  const dim = synced && !fork.changed;

  return (
    <div
      className={`relative rounded-xl border p-3 transition-all duration-500
        ${dim ? 'border-[#21262d] bg-[#0d1117] opacity-50' : 'border-[#30363d] bg-[#161b22]'}
        ${clustered ? 'ring-2 ring-emerald-500/50' : ''}
        ${digested ? 'shadow-[0_0_0_1px_rgba(47,129,247,0.35)]' : ''}`}
    >
      {clustered && (
        <span className="absolute -top-2 right-3 rounded-full border border-emerald-500/40 bg-[#0d1117] px-2 py-[1px] text-[10px] font-semibold text-emerald-300">
          ⛓ {fork.cluster}
        </span>
      )}
      <div className="flex items-center gap-2">
        <Avatar id={fork.id} dim={dim} />
        <div className="min-w-0">
          <div className="truncate text-sm font-medium text-[#e6edf3]">{fork.id}/tldr</div>
          <code className="text-[11px] text-[#6e7681]">#{fork.head}</code>
        </div>
        <div className="ml-auto">
          {synced && !fork.changed && (
            <span className="inline-flex items-center gap-1 text-[11px] text-[#6e7681]">
              <SkipForward size={12} /> 304 cached
            </span>
          )}
          {synced && fork.changed && idx < 2 && (
            <span className="inline-flex items-center gap-1 text-[11px] text-amber-300/80">
              <Zap size={12} /> diverged
            </span>
          )}
        </div>
      </div>

      {fork.commits.length > 0 && idx < 2 && (
        <ul className="mt-2 space-y-[2px]">
          {fork.commits.map((c) => (
            <li key={c} className="truncate text-[11px] text-[#7d8590]">↳ {c}</li>
          ))}
        </ul>
      )}

      {analyzed && (
        <div className="mt-2 space-y-2 border-t border-[#21262d] pt-2">
          <div className="flex items-center justify-between gap-2">
            <CategoryChip category={fork.signal.category} />
            <SigBar value={fork.signal.sig} category={fork.signal.category} />
          </div>
          <p className="text-[12px] leading-snug text-[#adbac7]">{fork.signal.summary}</p>
          {digested && (
            <div className="flex items-center gap-1 text-[11px] text-[#2f81f7]">
              <Check size={12} /> in digest
            </div>
          )}
          {idx >= 4 && !digested && (
            <div className="text-[11px] text-[#6e7681]">below significance threshold — filtered</div>
          )}
        </div>
      )}
    </div>
  );
}

function StatPill({ icon: Icon, label, value }) {
  return (
    <div className="flex items-center gap-2 rounded-lg border border-[#30363d] bg-[#161b22] px-3 py-1.5">
      <Icon size={14} className="text-[#7d8590]" />
      <span className="text-[11px] uppercase tracking-wide text-[#6e7681]">{label}</span>
      <span className="text-sm font-semibold tabular-nums text-[#e6edf3]">{value}</span>
    </div>
  );
}

const LOG_LINES = [
  { icon: Cpu, text: 'coordinator › list_forks() → 5 changed, 1 skipped' },
  { icon: Sparkles, text: 'diff-analyst(alice) › get_file_diff(themes/dark.css) › store_signal(feature, 8)' },
  { icon: Sparkles, text: 'diff-analyst(carol) › store_signal(feature, 7)' },
  { icon: Sparkles, text: 'diff-analyst(bob) › get_file_diff(src/render.py) › store_signal(fix, 5)' },
  { icon: Sparkles, text: 'diff-analyst(frank) › store_signal(refactor, 4)' },
  { icon: Sparkles, text: 'diff-analyst(dave) › store_signal(dependency, 2)' },
];

function App() {
  const [step, setStep] = useState(0);
  const [running, setRunning] = useState(false);
  const timer = useRef(null);
  const stage = STAGES[step].key;

  const next = () => setStep((s) => Math.min(s + 1, STAGES.length - 1));
  const reset = () => { setRunning(false); setStep(0); };

  // "Run all" walks the pipeline end-to-end with a pause between stages.
  useEffect(() => {
    if (!running) return;
    if (step >= STAGES.length - 1) { setRunning(false); return; }
    timer.current = setTimeout(() => setStep((s) => s + 1), 1300);
    return () => clearTimeout(timer.current);
  }, [running, step]);

  const changed = FORKS.filter((f) => f.changed).length;
  const signals = step >= 2 ? changed : 0;
  const clusters = step >= 3 ? 1 : 0;
  const cost = step >= 2 ? (changed * COST_PER_ANALYST).toFixed(3) : '0.000';
  const digestForks = FORKS.filter((f) => f.changed && f.signal.sig >= SIG_THRESHOLD);

  return (
    <div className="min-h-screen bg-[#0d1117] px-5 py-7 font-sans text-[#e6edf3]
      [font-family:ui-sans-serif,system-ui,-apple-system,'Segoe_UI',Roboto,sans-serif]">
      <div className="mx-auto max-w-5xl">

        {/* Header */}
        <header className="mb-5 flex flex-wrap items-center gap-3">
          <div className="grid h-10 w-10 place-items-center rounded-xl bg-[#2f81f7]/15 text-[#79c0ff]">
            <GitFork size={22} />
          </div>
          <div>
            <h1 className="text-xl font-bold leading-tight">ForkHub</h1>
            <p className="text-[13px] text-[#7d8590]">Watch the fork constellation. Surface what diverged, and why.</p>
          </div>
          <div className="ml-auto flex items-center gap-2 rounded-lg border border-[#30363d] bg-[#161b22] px-3 py-1.5 text-[13px]">
            <GitBranch size={14} className="text-[#7d8590]" />
            <span className="font-medium">{UPSTREAM.name}</span>
            <span className="text-[#6e7681]">★ {UPSTREAM.stars}</span>
          </div>
        </header>

        {/* Stepper */}
        <div className="mb-5 flex items-center gap-1 overflow-x-auto rounded-xl border border-[#30363d] bg-[#161b22] p-1.5">
          {STAGES.map((s, i) => {
            const Icon = s.icon;
            const active = i === step;
            const done = i < step;
            return (
              <div key={s.key} className="flex items-center">
                <button
                  onClick={() => { setRunning(false); setStep(i); }}
                  className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors
                    ${active ? 'bg-[#2f81f7] text-white'
                      : done ? 'text-[#79c0ff] hover:bg-[#21262d]'
                      : 'text-[#7d8590] hover:bg-[#21262d]'}`}
                >
                  {done ? <Check size={15} /> : <Icon size={15} />}
                  {s.label}
                </button>
                {i < STAGES.length - 1 && <ChevronRight size={14} className="mx-[2px] text-[#30363d]" />}
              </div>
            );
          })}
        </div>

        {/* Stats */}
        <div className="mb-5 flex flex-wrap gap-2">
          <StatPill icon={GitFork} label="forks" value={FORKS.length} />
          <StatPill icon={Zap} label="changed" value={step >= 1 ? changed : '—'} />
          <StatPill icon={Sparkles} label="signals" value={signals || '—'} />
          <StatPill icon={Boxes} label="clusters" value={step >= 3 ? clusters : '—'} />
          <StatPill icon={Database} label="cost" value={`$${cost}`} />
        </div>

        <div className="grid gap-5 md:grid-cols-[1fr_320px]">
          {/* Fork constellation */}
          <div className="grid gap-3 sm:grid-cols-2">
            {FORKS.map((f) => <ForkCard key={f.id} fork={f} stage={stage} />)}
          </div>

          {/* Context rail */}
          <aside className="space-y-4">
            <div className="rounded-xl border border-[#30363d] bg-[#161b22] p-4">
              <div className="mb-1 flex items-center gap-2 text-[#79c0ff]">
                {(() => { const I = STAGES[step].icon; return <I size={16} />; })()}
                <h2 className="text-sm font-semibold">{CAPTIONS[stage].title}</h2>
              </div>
              <p className="text-[13px] leading-relaxed text-[#adbac7]">{CAPTIONS[stage].body}</p>
            </div>

            {/* Agent session log — appears from Analyze onward */}
            {step >= 2 && (
              <div className="rounded-xl border border-[#30363d] bg-[#0d1117] p-3">
                <div className="mb-2 flex items-center justify-between">
                  <span className="text-[11px] font-semibold uppercase tracking-wide text-[#6e7681]">agent session</span>
                  <span className="text-[11px] tabular-nums text-[#7d8590]">${cost} / ${MAX_BUDGET.toFixed(2)}</span>
                </div>
                <div className="mb-2 h-1 overflow-hidden rounded-full bg-[#21262d]">
                  <div className="h-full rounded-full bg-[#2f81f7] transition-all duration-700"
                    style={{ width: `${(Number(cost) / MAX_BUDGET) * 100}%` }} />
                </div>
                <ul className="space-y-1.5">
                  {LOG_LINES.map((l, i) => {
                    const I = l.icon;
                    return (
                      <li key={i} className="flex items-start gap-2 text-[11px] leading-snug text-[#8b949e]"
                        style={{ opacity: 0, animation: `fadein .4s ease forwards`, animationDelay: `${i * 90}ms` }}>
                        <I size={12} className="mt-[2px] shrink-0 text-[#6e7681]" />
                        <code className="break-all">{l.text}</code>
                      </li>
                    );
                  })}
                </ul>
              </div>
            )}

            {/* Digest card — the payoff */}
            {step >= 4 && (
              <div className="rounded-xl border border-[#2f81f7]/40 bg-[#161b22] p-4"
                style={{ opacity: 0, animation: 'fadein .5s ease forwards' }}>
                <div className="mb-2 flex items-center gap-2">
                  <Bell size={16} className="text-[#2f81f7]" />
                  <h2 className="text-sm font-semibold">Digest — {UPSTREAM.name}</h2>
                </div>
                <div className="space-y-2 text-[13px]">
                  <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-2">
                    <div className="font-medium text-emerald-300">⛓ Cluster: dark-mode (2 forks)</div>
                    <p className="text-[12px] text-[#adbac7]">alice and carol independently added dark theming — a converging trend worth upstreaming.</p>
                  </div>
                  {digestForks.filter((f) => !f.cluster).map((f) => (
                    <div key={f.id} className="flex items-center gap-2">
                      <span className={`h-2 w-2 rounded-full ${CAT[f.signal.category].dot}`} />
                      <span className="font-medium">{f.id}</span>
                      <span className="text-[12px] text-[#7d8590]">{f.signal.summary}</span>
                    </div>
                  ))}
                  <p className="pt-1 text-[11px] text-[#6e7681]">2 low-significance signals filtered out.</p>
                </div>
              </div>
            )}
          </aside>
        </div>

        {/* Controls */}
        <div className="mt-6 flex flex-wrap items-center gap-2">
          <button
            onClick={next}
            disabled={step >= STAGES.length - 1 || running}
            className="inline-flex items-center gap-2 rounded-lg bg-[#238636] px-4 py-2 text-sm font-semibold text-white
              transition hover:bg-[#2ea043] disabled:cursor-not-allowed disabled:opacity-40"
          >
            {step >= STAGES.length - 1 ? 'Pipeline complete' : <>Next: {STAGES[step + 1].label} <ChevronRight size={16} /></>}
          </button>
          <button
            onClick={() => { setStep(0); setRunning(true); }}
            disabled={running}
            className="inline-flex items-center gap-2 rounded-lg border border-[#30363d] bg-[#161b22] px-4 py-2 text-sm font-medium
              text-[#e6edf3] transition hover:bg-[#21262d] disabled:opacity-40"
          >
            <Play size={15} /> Run all
          </button>
          <button
            onClick={reset}
            className="inline-flex items-center gap-2 rounded-lg border border-[#30363d] bg-[#161b22] px-4 py-2 text-sm font-medium
              text-[#7d8590] transition hover:bg-[#21262d]"
          >
            <RotateCcw size={15} /> Reset
          </button>
          <span className="ml-auto text-[12px] text-[#6e7681]">
            A faithful sim of the <code className="text-[#7d8590]">sync → analyze → digest</code> pipeline.
          </span>
        </div>
      </div>

      <style>{`@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }`}</style>
    </div>
  );
}

export default App;