// Agent profile modal — model/provider, tokens, runs, history.

function fmtNum(n) {
  if (n >= 1e9) return (n/1e9).toFixed(2) + "B";
  if (n >= 1e6) return (n/1e6).toFixed(2) + "M";
  if (n >= 1e3) return (n/1e3).toFixed(1) + "k";
  return String(n);
}
function fmtUSD(n) {
  if (n >= 1000) return "$" + (n/1000).toFixed(2) + "k";
  if (n >= 100) return "$" + n.toFixed(0);
  return "$" + n.toFixed(2);
}

function Sparkline({ data, width = 120, height = 28, color = "var(--accent)" }) {
  const max = Math.max(...data, 1);
  const stepX = width / (data.length - 1 || 1);
  const points = data.map((v, i) => `${i * stepX},${height - (v / max) * (height - 4) - 2}`).join(" ");
  const area = `0,${height} ${points} ${width},${height}`;
  return (
    <svg width={width} height={height} className="sparkline">
      <polygon points={area} fill={color} fillOpacity="0.12" />
      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
      {data.map((v, i) => i === data.length - 1 ? (
        <circle key={i} cx={i * stepX} cy={height - (v / max) * (height - 4) - 2} r="2.5" fill={color} />
      ) : null)}
    </svg>
  );
}

function StatCard({ label, value, sub, mono }) {
  return (
    <div className="stat-card">
      <div className="stat-label">{label}</div>
      <div className={"stat-value" + (mono ? " mono" : "")}>{value}</div>
      {sub && <div className="stat-sub">{sub}</div>}
    </div>
  );
}

function ProviderBadge({ provider }) {
  const colorByProvider = {
    "Anthropic": "oklch(62% 0.13 32)",
    "OpenAI": "oklch(58% 0.12 158)",
    "DeepSeek": "oklch(58% 0.14 264)",
    "Moonshot": "oklch(60% 0.14 286)",
    "Google": "oklch(60% 0.14 230)",
  };
  return (
    <span className="provider-badge" style={{ "--p": colorByProvider[provider] || "var(--text)" }}>
      <span className="dot" />
      {provider}
    </span>
  );
}

function AgentTaskRow({ task, project, onClick }) {
  const colTitle = (window.COLUMNS.find(c => c.id === task.column) || {}).title;
  return (
    <div className="agent-task-row" onClick={onClick}>
      <span className="card-id" style={{ width: 64, flexShrink: 0 }}>{task.id}</span>
      <span className="agent-task-title">{task.title}</span>
      <span className="label-pill">{project.name}</span>
      <span className={"agent-task-status status-" + task.column}>{colTitle}</span>
      {task.usage ? (
        <span className="agent-task-tokens" title={`${task.usage.tokensIn} in / ${task.usage.tokensOut} out`}>
          {fmtNum(task.usage.tokensIn + task.usage.tokensOut)} tok
        </span>
      ) : <span style={{ width: 60 }} />}
      {task.usage ? (
        <span className="agent-task-cost">{fmtUSD(task.usage.cost)}</span>
      ) : <span style={{ width: 50 }} />}
    </div>
  );
}

