/* ============================================================
   VENTUM SMART ART — brand-locked, editable, export-safe
   HTML-based visual blocks for the per-slot picker.

   All blocks are pure HTML (divs + spans + text + EditableNumber).
   Pure HTML — no SVG-embedded HTML. This ensures they survive the PPTX
   DOM walker (same path as BeforeAfterBars in charts.jsx).

   Brand palette: text on navy (#0B1F33) must be white or teal;
   text on white must be navy or teal. Only approved tokens used.
   ============================================================ */

const SA_COLORS = {
  navy:    '#0B1F33',
  teal:    '#22B8A7',
  signal:  '#2563EB',
  white:   '#FFFFFF',
  ink100:  '#0B1F33',
  ink80:   '#2A3A4D',
  ink60:   '#56657A',
  ink40:   '#8A98AB',
  ink20:   '#C6CFD9',
  ink10:   '#E7ECEF',
  ink05:   '#F3F6F8',
};

// ============================================================
// 1. STAT CALLOUT GRID — 2–3 big numbers + labels.
//    Best for: headline metrics, KPI callouts.
//    theme: 'navy' (white text) or 'light' (navy text).
//    stats: [{ value, unit, label }, ...]
// ============================================================
function StatCalloutGrid({
  stats = [
    { value: '99.9%', unit: '', label: 'Single-cycle efficacy' },
    { value: '6-log', unit: '', label: 'Pathogen reduction' },
    { value: '< 4 min', unit: '', label: 'Cycle time' },
  ],
  theme = 'navy',
  onEditValue,
  onEditLabel,
}) {
  const isNavy = theme === 'navy';
  const fg = isNavy ? SA_COLORS.white : SA_COLORS.navy;
  const muted = isNavy ? 'rgba(255,255,255,0.72)' : SA_COLORS.ink60;
  const accent = SA_COLORS.teal;
  const borderColor = isNavy ? 'rgba(255,255,255,0.14)' : SA_COLORS.ink10;
  const count = Math.min(3, stats.length);

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${count}, 1fr)`,
      gap: 0,
      width: '100%',
    }}>
      {stats.slice(0, count).map((s, i) => (
        <div key={i} style={{
          padding: '16px 14px',
          borderLeft: i > 0 ? `1px solid ${borderColor}` : 'none',
          display: 'flex',
          flexDirection: 'column',
          gap: 6,
        }}>
          <div style={{
            fontSize: 28,
            fontWeight: 300,
            letterSpacing: '-0.03em',
            lineHeight: 1,
            color: fg,
          }}>
            {onEditValue ? (
              <EditableNumber
                value={s.value}
                onChange={(_, raw) => onEditValue(i, raw)}
                style={{ fontSize: 28, fontWeight: 300, letterSpacing: '-0.03em', color: fg, minWidth: 30 }}
              />
            ) : s.value}
            {s.unit && (
              <span className="mono" style={{ fontSize: 11, color: muted, marginLeft: 4, letterSpacing: '0.1em' }}>
                {s.unit}
              </span>
            )}
          </div>
          <div style={{ width: 20, height: 2, background: accent, borderRadius: 1 }} />
          {onEditLabel ? (
            <EditableNumber
              value={s.label}
              onChange={(_, raw) => onEditLabel(i, raw)}
              className="mono"
              style={{ fontSize: 9, color: muted, letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.4 }}
            />
          ) : (
            <div className="mono" style={{ fontSize: 9, color: muted, letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.4 }}>
              {s.label}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ============================================================
// 2. ICON PROCESS ROW — numbered steps left→right.
//    Best for: sequences, rollouts, protocols.
//    steps: [{ number, label, detail }]
// ============================================================
function IconProcessRow({
  steps = [
    { number: '01', label: 'Deploy', detail: 'Install unit in space' },
    { number: '02', label: 'Activate', detail: 'One-touch cycle start' },
    { number: '03', label: 'Verify', detail: 'Automated log report' },
  ],
  theme = 'navy',
  onEditLabel,
  onEditDetail,
}) {
  const isNavy = theme === 'navy';
  const fg = isNavy ? SA_COLORS.white : SA_COLORS.navy;
  const muted = isNavy ? 'rgba(255,255,255,0.72)' : SA_COLORS.ink60;
  const accent = SA_COLORS.teal;
  const connectorColor = isNavy ? 'rgba(255,255,255,0.18)' : SA_COLORS.ink20;
  const cellBg = isNavy ? 'rgba(255,255,255,0.04)' : SA_COLORS.ink05;
  const cellBorder = isNavy ? 'rgba(255,255,255,0.10)' : SA_COLORS.ink20;
  const count = steps.length;

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${count}, 1fr)`,
      gap: 0,
      position: 'relative',
      width: '100%',
    }}>
      {steps.map((s, i) => (
        <div key={i} style={{ position: 'relative', paddingRight: i < count - 1 ? 14 : 0 }}>
          <div style={{
            border: `1px solid ${cellBorder}`,
            padding: '10px 12px',
            background: cellBg,
            borderRadius: 2,
            height: '100%',
          }}>
            {/* Step number badge */}
            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: 22,
              height: 22,
              background: accent,
              borderRadius: 2,
              marginBottom: 8,
            }}>
              <span className="mono" style={{ fontSize: 9, fontWeight: 600, color: SA_COLORS.navy, letterSpacing: '0.04em' }}>
                {s.number || String(i + 1).padStart(2, '0')}
              </span>
            </div>
            {/* Label */}
            {onEditLabel ? (
              <EditableNumber
                value={s.label}
                onChange={(_, raw) => onEditLabel(i, raw)}
                style={{ display: 'block', fontSize: 13, fontWeight: 500, color: fg, letterSpacing: '-0.01em', lineHeight: 1.2, marginBottom: 4 }}
              />
            ) : (
              <div style={{ fontSize: 13, fontWeight: 500, color: fg, letterSpacing: '-0.01em', lineHeight: 1.2, marginBottom: 4 }}>
                {s.label}
              </div>
            )}
            {/* Detail */}
            {s.detail !== undefined && (
              onEditDetail ? (
                <EditableNumber
                  value={s.detail}
                  onChange={(_, raw) => onEditDetail(i, raw)}
                  style={{ display: 'block', fontSize: 10.5, color: muted, lineHeight: 1.4 }}
                />
              ) : (
                <div style={{ fontSize: 10.5, color: muted, lineHeight: 1.4 }}>{s.detail}</div>
              )
            )}
          </div>
          {/* Arrow connector */}
          {i < count - 1 && (
            <div style={{
              position: 'absolute',
              right: 0, top: '50%',
              width: 14, height: 1,
              background: connectorColor,
              transform: 'translateY(-50%)',
              zIndex: 1,
            }}>
              <div style={{
                position: 'absolute', right: 0, top: -3,
                width: 0, height: 0,
                borderTop: '4px solid transparent',
                borderBottom: '4px solid transparent',
                borderLeft: `5px solid ${accent}`,
              }} />
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ============================================================
// 3. COMPARISON TABLE — 2-column before/after or vs.
//    Best for: contrasting two states, competitive positioning.
//    rows: [{ label, before, after }]
//    leftHead / rightHead: column header strings
// ============================================================
function ComparisonTable({
  leftHead = 'Before',
  rightHead = 'With Ventum',
  rows = [
    { label: 'Cycle time',          before: '45 min',  after: '< 4 min' },
    { label: 'Manual steps',        before: '12',      after: '1' },
    { label: 'Log reduction',       before: '2-log',   after: '6-log' },
    { label: 'Documentation',       before: 'Manual',  after: 'Auto' },
  ],
  theme = 'navy',
  onEditBefore,
  onEditAfter,
  onEditLabel,
}) {
  const isNavy = theme === 'navy';
  const fg = isNavy ? SA_COLORS.white : SA_COLORS.navy;
  const muted = isNavy ? 'rgba(255,255,255,0.72)' : SA_COLORS.ink60;
  const accent = SA_COLORS.teal;
  const headerBg = isNavy ? 'rgba(255,255,255,0.08)' : SA_COLORS.ink05;
  const rowBorderColor = isNavy ? 'rgba(255,255,255,0.08)' : SA_COLORS.ink10;
  const afterBg = isNavy ? 'rgba(34,184,167,0.12)' : 'rgba(34,184,167,0.08)';

  return (
    <div style={{ width: '100%' }}>
      {/* Header row */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr 1fr',
        gap: 0,
        background: headerBg,
        borderRadius: '2px 2px 0 0',
        padding: '6px 10px',
        borderBottom: `1px solid ${rowBorderColor}`,
      }}>
        <div className="mono" style={{ fontSize: 8.5, color: muted, letterSpacing: '0.14em', textTransform: 'uppercase' }}> </div>
        <div className="mono" style={{ fontSize: 8.5, color: muted, letterSpacing: '0.14em', textTransform: 'uppercase', textAlign: 'center' }}>
          {leftHead}
        </div>
        <div className="mono" style={{ fontSize: 8.5, color: accent, letterSpacing: '0.14em', textTransform: 'uppercase', textAlign: 'center' }}>
          {rightHead}
        </div>
      </div>
      {/* Data rows */}
      {rows.map((row, i) => (
        <div key={i} style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr',
          gap: 0,
          alignItems: 'center',
          borderBottom: `1px solid ${rowBorderColor}`,
          padding: '7px 10px',
        }}>
          {/* Row label */}
          {onEditLabel ? (
            <EditableNumber
              value={row.label}
              onChange={(_, raw) => onEditLabel(i, raw)}
              className="mono"
              style={{ fontSize: 9, color: muted, letterSpacing: '0.10em', textTransform: 'uppercase' }}
            />
          ) : (
            <div className="mono" style={{ fontSize: 9, color: muted, letterSpacing: '0.10em', textTransform: 'uppercase' }}>
              {row.label}
            </div>
          )}
          {/* Before value */}
          <div style={{ textAlign: 'center' }}>
            {onEditBefore ? (
              <EditableNumber
                value={row.before}
                onChange={(_, raw) => onEditBefore(i, raw)}
                style={{ fontSize: 12, color: muted, textAlign: 'center' }}
              />
            ) : (
              <span style={{ fontSize: 12, color: muted }}>{row.before}</span>
            )}
          </div>
          {/* After value — highlighted */}
          <div style={{ textAlign: 'center', background: afterBg, borderRadius: 2, padding: '3px 6px' }}>
            {onEditAfter ? (
              <EditableNumber
                value={row.after}
                onChange={(_, raw) => onEditAfter(i, raw)}
                style={{ fontSize: 12, fontWeight: 500, color: accent, textAlign: 'center' }}
              />
            ) : (
              <span style={{ fontSize: 12, fontWeight: 500, color: accent }}>{row.after}</span>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

// ============================================================
// 4. BEFORE/AFTER SPLIT — two-panel side-by-side transformation.
//    Best for: showing a clear before/after state change.
//    left/right: { head, body, badge }
// ============================================================
function BeforeAfterSplit({
  left = {
    head: 'Before Ventum',
    body: 'Manual 12-step protocol, 45 min per turnover, inconsistent documentation.',
    badge: 'Status quo',
  },
  right = {
    head: 'After Ventum',
    body: 'One-touch activation, < 4 min per cycle, automated audit log.',
    badge: '6-log reduction',
  },
  theme = 'navy',
  onEditLeft,
  onEditRight,
}) {
  const isNavy = theme === 'navy';
  const fg = isNavy ? SA_COLORS.white : SA_COLORS.navy;
  const muted = isNavy ? 'rgba(255,255,255,0.72)' : SA_COLORS.ink60;
  const accent = SA_COLORS.teal;
  const dividerColor = isNavy ? 'rgba(255,255,255,0.14)' : SA_COLORS.ink20;

  // Left panel: muted treatment
  const leftBg = isNavy ? 'rgba(255,255,255,0.03)' : SA_COLORS.ink05;
  const leftBorder = isNavy ? 'rgba(255,255,255,0.08)' : SA_COLORS.ink20;
  // Right panel: teal-accented
  const rightBg = isNavy ? 'rgba(34,184,167,0.10)' : 'rgba(34,184,167,0.07)';
  const rightBorder = 'rgba(34,184,167,0.35)';

  const panel = (side, data, onEdit, panelBg, panelBorder, badgeColor, headColor, bodyColor) => (
    <div style={{
      flex: 1,
      background: panelBg,
      border: `1px solid ${panelBorder}`,
      borderRadius: 2,
      padding: '14px 14px 12px',
      display: 'flex',
      flexDirection: 'column',
      gap: 8,
    }}>
      {/* Badge */}
      <div style={{
        display: 'inline-block',
        background: badgeColor,
        borderRadius: 2,
        padding: '2px 7px',
        alignSelf: 'flex-start',
      }}>
        <span className="mono" style={{ fontSize: 8, fontWeight: 600, color: SA_COLORS.navy, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          {data.badge}
        </span>
      </div>
      {/* Head */}
      {onEdit ? (
        <EditableNumber
          value={data.head}
          onChange={(_, raw) => onEdit('head', raw)}
          style={{ fontSize: 14, fontWeight: 500, color: headColor, letterSpacing: '-0.01em', lineHeight: 1.2 }}
        />
      ) : (
        <div style={{ fontSize: 14, fontWeight: 500, color: headColor, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          {data.head}
        </div>
      )}
      {/* Body */}
      {onEdit ? (
        <EditableNumber
          value={data.body}
          onChange={(_, raw) => onEdit('body', raw)}
          style={{ fontSize: 11, color: bodyColor, lineHeight: 1.5 }}
        />
      ) : (
        <div style={{ fontSize: 11, color: bodyColor, lineHeight: 1.5 }}>
          {data.body}
        </div>
      )}
    </div>
  );

  return (
    <div style={{ display: 'flex', gap: 8, width: '100%', alignItems: 'stretch' }}>
      {panel(
        'left', left, onEditLeft,
        leftBg, leftBorder,
        // Solid light pill in both themes so the navy badge text stays legible
        // (a translucent-white-on-navy badge composites to a dark muted blue —
        // navy-on-dark, low contrast; the static guard can't see composited bg).
        SA_COLORS.ink20,
        muted, muted
      )}
      {/* Divider arrow */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        width: 20, flexShrink: 0,
      }}>
        <div style={{ fontSize: 14, color: accent, fontWeight: 300 }}>→</div>
      </div>
      {panel(
        'right', right, onEditRight,
        rightBg, rightBorder,
        accent,
        fg, isNavy ? 'rgba(255,255,255,0.85)' : SA_COLORS.ink80
      )}
    </div>
  );
}

// ============================================================
// EXPOSE
// ============================================================
Object.assign(window, {
  StatCalloutGrid,
  IconProcessRow,
  ComparisonTable,
  BeforeAfterSplit,
});