// App — PIN → cargar datos → 6-step wizard → enviar a D1.

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

const STEPS = [
  { id: 0, label: 'Inicio',      Comp: StepTurno      },
  { id: 1, label: 'Asistencia',  Comp: StepAsistencia },
  { id: 2, label: 'Producción',  Comp: StepProduccion },
  { id: 3, label: 'Extras',      Comp: StepExtras     },
  { id: 4, label: 'Notas',       Comp: StepNotas      },
  { id: 5, label: 'Enviar',      Comp: StepEnviar     },
];

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

// Agrupar registros_tiempo por combinación (area, subtipo, partida, pitch, tamano, tipo_gabinete)
// y sumar dur_min. qty arranca en 0 para que el usuario lo complete.
function buildActividades(registros) {
  const map = {};
  for (const r of registros) {
    const key = [r.area, r.subtipo, r.partida, r.pitch, r.tamano, r.tipo_gabinete].join('|');
    if (!map[key]) {
      map[key] = {
        area:    r.area,
        subtipo: r.subtipo,
        partida: r.partida,
        pitch:   r.pitch,
        tamano:  r.tamano,
        tipo_gab: r.tipo_gabinete,
        modelo: [r.pitch, r.tamano, r.tipo_gabinete].filter(Boolean).join(' · '),
        dur_min: 0,
        qty: 0,
      };
    }
    map[key].dur_min += (r.dur_min || 0);
  }
  return Object.values(map).map(a => ({ ...a, tiempo: fmtMin(a.dur_min) }));
}