function AgentProfile({ agentId, onClose, onOpenTask, onConfigure }) {
  const a = agentId ? window.AGENTS[agentId] : null;
  const open = !!a;

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  if (!a || a.kind !== "ai") {
    return (
      <>
        <div className={"drawer-scrim" + (open ? " open" : "")} onClick={onClose} />
      </>
    );
  }

  // Aggregate tasks across projects assigned to this agent.
  const allTasks = [];
  for (const p of window.PROJECTS) {
    for (const t of p.tasks) {
      if (t.assignee === agentId) allTasks.push({ task: t, project: p });
    }
  }
  const active = allTasks.filter(({task}) => task.column === "in_progress" || task.column === "review");
  const backlog = allTasks.filter(({task}) => task.column === "backlog");
  const history = allTasks.filter(({task}) => task.column === "done");

  // Aggregated tokens from assigned tasks (per-project view of cost).
  const projTokens = allTasks.reduce((acc, {task}) => {
    if (task.usage) { acc.in += task.usage.tokensIn; acc.out += task.usage.tokensOut; acc.cost += task.usage.cost; }
    return acc;
  }, { in: 0, out: 0, cost: 0 });

  const todayCost = (a.tokens.today.in / 1e6) * a.pricing.in + (a.tokens.today.out / 1e6) * a.pricing.out;
  const allTimeCost = (a.tokens.allTime.in / 1e6) * a.pricing.in + (a.tokens.allTime.out / 1e6) * a.pricing.out;

  const accentBg = `oklch(58% 0.14 ${a.hue})`;
  const accentSoft = `oklch(96% 0.02 ${a.hue})`;
  const accentText = `oklch(46% 0.14 ${a.hue})`;

  return (
    <>
      <div className={"agent-modal-wrap" + (open ? " open" : "")} onClick={onClose}>
        <div className="agent-modal" onClick={(e) => e.stopPropagation()}>
          <button className="drawer-close agent-modal-close" onClick={onClose}><window.Icon.Close /></button>

          <div className="agent-hero" style={{ background: `linear-gradient(135deg, oklch(96% 0.03 ${a.hue}), oklch(94% 0.04 ${(a.hue+30)%360}))` }}>
            <div className="agent-hero-row">
              <div className="agent-avatar-xl" style={{ background: accentBg }}>
                {a.name.slice(0,1)}
                <span className="agent-status-dot" />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="agent-hero-meta">
                  <span className="kbd" style={{ background: "var(--bg-elev)" }}>AI</span>
                  <span style={{ color: "var(--text-muted)" }}>·</span>
                  <span style={{ color: "var(--text-muted)", fontSize: 12.5 }}>{a.role}</span>
                </div>
                <h2 className="agent-name">{a.name}</h2>
                <p className="agent-bio">{a.bio}</p>
                <div className="agent-hero-chips">
                  <ProviderBadge provider={a.provider} />
                  <span className="model-chip">
                    <window.Icon.Sparkle />
                    <span className="mono">{a.model}</span>
                  </span>
                  <span className="label-pill mono">{fmtNum(a.contextWindow)} ctx</span>
                  <span className="label-pill mono" title="Input / Output $/M tok">${a.pricing.in.toFixed(2)} / ${a.pricing.out.toFixed(2)}</span>
                </div>
              </div>
              <div className="agent-hero-actions">
                <button className="btn">Assign task</button>
                <button className="btn ghost" onClick={() => onConfigure && onConfigure(a.id)}>Configure</button>
              </div>
            </div>
          </div>

          <div className="agent-body">
            {/* Stats grid */}
            <div className="stats-grid">
              <StatCard label="Runs today" value={a.runs.today} sub={`${a.runs.week} this week`} />
              <StatCard label="Tokens today" value={fmtNum(a.tokens.today.in + a.tokens.today.out)} sub={`${fmtNum(a.tokens.today.in)} in · ${fmtNum(a.tokens.today.out)} out`} />
              <StatCard label="Cost today" value={fmtUSD(todayCost)} sub={`${fmtUSD(allTimeCost)} all-time`} mono />
              <StatCard label="Success rate" value={(a.successRate * 100).toFixed(0) + "%"} sub={`avg ${(a.avgLatencyMs/1000).toFixed(1)}s latency`} />
              <div className="stat-card">
                <div className="stat-label">Activity · 7d</div>
                <div style={{ marginTop: 4 }}>
                  <Sparkline data={a.weekly} color={accentText} width={148} height={36} />
                </div>
                <div className="stat-sub">{a.runs.week} runs</div>
              </div>
              <StatCard label="Lifetime tokens" value={fmtNum(a.tokens.allTime.in + a.tokens.allTime.out)} sub={`${a.runs.allTime.toLocaleString()} runs since ${a.activatedOn}`} />
            </div>

            {/* Capabilities + tools */}
            <div className="two-col">
              <div className="drawer-section" style={{ marginTop: 0 }}>
                <h3>Capabilities</h3>
                <div className="chip-row">
                  {a.capabilities.map((c) => <span key={c} className="capability-chip">{c}</span>)}
                </div>
              </div>
              <div className="drawer-section" style={{ marginTop: 0 }}>
                <h3>Tools</h3>
                <div className="chip-row">
                  {a.tools.map((t) => <span key={t} className="tool-chip mono"><window.Icon.Tool />{t}</span>)}
                </div>
              </div>
            </div>

            {/* Active work */}
            <div className="drawer-section">
              <h3>Active <span className="count-pill">{active.length}</span></h3>
              {active.length === 0 ? (
                <div className="empty-cot">Nothing active.</div>
              ) : (
                <div className="agent-task-list">
                  {active.map(({task, project}) => (
                    <AgentTaskRow key={task.id} task={task} project={project} onClick={() => onOpenTask(project.id, task.id)} />
                  ))}
                </div>
              )}
            </div>

            {/* Backlog */}
            {backlog.length > 0 && (
              <div className="drawer-section">
                <h3>Backlog <span className="count-pill">{backlog.length}</span></h3>
                <div className="agent-task-list">
                  {backlog.map(({task, project}) => (
                    <AgentTaskRow key={task.id} task={task} project={project} onClick={() => onOpenTask(project.id, task.id)} />
                  ))}
                </div>
              </div>
            )}

            {/* History */}
            <div className="drawer-section">
              <h3>History <span className="count-pill">{history.length}</span></h3>
              {history.length === 0 ? (
                <div className="empty-cot">No completed tasks yet.</div>
              ) : (
                <div className="agent-task-list">
                  {history.map(({task, project}) => (
                    <AgentTaskRow key={task.id} task={task} project={project} onClick={() => onOpenTask(project.id, task.id)} />
                  ))}
                </div>
              )}
            </div>

            {/* Project totals */}
            <div className="drawer-section">
              <h3>Across visible projects</h3>
              <dl className="meta-grid">
                <dt>Tokens spent</dt>
                <dd className="mono">{fmtNum(projTokens.in)} in · {fmtNum(projTokens.out)} out</dd>
                <dt>Cost</dt>
                <dd className="mono">{fmtUSD(projTokens.cost)}</dd>
                <dt>Tasks touched</dt>
                <dd>{allTasks.length}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.AgentProfile = AgentProfile;