// simultaneous.jsx — Fire Lingo Simultaneous mode, member-side panel.
//
// Renders INSIDE the translation screen's left column, replacing the
// push-to-talk circle. The employee column (status card, finish-session,
// mode selector) stays put — the employee never leaves the
// "select language → serve → finish" flow.
//
// Built for classroom / conference settings: the presenter speaks
// continuously for 30–50 min while the tablet streams translated audio
// to the audience over headphones. No push-to-talk — an ON/OFF switch.

function SimultaneousPanel({ lang, nativeFont, arriving, live, setLive, level, elapsed, direction, setDirection }) {
  const fmt = (s) => {
    const m = Math.floor(s / 60), sec = Math.floor(s % 60);
    return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
  };

  // Localized "Slide to translate" / "Translating…" per language
  const stateCopy = {
    'es':    { idle: 'Desliza para traducir',        live: 'Traduciendo…' },
    'ko':    { idle: '밀어서 번역하세요',              live: '번역 중…' },
    'fr':    { idle: 'Glissez pour traduire',        live: 'Traduction…' },
    'zh':    { idle: '滑动开始翻译',                   live: '翻译中…' },
    'ht':    { idle: 'Glise pou tradui',             live: 'N ap tradui…' },
    'sw':    { idle: 'Telezesha ili kutafsiri',      live: 'Inatafsiri…' },
    'pt-BR': { idle: 'Deslize para traduzir',        live: 'Traduzindo…' },
    'pt-PT': { idle: 'Deslize para traduzir',        live: 'A traduzir…' },
    'vi':    { idle: 'Trượt để dịch',                live: 'Đang dịch…' },
    'ar':    { idle: 'اسحب للترجمة',                  live: 'جارٍ الترجمة…' },
    'prs':   { idle: 'برای ترجمه بکشید',              live: 'در حال ترجمه…' },
    'ru':    { idle: 'Проведите для перевода',       live: 'Перевод…' },
    'uk':    { idle: 'Проведіть для перекладу',      live: 'Переклад…' },
    'ro':    { idle: 'Glisați pentru a traduce',     live: 'Se traduce…' },
    'so':    { idle: 'Sii u jiid si aad u turjunto', live: 'Waa la turjumayaa…' },
  };
  const copy = stateCopy[lang.code] || stateCopy.es;

  // Direction endpoints — names hold position; the arrow flips to show flow
  const enSide  = { english: 'English', native: 'Inglés' };
  const tgtSide = { english: lang.english, native: lang.native };

  const rise = (delay) => ({
    opacity: arriving ? 0 : 1,
    transform: arriving ? 'translateY(12px)' : 'translateY(0)',
    transition: `all 600ms var(--ease-out) ${delay}ms`,
  });

  return (
    <>
      {/* Mode chip — tells the room which mode the tablet is in */}
      <div style={{
        marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '6px 14px', borderRadius: 'var(--radius-pill)',
        background: live ? 'rgba(63,203,92,0.16)' : 'rgba(255,255,255,0.08)',
        border: `1px solid ${live ? 'rgba(63,203,92,0.4)' : 'rgba(255,255,255,0.16)'}`,
        transition: 'all 240ms var(--ease-out)',
        ...rise(120),
      }}>
        <span style={{
          width: 7, height: 7, borderRadius: 999,
          background: live ? '#4FD96B' : 'rgba(255,255,255,0.45)',
          boxShadow: live ? '0 0 0 4px rgba(63,203,92,0.2)' : 'none',
          animation: live ? 'fl-live-pulse 1.6s var(--ease-in-out) infinite' : 'none',
        }} />
        <span style={{
          fontFamily: 'var(--font-sans)', fontSize: 10.5, fontWeight: 700,
          textTransform: 'uppercase', letterSpacing: '0.16em',
          color: live ? '#B6F0C2' : 'rgba(255,255,255,0.6)',
        }}>
          Simultaneous{live ? ' · live' : ''}
        </span>
      </div>

      {/* State label — English lead, localized beneath */}
      <div style={{
        marginTop: 18, textAlign: 'center', ...rise(180),
      }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 800,
          color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.15,
        }}>
          {live ? 'Translating…' : 'Slide to translate'}
        </div>
        <div style={{
          marginTop: 6,
          fontFamily: nativeFont, fontSize: 21, fontWeight: 500,
          color: 'rgba(255,255,255,0.72)', lineHeight: 1.3,
          direction: lang.script === 'rtl' ? 'rtl' : 'ltr',
        }}>
          {live ? copy.live : copy.idle}
        </div>
      </div>

      {/* The switch — sized to sit where the mic circle does.
         Padding reserves room for the live glow so neighbours never clip it. */}
      <div style={{
        marginTop: 6, position: 'relative', overflow: 'visible',
        padding: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
        ...rise(280),
      }}>
        {live && (
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 999,
            background: 'radial-gradient(ellipse at center, rgba(63,203,92,0.26) 26%, rgba(63,203,92,0.10) 42%, rgba(63,203,92,0) 62%)',
            transform: `scale(${1 + level * 0.08})`,
            transition: 'transform 130ms var(--ease-out)',
            pointerEvents: 'none',
          }} />
        )}
        <button
          onClick={() => setLive(v => !v)}
          role="switch"
          aria-checked={live}
          aria-label={live ? 'Stop translating' : 'Start translating'}
          style={{
            position: 'relative',
            width: 260, height: 132, borderRadius: 999, border: 'none', padding: 8,
            background: live
              ? 'linear-gradient(180deg, #3FCB5C 0%, #29A845 100%)'
              : 'linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.09) 100%)',
            boxShadow: live
              ? '0 18px 44px rgba(41,168,69,0.4), inset 0 -4px 12px rgba(0,0,0,0.16), inset 0 3px 8px rgba(255,255,255,0.3)'
              : 'inset 0 3px 10px rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.1)',
            border: live ? 'none' : '1px solid rgba(255,255,255,0.16)',
            display: 'flex', alignItems: 'center',
            justifyContent: live ? 'flex-end' : 'flex-start',
            cursor: 'pointer',
            transition: 'background 280ms var(--ease-out), box-shadow 280ms var(--ease-out)',
            WebkitTapHighlightColor: 'transparent',
          }}>
          <span style={{
            width: 116, height: 116, borderRadius: 999,
            background: 'radial-gradient(circle at 34% 30%, #ffffff 0%, #f2f6fa 62%, #dfe8f1 100%)',
            boxShadow: '0 6px 18px rgba(0,0,0,0.28), inset 0 -2px 6px rgba(15,56,92,0.12)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'transform 280ms var(--ease-out)',
            transform: live ? `scale(${1 + level * 0.035})` : 'scale(1)',
          }}>
            <svg width="46" height="46" viewBox="0 0 24 24" fill="none"
              stroke={live ? '#29A845' : 'var(--td-blue)'} strokeWidth="1.8"
              strokeLinecap="round" strokeLinejoin="round"
              style={{ transition: 'stroke 280ms var(--ease-out)' }}>
              <rect x="9" y="2" width="6" height="12" rx="3" />
              <path d="M5 11a7 7 0 0 0 14 0" />
              <path d="M12 18v3M9 21h6" />
            </svg>
          </span>
        </button>
      </div>

      {/* Live meter + session timer */}
      <div style={{
        marginTop: 0, height: 40,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9,
        opacity: live ? 1 : 0, transition: 'opacity 260ms var(--ease-out)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 3, height: 20 }}>
          {Array.from({ length: 36 }).map((_, i) => {
            const phase = (Math.sin((i / 36) * Math.PI * 3 + elapsed * 5) + 1) / 2;
            return (
              <div key={i} style={{
                width: 3, height: live ? 3 + phase * level * 17 : 3, borderRadius: 2,
                background: 'linear-gradient(180deg, #7BE595, #3FCB5C)',
                transition: 'height 90ms linear',
              }} />
            );
          })}
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
          color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em',
        }}>{fmt(elapsed)}</div>
      </div>

      {/* Direction chip — the arrow flips; the names stay put */}
      <div style={{
        marginTop: 20, display: 'flex', alignItems: 'center', gap: 14,
        padding: '10px 16px',
        background: 'rgba(255,255,255,0.07)',
        border: '1px solid rgba(255,255,255,0.14)',
        borderRadius: 'var(--radius-pill)',
        ...rise(380),
      }}>
        <div style={{ textAlign: 'center', minWidth: 92 }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700,
            color: direction === 'out' ? '#fff' : 'rgba(255,255,255,0.55)',
            transition: 'color 240ms var(--ease-out)',
          }}>{enSide.english}</div>
          <div style={{
            fontFamily: nativeFont, fontSize: 13, fontWeight: 500,
            color: direction === 'out' ? 'rgba(255,255,255,0.72)' : 'rgba(255,255,255,0.38)',
            transition: 'color 240ms var(--ease-out)', marginTop: 1,
          }}>{enSide.native}</div>
        </div>

        <button
          onClick={() => setDirection(d => (d === 'out' ? 'in' : 'out'))}
          aria-label="Reverse translation direction"
          style={{
            width: 38, height: 38, borderRadius: 999, flexShrink: 0,
            background: 'var(--td-blue)', border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 12px rgba(0,0,0,0.28)',
            WebkitTapHighlightColor: 'transparent',
            transition: 'transform 300ms var(--ease-out)',
            transform: direction === 'in' ? 'rotate(180deg)' : 'rotate(0deg)',
          }}>
          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M13 5l7 7-7 7" />
          </svg>
        </button>

        <div style={{ textAlign: 'center', minWidth: 92 }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700,
            color: direction === 'in' ? '#fff' : 'rgba(255,255,255,0.55)',
            transition: 'color 240ms var(--ease-out)',
          }}>{tgtSide.english}</div>
          <div style={{
            fontFamily: nativeFont, fontSize: 13, fontWeight: 500,
            color: direction === 'in' ? 'rgba(255,255,255,0.72)' : 'rgba(255,255,255,0.38)',
            transition: 'color 240ms var(--ease-out)', marginTop: 1,
          }}>{tgtSide.native}</div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { SimultaneousPanel });