// mockups/value-callout.jsx — Sophia narrator speech bubble (top of canvas)
//
// Estilo: burbuja de conversación con avatar de Sophia + tail apuntando a ella,
// posicionada arriba-izquierda, como si Sophia narrara desde fuera de la escena.
//
// Usage:
//   <ValueCallout
//     localTime={localTime}
//     appearAt={3}
//     duration={3.5}
//     icon="✨"
//     title="Extracción AI"
//     body="..."
//   />
//
// Exports: ValueCallout, CalloutsTrack

function ValueCallout({
  localTime,
  appearAt,
  duration = 3.5,
  icon,
  title,
  body,
  tKey,                 // when set, looks up title + body from SOL_I18N[lang].callout[tKey]
  position = 'top-left', // 'top-left' | 'top-right'
  attention = false,     // when true, adds pulsing border + avatar ring "read me"
}) {
  // Pull lang from TimelineContext (falls back to 'es')
  const lang = useTimeline().lang || 'es';
  const i18n = (window.SOL_I18N && window.SOL_I18N[lang]) || (window.SOL_I18N && window.SOL_I18N.es) || {};

  // If tKey is provided, look up the localized title + body and override.
  let effectiveTitle = title;
  let effectiveBody = body;
  if (tKey && i18n.callout && i18n.callout[tKey]) {
    effectiveTitle = i18n.callout[tKey].title;
    effectiveBody = i18n.callout[tKey].body;
  }
  const sophiaRole = i18n.sophia_role || 'Asistente IA';

  const t = localTime - appearAt;
  if (t < -0.1 || t > duration + 0.2) return null;

  const fadeIn = 0.4;
  const fadeOut = 0.4;
  let p = 1;
  if (t < fadeIn) p = Math.max(0, t / fadeIn);
  else if (t > duration - fadeOut) p = Math.max(0, 1 - (t - (duration - fadeOut)) / fadeOut);

  const e = Easing.easeOutCubic(p);
  const isRight = position === 'top-right';

  return (
    <div style={{
      position: 'absolute',
      top: 32,
      ...(isRight ? { right: 32 } : { left: 32 }),
      display: 'flex',
      flexDirection: isRight ? 'row-reverse' : 'row',
      alignItems: 'flex-start',
      gap: 14,
      opacity: e,
      transform: `translateY(${(1 - e) * -14}px)`,
      zIndex: 32,
      pointerEvents: 'none',
      willChange: 'transform, opacity',
    }}>
      {/* Sophia avatar — narrator identity */}
      <div className={attention ? 'sol-callout-avatar-pulse' : ''} style={{
        position: 'relative',
        width: 56, height: 56,
        borderRadius: '50%',
        border: '2px solid rgba(167, 139, 250, 0.55)',
        boxShadow: '0 6px 22px rgba(139, 92, 246, 0.42), 0 0 0 4px rgba(139, 92, 246, 0.08)',
        overflow: 'hidden',
        flexShrink: 0,
        background: 'radial-gradient(circle at 35% 30%, #c4b5fd, #8b5cf6)',
      }}>
        <img
          src="../static/avatar_sophia/sophia_v1_outfit_01_neutra.jpg"
          alt="Sophia"
          style={{
            width: '100%', height: '100%',
            objectFit: 'cover',
            objectPosition: '50% 15%',
            display: 'block',
          }}
          onError={(ev) => { ev.target.style.display = 'none'; }}
        />
        {/* Online dot */}
        <span style={{
          position: 'absolute',
          bottom: 0, right: 0,
          width: 13, height: 13,
          background: '#34C759',
          border: '2px solid rgba(10, 8, 24, 0.85)',
          borderRadius: '50%',
        }} />
      </div>

      {/* Speech bubble with tail */}
      <div className={attention ? 'sol-callout-attention' : ''} style={{
        position: 'relative',
        width: 280,
        padding: '14px 18px 16px 20px',
        background: 'rgba(10, 8, 24, 0.85)',
        backdropFilter: 'blur(18px)',
        WebkitBackdropFilter: 'blur(18px)',
        border: '1px solid rgba(167, 139, 250, 0.36)',
        borderRadius: isRight ? '16px 4px 16px 16px' : '4px 16px 16px 16px',
        boxShadow: '0 22px 50px rgba(0,0,0,0.55), 0 0 30px rgba(139, 92, 246, 0.22), inset 0 1px 0 rgba(255,255,255,0.06)',
        marginTop: 8,
      }}>
        {/* Tail — triangle pointing toward avatar (left or right side) */}
        <div style={isRight ? {
          position: 'absolute',
          top: 10, right: -8,
          width: 0, height: 0,
          borderTop: '7px solid transparent',
          borderLeft: '10px solid rgba(10, 8, 24, 0.85)',
          borderBottom: '7px solid transparent',
          filter: 'drop-shadow(1px 0 0 rgba(167, 139, 250, 0.36))',
        } : {
          position: 'absolute',
          top: 10, left: -8,
          width: 0, height: 0,
          borderTop: '7px solid transparent',
          borderRight: '10px solid rgba(10, 8, 24, 0.85)',
          borderBottom: '7px solid transparent',
          filter: 'drop-shadow(-1px 0 0 rgba(167, 139, 250, 0.36))',
        }} />

        {/* Sophia identity strip */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 6,
          fontSize: 10.5,
          fontWeight: 700,
          color: '#a78bfa',
          letterSpacing: '0.10em',
          textTransform: 'uppercase',
          marginBottom: 7,
        }}>
          <span>Sophia</span>
          <span style={{ color: 'rgba(167, 139, 250, 0.55)' }}>·</span>
          <span style={{ color: 'rgba(167, 139, 250, 0.75)', fontWeight: 600 }}>{sophiaRole}</span>
        </div>

        {/* Headline */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          marginBottom: 7,
        }}>
          <span style={{
            fontSize: 20,
            filter: 'drop-shadow(0 0 8px rgba(167, 139, 250, 0.55))',
            flexShrink: 0,
          }}>{icon}</span>
          <b style={{
            fontSize: 16,
            fontWeight: 600,
            color: '#ffffff',
            letterSpacing: '-0.005em',
            lineHeight: 1.2,
          }}>{effectiveTitle}</b>
        </div>

        {/* Body */}
        <div style={{
          fontSize: 14.5,
          color: 'rgba(255, 255, 255, 0.82)',
          lineHeight: 1.5,
          letterSpacing: '-0.005em',
        }}>{effectiveBody}</div>
      </div>
    </div>
  );
}

// Convenience: render an array of callouts driven by localTime
function CalloutsTrack({ localTime, callouts }) {
  return (
    <>
      {callouts.map((c, i) => (
        <ValueCallout key={i} localTime={localTime} {...c} />
      ))}
    </>
  );
}

Object.assign(window, { ValueCallout, CalloutsTrack });