// WizardSteps — 6 pasos del cierre de turno.
// Datos precargados desde registros_tiempo del cronómetro (via App.jsx).

const ASIST_OPTS = [
  { id: 'presente',    label: 'Presente',    cls: 'a-pres' },
  { id: 'ausente',     label: 'Ausente',     cls: 'a-aus'  },
  { id: 'medio_dia',   label: 'Medio día',   cls: 'a-med'  },
  { id: 'instalacion', label: 'Instalación', cls: 'a-ins'  },
];

const AREA_LABELS = {
  ensamble:             'Ensamble',
  operaciones:          'Operaciones',
  instalacion:          'Instalación',
  servicio_tecnico:     'Servicio Técnico',
  despacho_recepciones: 'Despacho y Recepciones',
  logistica:            'Logística',
  varios_produccion:    'Actividades Varias Producción',
};
const SUBTIPO_LABELS = {
  gabinetes:                  'Ensamble de Gabinetes',
  modulos:                    'Colocación de Módulos',
  fuentes:                    'Armar Fuentes',
  cables:                     'Hacer Cables (Tensión / Datos)',
  rcg_fw:                     'Config RCG / FW',
  test:                       'Test de Encendido',
  embalaje:                   'Embalaje',
  reparacion:                 'Reparación de Gabinete',
  coordinacion:               'Coordinación / Reuniones',
  pedidos:                    'Gestión de Pedidos',
  proveedores:                'Control de Proveedores',
  documentacion:              'Elaboración de Documentación',
  evaluacion:                 'Evaluación de Proyecto',
  control_stock:              'Control de Stock',
  otra:                       'Otra',
  preparacion_material:       'Preparación de Material',
  instalacion_sitio:          'Instalación en sitio',
  instalacion_showroom:       'Instalación en Showroom',
  relevamiento:               'Relevamiento',
  desinstalacion:             'Desinstalación',
  configuracion:              'Configuración',
  reparacion_pantalla:        'Reparación / Control de Pantalla',
  remoto:                     'Servicio Técnico Remoto',
  campo:                      'Servicio Técnico de Campo',
  administrativa:             'Administrativa',
  despacho:                   'Despacho de Pedidos',
  recepcion:                  'Recepción de Mercadería',
  carga:                      'Carga',
  descarga:                   'Descarga',
  traslado:                   'Traslado de Mercadería',
  flete:                      'Flete a Cliente',
  traslado_deposito:          'Traslado entre Depósitos',
  encomiendas:                'Envío de Encomiendas',
  armado_carteleria_taller:   'Armado de Cartelería (taller)',
  armado_carteleria_obra:     'Armado de Cartelería (obra)',
  estructura_herreria:        'Armado Estructura Herrería',
  instalacion_carteleria:     'Instalación Cartelería',
  reparacion_carteleria:      'Reparación Cartelería',
  orden_limpieza:             'Orden y Limpieza',
  pintura:                    'Pintura',
  mantenimiento_vehiculos:    'Mantenimiento Vehículos',
};

const areaLabel  = (id) => AREA_LABELS[id]   || (id || '').replace(/_/g, ' ');
const subLabel   = (id) => SUBTIPO_LABELS[id] || (id || '').replace(/_/g, ' ');

// === STEP 1: TURNO ============================================
function StepTurno({ form, setForm }) {
  return (
    <div className="screen">
      <div className="card">
        <div className="card-title">Turno del día</div>
        <label>Horario</label>
        <select value={form.horario} onChange={(e) => setForm({ ...form, horario: e.target.value })}>
          <option value="dia">Turno día (08:00 – 17:00)</option>
          <option value="tarde">Turno tarde (13:00 – 22:00)</option>
          <option value="noche">Turno noche (22:00 – 06:00)</option>
        </select>
      </div>
      <div className="card">
        <div className="card-title">Personal hoy</div>
        <div style={{display:'flex',gap:12}}>
          <div style={{flex:1}}>
            <label>Presentes</label>
            <input type="number" value={form.presentes}
              onChange={(e) => setForm({ ...form, presentes: e.target.value })}
              style={{fontSize:32,fontWeight:700,color:'var(--green-text)',textAlign:'center',padding:14}} />
          </div>
          <div style={{flex:1}}>
            <label>Ausentes</label>
            <input type="number" value={form.ausentes}
              onChange={(e) => setForm({ ...form, ausentes: e.target.value })}
              style={{fontSize:32,fontWeight:700,color:'var(--dina-red)',textAlign:'center',padding:14}} />
          </div>
        </div>
        <div style={{fontSize:11,color:'var(--muted)',marginTop:8,lineHeight:1.5}}>
          Modificá si hay diferencia con los presentes reales del día.
        </div>
      </div>
    </div>
  );
}