function App() {
  const [grupo,        setGrupo]        = React.useState(null);
  const [integrantes,  setIntegrantes]  = React.useState([]);
  const [turnoId,      setTurnoId]      = React.useState(null);
  const [form,         setForm]         = React.useState(null);

  const [pinLoading,   setPinLoading]   = React.useState(false);
  const [pinError,     setPinError]     = React.useState('');
  const [dataLoading,  setDataLoading]  = React.useState(false);

  const [step,    setStep]    = React.useState(0);
  const [done,    setDone]    = React.useState([]);
  const [sent,    setSent]    = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [toast,   setToast]   = React.useState('');
  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(''), 2000); };

  // === Autenticación por PIN ===
  const handlePin = async (pin) => {
    setPinLoading(true);
    setPinError('');
    try {
      const res  = await fetch(`${API_BASE}/api/auth`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pin }),
      });
      const data = await res.json();
      if (data.ok && data.grupo) {
        setGrupo(data.grupo);
      } else {
        setPinError('PIN incorrecto');
      }
    } catch (e) {
      setPinError('Error de conexión');
    }
    setPinLoading(false);
  };

  // === Cargar datos del turno tras autenticación ===
  React.useEffect(() => {
    if (!grupo) return;
    setDataLoading(true);
    Promise.all([
      fetch(`${API_BASE}/api/grupos/${grupo.id}/turno/hoy`).then(r => r.json()),
      fetch(`${API_BASE}/api/grupos/${grupo.id}/integrantes`).then(r => r.json()),
    ]).then(([turnoData, integData]) => {
      const turno = turnoData.turno || {};
      const ints  = integData.integrantes || [];
      setTurnoId(turno.id);
      setIntegrantes(ints);
      return fetch(`${API_BASE}/api/turnos/${turno.id}/actividades`)
        .then(r => r.json())
        .then(actData => {
          const registros   = actData.registros_tiempo || [];
          const actividades = buildActividades(registros);

          // Calcular retrasos vs 08:00 hora local (turno día)
          const ptMap  = actData.primeras_tareas || {};
          const refInicio = new Date(`${turno.fecha}T08:00:00`); // sin Z = timezone local
          const retrasos = {};
          for (const [opId, pt] of Object.entries(ptMap)) {
            const minutos = Math.round((new Date(pt) - refInicio) / 60000);
            retrasos[opId] = Math.max(0, minutos);
          }

          setForm({
            horario:    turno.horario    || 'dia',
            presentes:  turno.personas_presentes !== undefined ? turno.personas_presentes : ints.length,
            ausentes:   turno.personas_ausentes  || 0,
            asistencia: ints.reduce((acc, i) => ({ ...acc, [i.id]: 'presente' }), {}),
            retrasos,
            actividades,
            accesorios: { fuentes: 0, cables: 0, receiving: 0, fletes: 0, instalacion: 0 },
            obs:        turno.obs || '',
          });
          setDataLoading(false);
        });
    }).catch(() => {
      showToast('Error cargando datos del turno');
      setDataLoading(false);
    });
  }, [grupo]);

  // === Enviar reporte ===
  const handleSubmit = async () => {
    setSending(true);
    try {
      // 1. Asistencias
      const asistencias = integrantes.map(i => ({
        integrante_id: i.id,
        estado:        form.asistencia[i.id] || 'presente',
        hora_entrada:  null,
        minutos_tarde: 0,
      }));
      await fetch(`${API_BASE}/api/turnos/${turnoId}/asistencias`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ asistencias }),
      });

      // 2. Actividades + confirmar turno (con obs/horario/personas)
      const actividades = form.actividades.map(a => ({
        partida:       a.partida,
        area:          a.area,
        subtipo:       a.subtipo,
        pitch:         a.pitch,
        tamano:        a.tamano,
        tipo_gabinete: a.tipo_gab,
        cantidad:      a.qty || 0,
        notas:         '',
      }));
      await fetch(`${API_BASE}/api/turnos/${turnoId}/actividades`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          actividades,
          horario:            form.horario,
          personas_presentes: parseInt(form.presentes) || 0,
          personas_ausentes:  parseInt(form.ausentes)  || 0,
          obs:                form.obs,
        }),
      });

      setSent(true);
    } catch (e) {
      showToast('Error al enviar. Intentá de nuevo.');
    }
    setSending(false);
  };

  // === Renderizado ===
  if (!grupo) {
    return <PinScreen onPin={handlePin} loading={pinLoading} error={pinError} />;
  }

  if (dataLoading || !form) {
    return (
      <div className="loading-screen">
        <div className="loading-txt">Cargando turno…</div>
      </div>
    );
  }

  if (sent) {
    return (
      <FeedbackScreen onNuevo={() => {
        setGrupo(null); setSent(false); setForm(null);
        setStep(0); setDone([]); setIntegrantes([]); setTurnoId(null);
        setPinError('');
      }} />
    );
  }

  const Step     = STEPS[step].Comp;
  const fechaText = new Date().toLocaleDateString('es-AR', { weekday: 'long', day: 'numeric', month: 'short' });

  const go   = (n) => { if (!done.includes(step)) setDone([...done, step]); setStep(n); };
  const next = () => { if (step < STEPS.length - 1) go(step + 1); else handleSubmit(); };
  const back = () => { if (step > 0) setStep(step - 1); };

  return (
    <div className="app">
      <header>
        <img className="hdr-logo-img" src="../assets/dina-logo-horizontal-white.png" alt="Dinalight" />
        <div className="hdr-grupo">{grupo.nombre || grupo.id}</div>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          <div className="hdr-fecha">{fechaText}</div>
          <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="../" style={{fontSize:12,color:'var(--muted)',textDecoration:'none'}}>← Inicio</a>
          </div>
        </div>
      </header>

      <nav className="step-nav">
        {STEPS.map((s) => (
          <button key={s.id}
            className={'step-btn' + (step === s.id ? ' active' : '') + (done.includes(s.id) ? ' done' : '')}
            onClick={() => go(s.id)}>
            <span className="num">{s.id + 1}</span>
            {s.label}
          </button>
        ))}
      </nav>

      <main>
        <Step form={form} setForm={setForm} integrantes={integrantes} grupo={grupo} />
      </main>

      <footer>
        <button className="btn btn-secondary" onClick={back} disabled={step === 0 || sending}>
          ATRÁS
        </button>
        <button
          className={'btn ' + (step === STEPS.length - 1 ? 'btn-success' : 'btn-primary')}
          onClick={next}
          disabled={sending}>
          {sending ? 'Enviando…' : step === STEPS.length - 1 ? 'ENVIAR REPORTE' : 'SIGUIENTE'}
        </button>
      </footer>

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

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