// Área do Sócio — Dashboard + Status cards

function StatCard({ tone, value, valueTight, label, foot, icon, onClick }) {
  return (
    <div className={`as-stat as-stat--${tone}`} onClick={onClick}>
      <div className="as-stat-body">
        <div className={`as-stat-value ${valueTight ? "tight" : ""}`}>{value}</div>
        <div className="as-stat-label">{label}</div>
        {icon && <div className="as-stat-decoration">{icon}</div>}
      </div>
      {foot && <div className="as-stat-foot">{foot}</div>}
    </div>
  );
}

function Dashboard({ socio, setRoute, openModal }) {
  const feeDue = socio.mensalidade.status !== "em-dia";
  return (
    <>
      <h1 className="as-page-title">Olá, {socio.nomeCurto.split(" ")[0]}.</h1>
      <p className="as-page-sub">Bom te ver de novo. Aqui está o status do seu treino.</p>

      <div className="as-status-grid">
        <StatCard
          tone="neutral"
          value={socio.id}
          label="Cód. Sócio"
          icon={ICON.user}
          foot="Atualizar dados"
          onClick={() => setRoute("dados")}
        />
        <StatCard
          tone="belt"
          value={socio.faixa.curta}
          valueTight
          label="Graduação"
          icon={ICON.trophy}
          foot="Atualizar histórico"
          onClick={() => setRoute("graduacoes")}
        />
        <StatCard
          tone="classes"
          value={socio.aulasNaGraduacao}
          label="Aulas nesta graduação"
          icon={ICON.cap}
          foot="Ver mais"
          onClick={() => setRoute("historico")}
        />
        <StatCard
          tone={feeDue ? "fee-due" : "fee-paid"}
          value={socio.mensalidade.mes}
          valueTight
          label={feeDue ? "Mensalidade atrasada" : "Mensalidade em dia"}
          icon={feeDue ? ICON.ban : ICON.cash}
          foot="Ver mais"
          onClick={() => setRoute("mensalidades")}
        />
      </div>

      <div className="as-status-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        <StatCard
          tone="next"
          value={`${socio.proxAula.dia} ${socio.proxAula.hora}`}
          valueTight
          label={`Próxima aula · ${socio.proxAula.titulo}`}
          icon={ICON.clock}
          foot="Confirmar presença"
          onClick={() => openModal("agendar")}
        />
        <StatCard
          tone="exam"
          value={socio.proximoExame.data}
          valueTight
          label={`Próximo exame · ${socio.proximoExame.titulo}`}
          icon={ICON.star}
          foot="Ver detalhes"
          onClick={() => setRoute("eventos")}
        />
        {socio.questionarioPendente ? (
          <StatCard
            tone="warn"
            value="Pendente"
            valueTight
            label="Questionário de prontidão física"
            icon={ICON.heart}
            foot="Clique para preencher"
            onClick={() => setRoute("questionario")}
          />
        ) : (
          <StatCard
            tone="classes"
            value="Em dia"
            valueTight
            label="Questionário de prontidão"
            icon={ICON.heart}
            foot="Revisar respostas"
            onClick={() => setRoute("questionario")}
          />
        )}
      </div>

      <div className="as-two-col">
        <div className="as-panel">
          <div className="as-panel-h">
            Próximas aulas
            <a className="as-link-mini" onClick={(e) => { e.preventDefault(); setRoute("agendar"); }} href="#">Agendar mais ›</a>
          </div>
          {SLOTS.slice(0, 4).map((s, i) => (
            <div key={i} className="as-sched-row">
              <div className="as-sched-day">
                <div className="d">{s.data.split("/")[0]}</div>
                <div className="m">{s.dia}</div>
              </div>
              <div className="as-sched-info">
                <div className="t">{s.titulo} · {s.hora}</div>
                <div className="s">{s.vagas === 0 ? "Sem vagas" : `${s.vagas} vagas restantes`} · Tatame {(i % 2) + 1}</div>
              </div>
              <span className="as-sched-cta" onClick={() => openModal("agendar", s)}>
                {s.vagas === 0 ? "Lista de espera ›" : "Agendar ›"}
              </span>
            </div>
          ))}
        </div>

        <div className="as-panel">
          <div className="as-panel-h">Sua progressão</div>
          <BeltStrip current={socio.faixa.nome} />
        </div>
      </div>
    </>
  );
}

function BeltStrip({ current }) {
  const idx = FAIXAS.findIndex((f) => current.toLowerCase().includes(f.nome.toLowerCase()));
  return (
    <div className="as-belt-strip">
      {FAIXAS.map((f, i) => {
        const status = i < idx ? "is-done" : i === idx ? "is-current" : "is-future";
        return (
          <div key={f.nome} className="as-belt-row">
            <div className="as-belt-name" style={{ opacity: status === "is-future" ? 0.5 : 1 }}>{f.nome}</div>
            <div className="as-belt-bar" style={{ background: f.cor, opacity: status === "is-future" ? 0.25 : 1 }}>
              {f.nome === "Marrom" || f.nome === "Preta" ? <span className="as-belt-bar-end" /> : null}
            </div>
            <div className={`as-belt-status ${status}`}>
              {status === "is-current" ? "atual" : status === "is-done" ? "concluída" : f.kyu}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Dashboard, StatCard, BeltStrip });