function fmt(secs) {
  const h = Math.floor(secs / 3600);
  const m = Math.floor((secs % 3600) / 60);
  const s = secs % 60;
  const p = n => String(n).padStart(2, '0');
  return h > 0 ? `${p(h)}:${p(m)}:${p(s)}` : `${p(m)}:${p(s)}`;
}

function CardTopTask({ name, tipo, prod, gabinete, partida, onClick }) {
  return (
    <div className="card-top" onClick={onClick} style={onClick ? {cursor:'pointer'} : undefined}>
      <div className="op-name">{name}</div>
      <div className="tarea-tipo">{tipo || '—'}</div>
      <div className="tarea-prod portrait-only">{prod}</div>
      <div className="tarea-row3 portrait-only">
        <span className="tarea-tipo3">{gabinete}</span>
        {partida && <span className="tarea-partida">{partida}</span>}
      </div>
      <div className="tarea-combined landscape-only">
        {prod && <span className="tarea-combined-text">{prod}{gabinete ? ' · ' + gabinete : ''}</span>}
        {partida && <span className="tarea-partida">{partida}</span>}
      </div>
    </div>
  );
}

function CardTopBadge({ name, badge }) {
  return (
    <div className="card-top">
      <div className="op-name">{name}</div>
      <div className="estado-badge">{badge}</div>
    </div>
  );
}

function ClockBlock({ digits, isText, btnLabel, onBtn }) {
  return (
    <div className="clock-block">
      <div className="clock-num">
        {isText
          ? <div className="en-corte-txt">{digits}</div>
          : <div className="clock-digits">{digits}</div>}
      </div>
      <div className="clock-btn-wrap">
        <div className="clock-btn" onClick={e => { e.stopPropagation(); onBtn(); }}>{btnLabel}</div>
      </div>
    </div>
  );
}

function CardFoot({ today, onCorte, onFin, isDone }) {
  if (isDone) return null;
  return (
    <div className="card-foot">
      <div className="foot-today">{today}</div>
      <div className="foot-btns">
        <button className="fbtn" onClick={e => { e.stopPropagation(); onCorte(); }}>Corte</button>
        <button className="fbtn" onClick={e => { e.stopPropagation(); onFin(); }}>Fin día</button>
      </div>
    </div>
  );
}

function OperatorCard({ op, onToggleRun, onCorte, onFin, onPickTask, onPickSlot }) {
  const { estado, nombre, tarea_area, tarea_subtipo, tarea_pitch, tarea_tamano,
          tarea_tipo_gab, tarea_partida, secs = 0, hoy_min, hoy_cortes, cortes = [], corteMotivo } = op;

  if (estado === 'libre') {
    return (
      <div className="card libre" onClick={onPickSlot}>
        <div className="card-top" style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:'0.8vmin'}}>
          <div className="libre-plus">+</div>
          <div className="libre-label">LIBRE</div>
          <div className="libre-sub">Toque para unirse</div>
        </div>
      </div>
    );
  }

  const prodLabel = tarea_pitch ? `${tarea_pitch} · ${tarea_tamano || ''}` : '';
  const tipoLabel = tarea_area ? tarea_area.toUpperCase() : '';
  const subLabel  = tarea_subtipo ? tarea_subtipo.toUpperCase().replace(/_/g,' ') : '';
  const hoyLabel  = `HOY: ${hoy_min || 0} MIN · ${hoy_cortes || 0} CORTES`;

  if (estado === 'idle') {
    return (
      <div className="card idle">
        <CardTopTask name={nombre} tipo={subLabel || tipoLabel} prod={prodLabel} gabinete={tarea_tipo_gab || ''} partida={tarea_partida} onClick={onPickTask} />
        <div className="divider"></div>
        <div className="card-bottom">
          <ClockBlock digits={fmt(secs)} btnLabel="INICIAR" onBtn={onToggleRun} />
          <CardFoot today={hoyLabel} onCorte={onCorte} onFin={onFin} />
        </div>
      </div>
    );
  }

  if (estado === 'running') {
    return (
      <div className="card running">
        <CardTopTask name={nombre} tipo={subLabel || tipoLabel} prod={prodLabel} gabinete={tarea_tipo_gab || ''} partida={tarea_partida} onClick={onPickTask} />
        <div className="divider"></div>
        <div className="card-bottom">
          <ClockBlock digits={fmt(secs)} btnLabel="DETENER" onBtn={onToggleRun} />
          <CardFoot today={hoyLabel} onCorte={onCorte} onFin={onFin} />
        </div>
      </div>
    );
  }

  if (estado === 'corte') {
    return (
      <div className="card corte">
        <CardTopBadge name={nombre} badge={op.corte_motivo || 'EN CORTE'} />
        <div className="divider"></div>
        <div className="card-bottom">
          <ClockBlock digits="EN CORTE" isText btnLabel="INICIAR" onBtn={onToggleRun} />
          <CardFoot today={hoyLabel} onCorte={onCorte} onFin={onFin} />
        </div>
      </div>
    );
  }

  // done
  const totalCorteMin = (cortes || []).reduce((a, c) => a + (c.dur_min || 0), 0);
  return (
    <div className="card done">
      <CardTopBadge name={nombre} badge="FIN DÍA" />
      <div className="divider"></div>
      <div className="card-bottom">
        <div className="cortes-list">
          {(cortes || []).length === 0
            ? <div style={{fontSize:'1.4vmin',color:'var(--muted)',textAlign:'center',padding:'8px'}}>Sin cortes registrados</div>
            : (cortes || []).map((c, i) => (
              <div className="corte-item" key={i}>
                <span className="corte-motivo">{c.motivo}</span>
                <span className="corte-dur">{c.inicio?.slice(11,16)} · {c.dur_min || '—'} min</span>
              </div>
            ))
          }
        </div>
        <div className="card-foot" style={{borderTop:'1px solid var(--border)'}}>
          <div className="foot-today">{`HOY: ${hoy_min||0} MIN · ${totalCorteMin} MIN CORTES`}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OperatorCard, fmt });