/* Flow-OS — Recommendations engine + Weekly Executive Report */

function RecommendationsView() {
  const recs = [
    {
      severity: 'red',
      team: 'Producto · Madrid',
      verdict: 'Pausa de recuperación obligatoria',
      why: 'HRV colectivo ↓12% sostenido durante 10 días. Recovery 58. Sleep deficit 1h 18m por persona.',
      actions: [
        { l: 'Cancelar todas las reuniones no críticas hasta el viernes', impact: '+8 Flow' },
        { l: 'Posponer release de v3.2 una semana', impact: '+5 Flow' },
        { l: 'Habilitar viernes off compensatorio', impact: '+4 Flow' }
      ],
      effect: { from: 41, to: 62 },
      window: '8–14 días'
    },
    {
      severity: 'amber',
      team: 'Ventas · EMEA',
      verdict: 'Reducir carga · revisar cadencia',
      why: 'Recovery medio bajo (56) durante 6 días tras lanzamiento Q2. Picos de estrés en martes y jueves.',
      actions: [
        { l: 'Bloquear martes mañana sin reuniones', impact: '+3 Flow' },
        { l: 'Mover stand-up a asíncrono 2 días/sem', impact: '+2 Flow' }
      ],
      effect: { from: 54, to: 64 },
      window: '5–7 días'
    },
    {
      severity: 'green',
      team: 'Engineering · Backend',
      verdict: 'Ventana óptima para sprint intensivo',
      why: 'HRV +4ms vs línea base. Sueño 7h 32m. Recovery 74. Condiciones ideales para trabajo profundo.',
      actions: [
        { l: 'Lanzar sprint de migración esta semana', impact: 'aprovechar' },
        { l: 'Ventana de flow detectada: jueves 9–13h', impact: 'óptimo' }
      ],
      effect: { from: 78, to: 78 },
      window: 'Lun–Jue'
    }
  ];

  const colors = {
    red: { bg: 'var(--red)', soft: 'var(--red-soft)' },
    amber: { bg: 'var(--amber)', soft: 'var(--amber-soft)' },
    green: { bg: 'var(--green)', soft: 'var(--green-soft)' }
  };

  return (
    <div style={{ width: 1440, background: 'var(--bg)', padding: '32px 40px 48px', color: 'var(--ink)' }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>MOTOR DE RECOMENDACIONES · GENERADO HOY 06:14</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1.05, marginTop: 6, maxWidth: 720, textWrap: 'balance' }}>
            6 acciones que tu organización debería tomar esta semana.
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-4)' }}>IMPACTO POTENCIAL</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1, marginTop: 4, color: 'var(--green)' }}>+11<span style={{ fontFamily: 'var(--sans)', fontSize: 16, color: 'var(--ink-3)' }}> Flow Score global</span></div>
        </div>
      </div>

      {/* Stack of recommendation cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {recs.map((r, i) => {
          const c = colors[r.severity];
          return (
            <div key={i} style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 22, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr 280px', minHeight: 220 }}>
                {/* Left: severity + team */}
                <div style={{ padding: 26, borderRight: '1px solid var(--line)', position: 'relative', background: c.soft }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="dot" style={{ background: c.bg, width: 10, height: 10 }}></span>
                    <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: c.bg, fontWeight: 600 }}>
                      {r.severity === 'red' ? 'CRÍTICO' : r.severity === 'amber' ? 'AVISO' : 'OPORTUNIDAD'}
                    </span>
                  </div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 28, marginTop: 14, lineHeight: 1.1 }}>{r.team}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 10, letterSpacing: '0.08em' }}>VENTANA · {r.window}</div>
                  <div style={{ position: 'absolute', bottom: 26, left: 26, right: 26, paddingTop: 14, borderTop: '1px dashed rgba(0,0,0,0.15)' }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.2 }}>{r.verdict}</div>
                  </div>
                </div>

                {/* Middle: why + actions */}
                <div style={{ padding: 26 }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>POR QUÉ</div>
                  <div style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5, color: 'var(--ink-2)', textWrap: 'pretty' }}>{r.why}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)', marginTop: 16 }}>ACCIONES SUGERIDAS</div>
                  <div style={{ marginTop: 8 }}>
                    {r.actions.map((a, j) => (
                      <div key={j} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: j < r.actions.length - 1 ? '1px solid var(--line)' : 'none', gap: 16 }}>
                        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', flex: 1 }}>
                          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginTop: 2 }}>{String(j + 1).padStart(2, '0')}</span>
                          <span style={{ fontSize: 13 }}>{a.l}</span>
                        </div>
                        <div className="mono" style={{ fontSize: 10, padding: '3px 8px', background: c.soft, color: c.bg, borderRadius: 4, fontWeight: 600, whiteSpace: 'nowrap' }}>{a.impact}</div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Right: projection */}
                <div style={{ padding: 26, background: 'var(--bg)', borderLeft: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>PROYECCIÓN · 14D</div>
                  <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 18 }}>
                    <div>
                      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-4)' }}>HOY</div>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1, color: statusColor(r.effect.from).text }}>{r.effect.from}</div>
                    </div>
                    <div style={{ flex: 1, padding: '0 12px' }}>
                      <svg width="100%" height="40" viewBox="0 0 100 40">
                        <path d={`M 5 ${40 - r.effect.from * 0.35} Q 50 ${40 - (r.effect.from + r.effect.to) / 2 * 0.4 - 5} 95 ${40 - r.effect.to * 0.35}`} stroke={c.bg} strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
                        <circle cx="5" cy={40 - r.effect.from * 0.35} r="3" fill="var(--ink)" />
                        <circle cx="95" cy={40 - r.effect.to * 0.35} r="3" fill={c.bg} />
                      </svg>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-4)' }}>POST</div>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1, color: statusColor(r.effect.to).text }}>{r.effect.to}</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
                    <button style={{ flex: 1, padding: '11px 14px', borderRadius: 10, background: 'var(--ink)', color: '#fff', border: 'none', fontSize: 12, fontFamily: 'var(--sans)', fontWeight: 500 }}>Aplicar</button>
                    <button style={{ padding: '11px 14px', borderRadius: 10, background: 'transparent', border: '1px solid var(--line)', fontSize: 12, fontFamily: 'var(--sans)' }}>Posponer</button>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Footer note */}
      <div style={{ marginTop: 28, padding: 20, border: '1px dashed var(--line-2)', borderRadius: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--ink)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11 }}>✓</span>
          <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>Recomendaciones generadas a partir de agregados anónimos. Ningún empleado individual puede ser identificado.</span>
        </div>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>MODELO · neuro-v0.4 · CONFIANZA 87%</span>
      </div>
    </div>
  );
}

