// Small reusable bits for the Agent Jobs page

// Brand-color integration glyphs — small, abstract, not real logos
const INTEGRATION_COLORS = {
  NetSuite:   '#d40029',
  Slack:      '#4a154b',
  Gmail:      '#ea4335',
  Snowflake:  '#29b5e8',
  Drive:      '#1a73e8',
  'Google Drive': '#1a73e8',
  Zendesk:    '#03363d',
  Shopify:    '#7ab55c',
  Stripe:     '#635bff',
  HubSpot:    '#ff7a59',
  Salesforce: '#00a1e0',
  Gong:       '#8246af',
  Ironclad:   '#0a0a23',
  DocuSign:   '#ffcc22',
  ShipBob:    '#1a1a1a',
  Linear:     '#5e6ad2',
  PagerDuty:  '#06ac38',
  Datadog:    '#632ca6',
  GitHub:     '#1a1f24',
  Mixpanel:   '#7856ff',
  Apollo:     '#0066ff',
};

function IntegrationDot({ name, status }) {
  const color = INTEGRATION_COLORS[name] || '#5b6168';
  const initials = name.split(/[\s/]/).filter(Boolean).map(s => s[0]).slice(0,2).join('').toUpperCase();
  return (
    <span className="int-dot" title={status ? `${name} · ${status}` : name} style={{
      background: color,
      color: name === 'DocuSign' ? '#1a1f24' : 'white',
    }}>
      {initials}
      {status && status !== 'connected' && (
        <span className={`int-status int-status-${status}`}/>
      )}
    </span>
  );
}

function IntegrationStack({ items, max = 4 }) {
  const visible = items.slice(0, max);
  const more = items.length - visible.length;
  return (
    <span className="int-stack">
      {visible.map((it, i) => <IntegrationDot key={i} name={it.name} status={it.status}/>)}
      {more > 0 && <span className="int-more">+{more}</span>}
    </span>
  );
}

function FitBadge({ level }) {
  const map = { high: ['#0d9168', 'High'], medium: ['#c69214', 'Medium'], low: ['#a13b3b', 'Low'] };
  const [color, label] = map[level] || map.medium;
  return <span className="fit-badge"><span className="fit-dot" style={{background: color}}/>{label}</span>;
}

function StatusDot({ state, label }) {
  const map = {
    running:  ['#0d9168', 'Running'],
    paused:   ['#c69214', 'Paused'],
    anomaly:  ['#c8442d', 'Anomaly'],
  };
  const [color, defaultLabel] = map[state] || map.running;
  return (
    <span className="status-dot-row">
      <span className="status-pulse-wrap">
        <span className="status-pulse" style={{background: color}}/>
        {state === 'running' && <span className="status-pulse-ring" style={{borderColor: color}}/>}
      </span>
      {label || defaultLabel}
    </span>
  );
}

function ProgressBar({ value, total, complete }) {
  const pct = Math.min(100, (value / total) * 100);
  return (
    <span className="progress-wrap">
      <span className="progress-track">
        <span className="progress-fill" style={{
          width: `${pct}%`,
          background: complete ? 'oklch(0.55 0.10 180)' : '#3a4046',
        }}/>
      </span>
    </span>
  );
}

function StageHeader({ stage, count, muted }) {
  return (
    <div className="stage-header">
      <h2 className="stage-title">
        <span className="stage-num">{stage.n}.</span>
        <span className="stage-name">{stage.name}</span>
        <span className="stage-sep">—</span>
        <span className="stage-sub">{stage.sub}</span>
      </h2>
      <span className="stage-count">{count}</span>
    </div>
  );
}

function StageDesc({ children }) {
  return <p className="stage-desc">{children}</p>;
}

function EmptyRow({ children, filtered }) {
  return <div className="stage-empty">{filtered ? 'No matching jobs in this stage.' : children}</div>;
}

function ActionBtn({ children, primary, subtle }) {
  const cls = `action-btn ${primary ? 'action-btn-primary' : ''} ${subtle ? 'action-btn-subtle' : ''}`;
  return <button className={cls.trim()} onClick={(e) => e.stopPropagation()}>{children} <span className="action-arrow">→</span></button>;
}

function ScopingStatusPill({ status }) {
  const map = {
    drafting:           { label: 'Drafting',           cls: 'pill-neutral'  },
    ready_for_review:   { label: 'Ready for review',   cls: 'pill-accent'   },
    revisions_requested:{ label: 'Revisions requested',cls: 'pill-warn'     },
  };
  const m = map[status] || map.drafting;
  return <span className={`pill ${m.cls}`}>{m.label}</span>;
}

function OnboardingStatusPill({ status }) {
  const map = {
    connecting_integrations: { label: 'Connecting integrations', cls: 'pill-neutral' },
    loading_context:         { label: 'Loading context',         cls: 'pill-neutral' },
    ready_for_trial:         { label: 'Ready for trial',         cls: 'pill-accent'  },
  };
  const m = map[status] || map.connecting_integrations;
  return <span className={`pill ${m.cls}`}>{m.label}</span>;
}

function StagePipeline({ stages, jobs }) {
  const counts = stages.map(s => jobs.filter(j => j.state === s.id).length);
  const onClick = (id) => {
    const el = document.querySelector(`[data-stage-anchor="${id}"]`);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <div className="pipeline-bar" role="tablist" aria-label="Pipeline stages">
      {stages.map((s, i) => {
        const count = counts[i];
        const muted = count === 0;
        return (
          <button
            key={s.id}
            className={`pipe-stage ${muted ? 'is-muted' : ''}`}
            data-first={i === 0 ? 'true' : undefined}
            data-last={i === stages.length - 1 ? 'true' : undefined}
            onClick={() => onClick(s.id)}
            title={`${s.name} — jump to section`}
          >
            <span className="pipe-stage-inner">
              <span className="pipe-num">{s.n}</span>
              <span className="pipe-name">{s.name}</span>
              <span className="pipe-count">{count}</span>
            </span>
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, {
  IntegrationDot, IntegrationStack, FitBadge, StatusDot, ProgressBar,
  StageHeader, StageDesc, EmptyRow, ActionBtn, ScopingStatusPill, OnboardingStatusPill,
  StagePipeline,
});