/* cflow-primitives.jsx — shared atoms: stepper, status pill, status menu */
/* global React, Icon, RDSidebar, RDTopbar */
const { useState: useCFState } = React;

// Re-use shell sidebar+topbar from redesign-primitives.jsx but with active=campaign
function CFSidebar({ active = 'campaign' }) {
  return <RDSidebar active={active} />;
}
function CFTopbar({ crumbs }) {
  // Allow custom crumb chain
  if (!crumbs) return <RDTopbar />;
  return (
    <div className="rd-topbar">
      <div className="crumb">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i === crumbs.length - 1 ? <b>{c}</b> : <span>{c}</span>}
            {i < crumbs.length - 1 && <span>·</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="grow"></div>
      <div className="icon-btn">{Icon.bell}</div>
      <div className="icon-btn">{Icon.settings}</div>
      <div className="avatar">AT</div>
    </div>
  );
}

// ── Stepper ──────────────────────────────────────────
function CFStepper({ steps, current }) {
  return (
    <div className="cf-stepper">
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <div className={'step ' + (i < current ? 'done' : i === current ? 'active' : '')}>
            <div className="dot">{i < current ? Icon.check : (i + 1)}</div>
            <span className="label">{s}</span>
          </div>
          {i < steps.length - 1 && (
            <div className="bar"><div className="fill" style={{ transform: `scaleX(${i < current ? 1 : 0})` }}></div></div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

// ── Status pill ──────────────────────────────────────
function CFStatusPill({ status }) {
  /* global CF_STATUS_LABEL */
  return (
    <span className={'cf-status ' + status}>
      <span className="dot"></span>
      {CF_STATUS_LABEL[status]}
    </span>
  );
}

// ── Status dropdown trigger + menu ───────────────────
function CFStatusDropdown({ status, open }) {
  /* global CF_STATUS_LABEL, CF_TRANSITIONS, CF_STATUSES */
  const transitions = CF_TRANSITIONS[status] || [];
  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <button className={'cf-status-trigger ' + status}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: 'currentColor', opacity: 0.85 }}></span>
        {CF_STATUS_LABEL[status]}
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      {open && (
        <div className="cf-status-menu" style={{ position: 'absolute', top: 'calc(100% + 6px)', left: 0, zIndex: 5 }}>
          <div className="lbl">Move to</div>
          {transitions.filter((s) => s !== 'cancelled').map((next) => (
            <div key={next} className="item">
              <span style={{ width: 8, height: 8, borderRadius: 999, background: nextColor(next) }}></span>
              <span>{CF_STATUS_LABEL[next]}</span>
              <span className="arrow">{Icon.arrow}</span>
            </div>
          ))}
          {transitions.includes('cancelled') && (
            <>
              <div className="sep"></div>
              <div className="item danger">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
                <span>Cancel campaign…</span>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}
function nextColor(s) {
  return { draft: 'var(--ink-soft)', recruiting: 'var(--cyan)', in_progress: 'var(--mint-deep)', completed: 'var(--indigo)', cancelled: 'var(--red)', archived: 'var(--ink-soft)' }[s] || 'var(--ink-soft)';
}

// ── Avatar mini (for app rows) ───────────────────────
function CFAvatar({ name, color, size = 28 }) {
  const initials = name.split(' ').slice(-2).map((s) => s[0]).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: color || 'linear-gradient(135deg, var(--cyan), var(--indigo))',
      color: 'white', fontFamily: 'Space Grotesk', fontWeight: 800,
      display: 'grid', placeItems: 'center',
      fontSize: size * 0.36, letterSpacing: '-0.02em',
      flexShrink: 0
    }}>{initials}</div>
  );
}

Object.assign(window, { CFSidebar, CFTopbar, CFStepper, CFStatusPill, CFStatusDropdown, CFAvatar });