// TaskPicker — flujo 3 pasos: PARTIDA → ÁREA → SUBTIPO (+ extras si Ensamble)
// Recibe catalogs (desde window.CATALOGS) y onConfirm({partida,area,subtipo,pitch,tamano,tipo_gab,label})

function groupPartidas(lista, query) {
  const q = query.toUpperCase();
  const num = s => parseInt(s.replace(/\D/g, '')) || 0;
  // UN → UNI (son lo mismo), dedup
  const normalize = p => (p.match(/^UN\d/) ? 'UNI' + p.slice(2) : p);
  const all = [...new Set((lista || []).filter(p => p !== 'NO_APLICA').map(normalize))];
  const match = p => !q || p.includes(q);
  return {
    hj:  all.filter(p => p.startsWith('HJ') && match(p)).sort((a,b) => num(b) - num(a)),
    ly:  all.filter(p => p.startsWith('LY') && match(p)).sort((a,b) => num(b) - num(a)),
    uni: all.filter(p => p.startsWith('UNI') && match(p)).sort((a,b) => num(b) - num(a)),
    dc:  all.filter(p => p.startsWith('DC') && match(p)).sort((a,b) => num(b) - num(a)),
  };
}

function PBtn({ code, sel, onPick }) {
  return <div className={'partida-btn'+(sel?' sel':'')} onClick={() => onPick(code)}>{code}</div>;
}

const MOTIVOS_CORTE = ['Almuerzo','Salida corta','Médico','Kiosko','Reunión','Necesidad personal','Otro motivo'];

function ModalCorte({ onPick, onClose }) {
  const [sel, setSel] = React.useState(null);
  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-title">Motivo del corte</div>
        <div className="modal-sub">Se registrará el corte y se pausará el tiempo.</div>
        <div className="task-opts">
          {MOTIVOS_CORTE.map(m => (
            <div key={m} className={'task-opt' + (sel===m?' sel':'')} onClick={() => setSel(m)}>{m}</div>
          ))}
        </div>
        <div className="modal-btns">
          <button className="mbtn mbtn-cancel" onClick={onClose}>Cancelar</button>
          <button className="mbtn mbtn-ok" disabled={!sel} onClick={() => sel && onPick(sel)}>Registrar</button>
        </div>
      </div>
    </div>
  );
}