// === STEP 2: ASISTENCIA ========================================
function StepAsistencia({ form, setForm, integrantes }) {
  const set = (integranteId, val) =>
    setForm({ ...form, asistencia: { ...form.asistencia, [integranteId]: val } });

  return (
    <div className="screen">
      <div className="card">
        <div className="card-title">Estado de cada integrante</div>
        <div style={{fontSize:12,color:'var(--muted)',marginBottom:14,lineHeight:1.5}}>
          Marcá el estado de cada integrante del turno.
        </div>
        {integrantes.map((i) => {
          const min = form.retrasos?.[i.id];
          const tardeBadge = min === undefined
            ? <span style={{fontSize:11,color:'var(--muted)',marginLeft:8}}>sin registro</span>
            : min > 10
              ? <span style={{fontSize:11,color:'var(--dina-red)',marginLeft:8,fontWeight:600}}>{min} min tarde</span>
              : <span style={{fontSize:11,color:'var(--green-text)',marginLeft:8,fontWeight:600}}>a tiempo</span>;
          return (
            <div key={i.id} className="att-row">
              <div className="att-name" style={{display:'flex',alignItems:'center',flexWrap:'wrap'}}>
                {i.nombre}{tardeBadge}
              </div>
              <div className="att-pills">
                {ASIST_OPTS.map((o) => (
                  <span key={o.id}
                    className={'pill ' + (form.asistencia[i.id] === o.id ? o.cls : '')}
                    onClick={() => set(i.id, o.id)}>
                    {o.label}
                  </span>
                ))}
              </div>
            </div>
          );
        })}
        {integrantes.length === 0 && (
          <div style={{color:'var(--muted)',fontSize:13,fontStyle:'italic',padding:'16px 0'}}>
            Sin integrantes cargados.
          </div>
        )}
      </div>
    </div>
  );
}

// === STEP 3: PRODUCCIÓN ========================================
function StepProduccion({ form, setForm }) {
  const updQty = (i, delta) => {
    const list = [...form.actividades];
    list[i] = { ...list[i], qty: Math.max(0, (list[i].qty || 0) + delta) };
    setForm({ ...form, actividades: list });
  };
  const del = (i) => setForm({ ...form, actividades: form.actividades.filter((_, j) => j !== i) });

  return (
    <div className="screen">
      <div className="card">
        <div className="card-title">Producción del turno · precargada del cronómetro</div>
        <div style={{fontSize:12,color:'var(--muted)',marginBottom:14,lineHeight:1.5}}>
          Actividades registradas durante el turno. Ingresá la cantidad producida o eliminá entradas erróneas.
        </div>
        <div className="act-list">
          {form.actividades.map((a, i) => (
            <div key={i} className="act-item-wide">
              <div className="act-info-block">
                <div className="act-meta-row">
                  <span className="act-area">{areaLabel(a.area)}</span>
                  {a.partida && a.partida !== 'NO_APLICA' && (
                    <span className="act-partida">{a.partida}</span>
                  )}
                </div>
                <div className="act-subtipo">{subLabel(a.subtipo)}</div>
                {a.modelo && <div className="act-modelo">{a.modelo}</div>}
                <div className="act-tiempo">{a.tiempo}</div>
              </div>
              <div className="act-qty-block">
                <div className="ctr">
                  <button className="ctr-btn" onClick={() => updQty(i, -1)}>−</button>
                  <input className="ctr-val" value={a.qty || 0} readOnly />
                  <button className="ctr-btn" onClick={() => updQty(i, +1)}>+</button>
                </div>
                <button className="act-del" onClick={() => del(i)}>×</button>
              </div>
            </div>
          ))}
        </div>
        {form.actividades.length === 0 && (
          <div style={{padding:'24px',textAlign:'center',color:'var(--muted)',fontSize:13,fontStyle:'italic'}}>
            Sin actividades registradas en el cronómetro.
          </div>
        )}
      </div>
    </div>
  );
}

// === STEP 4: EXTRAS ============================================
function StepExtras({ form, setForm }) {
  const setAcc = (k, dv) =>
    setForm({ ...form, accesorios: { ...form.accesorios, [k]: Math.max(0, (form.accesorios[k] || 0) + dv) } });

  const Row = ({ k, label, sub, step = 1 }) => (
    <div className="acc-row">
      <div style={{flex:1}}>
        <div className="acc-label">{label}</div>
        <div className="acc-sub">{sub}</div>
      </div>
      <div className="ctr">
        <button className="ctr-btn" onClick={() => setAcc(k, -step)}>−</button>
        <input className="ctr-val" type="number" value={form.accesorios[k] || 0} readOnly />
        <button className="ctr-btn" onClick={() => setAcc(k, step)}>+</button>
      </div>
    </div>
  );

  return (
    <div className="screen">
      <div className="card">
        <div className="card-title">Consumibles y accesorios</div>
        <Row k="fuentes"   label="Fuentes armadas"    sub="Pares de fuentes"   step={10} />
        <Row k="cables"    label="Cables de tensión"  sub="Unidades"           step={10} />
        <Row k="receiving" label="Receiving cargadas" sub="Con RCG / FW"       step={10} />
      </div>
      <div className="card">
        <div className="card-title">Movimientos del día</div>
        <Row k="fletes"      label="Fletes / viajes"          sub="Cantidad de viajes" />
        <Row k="instalacion" label="Personas en instalación"  sub="Cantidad de operarios" />
      </div>
    </div>
  );
}

