// ── Dina 360 · Dashboard Admin ─────────────────────────────

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

// ── Helpers ─────────────────────────────────────────────────
function fmtMin(m) {
  if (!m) return '—';
  const h   = Math.floor(m / 60);
  const min = m % 60;
  return h > 0 ? `${h}h ${min}m` : `${min}m`;
}
function todayLabel() {
  return new Date().toLocaleDateString('es-AR', { weekday: 'long', day: 'numeric', month: 'long' });
}
function isoToday() {
  return new Date().toISOString().slice(0, 10);
}

const ESTADO = {
  running: { label: 'Trabajando', bg: 'var(--green-bg)',  color: 'var(--green-text)' },
  idle:    { label: 'En espera',  bg: 'transparent',       color: 'var(--muted)'      },
  corte:   { label: 'Corte',      bg: 'var(--amber-bg)',   color: 'var(--amber-text)' },
  done:    { label: 'Fin día',    bg: 'var(--blue-bg)',    color: 'var(--blue-light)' },
  libre:   { label: 'Libre',      bg: 'transparent',       color: 'var(--border)'     },
};

// ── PinLoginScreen ───────────────────────────────────────────
function PinLoginScreen({ onPin, loading, error }) {
  const [pin, setPin] = React.useState('');

  React.useEffect(() => { if (error) setPin(''); }, [error]);

  const press = (d) => {
    if (loading || pin.length >= 4) return;
    const next = pin + d;
    setPin(next);
    if (next.length === 4) setTimeout(() => onPin(next), 100);
  };
  const del = () => { if (!loading) setPin(p => p.slice(0, -1)); };

  return (
    <div className="login-screen">
      <a href="../" style={{alignSelf:'flex-start',fontSize:13,color:'var(--muted)',textDecoration:'none'}}>← Inicio</a>
      <div className="login-brand">
        <img className="login-logo" src="../assets/dina-logo-horizontal-white.png" alt="Dinalight" />
        <div className="login-title">Dashboard · Admin</div>
      </div>
      <div className="login-prompt">PIN de administrador</div>
      <div className="pin-dots">
        {[0,1,2,3].map(i => (
          <span key={i} className={'pin-dot' + (pin.length > i ? ' on' : '')} />
        ))}
      </div>
      <div className="pin-grid">
        {[1,2,3,4,5,6,7,8,9].map(n => (
          <button key={n} className="pin-key" onClick={() => press(String(n))} disabled={loading}>{n}</button>
        ))}
        <button className="pin-key pin-key-del"   onClick={del}            disabled={loading}>⌫</button>
        <button className="pin-key"               onClick={() => press('0')} disabled={loading}>0</button>
        <button className="pin-key pin-key-clear" onClick={() => setPin('')} disabled={loading}>×</button>
      </div>
      {loading && <div style={{color:'var(--muted)',fontSize:13,marginTop:8}}>Verificando…</div>}
      <div className="pin-err">{error || ''}</div>
    </div>
  );
}

// ── ConfirmModal ─────────────────────────────────────────────
function ConfirmModal({ msg, subMsg, onOk, onCancel, danger }) {
  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal-box" onClick={e => e.stopPropagation()}>
        <div className="modal-msg">{msg}</div>
        {subMsg && <div className="modal-sub">{subMsg}</div>}
        <div className="modal-btns">
          <button className="mbtn mbtn-cancel" onClick={onCancel}>Cancelar</button>
          <button className={'mbtn ' + (danger !== false ? 'mbtn-danger' : 'mbtn-ok')} onClick={onOk}>Confirmar</button>
        </div>
      </div>
    </div>
  );
}

// ── GroupLiveCard ────────────────────────────────────────────
function GroupLiveCard({ grupo }) {
  const { nombre, turno, operadores } = grupo;

  const count = (e) => operadores.filter(o => o.estado === e).length;
  const running = count('running');
  const corte   = count('corte');
  const done    = count('done');
  const activos = operadores.filter(o => o.estado !== 'libre').length;

  let turnoLabel = 'Sin turno';
  let turnoColor = 'var(--muted)';
  if (turno) {
    if (turno.estado === 'confirmado') { turnoLabel = 'Cerrado';  turnoColor = 'var(--blue-light)'; }
    else if (activos > 0)              { turnoLabel = 'Activo';   turnoColor = 'var(--green-text)'; }
    else                               { turnoLabel = 'Iniciado'; turnoColor = 'var(--amber-text)'; }
  }

  return (
    <div className="live-card">
      <div className="live-card-hdr">
        <span className="live-grupo-nombre">{nombre}</span>
        <span className="live-badge" style={{ color: turnoColor }}>{turnoLabel}</span>
      </div>
      <div className="live-ops">
        {operadores.map((op, i) => {
          const ec = ESTADO[op.estado] || ESTADO.libre;
          return (
            <div key={i} className="live-op-row" style={{ background: ec.bg }}>
              <span className="live-slot-num">{i + 1}</span>
              <span className="live-op-name" style={{ color: op.nombre ? 'var(--text)' : 'var(--small)' }}>
                {op.nombre || 'Libre'}
              </span>
              <span className="live-op-estado" style={{ color: ec.color }}>{ec.label}</span>
              {op.hoy_min > 0 && <span className="live-op-min">{fmtMin(op.hoy_min)}</span>}
            </div>
          );
        })}
      </div>
      {activos > 0 && (
        <div className="live-card-foot">
          {running > 0 && <span style={{color:'var(--green-text)'}}>✦ {running} trabaj.</span>}
          {corte   > 0 && <span style={{color:'var(--amber-text)'}}>◷ {corte} corte</span>}
          {done    > 0 && <span style={{color:'var(--blue-light)'}}>✓ {done} fin día</span>}
        </div>
      )}
    </div>
  );
}

