const { useState } = React;

const DISCIPLINAS = [
  { id: 'parkour', label: 'Parkour', color: '#FF5F03', icon: '🏃' },
  { id: 'gimnasia', label: 'Gimnasia', color: '#1565C0', icon: '🤸' },
  { id: 'calistenia', label: 'Calistenia', color: '#2E7D32', icon: '💪' },
  { id: 'porrismo', label: 'Porrismo', color: '#E91E63', icon: ' break' },
];

const NIVELES = [
  { id: 'suave', label: 'Suave', color: '#4FC3F7', desc: 'Principiante' },
  { id: 'media', label: 'Media', color: '#FFB300', desc: 'Intermedio' },
  { id: 'fuerte', label: 'Fuerte', color: '#E53935', desc: 'Avanzado' },
];

const TIPOS = [
  { id: 'calentamiento', label: 'Calentamiento', icon: '🔥' },
  { id: 'tecnico', label: 'Técnico', icon: '🎯' },
  { id: 'estiramiento', label: 'Estiramiento', icon: '🧘' },
  { id: 'mixto', label: 'Mixto', icon: '⚡' },
];

const DURACIONES = [15, 30, 45, 60];

function EntrenaApp() {
  const [step, setStep] = useState(0);
  const [disciplina, setDisciplina] = useState(null);
  const [nivel, setNivel] = useState(null);
  const [tipo, setTipo] = useState(null);
  const [duracion, setDuracion] = useState(null);
  const [rutina, setRutina] = useState(null);

  const generar = () => {
    const r = generarRutina(disciplina, nivel, tipo, duracion);
    setRutina(r);
    setStep(4);
  };

  const reiniciar = () => { setStep(0); setDisciplina(null); setNivel(null); setTipo(null); setDuracion(null); setRutina(null); };

  const paso = (sel, siguiente) => (id) => { sel(id); setStep(siguiente); };

  const btnStyle = (active) => ({
    background: active ? '#A8C2001a' : '#141714',
    border: active ? '2px solid #A8C200' : '1px solid rgba(255,255,255,0.06)',
    borderRadius: 14,
    padding: '16px 14px',
    cursor: 'pointer',
    textAlign: 'left',
    color: '#f2f4f2',
    transition: 'all 0.2s',
    minHeight: 70,
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
  });

  return (
    <div style={{ minHeight: '100vh', background: '#0a0a0a', padding: '20px 16px 60px', maxWidth: 600, margin: '0 auto', fontFamily: 'Inter,sans-serif' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#A8C200', boxShadow: '0 0 8px rgba(168,194,0,0.6)', flexShrink: 0 }} />
        <span style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.7rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: '#A8C200' }}>ENTRENA · LCG</span>
      </div>
      <h1 style={{ fontFamily: 'Bebas Neue,sans-serif', fontWeight: 800, fontSize: 'clamp(2.4rem, 6vw, 4rem)', lineHeight: 0.95, color: '#f0f0f0', marginBottom: 24 }}>
        CREA TU <span style={{ color: '#A8C200' }}>RUTINA</span>
      </h1>

      {/* Step 0: Disciplina */}
      {step === 0 && (
        <div>
          <div style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 16, letterSpacing: 1, color: '#A8C200', marginBottom: 12 }}>1. DISCIPLINA</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {DISCIPLINAS.map(d => (
              <button key={d.id} onClick={paso(setDisciplina, 1)} style={btnStyle(disciplina === d.id)}>
                <span style={{ fontSize: 24 }}>{d.icon}</span>
                <span style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 16, letterSpacing: 1, color: d.color }}>{d.label}</span>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Step 1: Nivel */}
      {step === 1 && (
        <div>
          <div style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 16, letterSpacing: 1, color: '#A8C200', marginBottom: 12 }}>2. NIVEL</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            {NIVELES.map(n => (
              <button key={n.id} onClick={paso(setNivel, 2)} style={btnStyle(nivel === n.id)}>
                <span style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 16, letterSpacing: 1, color: n.color }}>{n.label}</span>
                <span style={{ fontSize: 10, color: '#a6ada6' }}>{n.desc}</span>
              </button>
            ))}
          </div>
          <button onClick={() => setStep(0)} style={{ marginTop: 16, background: 'transparent', color: '#888', border: 'none', cursor: 'pointer', fontFamily: 'Inter,sans-serif', fontSize: 13 }}>← Volver</button>
        </div>
      )}

      {/* Step 2: Tipo */}
      {step === 2 && (
        <div>
          <div style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 16, letterSpacing: 1, color: '#A8C200', marginBottom: 12 }}>3. TIPO DE EJERCICIO</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {TIPOS.map(t => (
              <button key={t.id} onClick={paso(setTipo, 3)} style={btnStyle(tipo === t.id)}>
                <span style={{ fontSize: 20 }}>{t.icon}</span>
                <span style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 15, letterSpacing: 1, color: '#f2f4f2' }}>{t.label}</span>
              </button>
            ))}
          </div>
          <button onClick={() => setStep(1)} style={{ marginTop: 16, background: 'transparent', color: '#888', border: 'none', cursor: 'pointer', fontFamily: 'Inter,sans-serif', fontSize: 13 }}>← Volver</button>
        </div>
      )}

      {/* Step 3: Duración */}
      {step === 3 && (
        <div>
          <div style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 16, letterSpacing: 1, color: '#A8C200', marginBottom: 12 }}>4. DURACIÓN</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {DURACIONES.map(d => (
              <button key={d} onClick={() => { setDuracion(d); }} style={btnStyle(duracion === d)}>
                <span style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 28, color: '#A8C200' }}>{d}</span>
                <span style={{ fontSize: 11, color: '#a6ada6' }}>minutos</span>
              </button>
            ))}
          </div>
          <button onClick={() => setStep(2)} style={{ marginTop: 16, background: 'transparent', color: '#888', border: 'none', cursor: 'pointer', fontFamily: 'Inter,sans-serif', fontSize: 13 }}>← Volver</button>
          <button onClick={generar} disabled={!duracion} style={{ marginTop: 16, width: '100%', background: duracion ? '#A8C200' : '#333', color: duracion ? '#0a0a0a' : '#666', border: 'none', borderRadius: 12, padding: '14px 18px', fontFamily: 'Inter,sans-serif', fontWeight: 800, fontSize: 15, cursor: duracion ? 'pointer' : 'not-allowed', minHeight: 48 }}>
            GENERAR RUTINA →
          </button>
        </div>
      )}

      {/* Step 4: Rutina */}
      {step === 4 && rutina && (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <div style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 16, letterSpacing: 1, color: '#A8C200' }}>TU RUTINA</div>
            <button onClick={reiniciar} style={{ background: '#A8C20022', color: '#A8C200', border: '1px solid #A8C20044', borderRadius: 8, padding: '6px 12px', fontFamily: 'Inter,sans-serif', fontWeight: 700, fontSize: 11, cursor: 'pointer' }}>NUEVA RUTINA</button>
          </div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
            <span style={{ background: '#A8C20022', color: '#A8C200', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 700 }}>{disciplina}</span>
            <span style={{ background: '#4FC3F722', color: '#4FC3F7', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 700 }}>{nivel}</span>
            <span style={{ background: '#E91E6322', color: '#E91E63', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 700 }}>{tipo}</span>
            <span style={{ background: '#FFB30022', color: '#FFB300', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 700 }}>{duracion} min</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {rutina.map((ej, i) => (
              <div key={i} style={{ background: '#141714', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12, padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                  <span style={{ width: 28, height: 28, borderRadius: 8, background: '#A8C2001a', border: '1px solid #A8C20044', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Bebas Neue,sans-serif', fontSize: 14, color: '#A8C200', flexShrink: 0 }}>{i + 1}</span>
                  <span style={{ fontFamily: 'Bebas Neue,sans-serif', fontSize: 15, letterSpacing: 0.5, color: '#f2f4f2' }}>{ej.nombre}</span>
                </div>
                <div style={{ fontFamily: 'Inter,sans-serif', fontSize: 12, color: '#a6ada6', marginBottom: 4 }}>{ej.duracion}</div>
                <div style={{ fontFamily: 'Inter,sans-serif', fontSize: 11, color: '#888' }}>{ej.descanso}</div>
                {ej.tips && ej.tips.length > 0 && (
                  <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 3 }}>
                    {ej.tips.map((tip, j) => (
                      <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
                        <span style={{ color: '#A8C200', fontSize: 10, marginTop: 2 }}>▸</span>
                        <span style={{ fontFamily: 'Inter,sans-serif', fontSize: 11, color: '#a6ada6', lineHeight: 1.4 }}>{tip}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
          <button onClick={reiniciar} style={{ marginTop: 20, width: '100%', background: '#A8C200', color: '#0a0a0a', border: 'none', borderRadius: 12, padding: '14px 18px', fontFamily: 'Inter,sans-serif', fontWeight: 800, fontSize: 15, cursor: 'pointer', minHeight: 48 }}>
            CREAR OTRA RUTINA
          </button>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<EntrenaApp />);