// ── Dina 360 · Vista Jefe de Ensamble ───────────────────────

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

function todayLabel() {
  return new Date().toLocaleDateString('es-AR', { weekday: 'long', day: 'numeric', month: 'long' });
}

// ── 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">Jefe de Ensamble</div>
      </div>
      <div className="login-prompt">PIN de acceso</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}}>Verificando…</div>}
      <div className="pin-err">{error || ''}</div>
    </div>
  );
}

// ── HelpModal ────────────────────────────────────────────────
function HelpModal({ onClose }) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-box" onClick={e => e.stopPropagation()}>
        <div className="modal-title">Ayuda — Jefe de Ensamble</div>
        <div style={{fontSize:13,lineHeight:1.7,color:'var(--text)'}}>
          <ul style={{paddingLeft:16,display:'flex',flexDirection:'column',gap:8}}>
            <li>Tocá una tarjeta de grupo para <b>asignar o cambiar la tarea grupal</b>.</li>
            <li>También podés actualizar el <b>nombre del jefe de grupo</b> desde ahí.</li>
            <li>La vista se actualiza automáticamente cada 15 segundos.</li>
            <li>El contador <b>activos</b> muestra los operadores con turno abierto.</li>
            <li>El estado del turno (Activo / Cerrado / Sin turno) se refleja en tiempo real.</li>
          </ul>
        </div>
        <div className="modal-btns">
          <button className="mbtn mbtn-cancel" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
}