// ====== Weekly Executive Report (one-page) ======
function ExecutiveReport() {
  const departments = [
    { name: 'Engineering · Backend', flow: 78, delta: +6, status: 'green' },
    { name: 'Marketing · Brand', flow: 78, delta: +4, status: 'green' },
    { name: 'Diseño', flow: 73, delta: +1, status: 'green' },
    { name: 'Engineering · Frontend', flow: 71, delta: +2, status: 'green' },
    { name: 'Legal', flow: 70, delta: 0, status: 'green' },
    { name: 'Operaciones', flow: 67, delta: -1, status: 'amber' },
    { name: 'Customer Success', flow: 59, delta: -3, status: 'amber' },
    { name: 'Ventas · EMEA', flow: 54, delta: -8, status: 'amber' },
    { name: 'Producto · Madrid', flow: 41, delta: -19, status: 'red' }
  ];
  const trendLine = [71, 70, 68, 67, 66, 65, 64];

  return (
    <div style={{ width: 880, background: '#fbfaf6', color: 'var(--ink)', padding: '48px 56px', fontFamily: 'var(--sans)', boxShadow: '0 1px 0 var(--line)' }}>
      {/* Top */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', paddingBottom: 24, borderBottom: '1px solid var(--ink)' }}>
        <div>
          <FlowLogo size={16} />
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.14em', color: 'var(--ink-3)', marginTop: 18 }}>INFORME EJECUTIVO · SEMANA 18 · 27 ABR – 3 MAY 2026</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1.05, marginTop: 8, maxWidth: 540, textWrap: 'balance' }}>
            La organización entró en zona de recuperación esta semana.
          </div>
        </div>
        <div style={{ textAlign: 'right', minWidth: 160 }}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.1em', color: 'var(--ink-4)' }}>PARA</div>
          <div style={{ fontSize: 12, marginTop: 3 }}>P. Ferrer · CEO</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>L. Ortiz · CEO</div>
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.1em', color: 'var(--ink-4)', marginTop: 14 }}>NEUROTROPY · 138 PERSONAS</div>
        </div>
      </div>

      {/* Headline numbers */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 0, padding: '28px 0', borderBottom: '1px solid var(--line)' }}>
        <div style={{ paddingRight: 24, borderRight: '1px solid var(--line)' }}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>FLOW SCORE GLOBAL</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 8 }}>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 76, lineHeight: 0.9, color: 'var(--amber)' }}>64</span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--red)' }}>▼ 4</span>
          </div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 6 }}>VS SEMANA 17 · 68</div>
        </div>
        {[
          { l: 'EQUIPOS', v: '9', s: '2 en riesgo', c: 'var(--ink)' },
          { l: 'ALERTAS', v: '12', s: '1 roja · 4 amarillas', c: 'var(--amber)' },
          { l: 'OPT-IN', v: '82%', s: '+3 pts vs sem. 17', c: 'var(--green)' }
        ].map((s, i) => (
          <div key={i} style={{ padding: '0 24px', borderRight: i < 2 ? '1px solid var(--line)' : 'none' }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>{s.l}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, color: s.c, marginTop: 8 }}>{s.v}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 6 }}>{s.s}</div>
          </div>
        ))}
      </div>

      {/* Narrative + sparkline */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, padding: '28px 0', borderBottom: '1px solid var(--line)' }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)', marginBottom: 12 }}>RESUMEN EJECUTIVO</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.4, color: 'var(--ink-2)', textWrap: 'pretty' }}>
            El Flow Score colectivo cayó 4 puntos respecto a la semana anterior, principalmente por la degradación sostenida del equipo de <strong style={{ fontFamily: 'var(--sans)', fontWeight: 600 }}>Producto · Madrid</strong> (−19) y la presión post-lanzamiento sobre <strong style={{ fontFamily: 'var(--sans)', fontWeight: 600 }}>Ventas EMEA</strong> (−8). Los equipos técnicos mantienen recuperación óptima.
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 18 }}>
            {[
              { l: 'HRV medio org.', v: '46 ms', d: '−2', neg: true },
              { l: 'Sueño medio', v: '6h 58m', d: '−14m', neg: true },
              { l: 'Recovery medio', v: '64', d: '−3', neg: true },
              { l: 'Picos de estrés 7d', v: '47%', d: '+8%', neg: true }
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px dashed var(--line-2)' }}>
                <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>{m.l}</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12 }}>{m.v} <span style={{ color: m.neg ? 'var(--red)' : 'var(--green)', marginLeft: 4 }}>{m.d}</span></span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>FLOW SCORE · 7 SEM</div>
          <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 16, marginTop: 10 }}>
            <MiniSpark data={trendLine} width={300} height={120} color="var(--ink)" fill={true} />
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-4)' }}>
              <span>S12</span><span>S14</span><span>S16</span><span>S18</span>
            </div>
            <div style={{ marginTop: 14, padding: '10px 12px', background: 'var(--amber-soft)', borderRadius: 8 }}>
              <div className="mono" style={{ fontSize: 9, letterSpacing: '0.1em', color: '#7a5d10' }}>PROYECCIÓN S19</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 2, color: '#7a5d10' }}>59 – 63 <span style={{ fontFamily: 'var(--sans)', fontSize: 11 }}>si no se actúa</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* Departments stack */}
      <div style={{ padding: '24px 0' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)', marginBottom: 14 }}>EQUIPOS · ORDENADOS POR FLOW</div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {departments.map((d, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 50px 60px', alignItems: 'center', padding: '10px 0', borderBottom: i < departments.length - 1 ? '1px solid var(--line)' : 'none', gap: 16 }}>
              <div style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
                <StatusDot value={d.flow} />
                {d.name}
              </div>
              <div style={{ height: 8, background: 'var(--line)', borderRadius: 4, position: 'relative', overflow: 'hidden' }}>
                <div style={{ width: `${d.flow}%`, height: '100%', background: statusColor(d.flow).bg }}></div>
                <div style={{ position: 'absolute', left: '70%', top: 0, bottom: 0, width: 1, background: 'var(--ink)', opacity: 0.3 }}></div>
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, textAlign: 'right', color: statusColor(d.flow).text }}>{d.flow}</div>
              <div className="mono" style={{ fontSize: 11, textAlign: 'right', color: d.delta < 0 ? 'var(--red)' : (d.delta > 0 ? 'var(--green)' : 'var(--ink-3)') }}>
                {d.delta > 0 ? '+' : ''}{d.delta}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom: 3 priorities */}
      <div style={{ padding: '24px 0 0', borderTop: '1px solid var(--ink)' }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 16 }}>3 acciones para esta semana</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
          {[
            { n: '01', c: 'var(--red)', t: 'Pausa de recuperación', d: 'Producto · Madrid', text: 'Cancelar reuniones no críticas. Posponer release v3.2.' },
            { n: '02', c: 'var(--amber)', t: 'Reducir cadencia', d: 'Ventas · EMEA', text: 'Bloquear martes mañana. Stand-up asíncrono 2 días/sem.' },
            { n: '03', c: 'var(--green)', t: 'Aprovechar ventana', d: 'Engineering Backend', text: 'Ventana de flow jueves 9–13h. Lanzar sprint migración.' }
          ].map((p, i) => (
            <div key={i} style={{ padding: 18, border: '1px solid var(--line)', borderRadius: 12, background: 'var(--bg)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>{p.n}</span>
                <span className="dot" style={{ background: p.c, width: 8, height: 8 }}></span>
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.15 }}>{p.t}</div>
              <div className="mono" style={{ fontSize: 9, letterSpacing: '0.1em', color: 'var(--ink-4)', marginTop: 6 }}>{p.d.toUpperCase()}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 10, lineHeight: 1.45 }}>{p.text}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div style={{ marginTop: 28, paddingTop: 16, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-4)', letterSpacing: '0.1em' }}>
        <span>FLOW-OS · NEUROTROPY · INFORME GENERADO 03 MAY 2026 · 06:14</span>
        <span>K-MIN ≥ 5 · GDPR · LOPDGDD</span>
        <span>PÁGINA 1 / 1</span>
      </div>
    </div>
  );
}

Object.assign(window, { RecommendationsView, ExecutiveReport });