function TaskPicker({ esGrupal, catalogs, partidas, onConfirm, onClose }) {
  const [step, setStep]       = React.useState('partida');
  const [partida, setPartida] = React.useState(null);
  const [area, setArea]       = React.useState(null);
  const [subtipo, setSubtipo] = React.useState(null);
  const [pitch, setPitch]     = React.useState(null);
  const [tamano, setTamano]   = React.useState(null);
  const [tipoGab, setTipoGab] = React.useState(null);
  const [search, setSearch]   = React.useState('');

  const cats = catalogs || window.CATALOGS || {};

  const subtipoMeta = React.useMemo(() => {
    if (!area || !cats.subtipos) return null;
    const lista = cats.subtipos[area] || [];
    return lista.find(s => s.id === subtipo);
  }, [area, subtipo, cats]);

  const needsExtras = subtipoMeta?.needsPitchTamano;

  const canConfirmStep = {
    partida:  !!partida,
    area:     !!area,
    subtipo:  !!subtipo,
    extras:   !needsExtras || (!!pitch && !!tamano && !!tipoGab),
  };

  function buildLabel() {
    const parts = [];
    if (area) parts.push((cats.areas||[]).find(a=>a.id===area)?.label || area);
    if (subtipo) parts.push((cats.subtipos?.[area]||[]).find(s=>s.id===subtipo)?.label || subtipo);
    if (pitch) parts.push(pitch);
    if (tamano) parts.push(tamano);
    if (partida && partida !== 'NO_APLICA') parts.push(partida);
    return parts.join(' · ').toUpperCase();
  }

  function confirm() {
    onConfirm({
      partida: partida === 'NO_APLICA' ? null : partida,
      area, subtipo, pitch, tamano,
      tipo_gab: tipoGab,
      label: buildLabel(),
    });
  }

  const groups = React.useMemo(
    () => groupPartidas(partidas || cats.partidas_mock || [], search),
    [partidas, cats, search]
  );

  // ── PASO 1: PARTIDA ──────────────────────────────────────────
  if (step === 'partida') return (
    <div className="overlay" onClick={onClose}>
      <div className="modal modal-partidas" onClick={e => e.stopPropagation()}>
        <div className="modal-title">Seleccionar partida</div>
        <div className="modal-sub">{esGrupal ? 'Tarea grupal — todos el grupo.' : 'Tarea individual — pisa la grupal.'}</div>
        <input className="modal-search" placeholder="Buscar HJ84..." value={search} onChange={e => setSearch(e.target.value)} autoFocus />

        <div className={'partida-btn no-aplica'+(partida==='NO_APLICA'?' sel':'')} onClick={() => setPartida('NO_APLICA')} style={{textAlign:'center'}}>
          NO APLICA
        </div>

        <div className="partida-layout">
          <div className="pcol-hj">
            <div className="pcol-label" style={{gridColumn:'1/-1'}}>HJ</div>
            {groups.hj.map(p => <PBtn key={p} code={p} sel={partida===p} onPick={setPartida} />)}
          </div>
          <div className="pcol-ly">
            <div className="pcol-label">LY</div>
            {groups.ly.map(p => <PBtn key={p} code={p} sel={partida===p} onPick={setPartida} />)}
          </div>
          <div className="pcol-uni">
            <div className="pcol-label">UNI</div>
            {groups.uni.map(p => <PBtn key={p} code={p} sel={partida===p} onPick={setPartida} />)}
            {groups.dc.length > 0 && <div className="pcol-sep" />}
            {groups.dc.length > 0 && <div className="pcol-label">DC</div>}
            {groups.dc.map(p => <PBtn key={p} code={p} sel={partida===p} onPick={setPartida} />)}
          </div>
        </div>

        <div className="modal-btns">
          <button className="mbtn mbtn-cancel" onClick={onClose}>Cancelar</button>
          <button className="mbtn mbtn-ok" disabled={!partida} onClick={() => partida && setStep('area')}>Siguiente →</button>
        </div>
      </div>
    </div>
  );

  // ── PASO 2: ÁREA ────────────────────────────────────────────
  if (step === 'area') return (
    <div className="overlay" onClick={onClose}>
      <div className="modal modal-wide" onClick={e => e.stopPropagation()}>
        <div className="modal-title">Seleccionar área</div>
        <div className="modal-sub">Partida: <strong>{partida === 'NO_APLICA' ? 'NO APLICA' : partida}</strong></div>
        <div className="area-grid">
          {(cats.areas || []).map(a => (
            <div key={a.id}
              className={'area-btn' + (area===a.id?' sel':'')}
              onClick={() => { setArea(a.id); setSubtipo(null); setStep('subtipo'); }}>
              {a.label}
            </div>
          ))}
        </div>
        <div className="modal-btns">
          <button className="mbtn mbtn-cancel" onClick={() => setStep('partida')}>← Atrás</button>
          <button className="mbtn mbtn-cancel" onClick={onClose}>Cancelar</button>
        </div>
      </div>
    </div>
  );

  // ── PASO 3: SUBTIPO ──────────────────────────────────────────
  if (step === 'subtipo') {
    const lista = cats.subtipos?.[area] || [];
    return (
      <div className="overlay" onClick={onClose}>
        <div className="modal modal-wide" onClick={e => e.stopPropagation()}>
          <div className="modal-title">Seleccionar actividad</div>
          <div className="modal-sub">
            {partida !== 'NO_APLICA' ? partida : 'Sin partida'} · <strong>{(cats.areas||[]).find(a=>a.id===area)?.label}</strong>
          </div>
          <div className="task-opts">
            {lista.map(s => (
              <div key={s.id}
                className={'task-opt' + (subtipo===s.id?' sel':'')}
                onClick={() => setSubtipo(s.id)}>
                {s.label}
              </div>
            ))}
          </div>
          <div className="modal-btns">
            <button className="mbtn mbtn-cancel" onClick={() => setStep('area')}>← Atrás</button>
            <button className="mbtn mbtn-ok" disabled={!subtipo}
              onClick={() => {
                if (!subtipo) return;
                const meta = lista.find(s => s.id === subtipo);
                if (meta?.needsPitchTamano) setStep('extras');
                else confirm();
              }}>
              {(()=>{ const m=lista.find(s=>s.id===subtipo); return m?.needsPitchTamano ? 'Siguiente →' : 'Confirmar'; })()}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // ── PASO 4: EXTRAS (solo Ensamble con pitch/tamaño) ──────────
  if (step === 'extras') {
    const pitches = cats.pitches || [];
    const tamanos = cats.tamanos_gabinete || [];
    const tipos   = cats.tipos_gabinete || [];
    return (
      <div className="overlay" onClick={onClose}>
        <div className="modal modal-wide" onClick={e => e.stopPropagation()}>
          <div className="modal-title">Detalle de ensamble</div>
          <div className="modal-sub">Especificá el producto que van a trabajar.</div>

          <div className="extras-section">
            <div className="extras-label">PITCH</div>
            <div className="extras-chips">
              {pitches.map(p => (
                <div key={p} className={'extras-chip'+(pitch===p?' sel':'')} onClick={()=>setPitch(p)}>{p}</div>
              ))}
            </div>
          </div>

          <div className="extras-section">
            <div className="extras-label">TAMAÑO (mm)</div>
            <div className="extras-chips">
              {tamanos.map(t => (
                <div key={t} className={'extras-chip'+(tamano===t?' sel':'')} onClick={()=>setTamano(t)}>{t}</div>
              ))}
            </div>
          </div>

          <div className="extras-section">
            <div className="extras-label">TIPO GABINETE</div>
            <div className="extras-chips">
              {tipos.map(t => (
                <div key={t} className={'extras-chip'+(tipoGab===t?' sel':'')} onClick={()=>setTipoGab(t)}>{t}</div>
              ))}
            </div>
          </div>

          <div className="modal-btns">
            <button className="mbtn mbtn-cancel" onClick={() => setStep('subtipo')}>← Atrás</button>
            <button className="mbtn mbtn-ok" disabled={!pitch||!tamano||!tipoGab} onClick={confirm}>Confirmar</button>
          </div>
        </div>
      </div>
    );
  }

  return null;
}

function ModalVolverCorte({ op, onContinuar, onNueva, onClose }) {
  const area = op.tarea_area ? op.tarea_area.toUpperCase() : '';
  const sub  = op.tarea_subtipo ? op.tarea_subtipo.toUpperCase().replace(/_/g,' ') : '';
  const tareaLabel = op.tarea_label || [area, sub, op.tarea_partida].filter(Boolean).join(' · ') || 'Sin tarea registrada';
  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-title">Volver del corte</div>
        <div className="modal-sub">Tarea anterior: <strong>{tareaLabel}</strong></div>
        <div className="task-opts" style={{marginTop:4}}>
          <div className="task-opt" onClick={onContinuar}>
            <div style={{fontWeight:800}}>Continuar misma tarea</div>
            <div style={{fontSize:12,color:'var(--soft)',marginTop:3}}>El reloj sigue desde donde estaba pausado</div>
          </div>
          <div className="task-opt" onClick={onNueva}>
            <div style={{fontWeight:800}}>Elegir nueva tarea</div>
            <div style={{fontSize:12,color:'var(--soft)',marginTop:3}}>El reloj arranca desde cero</div>
          </div>
        </div>
        <div className="modal-btns">
          <button className="mbtn mbtn-cancel" onClick={onClose}>Cancelar</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TaskPicker, ModalCorte, ModalVolverCorte });