function useBattery() {
  const [bat, setBat] = React.useState(null);
  React.useEffect(() => {
    if (!navigator.getBattery) return;
    let nav;
    navigator.getBattery().then(b => {
      nav = b;
      const update = () => setBat({ level: b.level, charging: b.charging });
      update();
      b.addEventListener('levelchange', update);
      b.addEventListener('chargingchange', update);
    });
    return () => {
      if (nav) {
        nav.removeEventListener('levelchange', () => {});
        nav.removeEventListener('chargingchange', () => {});
      }
    };
  }, []);
  return bat;
}

function BatteryIcon({ level, charging }) {
  const pct = Math.round(level * 100);
  const color = pct <= 20 ? '#e05' : pct <= 40 ? '#f90' : 'var(--soft)';
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap:3,fontSize:'1.6vmin',color,fontFamily:'var(--font-ui)',fontWeight:600,lineHeight:1}}>
      <span style={{fontSize:'1.8vmin'}}>{charging ? '⚡' : pct <= 20 ? '🪫' : '🔋'}</span>
      {pct}%
    </span>
  );
}

function Topbar({ grupo, fecha, turno, clockText }) {
  const bat = useBattery();
  const [ver, setVer] = React.useState('');
  React.useEffect(() => {
    fetch('/version.json').then(r=>r.json()).then(d=>setVer(d.version)).catch(()=>{});
  }, []);
  return (
    <div className="topbar">
      <div className="tb-logoblock">
        <a href="./" style={{display:'flex',alignItems:'center',textDecoration:'none'}}>
          <img className="tb-logo" src="../assets/dina-logo-horizontal-white.png" alt="Dinalight"
               onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='block'; }} />
          <span style={{display:'none',fontFamily:'var(--font-display)',fontWeight:800,fontSize:'2.2vmin',letterSpacing:'0.06em',color:'var(--dina-red)'}}>DINA</span>
        </a>
        <div className="tb-sep"></div>
      </div>
      <div className="tb-cols">
        <div className="tb-col-left">{fecha}</div>
        <div className="tb-col-mid">{grupo}</div>
        <div className="tb-col-right">
          <div className="turno-pill">{turno}</div>
          <div className="turno-clock">{clockText}</div>
          {bat && <BatteryIcon level={bat.level} charging={bat.charging} />}
          {ver && <span style={{fontSize:'1.5vmin',color:'var(--muted)',fontFamily:'var(--font-display)',letterSpacing:'0.06em'}}>v{ver}</span>}
        </div>
      </div>
    </div>
  );
}

function TareaGlobalBar({ tarea, onCambiar }) {
  const label = tarea?.label || '— Sin tarea grupal —';
  return (
    <div className="tarea-global">
      <div className="tg-label">Tarea grupal</div>
      <div className="tg-val">{label}</div>
      <button className="btn-cambiar" onClick={onCambiar}>Cambiar</button>
    </div>
  );
}

function BottomBar({ onNotas, onHelp }) {
  return (
    <div className="bottom-bar">
      <button className="btn-notas" onClick={onNotas}>Notas</button>
      <button className="btn-help" onClick={onHelp}>Ayuda</button>
    </div>
  );
}

Object.assign(window, { Topbar, TareaGlobalBar, BottomBar });