/* ════════════════════════════════════════════════════════════
   P12-4 · Dynamic Island-style status pill
   Shows market session + total P/L at top of iPhone screen.
   ════════════════════════════════════════════════════════════ */

const { useState: di_s, useEffect: di_e } = React;

function DynamicIsland({ market }) {
  const [now, setNow] = di_s(new Date());
  di_e(() => {
    const t = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(t);
  }, []);
  const dow = now.getDay();
  const lang = window.__LANG || 'zh';
  const closed = (market === 'cn' || market === 'us') && (dow === 0 || dow === 6);

  // Mock total P/L
  const pnl = closed ? 0 : +2.34;
  const pnlClass = pnl > 0 ? 'up' : pnl < 0 ? 'down' : '';
  const pnlStr = (pnl > 0 ? '+' : '') + pnl.toFixed(2) + '%';

  const sessionLabel = closed
    ? (lang === 'zh' ? '休市' : 'CLOSED')
    : (lang === 'zh' ? '开盘中' : 'LIVE');

  return (
    <div className="island-pill" role="status" aria-live="polite">
      <span className={'ip-dot' + (closed ? ' closed' : '')}/>
      <span>{sessionLabel}</span>
      {!closed && <span className={'ip-val ' + pnlClass}>{pnlStr}</span>}
      <span style={{ opacity: 0.5 }}>·</span>
      <span style={{ fontFamily: 'var(--font-mono)', opacity: 0.7 }}>
        {now.toLocaleTimeString(lang === 'zh' ? 'zh-CN' : 'en-US', { hour: '2-digit', minute: '2-digit' })}
      </span>
    </div>
  );
}
window.DynamicIsland = DynamicIsland;