// Status pill helper + instance card

function StatusPill({ status }) {
  const map = {
    active: { cls: "active", label: "Active" },
    provisioning: { cls: "provisioning", label: "Provisioning" },
    error: { cls: "error", label: "Degraded" },
    paused: { cls: "paused", label: "Paused" },
    trial: { cls: "trial", label: "Trial" },
    archived: { cls: "archived", label: "Archived" },
  };
  const m = map[status] || { cls: "", label: status };
  return (
    <span className={"pill " + m.cls}>
      <span className="dot" />
      {m.label}
    </span>
  );
}

function InstanceLogo({ inst, size = 34 }) {
  return (
    <div
      className="instance-logo"
      style={{
        width: size, height: size,
        background: `linear-gradient(135deg, ${inst.logoBg}, ${inst.logoBg2})`,
        fontSize: size * 0.38,
      }}
    >
      {inst.initials}
    </div>
  );
}

function fmtNum(n) {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(2) + "M";
  if (n >= 1_000) return (n / 1_000).toFixed(1) + "k";
  return n.toString();
}
function fmtEur(n) {
  return "€" + n.toFixed(2);
}

function InstanceCard({ inst, onOpen }) {
  return (
    <div className="instance-card" onClick={() => onOpen(inst.id)}>
      <div className="head">
        <InstanceLogo inst={inst} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="instance-name">{inst.name}</div>
          <div className="instance-id">{inst.id}</div>
        </div>
        <StatusPill status={inst.status} />
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ flex: 1, color: "var(--text-mute)", fontSize: 11.5 }}>
          {inst.industry} · {inst.plan}
        </div>
        <Sparkline data={inst.spark} width={90} height={26} color="var(--brand)" />
      </div>
      <div className="instance-meta-row">
        <div className="meta-cell">
          <div className="k">Tokens</div>
          <div className="v">{fmtNum(inst.tokensIn + inst.tokensOut)}</div>
        </div>
        <div className="meta-cell">
          <div className="k">Cost</div>
          <div className="v">{fmtEur(inst.cost)}</div>
        </div>
        <div className="meta-cell">
          <div className="k">Messages</div>
          <div className="v">{fmtNum(inst.messages)}</div>
        </div>
      </div>
    </div>
  );
}

window.StatusPill = StatusPill;
window.InstanceLogo = InstanceLogo;
window.InstanceCard = InstanceCard;
window.fmtNum = fmtNum;
window.fmtEur = fmtEur;