// ── EditGrupoModal ───────────────────────────────────────────
function EditGrupoModal({ grupo, catalogs, partidas, pin, onSaved, onClose }) {
  const tg = grupo.tarea_grupal || {};
  const [jefe,         setJefe]        = React.useState(grupo.jefe_nombre || '');
  const [integrantes,  setIntegrantes] = React.useState([]);
  const [area,         setArea]        = React.useState(tg.area       || 'ensamble');

  // Slots del turno
  const [turnoId,    setTurnoId]   = React.useState(null);
  const [slots,      setSlots]     = React.useState([1,2,3,4].map(n => ({ slot_num: n, id: null, nombre: null })));
  const [slotSaving, setSlotSaving] = React.useState(false);

  React.useEffect(() => {
    fetch(`${API_BASE}/api/grupos/${grupo.id}/integrantes`)
      .then(r => r.json())
      .then(d => { if (d.ok) setIntegrantes(d.integrantes || []); });
    // Cargar turno y slots actuales
    fetch(`${API_BASE}/api/grupos/${grupo.id}/turno/hoy`)
      .then(r => r.json())
      .then(d => { if (d.ok && d.turno?.id) setTurnoId(d.turno.id); });
    fetch(`${API_BASE}/api/grupos/${grupo.id}/sesion`)
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          setSlots(d.operadores.map(o => ({ slot_num: o.slot_num, id: o.id || null, nombre: o.nombre || null })));
        }
      });
  }, [grupo.id]);
  const [subtipo,    setSubtipo]   = React.useState(tg.subtipo    || '');
  const [pitch,      setPitch]     = React.useState(tg.pitch      || '');
  const [tamano,     setTamano]    = React.useState(tg.tamano     || '');
  const [tipoGab,    setTipoGab]   = React.useState(tg.tipo_gabinete || '');
  const [partida,    setPartida]   = React.useState(tg.partida    || '');
  const [saving,     setSaving]    = React.useState(false);
  const [qPartida,   setQPartida]  = React.useState('');

  const subtipos = (catalogs?.subtipos?.[area] || []);
  const filtradas = (partidas || []).filter(p =>
    !qPartida || p.toUpperCase().includes(qPartida.toUpperCase())
  );

  const buildLabel = () => {
    const parts = [
      catalogs?.areas?.find?.(a => a.id === area)?.label || area,
      subtipo,
      pitch,
      tamano,
      partida,
    ].filter(Boolean);
    return parts.join(' · ');
  };

  const handleSlotChange = async (slotNum, integranteId) => {
    setSlotSaving(true);
    let tid = turnoId;
    if (!tid) {
      const d = await fetch(`${API_BASE}/api/grupos/${grupo.id}/turno/hoy`).then(r => r.json());
      if (d.ok && d.turno?.id) { tid = d.turno.id; setTurnoId(tid); }
    }
    if (!tid) { setSlotSaving(false); return; }

    const current = slots.find(s => s.slot_num === slotNum);
    // Liberar slot actual si tiene alguien
    if (current?.id) {
      await fetch(`${API_BASE}/api/turnos/${tid}/slots/${slotNum}`, { method: 'DELETE' });
    }
    // Asignar nuevo si no es "libre"
    if (integranteId) {
      await fetch(`${API_BASE}/api/turnos/${tid}/slots`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ slot_num: slotNum, integrante_id: integranteId }),
      });
    }
    // Refrescar slots
    const d = await fetch(`${API_BASE}/api/grupos/${grupo.id}/sesion`).then(r => r.json());
    if (d.ok) setSlots(d.operadores.map(o => ({ slot_num: o.slot_num, id: o.id || null, nombre: o.nombre || null })));
    setSlotSaving(false);
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      // Guardar tarea grupal
      const tareaObj = { area, subtipo, pitch, tamano, tipo_gabinete: tipoGab, partida, label: buildLabel() };
      await fetch(`${API_BASE}/api/grupos/${grupo.id}/tarea`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(tareaObj),
      });

      // Guardar jefe si cambió
      if (jefe.trim() !== grupo.jefe_nombre) {
        await fetch(`${API_BASE}/api/ensamble/grupos/${grupo.id}/jefe`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-Ensamble-Pin': pin },
          body: JSON.stringify({ jefe_nombre: jefe.trim() }),
        });
      }
      onSaved();
    } catch (_) {
      setSaving(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-box" onClick={e => e.stopPropagation()}>
        <div className="modal-title">{grupo.nombre}</div>

        {/* Jefe */}
        <div className="modal-section">
          <div className="modal-label">Jefe de grupo</div>
          <select className="modal-select" value={jefe} onChange={e => setJefe(e.target.value)}>
            <option value="">— Sin asignar —</option>
            {integrantes.map(i => (
              <option key={i.id} value={i.nombre}>{i.nombre} {i.rol === 'jefe' ? '★' : ''}</option>
            ))}
          </select>
        </div>

        {/* Área */}
        <div className="modal-section">
          <div className="modal-label">Área</div>
          <select className="modal-select" value={area} onChange={e => { setArea(e.target.value); setSubtipo(''); }}>
            {(catalogs?.areas || [{ id:'ensamble', label:'Ensamble' }]).map(a => (
              <option key={a.id} value={a.id}>{a.label}</option>
            ))}
          </select>
        </div>

        {/* Subtipo */}
        {subtipos.length > 0 && (
          <div className="modal-section">
            <div className="modal-label">Subtipo</div>
            <select className="modal-select" value={subtipo} onChange={e => setSubtipo(e.target.value)}>
              <option value="">— Sin subtipo —</option>
              {subtipos.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
            </select>
          </div>
        )}

        {/* Pitch */}
        <div className="modal-section">
          <div className="modal-label">Pitch</div>
          <select className="modal-select" value={pitch} onChange={e => setPitch(e.target.value)}>
            <option value="">— Sin pitch —</option>
            {(catalogs?.pitches || []).map(p => <option key={p} value={p}>{p}</option>)}
          </select>
        </div>

        {/* Tamaño */}
        <div className="modal-section">
          <div className="modal-label">Tamaño gabinete</div>
          <select className="modal-select" value={tamano} onChange={e => setTamano(e.target.value)}>
            <option value="">— Sin tamaño —</option>
            {(catalogs?.tamanos_gabinete || []).map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>

        {/* Tipo gabinete */}
        <div className="modal-section">
          <div className="modal-label">Tipo gabinete</div>
          <select className="modal-select" value={tipoGab} onChange={e => setTipoGab(e.target.value)}>
            <option value="">— Sin tipo —</option>
            {(catalogs?.tipos_gabinete || []).map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>

        {/* Partida */}
        <div className="modal-section">
          <div className="modal-label">Partida</div>
          <input className="modal-input" placeholder="Buscar partida…" value={qPartida}
            onChange={e => setQPartida(e.target.value)}
            style={{marginBottom:6}} />
          <select className="modal-select" value={partida} onChange={e => setPartida(e.target.value)} size={5}
            style={{height:'auto'}}>
            <option value="">— Sin partida —</option>
            {filtradas.map(p => <option key={p} value={p}>{p}</option>)}
          </select>
        </div>

        {/* Operadores del turno */}
        <div className="modal-section">
          <div className="modal-label">Operadores del turno {slotSaving && <span style={{color:'var(--muted)',fontWeight:400}}>— guardando…</span>}</div>
          {slots.map(slot => {
            const asignadosIds = new Set(slots.filter(s => s.id && s.slot_num !== slot.slot_num).map(s => s.id));
            const disponibles = integrantes.filter(i => !asignadosIds.has(i.id));
            return (
              <div key={slot.slot_num} style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
                <span style={{fontSize:11,fontWeight:700,color:'var(--muted)',minWidth:14}}>S{slot.slot_num}</span>
                <select
                  className="modal-select"
                  style={{flex:1,margin:0}}
                  value={slot.id || ''}
                  disabled={slotSaving}
                  onChange={e => handleSlotChange(slot.slot_num, e.target.value || null)}
                >
                  <option value="">— Libre —</option>
                  {disponibles.map(i => (
                    <option key={i.id} value={i.id}>{i.nombre}{i.rol === 'jefe' ? ' ★' : ''}</option>
                  ))}
                  {slot.id && !disponibles.find(i => i.id === slot.id) && (
                    <option value={slot.id}>{slot.nombre}</option>
                  )}
                </select>
              </div>
            );
          })}
        </div>

        <div className="modal-btns">
          <button className="mbtn mbtn-cancel" onClick={onClose}>Cancelar</button>
          <button className="mbtn mbtn-ok" onClick={handleSave} disabled={saving}>
            {saving ? 'Guardando…' : 'Guardar'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── GroupCard ────────────────────────────────────────────────
function GroupCard({ grupo, onClick }) {
  const tg = grupo.tarea_grupal || {};

  let badgeColor = 'var(--muted)';
  let badgeLabel = 'Sin turno';
  if (grupo.turno_estado === 'confirmado') { badgeLabel = 'Cerrado';  badgeColor = 'var(--blue-light)'; }
  else if (grupo.turno_estado && grupo.activos > 0) { badgeLabel = 'Activo'; badgeColor = 'var(--green-text)'; }
  else if (grupo.turno_estado) { badgeLabel = 'Iniciado'; badgeColor = 'var(--amber-text)'; }

  return (
    <div className="grupo-card" onClick={onClick}>
      <div className="gc-header">
        <span className="gc-nombre">{grupo.nombre}</span>
        <span className="gc-badge" style={{color: badgeColor, borderColor: badgeColor + '44'}}>{badgeLabel}</span>
      </div>

      <div className="gc-row">
        <span className="gc-label">Jefe</span>
        <span className="gc-value">{grupo.jefe_nombre || <span style={{color:'var(--muted)',fontStyle:'italic'}}>Sin asignar</span>}</span>
      </div>

      <div className="gc-row" style={{alignItems:'flex-start'}}>
        <span className="gc-label">Tarea</span>
        {tg.label
          ? <span className="gc-tarea">{tg.label}</span>
          : <span className="gc-sin">Sin tarea asignada</span>}
      </div>

      <div className="gc-foot">
        <span className="gc-stat" style={{color: grupo.activos > 0 ? 'var(--text)' : 'var(--muted)'}}>
          {grupo.activos > 0
            ? <><b>{grupo.activos}</b> activo{grupo.activos !== 1 ? 's' : ''}</>
            : 'Sin operadores'}
        </span>
        {grupo.trabajando > 0 && (
          <span className="gc-stat" style={{color:'var(--green-text)'}}>
            ✦ {grupo.trabajando} trabajando
          </span>
        )}
      </div>
    </div>
  );
}

// ── EnsambleApp ──────────────────────────────────────────────
// ── EquipoEnsamble ───────────────────────────────────────────
function EquipoEnsamble({ pin }) {
  const [integrantes,    setIntegrantes]    = React.useState([]);
  const [grupos,         setGrupos]         = React.useState([]);
  const [saving,         setSaving]         = React.useState(false);
  const [msg,            setMsg]            = React.useState({ text:'', ok:true });
  const [agregandoGrupo, setAgregandoGrupo] = React.useState(null);
  const [agregandoId,    setAgregandoId]    = React.useState('');
  const [agregandoRol,   setAgregandoRol]   = React.useState('operario');

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

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

  const moverGrupo = async (integranteId, grupo_id, rol) => {
    setSaving(true);
    const r = await fetch(`${API_BASE}/api/ensamble/integrantes/${integranteId}/grupo`, {
      method:'PUT', headers:{'Content-Type':'application/json','X-Ensamble-Pin':pin},
      body: JSON.stringify({ grupo_id, rol }),
    });
    const d = await r.json();
    setSaving(false);
    if(d.ok){ setAgregandoGrupo(null); setAgregandoId(''); load(); showMsg('Operador asignado ✓'); }
    else showMsg(d.error||'Error', false);
  };

  const jefeEnsamble = integrantes.find(i => i.rol === 'jefe_ensamble');
  const bolsa        = integrantes.filter(i => i.grupo_id === 'g-00' && i.rol !== 'jefe_ensamble' && 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 sel = { padding:'6px 10px', borderRadius:6, border:'1px solid var(--border)', background:'var(--s2)', color:'var(--text)', fontFamily:'var(--font-ui)', fontSize:13, cursor:'pointer' };
  const btn = (extra={}) => ({ padding:'5px 12px', borderRadius:6, border:'1px solid var(--border)', background:'var(--s2)', color:'var(--soft)', fontSize:12, 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>
  );
  const row = (content, extra={}) => ({padding:'9px 14px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:8,flexWrap:'wrap',...extra});

  return (
    <div style={{maxWidth:600,margin:'0 auto',padding:'16px'}}>
      {msg.text && (
        <div style={{padding:'10px 14px',borderRadius:8,marginBottom:14,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 (solo lectura) */}
      <div style={{marginBottom:16,padding:'12px 14px',background:'var(--s1)',border:'var(--hairline)',borderRadius:10}}>
        <SLabel>Jefe de Ensamble</SLabel>
        <span style={{fontWeight:700,fontSize:14}}>{jefeEnsamble ? jefeEnsamble.nombre : '— Sin asignar —'}</span>
      </div>

      {/* Grupos */}
      {porGrupo.map(g => {
        const expandiendo = agregandoGrupo === g.id;
        return (
          <div key={g.id} style={{marginBottom:12}}>
            <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={row()}>
                  <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={()=>moverGrupo(i.id,'g-00','operario')} disabled={saving} style={btn({color:'var(--amber-text)'})}>A bolsa</button>
                </div>
              ))}
              {g.inactivos.map(i => (
                <div key={i.id} style={row({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>
                </div>
              ))}
              {!expandiendo ? (
                <div style={{padding:'8px 14px',background:'var(--s2)'}}>
                  <button onClick={()=>{ setAgregandoGrupo(g.id); setAgregandoId(''); setAgregandoRol('operario'); }}
                    style={btn({fontSize:12})} disabled={bolsa.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>
                    {bolsa.map(i=><option key={i.id} value={i.id}>{i.nombre}</option>)}
                  </select>
                  <select style={{...sel,width:100}} value={agregandoRol} onChange={e=>setAgregandoRol(e.target.value)}>
                    <option value="operario">Operador</option>
                    <option value="jefe">Jefe</option>
                  </select>
                  <button onClick={()=>{ if(agregandoId) moverGrupo(agregandoId,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: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={row()}>
              <span style={{flex:1,fontSize:13,fontWeight:600}}>{i.nombre}</span>
              <select style={{...sel,minWidth:130}}
                defaultValue=""
                onChange={e=>{ if(e.target.value){ moverGrupo(i.id,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>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── EnsambleApp ──────────────────────────────────────────────
function EnsambleApp() {
  const [pin,        setPin]       = React.useState(null);
  const [pinLoading, setPinLoading] = React.useState(false);
  const [pinError,   setPinError]  = React.useState('');
  const [grupos,     setGrupos]    = React.useState([]);
  const [catalogs,   setCatalogs]  = React.useState(null);
  const [partidas,   setPartidas]  = React.useState([]);
  const [editando,   setEditando]  = React.useState(null);
  const [showHelp,   setShowHelp]  = React.useState(false);
  const [toast,      setToast]     = React.useState('');
  const [lastUpdate, setLastUpdate] = React.useState(null);
  const [tab,        setTab]       = React.useState('grupos');
  const [ver,        setVer]       = React.useState('');

  React.useEffect(() => {
    fetch('/version.json').then(r=>r.json()).then(d=>setVer(d.version)).catch(()=>{});
  }, []);

  const showToast = msg => { setToast(msg); setTimeout(() => setToast(''), 2500); };

  const handlePin = async (p) => {
    setPinLoading(true); setPinError('');
    try {
      const r = await fetch(`${API_BASE}/api/ensamble/live`, { headers: { 'X-Ensamble-Pin': p } });
      if (r.status === 403) { setPinError('PIN incorrecto'); }
      else if (r.ok) { setPin(p); }
      else { setPinError('Error de conexión'); }
    } catch (_) { setPinError('Sin conexión'); }
    setPinLoading(false);
  };

  const loadData = React.useCallback(async () => {
    if (!pin) return;
    const r = await fetch(`${API_BASE}/api/ensamble/live`, { headers: { 'X-Ensamble-Pin': pin } });
    if (r.ok) {
      const d = await r.json();
      setGrupos(d.grupos || []);
      setLastUpdate(new Date());
    }
  }, [pin]);

  // Cargar datos y auto-refresh
  React.useEffect(() => {
    if (!pin) return;
    loadData();
    fetch(`${API_BASE}/api/catalogs`).then(r => r.json()).then(d => { if (d.ok) setCatalogs(d.catalogs); });
    fetch(`${API_BASE}/api/partidas`).then(r => r.json()).then(d => { if (d.ok) setPartidas(d.partidas); });
    const t = setInterval(loadData, 15000);
    return () => clearInterval(t);
  }, [pin, loadData]);

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

  return (
    <div className="app">
      <header className="ensamble-header">
        <div className="hdr-left">
          <img src="../assets/dina-logo-horizontal-white.png" alt="Dinalight" className="hdr-logo" />
          <span className="hdr-title">Ensamble</span>
        </div>
        <div className="hdr-right">
          <span className="hdr-fecha">{todayLabel()}</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" style={{textDecoration:'none'}}>← Inicio</a>
          </div>
          <button className="tbtn" onClick={() => setPin(null)}>Salir</button>
        </div>
      </header>

      {/* Tabs */}
      <div style={{display:'flex',gap:4,padding:'8px 16px 0',background:'var(--s1)',borderBottom:'var(--hairline)'}}>
        {[['grupos','Grupos'],['equipo','Equipo']].map(([id,label]) => (
          <button key={id} onClick={()=>setTab(id)} style={{
            padding:'7px 18px',borderRadius:'8px 8px 0 0',border:'var(--hairline)',
            background: tab===id ? 'var(--bg)' : 'var(--s2)',
            color: tab===id ? 'var(--text)' : 'var(--muted)',
            fontFamily:'var(--font-ui)',fontSize:13,fontWeight:tab===id?700:400,
            cursor:'pointer',borderBottom: tab===id ? '1px solid var(--bg)' : 'var(--hairline)',
            marginBottom: tab===id ? -1 : 0,
          }}>{label}</button>
        ))}
      </div>

      <main className="ensamble-main">
        {tab === 'grupos' && (
          <>
            {lastUpdate && (
              <div className="refresh-bar">
                Actualizado {lastUpdate.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                {' · '}
                <span style={{cursor:'pointer',color:'var(--soft)'}} onClick={loadData}>↻ Actualizar</span>
              </div>
            )}
            <div className="grupos-grid">
              {grupos.map(g => (
                <GroupCard key={g.id} grupo={g} onClick={() => setEditando(g)} />
              ))}
            </div>
          </>
        )}
        {tab === 'equipo' && <EquipoEnsamble pin={pin} />}
      </main>

      {editando && (
        <EditGrupoModal
          grupo={editando}
          catalogs={catalogs}
          partidas={partidas}
          pin={pin}
          onSaved={() => {
            setEditando(null);
            loadData();
            showToast('Grupo actualizado ✓');
          }}
          onClose={() => setEditando(null)}
        />
      )}

      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}

      <button className="help-btn" onClick={() => window.open('../manual/#jefe-ensamble', '_blank')} title="Ayuda">?</button>

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

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