// Shared mini-UI building blocks for the Workplace video.
// All visuals live inside a 1920x1080 Stage, but scenes design at that scale.
// We emulate the Workplace app UI (browser window chrome, nav, body).

// ── Color tokens (in sync with assets/colors_and_type.css) ────────────
const WP = {
  brand: '#5231ff',
  brandLight: '#6346ff',
  brandLighter: '#f5f3fd',
  purple: '#9a69fa',
  ink: '#2a2620',
  inkDim: '#6b655a',
  text: '#444444',
  textDim: '#777777',
  paper: '#fdfcff',
  paperAlt: '#f9f9f9',
  cardBorder: 'rgba(0,0,0,0.08)',
  green: '#52b963',
  amber: '#f8be38',
  blue: '#309df0',
  red: '#dc3545',
  yellow: '#ffd101',
  colReview: '#f5f3fd',
  colReviewFg: '#5231ff',
  colInterview: '#fff9e1',
  colInterviewFg: '#d6af01',
  colHiring: '#f0fefc',
  colHiringFg: '#48d3bb',
  colOther: '#f0f0f0',
  colOtherFg: '#444',
};

// ── AppWindow: fake browser chrome + Workplace nav ───────────────────────
function AppWindow({ title, right, active = 'Dashboard', workspace = 'Fjörður Labs', simple = false, children, width = 1520, height = 860, x = 200, y = 110 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width, height,
      background: '#fff',
      borderRadius: 14,
      boxShadow: '0 40px 80px -30px rgba(20,20,40,0.35), 0 8px 24px -10px rgba(20,20,40,0.18)',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      fontFamily: 'Poppins, system-ui, sans-serif',
    }}>
      {/* Traffic lights */}
      <div style={{
        height: 40,
        background: '#ece8df',
        borderBottom: '1px solid rgba(0,0,0,0.08)',
        display: 'flex', alignItems: 'center', gap: 8, paddingLeft: 16, flexShrink: 0,
      }}>
        <div style={{ width: 13, height: 13, borderRadius: '50%', background: '#ff5f57' }} />
        <div style={{ width: 13, height: 13, borderRadius: '50%', background: '#febc2e' }} />
        <div style={{ width: 13, height: 13, borderRadius: '50%', background: '#28c840' }} />
        <div style={{
          marginLeft: 24, flex: 1, textAlign: 'center',
          fontSize: 12, color: '#9a968c', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
        }}>
          workplace.opusfutura.com
        </div>
        <div style={{ width: 60 }} />
      </div>

      {/* Workplace nav */}
      {!simple && (
        <div style={{
          height: 56, background: '#fff',
          borderBottom: '1px solid rgba(0,0,0,0.08)',
          display: 'flex', alignItems: 'center',
          padding: '0 28px', gap: 28, flexShrink: 0,
        }}>
          <img
            src="assets/of_logo.png"
            alt="Opus Futura"
            style={{ height: 32, width: 'auto', display: 'block' }}
          />
          {['Dashboard', 'Jobs', 'Matches', 'Chat'].map(t => (
            <span key={t} style={{
              fontSize: 14, fontWeight: active === t ? 700 : 500,
              color: active === t ? WP.brand : WP.textDim,
              borderBottom: active === t ? `2px solid ${WP.brand}` : 'none',
              paddingBottom: 2,
            }}>{t}</span>
          ))}
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              padding: '6px 12px', borderRadius: 999,
              background: '#f3f3f3', fontSize: 13, color: WP.text, fontWeight: 500,
            }}>{workspace}</div>
            <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: WP.brandLighter, color: WP.brand,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 12, fontWeight: 700,
            }}>FL</div>
          </div>
        </div>
      )}

      {/* Title row if supplied */}
      {(title || right) && (
        <div style={{
          padding: '20px 36px 14px', display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0,
        }}>
          {title && <div style={{ fontSize: 22, fontWeight: 600, color: WP.ink, letterSpacing: '-0.01em' }}>{title}</div>}
          {right && <div style={{ marginLeft: 'auto' }}>{right}</div>}
        </div>
      )}

      {/* Body */}
      <div style={{ flex: 1, minHeight: 0, background: WP.paperAlt, position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

// ── Status pill ────────────────────────────────────────────────────────
function Pill({ children, kind = 'brand', size = 'md', style }) {
  const palettes = {
    brand: { bg: WP.brandLighter, fg: WP.brand },
    green: { bg: '#e7f7ea', fg: '#2c7a3e' },
    amber: { bg: '#fff6e1', fg: '#b77d01' },
    blue:  { bg: '#eaf2ff', fg: '#2e5fd4' },
    gray:  { bg: '#eee', fg: '#555' },
    completed: { bg: '#fff0c2', fg: '#5a4000' },
  };
  const p = palettes[kind] || palettes.brand;
  const sz = size === 'lg' ? { fontSize: 13, padding: '6px 14px' } : size === 'sm' ? { fontSize: 11, padding: '3px 10px' } : { fontSize: 12, padding: '5px 12px' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: p.bg, color: p.fg,
      borderRadius: 999, fontWeight: 700, letterSpacing: '0.5px',
      textTransform: 'uppercase',
      ...sz, ...style,
    }}>{children}</span>
  );
}

