// pages/ProgressoPage.jsx — real data

function ProgressoPage() {
  const progressoGeral = (PROJECT.progress || 0);
  const pct = Math.round(progressoGeral * 100);

  const totalFrentes = PHASES.length;
  const doneFrentes = PHASES.filter(p => p.stage === "done").length;
  const activeFrentes = PHASES.filter(p => p.stage === "active").length;

  const avgRealized = EXECUTION.length
    ? EXECUTION.reduce((a, e) => a + (e.actual || 0), 0) / EXECUTION.length
    : progressoGeral;
  const avgPlanned = EXECUTION.length
    ? EXECUTION.reduce((a, e) => a + (e.planned || 0), 0) / EXECUTION.length
    : 1;

  const hoje = new Date().toLocaleDateString("pt-BR", { month: "short", year: "numeric" });

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Progresso por etapa</h1>
          <div className="page-sub">Execucao real × planejada · {hoje}</div>
        </div>
      </div>

      <div className="grid grid-3" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label">Conclusao geral</div>
          <div className="kpi-value">{pct}%</div>
          <div className="bar" style={{ marginTop: 10 }}><span style={{ width: pct + "%" }} /></div>
          <div className="kpi-foot"><span>{doneFrentes} / {totalFrentes} frentes</span><span>concluidas</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Frentes ativas</div>
          <div className="kpi-value">{activeFrentes}</div>
          <div className="kpi-foot"><span>em execucao</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Frentes pendentes</div>
          <div className="kpi-value">{totalFrentes - doneFrentes - activeFrentes}</div>
          <div className="kpi-foot"><span>aguardando inicio</span></div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <div className="card-title">Execucao por etapa</div>
            <div className="chart-legend">
              <span><i className="legend-sw" style={{ background: "#0A0A0A" }} />Realizado</span>
              <span><i className="legend-sw" style={{ background: "#999" }} />Previsto</span>
            </div>
          </div>
          <div className="card-body">
            {EXECUTION.length ? <ExecBars data={EXECUTION} /> : <div style={{ padding: 40, textAlign: "center", color: "#999", fontSize: 13 }}>Sem frentes registradas.</div>}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">Conclusao total</div><div className="card-sub mono">geral</div></div>
          <div className="card-body" style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <Donut value={progressoGeral} size={140} stroke={14} label="geral" sub="real." />
            <div style={{ flex: 1 }}>
              <div style={{ marginBottom: 12 }}>
                <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em" }}>Realizado</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{pct}%</div>
              </div>
              <div style={{ marginBottom: 12 }}>
                <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em" }}>Media realizada (frentes)</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{Math.round(avgRealized * 100)}%</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em" }}>Frentes concluidas</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{doneFrentes} / {totalFrentes}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {PHASES.filter(p => p.stage === "active").length > 0 && (
        <>
          <div className="section-label">Detalhamento das etapas ativas</div>
          <div className="grid grid-2" style={{ gap: 16 }}>
            {PHASES.filter(p => p.stage === "active").map((p, i) => (
              <div key={i} className="card">
                <div style={{ padding: 18 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 600, color: "#0A0A0A", letterSpacing: "-0.01em" }}>{p.name}</div>
                      <div className="mono" style={{ fontSize: 11, color: "#999", marginTop: 2 }}>em execucao</div>
                    </div>
                    <div className="mono" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{Math.round((p.progress || 0) * 100)}%</div>
                  </div>
                  <div className="bar"><span style={{ width: Math.round((p.progress || 0) * 100) + "%" }} /></div>
                  <div className="mono" style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontSize: 11, color: "#999" }}>
                    <span>inicio</span><span>hoje</span><span>fim</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

window.ProgressoPage = ProgressoPage;