// ── LiveTab ──────────────────────────────────────────────────
function LiveTab({ adminPin }) {
  const [data,      setData]      = React.useState(null);
  const [busy,      setBusy]      = React.useState(false);
  const [countdown, setCountdown] = React.useState(15);

  const loadLive = React.useCallback(async () => {
    setBusy(true);
    try {
      const r = await fetch(`${API_BASE}/api/admin/live`, { headers: { 'X-Admin-Pin': adminPin } });
      const d = await r.json();
      if (d.ok) setData(d);
    } catch (_) {}
    setBusy(false);
  }, [adminPin]);

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

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

  return (
    <div className="tab-pane">
      <div className="tab-toolbar">
        <span className="toolbar-ttl">Vista en tiempo real</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="countdown-txt">↻ {countdown}s</span>
          <button className="tbtn" onClick={() => { loadLive(); setCountdown(15); }}>
            {busy ? '…' : 'Actualizar'}
          </button>
        </div>
      </div>
      {!data ? (
        <p className="loading-txt">Cargando…</p>
      ) : (
        <div className="live-grid">
          {(data.grupos || []).map(g => <GroupLiveCard key={g.id} grupo={g} />)}
        </div>
      )}
    </div>
  );
}

// ── TurnosTab ────────────────────────────────────────────────
function TurnosTab({ adminPin, showToast, isViewer }) {
  const [turnos,  setTurnos]  = React.useState(null);
  const [confirm, setConfirm] = React.useState(null);
  const [busy,    setBusy]    = React.useState({});

  const loadTurnos = React.useCallback(async () => {
    try {
      const r = await fetch(`${API_BASE}/api/admin/turnos?fecha=${isoToday()}`, {
        headers: { 'X-Admin-Pin': adminPin }
      });
      const d = await r.json();
      if (d.ok) setTurnos(d.turnos || []);
    } catch (_) {}
  }, [adminPin]);

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

  const doResetDia = async (grupoId) => {
    setBusy(b => ({ ...b, [grupoId]: true }));
    try {
      await fetch(`${API_BASE}/api/admin/grupos/${grupoId}/reset-dia`, {
        method: 'POST', headers: { 'X-Admin-Pin': adminPin }
      });
      showToast('Día reseteado');
      loadTurnos();
    } catch (_) { showToast('Error al resetear'); }
    setBusy(b => ({ ...b, [grupoId]: false }));
  };

  const doForzarCierre = async (turnoId) => {
    setBusy(b => ({ ...b, [turnoId]: true }));
    try {
      await fetch(`${API_BASE}/api/admin/turnos/${turnoId}/forzar-cierre`, {
        method: 'POST', headers: { 'X-Admin-Pin': adminPin }
      });
      showToast('Turno cerrado');
      loadTurnos();
    } catch (_) { showToast('Error al cerrar'); }
    setBusy(b => ({ ...b, [turnoId]: false }));
  };

  const doResetTodos = async () => {
    try {
      await fetch(`${API_BASE}/api/admin/reset-dia-todos`, {
        method: 'POST', headers: { 'X-Admin-Pin': adminPin }
      });
      showToast('Todos los grupos reseteados');
      loadTurnos();
    } catch (_) { showToast('Error'); }
  };

  const confirmar = (msg, subMsg, onConfirm, danger = true) => {
    setConfirm({ msg, subMsg, onConfirm, danger });
  };

  const estadoBadge = (estado) => {
    if (estado === 'confirmado') return { label: 'Confirmado', color: 'var(--blue-light)' };
    if (estado === 'cancelado')  return { label: 'Cancelado',  color: 'var(--muted)'      };
    return { label: 'Activo', color: 'var(--amber-text)' };
  };

  return (
    <div className="tab-pane">
      {confirm && (
        <ConfirmModal
          msg={confirm.msg}
          subMsg={confirm.subMsg}
          danger={confirm.danger}
          onOk={() => { confirm.onConfirm(); setConfirm(null); }}
          onCancel={() => setConfirm(null)}
        />
      )}
      <div className="tab-toolbar">
        <span className="toolbar-ttl">
          Turnos de hoy · {new Date().toLocaleDateString('es-AR', { day: 'numeric', month: 'long' })}
        </span>
        {!isViewer && (
          <button
            className="tbtn tbtn-danger"
            onClick={() => confirmar(
              'Reset todos los grupos',
              'Borra los slots asignados y los contadores de sesión de todos los grupos. Los registros de producción se conservan.',
              doResetTodos
            )}>
            Reset todos
          </button>
        )}
      </div>
      {!turnos ? (
        <p className="loading-txt">Cargando…</p>
      ) : turnos.length === 0 ? (
        <p className="empty-txt">No hay turnos registrados hoy.</p>
      ) : (
        <div className="turnos-list">
          {turnos.map(t => {
            const eb = estadoBadge(t.estado);
            return (
              <div key={t.id} className="turno-card">
                <div className="turno-info">
                  <div className="turno-nombre">{t.grupo_nombre}</div>
                  <div className="turno-meta">
                    {t.horario ? `Turno ${t.horario}` : '—'} · {t.personas_presentes || 0} presentes · {t.personas_ausentes || 0} ausentes
                  </div>
                  <span className="turno-estado-badge" style={{ color: eb.color }}>{eb.label}</span>
                </div>
                {!isViewer && (
                <div className="turno-actions">
                  <button
                    className="tbtn"
                    disabled={!!busy[t.grupo_id]}
                    onClick={() => confirmar(
                      `Reset día — ${t.grupo_nombre}`,
                      'Borra los slots asignados y los contadores de sesión. Los registros de producción se conservan.',
                      () => doResetDia(t.grupo_id)
                    )}>
                    {busy[t.grupo_id] ? '…' : 'Reset día'}
                  </button>
                  {t.estado !== 'confirmado' && (
                    <button
                      className="tbtn tbtn-ok"
                      disabled={!!busy[t.id]}
                      onClick={() => confirmar(
                        `Forzar cierre — ${t.grupo_nombre}`,
                        'El turno quedará marcado como confirmado con los registros actuales. No se pierden datos.',
                        () => doForzarCierre(t.id),
                        false
                      )}>
                      {busy[t.id] ? '…' : 'Forzar cierre'}
                    </button>
                  )}
                </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ── HistorialTab ─────────────────────────────────────────────
function HistorialTab({ adminPin }) {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch(`${API_BASE}/api/dashboard?dias=7`, { headers: { 'X-Admin-Pin': adminPin } })
      .then(r => r.json())
      .then(d => { if (d.ok) setData(d); })
      .catch(() => {});
  }, [adminPin]);

  if (!data) return <div className="tab-pane"><p className="loading-txt">Cargando…</p></div>;

  const prod     = data.produccion       || [];
  const alertas  = data.alertas          || [];
  const sesiones = data.sesiones_activas || [];

  return (
    <div className="tab-pane">
      <div className="tab-toolbar">
        <span className="toolbar-ttl">Últimos 7 días</span>
      </div>

      {sesiones.length > 0 && (
        <div className="hist-section">
          <div className="hist-section-title">Estado actual de operarios</div>
          <div className="sesiones-grid">
            {sesiones.map((s, i) => {
              const ec = ESTADO[s.estado] || ESTADO.idle;
              return (
                <div key={i} className="sesion-chip" style={{ borderColor: ec.color }}>
                  <span className="sc-nombre">{s.nombre}</span>
                  <span className="sc-grupo">{s.grupo}</span>
                  <span className="sc-estado" style={{ color: ec.color }}>{ec.label}</span>
                  {s.hoy_min > 0 && <span className="sc-min">{fmtMin(s.hoy_min)}</span>}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {alertas.length > 0 && (
        <div className="hist-section">
          <div className="hist-section-title" style={{ color: 'var(--amber-text)' }}>Alertas</div>
          {alertas.map((a, i) => (
            <div key={i} className="alert-row">
              <span className="alert-grupo">{a.grupo}</span>
              <span style={{ color: 'var(--muted)' }}>{a.fecha}</span>
              <span style={{ color: 'var(--amber-text)' }}>{a.registros_dia} registros</span>
            </div>
          ))}
        </div>
      )}

      <div className="hist-section">
        <div className="hist-section-title">Producción confirmada</div>
        {prod.length === 0 ? (
          <p className="empty-txt">Sin datos confirmados en los últimos 7 días.</p>
        ) : (
          <div className="hist-table">
            <div className="hist-thead">
              <span>Fecha</span><span>Grupo</span><span>Min prod.</span><span>Registros</span><span>Presentes</span>
            </div>
            {prod.map((p, i) => (
              <div key={i} className="hist-row">
                <span className="hist-mono">{p.fecha}</span>
                <span>{p.grupo}</span>
                <span className="hist-mono">{fmtMin(p.total_min)}</span>
                <span className="hist-mono">{p.total_registros || 0}</span>
                <span>{p.personas_presentes || '—'}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ── DashboardApp ─────────────────────────────────────────────
function DashboardApp() {
  const [adminPin,   setAdminPin]   = React.useState(null);
  const [role,       setRole]       = React.useState(null); // 'admin' | 'viewer'
  const [pinError,   setPinError]   = React.useState('');
  const [pinLoading, setPinLoading] = React.useState(false);
  const [tab,        setTab]        = React.useState('live');
  const [toastMsg,   setToastMsg]   = React.useState('');
  const [ver,        setVer]        = React.useState('');
  const toastTimer = React.useRef(null);
  React.useEffect(() => {
    fetch('/version.json').then(r=>r.json()).then(d=>setVer(d.version)).catch(()=>{});
  }, []);
  const isViewer = role === 'viewer';

  const showToast = (msg) => {
    setToastMsg(msg);
    if (toastTimer.current) clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToastMsg(''), 2500);
  };

  const handlePin = async (pin) => {
    setPinLoading(true);
    setPinError('');
    try {
      const r = await fetch(`${API_BASE}/api/admin/auth`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pin }),
      });
      const d = await r.json();
      if (!r.ok || !d.ok) {
        setPinError('PIN incorrecto');
      } else {
        setAdminPin(pin);
        setRole(d.role);
      }
    } catch (_) {
      setPinError('Sin conexión');
    }
    setPinLoading(false);
  };

  if (!adminPin) {
    return (
      <div className="app">
        <PinLoginScreen onPin={handlePin} loading={pinLoading} error={pinError} />
      </div>
    );
  }

  const TABS_ALL    = [
    { id: 'live',      label: 'En vivo'   },
    { id: 'turnos',    label: 'Turnos'    },
    { id: 'historial', label: 'Historial' },
    { id: 'equipo',    label: 'Equipo',   adminOnly: true },
    { id: 'exportar',  label: 'Exportar', adminOnly: true },
    { id: 'ajustes',   label: 'Ajustes',  adminOnly: true },
  ];
  const TABS = TABS_ALL.filter(t => !t.adminOnly || !isViewer);

  return (
    <div className="app">
      <header className="dash-header">
        <div className="dash-hdr-left">
          <img src="../assets/dina-logo-horizontal-white.png" alt="Dinalight" className="dash-logo" />
          <span className="dash-hdr-title">Admin</span>
        </div>
        <div className="dash-hdr-right">
          <span className="dash-hdr-fecha">{todayLabel()}</span>
          {isViewer && <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:20,background:'var(--amber-bg)',color:'var(--amber-text)',border:'1px solid rgba(245,158,11,0.3)',fontFamily:'var(--font-display)',textTransform:'uppercase',letterSpacing:'0.06em'}}>Solo lectura</span>}
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:2}}>
            {ver && <span style={{fontSize:9,color:'var(--muted)',fontFamily:'var(--font-display)',letterSpacing:'0.06em'}}>v{ver}</span>}
            <a href="../" className="tbtn tbtn-sm" style={{textDecoration:'none'}}>← Inicio</a>
          </div>
          <button className="tbtn tbtn-sm" onClick={() => { setAdminPin(null); setRole(null); }}>Salir</button>
        </div>
      </header>

      <nav className="dash-tabnav">
        {TABS.map(t => (
          <button
            key={t.id}
            className={'dash-tab' + (tab === t.id ? ' active' : '')}
            onClick={() => setTab(t.id)}>
            {t.label}
          </button>
        ))}
      </nav>

      <main className="dash-main">
        {tab === 'live'      && <LiveTab      adminPin={adminPin} />}
        {tab === 'turnos'    && <TurnosTab    adminPin={adminPin} showToast={showToast} isViewer={isViewer} />}
        {tab === 'historial' && <HistorialTab adminPin={adminPin} />}
        {tab === 'equipo'    && <EquipoTab    adminPin={adminPin} />}
        {tab === 'exportar'  && <ExportarTab  adminPin={adminPin} showToast={showToast} />}
        {tab === 'ajustes'   && <AjustesTab   adminPin={adminPin} />}
      </main>

      <div className={'toast' + (toastMsg ? ' show' : '')}>{toastMsg}</div>
    </div>
  );
}

// ── EquipoTab ────────────────────────────────────────────────
function EquipoTab({ adminPin }) {
  const [integrantes,    setIntegrantes]    = React.useState([]);
  const [grupos,         setGrupos]         = React.useState([]);
  const [historial,      setHistorial]      = React.useState(null);
  const [saving,         setSaving]         = React.useState(false);
  const [msg,            setMsg]            = React.useState({ text:'', ok:true });
  const [altaOpen,       setAltaOpen]       = React.useState(false);
  const [altaNombre,     setAltaNombre]     = React.useState('');
  const [agregandoGrupo, setAgregandoGrupo] = React.useState(null);
  const [agregandoId,    setAgregandoId]    = React.useState('');
  const [agregandoRol,   setAgregandoRol]   = React.useState('operario');
  const [cambioJefeId,   setCambioJefeId]   = React.useState('');

  const showMsg = (text, ok=true) => { setMsg({text,ok}); setTimeout(()=>setMsg({text:'',ok:true}),3500); };

  const load = () => {
    fetch(`${API_BASE}/api/admin/integrantes`, { headers:{'X-Admin-Pin':adminPin} })
      .then(r=>r.json()).then(d=>{ if(d.ok) setIntegrantes(d.integrantes); });
    fetch(`${API_BASE}/api/grupos`).then(r=>r.json()).then(d=>{ if(d.ok) setGrupos(d.grupos); });
  };
  React.useEffect(load, []);

  const putIntegrante = (id, data) =>
    fetch(`${API_BASE}/api/admin/integrantes/${id}`, {
      method:'PUT', headers:{'Content-Type':'application/json','X-Admin-Pin':adminPin},
      body: JSON.stringify(data),
    }).then(r=>r.json());

  const saveAlta = async () => {
    if(!altaNombre.trim()){ showMsg('Ingresá el nombre',false); return; }
    setSaving(true);
    const r = await fetch(`${API_BASE}/api/admin/integrantes`, {
      method:'POST', headers:{'Content-Type':'application/json','X-Admin-Pin':adminPin},
      body: JSON.stringify({ nombre: altaNombre.trim() }),
    });
    const d = await r.json();
    setSaving(false);
    if(d.ok){ setAltaOpen(false); setAltaNombre(''); load(); showMsg('Operador agregado a la bolsa ✓'); }
    else showMsg(d.error||'Error', false);
  };

  const moverAGrupo = async (integrante, grupoId, rol) => {
    setSaving(true);
    const d = await putIntegrante(integrante.id, { nombre: integrante.nombre, grupo_id: grupoId, rol });
    setSaving(false);
    if(d.ok){ setAgregandoGrupo(null); setAgregandoId(''); load(); showMsg('Operador asignado ✓'); }
    else showMsg(d.error||'Error', false);
  };

  const moverABolsa = async (integrante) => {
    setSaving(true);
    const d = await putIntegrante(integrante.id, { nombre: integrante.nombre, grupo_id: 'g-00', rol: 'operario' });
    setSaving(false);
    if(d.ok){ load(); showMsg('Operador devuelto a la bolsa ✓'); }
    else showMsg(d.error||'Error', false);
  };

  const cambiarJefe = async () => {
    if(!cambioJefeId){ showMsg('Seleccioná un operador',false); return; }
    setSaving(true);
    const currentJefe = integrantes.find(i => i.rol === 'jefe_ensamble');
    if(currentJefe && currentJefe.id !== cambioJefeId)
      await putIntegrante(currentJefe.id, { nombre: currentJefe.nombre, rol: 'operario' });
    const newJefe = integrantes.find(i => i.id === cambioJefeId);
    if(newJefe) await putIntegrante(newJefe.id, { nombre: newJefe.nombre, rol: 'jefe_ensamble' });
    setSaving(false);
    setCambioJefeId('');
    load();
    showMsg('Jefe de Ensamble actualizado ✓');
  };

  const toggleActivo = async (i) => {
    await fetch(`${API_BASE}/api/admin/integrantes/${i.id}/estado`, {
      method:'POST', headers:{'Content-Type':'application/json','X-Admin-Pin':adminPin},
      body: JSON.stringify({ activo: i.activo ? 0 : 1 }),
    });
    load(); showMsg(i.activo ? 'Operador desactivado' : 'Operador reactivado');
  };

  const loadHistorial = async (i) => {
    const r = await fetch(`${API_BASE}/api/admin/integrantes/${i.id}/historial`, { headers:{'X-Admin-Pin':adminPin} });
    const d = await r.json();
    if(d.ok) setHistorial(d);
  };

  // Datos derivados
  const jefeEnsamble = integrantes.find(i => i.rol === 'jefe_ensamble');
  const bolsa        = integrantes.filter(i => i.grupo_id === 'g-00' && i.rol !== 'jefe_ensamble');
  const bolsaActiva  = bolsa.filter(i => i.activo);
  const porGrupo     = grupos.map(g => ({
    ...g,
    activos:   integrantes.filter(i => i.grupo_id === g.id && i.activo),
    inactivos: integrantes.filter(i => i.grupo_id === g.id && !i.activo),
  }));

  const inp = { padding:'6px 10px', borderRadius:6, border:'1px solid var(--border)', background:'var(--s2)', color:'var(--text)', fontFamily:'var(--font-ui)', fontSize:13, width:'100%' };
  const sel = { ...inp, cursor:'pointer' };
  const btn = (extra={}) => ({ padding:'4px 10px', borderRadius:6, border:'1px solid var(--border)', background:'var(--s2)', color:'var(--soft)', fontSize:11, cursor:'pointer', fontFamily:'var(--font-ui)', ...extra });
  const SLabel = ({children}) => (
    <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:10,textTransform:'uppercase',letterSpacing:'0.12em',color:'var(--muted)',marginBottom:8}}>{children}</div>
  );

  return (
    <div style={{maxWidth:640,margin:'0 auto',padding:'24px 16px'}}>
      {msg.text && (
        <div style={{padding:'10px 14px',borderRadius:8,marginBottom:16,fontSize:13,
          background:msg.ok?'var(--green-bg)':'rgba(212,43,43,0.15)',
          color:msg.ok?'var(--green-text)':'var(--dina-red)'}}>{msg.text}</div>
      )}

      {/* ── JEFE DE ENSAMBLE ── */}
      <div style={{marginBottom:20,padding:'14px 16px',background:'var(--s1)',border:'var(--hairline)',borderRadius:10}}>
        <SLabel>Jefe de Ensamble</SLabel>
        <div style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>
          <span style={{fontWeight:700,fontSize:14,color:'var(--text)',flex:1,minWidth:120}}>
            {jefeEnsamble ? jefeEnsamble.nombre : '— Sin asignar —'}
          </span>
          <select style={{...sel,width:'auto',minWidth:160}} value={cambioJefeId} onChange={e=>setCambioJefeId(e.target.value)}>
            <option value="">Cambiar a…</option>
            {integrantes.filter(i=>i.activo&&i.rol!=='jefe_ensamble').map(i=>(
              <option key={i.id} value={i.id}>{i.nombre}</option>
            ))}
          </select>
          <button onClick={cambiarJefe} disabled={saving||!cambioJefeId}
            style={btn({background:'var(--dina-red)',border:'none',color:'#fff',fontWeight:600,fontSize:12,padding:'5px 14px',opacity:cambioJefeId?1:0.4})}>
            {saving?'…':'Confirmar'}
          </button>
        </div>
      </div>

      {/* ── GRUPOS 01–05 ── */}
      {porGrupo.map(g => {
        const expandiendo = agregandoGrupo === g.id;
        return (
          <div key={g.id} style={{marginBottom:14}}>
            <SLabel>{g.nombre}</SLabel>
            <div style={{background:'var(--s1)',border:'var(--hairline)',borderRadius:10,overflow:'hidden'}}>
              {g.activos.length === 0 && g.inactivos.length === 0 && (
                <div style={{padding:'10px 14px',fontSize:12,color:'var(--muted)'}}>Sin integrantes</div>
              )}
              {g.activos.map(i => (
                <div key={i.id} style={{padding:'9px 14px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:8}}>
                  <span style={{flex:1,fontSize:13,fontWeight:600}}>{i.nombre}</span>
                  <span style={{fontSize:11,color:'var(--muted)'}}>{i.rol==='jefe'?'★ Jefe':'Operador'}</span>
                  <button onClick={()=>loadHistorial(i)} style={btn()}>Historial</button>
                  <button onClick={()=>moverABolsa(i)} disabled={saving} style={btn({color:'var(--amber-text)'})}>A bolsa</button>
                </div>
              ))}
              {g.inactivos.map(i => (
                <div key={i.id} style={{padding:'9px 14px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:8,opacity:0.5}}>
                  <span style={{flex:1,fontSize:13,fontWeight:600,color:'var(--muted)'}}>{i.nombre}</span>
                  <span style={{fontSize:11,color:'var(--muted)'}}>Inactivo</span>
                  <button onClick={()=>loadHistorial(i)} style={btn()}>Historial</button>
                  <button onClick={()=>toggleActivo(i)} style={btn({color:'var(--green-text)'})}>Reactivar</button>
                </div>
              ))}
              {!expandiendo ? (
                <div style={{padding:'8px 14px',background:'var(--s2)',display:'flex',gap:8}}>
                  <button onClick={()=>{ setAgregandoGrupo(g.id); setAgregandoId(''); setAgregandoRol('operario'); }}
                    style={btn({fontSize:12})} disabled={bolsaActiva.length===0}>
                    + Agregar de bolsa
                  </button>
                </div>
              ) : (
                <div style={{padding:'10px 14px',background:'var(--s2)',display:'flex',gap:8,alignItems:'center',flexWrap:'wrap'}}>
                  <select style={{...sel,flex:1,minWidth:140}} value={agregandoId} onChange={e=>setAgregandoId(e.target.value)}>
                    <option value="">— Operador —</option>
                    {bolsaActiva.map(i=><option key={i.id} value={i.id}>{i.nombre}</option>)}
                  </select>
                  <select style={{...sel,width:110}} value={agregandoRol} onChange={e=>setAgregandoRol(e.target.value)}>
                    <option value="operario">Operador</option>
                    <option value="jefe">Jefe</option>
                  </select>
                  <button
                    onClick={()=>{ const i=integrantes.find(x=>x.id===agregandoId); if(i) moverAGrupo(i,g.id,agregandoRol); }}
                    disabled={saving||!agregandoId}
                    style={btn({background:'var(--dina-red)',border:'none',color:'#fff',fontWeight:600,opacity:agregandoId?1:0.4})}>
                    {saving?'…':'Asignar'}
                  </button>
                  <button onClick={()=>setAgregandoGrupo(null)} style={btn()}>Cancelar</button>
                </div>
              )}
            </div>
          </div>
        );
      })}

      {/* ── BOLSA ── */}
      <div style={{marginTop:24,marginBottom:20}}>
        <SLabel>Bolsa de Operadores</SLabel>
        <div style={{background:'var(--s1)',border:'var(--hairline)',borderRadius:10,overflow:'hidden'}}>
          {bolsa.length === 0 && (
            <div style={{padding:'10px 14px',fontSize:12,color:'var(--muted)'}}>Bolsa vacía</div>
          )}
          {bolsa.map(i => (
            <div key={i.id} style={{padding:'9px 14px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:8,flexWrap:'wrap',opacity:i.activo?1:0.5}}>
              <span style={{flex:1,fontSize:13,fontWeight:600,color:i.activo?'var(--text)':'var(--muted)'}}>{i.nombre}</span>
              {!i.activo && <span style={{fontSize:11,color:'var(--amber-text)'}}>Inactivo</span>}
              {i.activo && (
                <select style={{...sel,width:'auto',minWidth:130}}
                  defaultValue=""
                  onChange={e=>{ if(e.target.value){ moverAGrupo(i,e.target.value,'operario'); e.target.value=''; } }}>
                  <option value="">Mover a grupo…</option>
                  {grupos.map(g=><option key={g.id} value={g.id}>{g.nombre}</option>)}
                </select>
              )}
              <button onClick={()=>loadHistorial(i)} style={btn()}>Historial</button>
              <button onClick={()=>toggleActivo(i)} style={btn({color:i.activo?'var(--dina-red)':'var(--green-text)'})}>{i.activo?'Desactivar':'Reactivar'}</button>
            </div>
          ))}
        </div>
      </div>

      {/* ── NUEVO OPERADOR ── */}
      <div style={{marginBottom:16}}>
        {!altaOpen ? (
          <button onClick={()=>setAltaOpen(true)}
            style={{padding:'8px 18px',borderRadius:8,background:'var(--dina-red)',border:'none',color:'#fff',fontSize:13,fontWeight:600,cursor:'pointer',fontFamily:'var(--font-ui)'}}>
            + Nuevo operador
          </button>
        ) : (
          <div style={{padding:'14px 16px',background:'var(--s1)',border:'var(--hairline)',borderRadius:10,display:'flex',flexDirection:'column',gap:10}}>
            <SLabel>Nuevo operador → bolsa</SLabel>
            <input style={inp} placeholder="Nombre y apellido" value={altaNombre}
              onChange={e=>setAltaNombre(e.target.value)}
              onKeyDown={e=>e.key==='Enter'&&saveAlta()}
              autoFocus />
            <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
              <button onClick={()=>{setAltaOpen(false);setAltaNombre('');}} style={btn({padding:'6px 14px'})}>Cancelar</button>
              <button onClick={saveAlta} disabled={saving}
                style={btn({padding:'6px 14px',background:'var(--dina-red)',border:'none',color:'#fff',fontWeight:600})}>
                {saving?'…':'Agregar'}
              </button>
            </div>
          </div>
        )}
      </div>

      {/* ── HISTORIAL MODAL ── */}
      {historial && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',display:'flex',alignItems:'center',justifyContent:'center',zIndex:100,padding:16}} onClick={()=>setHistorial(null)}>
          <div style={{background:'var(--s1)',border:'1px solid var(--border)',borderRadius:14,width:'100%',maxWidth:480,maxHeight:'80vh',overflowY:'auto',padding:24}} onClick={e=>e.stopPropagation()}>
            <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:16,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:4}}>{historial.integrante?.nombre}</div>
            <div style={{fontSize:11,color:'var(--muted)',marginBottom:16}}>{historial.historial.length} registros</div>
            {historial.historial.length === 0
              ? <div style={{color:'var(--muted)',fontSize:13}}>Sin registros de actividad</div>
              : historial.historial.map((r,idx) => (
                <div key={idx} style={{padding:'8px 0',borderBottom:'1px solid var(--border)',fontSize:12,display:'flex',gap:12}}>
                  <span style={{color:'var(--muted)',minWidth:80}}>{r.fecha}</span>
                  <span style={{color:'var(--text)'}}>{r.partida || '—'}</span>
                  <span style={{color:'var(--muted)'}}>{r.dur_min ? `${r.dur_min}m` : ''}</span>
                </div>
              ))
            }
            <div style={{marginTop:16,textAlign:'right'}}>
              <button onClick={()=>setHistorial(null)} style={btn({padding:'7px 16px'})}>Cerrar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── ExportarTab ──────────────────────────────────────────────
function ExportarTab({ adminPin, showToast }) {
  const hoy   = new Date().toISOString().slice(0, 10);
  const hace7 = new Date(Date.now() - 6 * 86400000).toISOString().slice(0, 10);

  const [desde,   setDesde]   = React.useState(hace7);
  const [hasta,   setHasta]   = React.useState(hoy);
  const [loading, setLoading] = React.useState(false);
  const [result,  setResult]  = React.useState(null);

  const inputStyle = { padding:'8px 12px', borderRadius:6, border:'1px solid var(--border)', background:'var(--s2)', color:'var(--text)', fontFamily:'var(--font-ui)', fontSize:14 };

  const handleSync = async () => {
    if (!desde || !hasta) { showToast('Elegí rango de fechas'); return; }
    if (desde > hasta)    { showToast('La fecha inicio no puede ser mayor que fin'); return; }
    setLoading(true); setResult(null);
    try {
      const r = await fetch(`${API_BASE}/api/admin/sync-sheets`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Admin-Pin': adminPin },
        body: JSON.stringify({ desde, hasta }),
      });
      const d = await r.json();
      if (d.ok) {
        setResult(d);
        showToast('Sincronizado con Google Sheets ✓');
      } else {
        showToast(d.error || 'Error al sincronizar');
      }
    } catch (_) {
      showToast('Error de conexión');
    }
    setLoading(false);
  };

  return (
    <div style={{maxWidth:480,margin:'0 auto',padding:'24px 16px'}}>
      <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:11,letterSpacing:'0.1em',color:'var(--muted)',textTransform:'uppercase',marginBottom:20}}>Exportar a Google Sheets</div>

      <div style={{background:'var(--s1)',borderRadius:10,border:'var(--hairline)',padding:'20px',display:'flex',flexDirection:'column',gap:16}}>

        <div style={{display:'flex',gap:12,alignItems:'flex-end'}}>
          <div style={{flex:1,display:'flex',flexDirection:'column',gap:6}}>
            <label style={{fontSize:11,fontWeight:700,textTransform:'uppercase',letterSpacing:'0.08em',color:'var(--muted)'}}>Desde</label>
            <input type="date" style={inputStyle} value={desde} onChange={e=>setDesde(e.target.value)} />
          </div>
          <div style={{flex:1,display:'flex',flexDirection:'column',gap:6}}>
            <label style={{fontSize:11,fontWeight:700,textTransform:'uppercase',letterSpacing:'0.08em',color:'var(--muted)'}}>Hasta</label>
            <input type="date" style={inputStyle} value={hasta} onChange={e=>setHasta(e.target.value)} />
          </div>
        </div>

        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          {[
            { label:'Hoy',        d: hoy,  h: hoy },
            { label:'Últimos 7',  d: hace7, h: hoy },
            { label:'Este mes',   d: hoy.slice(0,8)+'01', h: hoy },
          ].map(p => (
            <button key={p.label} onClick={()=>{setDesde(p.d);setHasta(p.h);}} style={{padding:'5px 12px',borderRadius:6,border:'1px solid var(--border)',background:'var(--s2)',color:'var(--soft)',fontSize:11,cursor:'pointer'}}>
              {p.label}
            </button>
          ))}
        </div>

        <button onClick={handleSync} disabled={loading} style={{padding:'11px',borderRadius:8,background: loading ? 'var(--s3)' : 'var(--dina-red)',border:'none',color:'#fff',fontFamily:'var(--font-display)',fontSize:14,fontWeight:700,textTransform:'uppercase',letterSpacing:'0.06em',cursor:loading?'not-allowed':'pointer'}}>
          {loading ? 'Sincronizando…' : '↑ Sincronizar con Google Sheets'}
        </button>

        {result && (
          <div style={{padding:'14px',background:'rgba(34,197,94,0.08)',borderRadius:8,border:'1px solid rgba(34,197,94,0.2)',fontSize:13,lineHeight:1.8}}>
            <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:12,textTransform:'uppercase',letterSpacing:'0.06em',color:'var(--green-text)',marginBottom:6}}>Sincronizado ✓</div>
            <div style={{color:'var(--soft)'}}>Período: {result.desde} → {result.hasta}</div>
            <div style={{color:'var(--soft)'}}>Registros de tiempo: <b style={{color:'var(--text)'}}>{result.registros}</b></div>
            <div style={{color:'var(--soft)'}}>Actividades (wizard): <b style={{color:'var(--text)'}}>{result.actividades}</b></div>
            <div style={{color:'var(--soft)'}}>Asistencia: <b style={{color:'var(--text)'}}>{result.asistencia}</b></div>
            <div style={{color:'var(--soft)'}}>Cortes: <b style={{color:'var(--text)'}}>{result.cortes}</b></div>
            {!result.sheets_ok && <div style={{color:'var(--amber-text)',marginTop:6}}>⚠ Sheets devolvió error — verificá el script de Apps Script.</div>}
          </div>
        )}
      </div>

      <div style={{marginTop:16,fontSize:12,color:'var(--muted)',lineHeight:1.6}}>
        Los datos se escriben en la planilla <b style={{color:'var(--soft)'}}>Actividades Realizadas — Producción</b>.<br/>
        Tabs: <b>Registros</b>, <b>Asistencia</b>, <b>Cortes</b>. El rango sincronizado reemplaza los datos existentes para esas fechas.
      </div>
    </div>
  );
}

// ── AjustesTab ───────────────────────────────────────────────
function AjustesTab({ adminPin }) {
  const [pins,    setPins]    = React.useState(null);
  const [editing, setEditing] = React.useState({}); // { key: value }
  const [saving,  setSaving]  = React.useState(null);
  const [msg,     setMsg]     = React.useState({ text: '', ok: true });

  React.useEffect(() => {
    fetch(`${API_BASE}/api/admin/pins`, { headers: { 'X-Admin-Pin': adminPin } })
      .then(r => r.json())
      .then(d => { if (d.ok) setPins(d); });
  }, []);

  const showMsg = (text, ok = true) => {
    setMsg({ text, ok });
    setTimeout(() => setMsg({ text: '', ok: true }), 3000);
  };

  const handleChange = (key, val) => {
    if (val.length <= 4 && /^\d*$/.test(val)) {
      setEditing(prev => ({ ...prev, [key]: val }));
    }
  };

  const handleSave = async (tipo, grupo_id, key) => {
    const pin = (editing[key] || '').trim();
    if (!/^\d{4}$/.test(pin)) { showMsg('PIN debe ser 4 dígitos', false); return; }
    setSaving(key);
    const body = tipo === 'grupo' ? { tipo, grupo_id, pin } : { tipo, pin };
    const r = await fetch(`${API_BASE}/api/admin/pins`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-Admin-Pin': adminPin },
      body: JSON.stringify(body),
    });
    const d = await r.json();
    setSaving(null);
    if (d.ok) {
      setPins(prev => {
        if (tipo === 'grupo') return { ...prev, grupos: prev.grupos.map(g => g.id === grupo_id ? { ...g, pin } : g) };
        if (tipo === 'ensamble') return { ...prev, ensamble_pin: pin };
        if (tipo === 'viewer_1') return { ...prev, viewer_pin_1: pin };
        if (tipo === 'viewer_2') return { ...prev, viewer_pin_2: pin };
        if (tipo === 'admin')    return { ...prev, admin_pin: pin };
        return prev;
      });
      setEditing(prev => { const n = { ...prev }; delete n[key]; return n; });
      showMsg('PIN actualizado ✓');
    } else {
      showMsg(d.error || 'Error al guardar', false);
    }
  };

  if (!pins) return <div style={{padding:32,color:'var(--muted)',textAlign:'center'}}>Cargando…</div>;

  const rows = [
    ...pins.grupos.map(g => ({ key: `g_${g.id}`, label: g.nombre,           tipo: 'grupo',    grupo_id: g.id, current: g.pin })),
    { key: 'ensamble', label: 'Jefe de Ensamble', tipo: 'ensamble', grupo_id: null, current: pins.ensamble_pin },
    { key: 'viewer_1', label: 'Viewer 1 (CEO)',   tipo: 'viewer_1', grupo_id: null, current: pins.viewer_pin_1 },
    { key: 'viewer_2', label: 'Viewer 2',         tipo: 'viewer_2', grupo_id: null, current: pins.viewer_pin_2 },
    { key: 'admin',    label: 'Admin (vos)',       tipo: 'admin',    grupo_id: null, current: pins.admin_pin },
  ];

  return (
    <div style={{maxWidth:480,margin:'0 auto',padding:'24px 16px'}}>
      <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:11,letterSpacing:'0.1em',color:'var(--muted)',textTransform:'uppercase',marginBottom:20}}>Gestión de PINs</div>

      {msg.text && (
        <div style={{padding:'10px 14px',borderRadius:8,marginBottom:16,fontSize:13,
          background: msg.ok ? 'var(--green-bg)' : 'rgba(212,43,43,0.15)',
          color: msg.ok ? 'var(--green-text)' : 'var(--dina-red)'}}>
          {msg.text}
        </div>
      )}

      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {rows.map(row => {
          const val = editing[row.key] !== undefined ? editing[row.key] : row.current;
          const changed = editing[row.key] !== undefined && editing[row.key] !== row.current;
          return (
            <div key={row.key} style={{display:'flex',alignItems:'center',gap:12,padding:'12px 14px',background:'var(--s1)',borderRadius:10,border:'var(--hairline)'}}>
              <div style={{flex:1,fontFamily:'var(--font-display)',fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'0.05em'}}>{row.label}</div>
              <input
                type="text"
                inputMode="numeric"
                maxLength={4}
                value={val}
                onChange={e => handleChange(row.key, e.target.value)}
                style={{width:64,textAlign:'center',fontFamily:'var(--font-display)',fontWeight:800,fontSize:18,letterSpacing:'0.2em',
                  background:'var(--s2)',border:'var(--hairline)',borderRadius:6,color:'var(--text)',padding:'6px 4px'}}
              />
              {changed && (
                <button
                  onClick={() => handleSave(row.tipo, row.grupo_id, row.key)}
                  disabled={saving === row.key}
                  style={{padding:'6px 14px',borderRadius:6,background:'var(--dina-red)',border:'none',color:'#fff',
                    fontFamily:'var(--font-display)',fontWeight:700,fontSize:11,letterSpacing:'0.06em',cursor:'pointer',textTransform:'uppercase'}}>
                  {saving === row.key ? '…' : 'Guardar'}
                </button>
              )}
            </div>
          );
        })}
      </div>

      <div style={{marginTop:20,padding:'12px 14px',background:'var(--s1)',borderRadius:10,border:'var(--hairline)',fontSize:12,color:'var(--muted)',lineHeight:1.6}}>
        Si cambiás el PIN Admin, vas a tener que volver a iniciar sesión con el nuevo PIN.
      </div>
    </div>
  );
}

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