// ── Workplace-style cursor arrow ────────────────────────────────────────
function Cursor({ x, y, rotate = 0, pressed = false, style }) {
  // Pressed state: slight shrink so it *feels* like a click
  const s = pressed ? 0.86 : 1;
  return (
    <svg width="30" height="36" viewBox="0 0 30 36" style={{
      position: 'absolute', left: x, top: y,
      transform: `rotate(${rotate}deg) scale(${s})`, transformOrigin: '4px 4px',
      filter: 'drop-shadow(2px 3px 4px rgba(0,0,0,0.25))',
      transition: 'transform 80ms ease-out',
      zIndex: 51,
      ...style,
    }}>
      <path d="M2 2 L2 24 L8 18 L13 28 L17 26 L12 16 L20 16 Z"
            fill="#fff" stroke="#111" strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  );
}

// ── Click ripple — small solid purple circle, quick pop ────────────────
// `t` drives the animation (0..1). Peaks around 0.3, gone by 1.
function ClickRipple({ x, y, t, color = '#7C3AED', size = 22 }) {
  if (t <= 0 || t >= 1) return null;
  // Grow from 0 → full in first 30%, then fade out
  const grow = Math.min(1, t / 0.3);
  const scale = Easing.easeOutCubic(grow);
  const op = (1 - t) * 0.9;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: 0, height: 0, pointerEvents: 'none', zIndex: 49,
    }}>
      <div style={{
        position: 'absolute',
        left: -size / 2, top: -size / 2,
        width: size, height: size,
        borderRadius: '50%',
        background: color,
        transform: `scale(${scale})`,
        opacity: op,
      }} />
    </div>
  );
}

// ── Caption card (bottom-centre, charcoal, with keyword highlight) ─────
function Caption({ children, highlight, yellowTag = false, visible = true, t = 1 }) {
  // t drives slide-up/fade anim (0..1)
  const y = (1 - t) * 30;
  return (
    <div style={{
      position: 'absolute',
      bottom: 88, left: '50%',
      transform: `translate(-50%, ${y}px)`,
      opacity: t,
      background: yellowTag ? WP.yellow : WP.ink,
      color: yellowTag ? WP.ink : '#fff',
      padding: '20px 36px',
      fontSize: 36, fontWeight: 600,
      letterSpacing: '-0.005em',
      boxShadow: '8px 8px 0 rgba(0,0,0,0.18)',
      fontFamily: 'Poppins, system-ui, sans-serif',
      maxWidth: '80%',
      textAlign: 'center',
      whiteSpace: 'nowrap',
    }}>{children}</div>
  );
}

// ── Generic soft card ──────────────────────────────────────────────────
function Card({ children, style, pad = 16 }) {
  return (
    <div style={{
      background: '#fff',
      border: '1px solid rgba(0,0,0,0.06)',
      borderRadius: 10,
      padding: pad,
      boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
      ...style,
    }}>{children}</div>
  );
}

// ── Measure an element's position relative to an ancestor in LOGICAL pixels ─
// getBoundingClientRect() returns viewport-scaled values. The Stage is scaled
// to fit the viewport, so feeding raw rect deltas back into a Cursor inside
// the same scaled stage double-scales them. We divide by the current scale
// (derived from the ancestor's scaled width vs. its logical offsetWidth).
function offsetWithin(el, ancestor) {
  const rE = el.getBoundingClientRect();
  const rA = ancestor.getBoundingClientRect();
  const scale = ancestor.offsetWidth > 0 ? rA.width / ancestor.offsetWidth : 1;
  return {
    x: (rE.left - rA.left) / scale,
    y: (rE.top  - rA.top)  / scale,
    w: rE.width  / scale,
    h: rE.height / scale,
  };
}

Object.assign(window, { WP, AppWindow, Pill, Cursor, ClickRipple, Caption, Card, offsetWithin });