// === STEP 5: NOTAS =============================================
function StepNotas({ form, setForm }) {
  const ATAJOS = ['Corte de luz','Falta de materiales','Personal en instalación','Descarga contenedor','Mudanza','Orden y limpieza'];
  return (
    <div className="screen">
      <div className="card">
        <div className="card-title">Observaciones del turno</div>
        <label>¿Hubo algo fuera de lo normal? Problemas, retrasos, falta de materiales...</label>
        <textarea
          value={form.obs}
          onChange={(e) => setForm({ ...form, obs: e.target.value })}
          placeholder="Ej: Se cortó la luz 2 horas. Faltaron cables de tensión."
          rows={5} maxLength={500} />
        <div style={{fontSize:11,color:'var(--muted)',marginTop:6}}>{form.obs.length} / 500</div>
      </div>
      <div className="card" style={{background:'#1a0807',borderColor:'#3a1010'}}>
        <div className="card-title" style={{color:'var(--dina-red)'}}>Atajos rápidos</div>
        <div className="chips">
          {ATAJOS.map((a) => (
            <div key={a} className="chip"
              onClick={() => setForm({ ...form, obs: (form.obs ? form.obs + '. ' : '') + a })}>
              {a}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// === STEP 6: ENVIAR ============================================
function StepEnviar({ form, grupo, integrantes }) {
  const totalQty = form.actividades.reduce((a, x) => a + (x.qty || 0), 0);
  const byArea = {};
  form.actividades.forEach(a => {
    const k = areaLabel(a.area);
    if (!byArea[k]) byArea[k] = [];
    byArea[k].push(a);
  });

  return (
    <div className="screen">
      <div className="card">
        <div style={{fontSize:20,fontWeight:700,marginBottom:4}}>{grupo?.nombre || ''}</div>
        <div style={{fontSize:13,color:'var(--muted)',marginBottom:20}}>
          {new Date().toLocaleDateString('es-AR', {weekday:'long',day:'numeric',month:'long'})} · Turno {form.horario}
        </div>

        <div className="stat-row">
          <div className="stat-box">
            <div className="stat-num">{form.presentes}</div>
            <div className="stat-label">Presentes</div>
          </div>
          <div className="stat-box">
            <div className="stat-num" style={{color:'var(--dina-red)'}}>{form.ausentes}</div>
            <div className="stat-label">Ausentes</div>
          </div>
          <div className="stat-box">
            <div className="stat-num" style={{color:'var(--green-text)'}}>{totalQty}</div>
            <div className="stat-label">Producción</div>
          </div>
        </div>

        {Object.keys(byArea).length > 0 && (
          <div style={{marginTop:16}}>
            {Object.entries(byArea).map(([area, items]) => (
              <div key={area} style={{marginBottom:16}}>
                <div style={{fontSize:11,fontWeight:700,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:6}}>{area}</div>
                {items.map((a, i) => (
                  <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'10px 0',borderBottom:'var(--hairline)',fontSize:14,gap:10}}>
                    <div style={{flex:1}}>
                      <div style={{fontWeight:600}}>{subLabel(a.subtipo)}</div>
                      <div style={{fontSize:11,color:'var(--muted)',marginTop:2}}>
                        {a.partida && a.partida !== 'NO_APLICA' ? a.partida : ''}
                        {a.modelo ? ' · ' + a.modelo : ''}
                      </div>
                    </div>
                    <div style={{padding:'4px 10px',borderRadius:20,fontSize:12,fontWeight:700,background:'var(--red-deep)',color:'var(--dina-red)',height:'fit-content'}}>{a.qty}</div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        )}

        {form.obs ? (
          <div style={{marginTop:18,padding:'14px 16px',background:'var(--s2)',borderRadius:10,borderLeft:'3px solid var(--dina-red)'}}>
            <div style={{fontSize:10,fontWeight:700,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:4}}>Notas del turno</div>
            <div style={{fontSize:13,lineHeight:1.5}}>{form.obs}</div>
          </div>
        ) : null}
      </div>
    </div>
  );
}

// === FEEDBACK ===================================================
function FeedbackScreen({ onNuevo }) {
  return (
    <div className="screen" style={{padding:'40px 20px',textAlign:'center'}}>
      <div className="fb-hero">
        <div className="fb-check">✓</div>
        <div className="fb-msg">Reporte enviado</div>
        <div className="fb-sub">Gracias por reportar. Cerrá la sesión cuando termines.</div>
      </div>
      <button className="btn btn-secondary" onClick={onNuevo}>Cerrar sesión</button>
    </div>
  );
}

Object.assign(window, { StepTurno, StepAsistencia, StepProduccion, StepExtras, StepNotas, StepEnviar, FeedbackScreen, ASIST_OPTS });