// ── Dina 360 · Pantalla Mural ──────────────────────────────

const API_BASE    = 'https://dina-actividades-worker.fl-059.workers.dev';
const REFRESH_SEC = 30;

// ── Helpers ─────────────────────────────────────────────────
function fmtMin(m) {
  if (!m) return '';
  const h = Math.floor(m / 60), min = m % 60;
  return h > 0 ? `${h}h ${min}m` : `${min}m`;
}

const ESTADO = {
  running: { icon: '●', color: 'var(--green-text)',  label: 'TRABAJANDO' },
  idle:    { icon: '●', color: 'var(--muted)',        label: 'EN ESPERA'  },
  corte:   { icon: '◷', color: 'var(--amber-text)',   label: 'CORTE'      },
  done:    { icon: '✓', color: 'var(--blue-light)',   label: 'FIN DÍA'    },
  libre:   { icon: '○', color: 'var(--border)',       label: 'LIBRE'      },
};

// ── Clock card (celda 6 del grid) ───────────────────────────
function ClockCard() {
  const [t, setT] = React.useState(new Date());
  React.useEffect(() => {
    const iv = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(iv);
  }, []);
  const timeStr = t.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit', hour12: false });
  const dayName = t.toLocaleDateString('es-AR', { weekday: 'long' }).toUpperCase();
  const dayNum  = t.getDate();
  const month   = t.toLocaleDateString('es-AR', { month: 'long' }).toUpperCase();
  return (
    <div className="mural-card clock-card">
      <div className="clock-time">{timeStr}</div>
      <div className="clock-day">{dayName} {dayNum}</div>
      <div className="clock-month">{month}</div>
    </div>
  );
}

// ── Group card ───────────────────────────────────────────────
function GroupCard({ grupo }) {
  const { nombre, activo, operadores } = grupo;
  const running = operadores.filter(o => o.estado === 'running').length;
  const activos = operadores.filter(o => o.estado !== 'libre').length;

  return (
    <div className={'mural-card' + (activo ? ' activo' : '')}>
      <div className="mural-card-hdr">
        <span className="mural-grupo-nombre">{nombre}</span>
        {activos > 0 && (
          <span className="mural-grupo-stat"
            style={{ color: activo ? 'var(--green-text)' : 'var(--muted)' }}>
            {running} / {activos}
          </span>
        )}
      </div>
      <div className="mural-ops">
        {operadores.map((op, i) => {
          const ec = ESTADO[op.estado] || ESTADO.libre;
          return (
            <div key={i} className="mural-op-row">
              <span className="mural-op-icon" style={{ color: ec.color }}>{ec.icon}</span>
              <span className="mural-op-name"
                style={{ color: op.nombre ? 'var(--text)' : 'var(--small)' }}>
                {op.nombre || '—'}
              </span>
              <span className="mural-op-estado" style={{ color: ec.color }}>{ec.label}</span>
              {op.hoy_min > 0 && (
                <span className="mural-op-time">{fmtMin(op.hoy_min)}</span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Filtro de grupos desde URL (?grupos=g-01,g-02,g-03) ──────
const _gp = new URLSearchParams(location.search).get('grupos');
const GRUPOS_FILTER = _gp ? _gp.split(',').map(function(s){ return s.trim(); }) : null;

function gridCols(n) {
  if (n <= 1) return 2;
  if (n <= 2) return 3;
  if (n <= 3) return 2;
  return 3;
}

// ── Mural grid con filtro y cols dinámicos ───────────────────
function MuralGrid({ grupos }) {
  var filtered = GRUPOS_FILTER
    ? grupos.filter(function(g){ return GRUPOS_FILTER.indexOf(g.id) >= 0; })
    : grupos;
  var cols = gridCols(filtered.length);
  var rows = Math.ceil((filtered.length + 1) / cols);
  var colStyle = 'repeat(' + cols + ', 1fr)';
  var rowStyle = 'repeat(' + rows + ', 1fr)';
  return (
    <div className="mural-grid" style={{gridTemplateColumns: colStyle, gridTemplateRows: rowStyle}}>
      {filtered.map(function(g){ return <GroupCard key={g.id} grupo={g} />; })}
      <ClockCard />
    </div>
  );
}

// ── Main app ─────────────────────────────────────────────────
function MuralApp() {
  const [data,       setData]       = React.useState(null);
  const [lastUpdate, setLastUpdate] = React.useState(null);
  const [countdown,  setCountdown]  = React.useState(REFRESH_SEC);
  const [fsReady,    setFsReady]    = React.useState(false);
  const [ver,        setVer]        = React.useState('');
  React.useEffect(() => {
    fetch('/version.json').then(r=>r.json()).then(d=>setVer(d.version)).catch(()=>{});
  }, []);

  React.useEffect(() => {
    const onChange = () => setFsReady(!!document.fullscreenElement);
    document.addEventListener('fullscreenchange', onChange);
    return () => document.removeEventListener('fullscreenchange', onChange);
  }, []);

  const enterFS = () => {
    document.documentElement.requestFullscreen().catch(() => {});
  };

  const loadData = React.useCallback(async () => {
    try {
      const r = await fetch(`${API_BASE}/api/mural`);
      const d = await r.json();
      if (d.ok) { setData(d); setLastUpdate(new Date()); }
    } catch (_) { /* mantiene último dato */ }
  }, []);

  React.useEffect(() => { loadData(); }, [loadData]);

  React.useEffect(() => {
    let t = REFRESH_SEC;
    const iv = setInterval(() => {
      t--;
      setCountdown(t);
      if (t <= 0) { t = REFRESH_SEC; setCountdown(REFRESH_SEC); loadData(); }
    }, 1000);
    return () => clearInterval(iv);
  }, [loadData]);

  const fechaLabel = new Date().toLocaleDateString('es-AR', {
    weekday: 'long', day: 'numeric', month: 'long'
  });

  return (
    <div className="mural-app">

      {!fsReady && (
        <div className="fs-overlay" onClick={enterFS}>
          <div className="fs-prompt">Toque para pantalla completa</div>
        </div>
      )}

      <header className="mural-header">
        <div className="mural-hdr-left">
          <img src="../assets/dina-logo-horizontal-white.png" alt="Dinalight" className="mural-logo" />
          <span className="mural-hdr-title">Taller · Producción</span>
        </div>
        <span className="mural-hdr-fecha" style={{display:'none'}}>{fechaLabel}</span>
        <div className="mural-hdr-right">
          {ver && <span style={{fontSize:10,color:'var(--muted)',fontFamily:'var(--font-display)',letterSpacing:'0.06em'}}>v{ver}</span>}
          <span className="mural-refresh-txt">↻ {countdown}s</span>
        </div>
      </header>

      <main className="mural-main">
        {!data ? (
          <div className="mural-loading">Cargando…</div>
        ) : (
          <MuralGrid grupos={data.grupos || []} />
        )}
      </main>

      <footer className="mural-footer">
        <span className="mural-footer-txt">
          {lastUpdate
            ? `Actualizado: ${lastUpdate.toLocaleTimeString('es-AR')}`
            : 'Sin datos'}
        </span>
        <span className="mural-footer-txt">dina-actividades.pages.dev/mural</span>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<MuralApp />);