// shaiAcademy — Dashboards (Academia, Coach, Alumno)

const DashboardAcademia = () => (
  <div className="page stack-l">
    {/* Editorial hero */}
    <div>
      <div className="eyebrow">Panel · Semana 16 · 2026</div>
      <h1 className="display" style={{fontSize: 72, margin: '8px 0 24px', maxWidth: 900}}>
        Buenos días, Shaira. Hay <em style={{fontStyle:'italic', color:'var(--accent)'}}>6 clases</em> y <em style={{fontStyle:'italic'}}>3 pagos pendientes</em> hoy.
      </h1>
    </div>

    {/* Stat band */}
    <div className="grid-4">
      <Stat label="Alumnos activos" value="108" sub={<><Icon name="arrow_up" size={11}/> +5 esta semana</>} trend="up"/>
      <Stat label="Asistencia promedio" value="92%" sub={<><Icon name="arrow_up" size={11}/> +3 pts vs mes pasado</>} trend="up"/>
      <Stat label="Ingresos Abril" value="S/ 18.4k" sub="73% de meta mensual"/>
      <Stat label="En mora" value="3" sub={<><Icon name="arrow_dn" size={11}/> -2 vs mes pasado</>} trend="up"/>
    </div>

    {/* Split columns */}
    <div className="split-2-wide">
      {/* Today's schedule */}
      <div>
        <SectionMarker num="01 / Hoy">Cancha <em>en vivo</em></SectionMarker>
        <div className="card">
          {CLASES_HOY.map((c, i) => (
            <div key={i} className="between" style={{padding: '18px 20px', borderBottom: i < CLASES_HOY.length - 1 ? '1px solid var(--rule)' : 'none'}}>
              <div className="row" style={{gap: 20}}>
                <div style={{minWidth: 60}}>
                  <div className="mono" style={{fontSize: 18, fontWeight: 500}}>{c.hora}</div>
                  <div className="tiny muted">{c.sala}</div>
                </div>
                <div>
                  <div style={{fontFamily:'var(--font-display)', fontSize: 20, letterSpacing: '-0.02em'}}>{c.grupo}</div>
                  <div className="small muted">{c.prof}</div>
                </div>
              </div>
              <div>
                {c.asistencia === 'completa' && <Badge tone="ok">Registrada</Badge>}
                {c.asistencia === 'pendiente' && <Badge tone="warn">Pendiente</Badge>}
                {c.asistencia == null && <span className="tiny muted mono">POR EMPEZAR</span>}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Right column */}
      <div className="stack-l">
        {/* Mora alerts */}
        <div>
          <div className="between" style={{marginBottom: 12}}>
            <div className="eyebrow" style={{whiteSpace: 'nowrap'}}>Alertas · Cobranza</div>
            <a className="link-ink tiny" style={{whiteSpace: 'nowrap'}}>Ver todos</a>
          </div>
          <div className="card" style={{padding: 0}}>
            {MORAS.map((m, i) => (
              <div key={i} className="between" style={{padding: '14px 16px', borderBottom: i < MORAS.length - 1 ? '1px solid var(--rule)' : 'none'}}>
                <div className="row" style={{gap: 12, minWidth: 0, flex: 1}}>
                  <Avatar name={m.alumno}/>
                  <div style={{minWidth: 0, overflow: 'hidden'}}>
                    <div style={{fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{m.alumno}</div>
                    <div className="tiny muted" style={{whiteSpace: 'nowrap'}}>{m.dias} días de atraso</div>
                  </div>
                </div>
                <div style={{textAlign: 'right', flex: 'none', whiteSpace: 'nowrap'}}>
                  <div className="mono" style={{fontSize: 13, fontWeight: 500}}>S/ {m.monto}</div>
                  <div className="tiny" style={{color: 'var(--danger)'}}>Vencido</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Activity */}
        <div>
          <div className="eyebrow" style={{marginBottom: 12}}>Actividad reciente</div>
          <div className="stack">
            {ACTIVIDAD.map((a, i) => (
              <div key={i} className="row" style={{gap: 12, alignItems: 'flex-start'}}>
                <span className="dot" style={{marginTop: 6, background: a.tipo === 'pago' ? 'var(--ok)' : a.tipo === 'plan' ? 'var(--accent)' : 'var(--ink-3)'}}></span>
                <div style={{flex: 1}}>
                  <div className="small">{a.texto}</div>
                  <div className="tiny muted mono">{a.tiempo.toUpperCase()}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>

    {/* Quote strip */}
    <div style={{padding: '40px 32px', background: 'var(--ink)', color: 'var(--paper)', borderRadius: 'var(--r-lg)', marginTop: 24}}>
      <div className="between" style={{alignItems: 'flex-start', gap: 32}}>
        <div>
          <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Momento del mes</div>
          <p className="pullquote" style={{color: 'var(--paper)', marginTop: 12, maxWidth: 720}}>
            "Sub-17 Voleibol pasó de 76% a 94% de asistencia después de ajustar el horario. Pequeños cambios, gran constancia."
          </p>
        </div>
        <div style={{minWidth: 240}}>
          <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Retención 6 meses</div>
          <div className="display" style={{fontSize: 88, color: 'var(--paper)', marginTop: 8}}>94<span style={{fontSize: 40, color: 'var(--ink-4)'}}>%</span></div>
        </div>
      </div>
    </div>
  </div>
);

const DashboardCoach = () => (
  <div className="page stack-l">
    <div>
      <div className="eyebrow">Entrenador · Prof. Laura Salcedo · Voleibol</div>
      <h1 className="display" style={{fontSize: 64, margin: '8px 0 16px', maxWidth: 900}}>
        Hoy entrenas a <em style={{fontStyle:'italic', color:'var(--accent)'}}>46 atletas</em> en 3 sesiones.
      </h1>
    </div>

    <div className="grid-4">
      <Stat label="Mis grupos" value="3" sub="44 alumnos activos"/>
      <Stat label="Próxima clase" value="15:30" sub="Sub-13 Voleibol · en 42 min"/>
      <Stat label="Planes activos" value="4" sub="1 en revisión"/>
      <Stat label="Solicitudes acceso" value="2" sub="Esperan aprobación del alumno"/>
    </div>

    <div className="split-main">
      <div>
        <SectionMarker num="01">Agenda de hoy</SectionMarker>
        <div className="card">
          {CLASES_HOY.filter(c => c.prof.includes('Salcedo')).map((c, i, arr) => (
            <div key={i} className="between" style={{padding: '20px', borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 'none'}}>
              <div className="row" style={{gap: 20}}>
                <div>
                  <div className="mono" style={{fontSize: 22, fontWeight: 500}}>{c.hora}</div>
                  <div className="tiny muted mono">{c.sala.toUpperCase()}</div>
                </div>
                <div>
                  <div style={{fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '-0.02em'}}>{c.grupo}</div>
                  <div className="small muted">14 alumnos · Enfoque: técnica de saque</div>
                </div>
              </div>
              <button className="btn btn-primary btn-sm">Pasar lista <Icon name="arrow_right" size={12}/></button>
            </div>
          ))}
        </div>

        <div style={{marginTop: 32}}>
          <SectionMarker num="02">Mis grupos</SectionMarker>
          <div className="grid-2">
            {GRUPOS.filter(g => g.profesor.includes('Salcedo')).map((g, i) => (
              <div key={i} className="card" style={{padding: 20}}>
                <div className="between">
                  <Badge>{g.disciplina}</Badge>
                  <span className="tiny muted mono">{g.alumnos} ALUMNOS</span>
                </div>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 28, margin: '16px 0 4px', letterSpacing: '-0.02em'}}>{g.nombre}</div>
                <div className="small muted">{g.horario}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="stack-l">
        <div>
          <div className="eyebrow" style={{marginBottom: 12}}>Planes de entrenamiento</div>
          <div className="card" style={{padding: 0}}>
            {[
              { nombre: 'Bloque Técnico · Saque', estado: 'aprobado', grupo: 'Sub-17' },
              { nombre: 'Preparación Física Abril', estado: 'revision', grupo: 'Sub-15' },
              { nombre: 'Fundamentos Individuales', estado: 'aprobado', grupo: 'Camila R.' },
              { nombre: 'Táctica 6v6', estado: 'borrador', grupo: 'Sub-17' },
            ].map((p, i, arr) => (
              <div key={i} className="between" style={{padding: '14px 16px', borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 'none'}}>
                <div>
                  <div style={{fontSize: 13, fontWeight: 500}}>{p.nombre}</div>
                  <div className="tiny muted">{p.grupo}</div>
                </div>
                {p.estado === 'aprobado' && <Badge tone="ok">Aprobado</Badge>}
                {p.estado === 'revision' && <Badge tone="warn">En revisión</Badge>}
                {p.estado === 'borrador' && <Badge>Borrador</Badge>}
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{marginBottom: 12}}>Atletas destacados esta semana</div>
          <div className="stack">
            {ALUMNOS.slice(0, 4).map((a, i) => (
              <div key={i} className="between card" style={{padding: 14}}>
                <div className="row" style={{gap: 12}}>
                  <Avatar name={a.nombre}/>
                  <div>
                    <div style={{fontSize: 13, fontWeight: 500}}>{a.nombre}</div>
                    <div className="tiny muted">{a.grupo}</div>
                  </div>
                </div>
                <div style={{textAlign: 'right'}}>
                  <div className="mono" style={{fontSize: 16, fontWeight: 500, color: 'var(--accent)'}}>+{(Math.random()*2 + 0.3).toFixed(1)}</div>
                  <div className="tiny muted">progreso</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </div>
);

const DashboardAlumno = () => {
  const asistenciaMes = 94;
  return (
    <div className="page stack-l">
      <div className="between" style={{alignItems: 'flex-end'}}>
        <div>
          <div className="eyebrow">Atleta · Sub-15 Voleibol · Dorsal 7</div>
          <h1 className="display" style={{fontSize: 72, margin: '8px 0 0', maxWidth: 900}}>
            Hola, <em style={{fontStyle:'italic'}}>Camila</em>. Próxima clase <em style={{color:'var(--accent)'}}>hoy 16:00</em>.
          </h1>
        </div>
        <button className="btn btn-ghost"><Icon name="qr" size={14}/> Check-in</button>
      </div>

      {/* Hero numbers grid */}
      <div className="split-3">
        {/* Asistencia hero */}
        <div className="card" style={{padding: 28, position: 'relative', overflow: 'hidden'}}>
          <div className="eyebrow">Asistencia · Abril</div>
          <div className="display" style={{fontSize: 160, lineHeight: 0.9, margin: '8px 0 16px', letterSpacing: '-0.04em'}}>
            {asistenciaMes}<span style={{fontSize: 64, color: 'var(--ink-3)'}}>%</span>
          </div>
          <div className="row" style={{gap: 20, fontSize: 12}}>
            <div><span className="dot" style={{background: 'var(--ink)', marginRight: 6}}></span>15 presente</div>
            <div><span className="dot" style={{background: 'var(--warn)', marginRight: 6}}></span>1 tardanza</div>
            <div><span className="dot" style={{background: 'var(--danger)', marginRight: 6}}></span>0 faltas</div>
          </div>
        </div>

        {/* Plan activo */}
        <div className="card" style={{padding: 24, background: 'var(--accent)', color: 'white', border: 'none'}}>
          <div className="eyebrow" style={{color: 'rgba(255,255,255,0.8)'}}>Plan activo</div>
          <div style={{fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.02em', marginTop: 8, lineHeight: 1.1}}>
            Bloque Técnico<br/><em style={{fontStyle:'italic'}}>Saque</em>
          </div>
          <div style={{marginTop: 24}}>
            <div className="between tiny" style={{marginBottom: 8, color: 'rgba(255,255,255,0.8)'}}>
              <span>Sesión 3 de 6</span>
              <span>50%</span>
            </div>
            <div className="bar" style={{background: 'rgba(255,255,255,0.3)'}}><span style={{background: 'white', width: '50%'}}></span></div>
          </div>
        </div>

        {/* Pago */}
        <div className="card" style={{padding: 24}}>
          <div className="eyebrow">Próximo pago</div>
          <div className="display" style={{fontSize: 44, margin: '8px 0 4px'}}>S/ 180</div>
          <div className="small muted">Mensualidad Mayo · vence 05 may</div>
          <div style={{marginTop: 20, padding: '12px 16px', background: 'var(--paper-3)', borderRadius: 8}}>
            <div className="tiny muted mono">ABRIL · PAGADO</div>
            <div className="small">S/ 180 · Yape · 05 abr</div>
          </div>
        </div>
      </div>

      {/* Radar + plan */}
      <div className="split-2">
        <div>
          <SectionMarker num="01">Habilidades</SectionMarker>
          <div className="card" style={{padding: 24, display: 'flex', justifyContent: 'center'}}>
            <Radar skills={HABILIDADES_VOLEIBOL} compare={HABILIDADES_PREV} size={340}/>
          </div>
          <div className="row" style={{gap: 16, marginTop: 16, fontSize: 12}}>
            <div className="row" style={{gap: 6}}><span className="dot" style={{background: 'var(--accent)'}}></span>Abril 2026</div>
            <div className="row" style={{gap: 6}}><span className="dot" style={{background: 'var(--ink-3)'}}></span>Marzo (comparativo)</div>
          </div>
        </div>

        <div>
          <SectionMarker num="02">Próximas sesiones</SectionMarker>
          <div className="stack">
            {PLAN_SESIONES.slice(2, 5).map((s, i) => (
              <div key={i} className="card" style={{padding: 18}}>
                <div className="between">
                  <div className="row" style={{gap: 16}}>
                    <div className="mono" style={{fontSize: 28, color: 'var(--ink-3)'}}>0{s.num}</div>
                    <div>
                      <div style={{fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em'}}>{s.foco}</div>
                      <div className="tiny muted">{s.dur} min · {s.ejercicios.length} ejercicios</div>
                    </div>
                  </div>
                  <Icon name="chevron" size={14}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DashboardAcademia, DashboardCoach, DashboardAlumno });