// pages/mobile/MobileProgresso.jsx

function MobileProgresso() {
  const circ = 2 * Math.PI * 42;
  const pct = (PROJECT.progress || 0);
  const pctInt = Math.round(pct * 100);
  const done = PHASES.filter(p => p.stage === "done").length;

  return (
    <>
      <h1 className="m-title">Progresso</h1>
      <div className="m-subtitle">Frentes e execucao por etapa</div>

      <div className="m-card" style={{ marginBottom: 14 }}>
        <div className="m-card-body">
          <div className="m-donut">
            <svg width="96" height="96" viewBox="0 0 96 96">
              <circle cx="48" cy="48" r="42" fill="none" stroke="var(--bg-muted)" strokeWidth="8" />
              <circle
                cx="48" cy="48" r="42" fill="none"
                stroke="var(--fg)" strokeWidth="8"
                strokeDasharray={(pct * circ) + " " + circ}
                strokeDashoffset={0}
                transform="rotate(-90 48 48)"
                strokeLinecap="round"
              />
              <text x="48" y="53" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="20" fontWeight="500" fill="var(--fg)" style={{ letterSpacing: "-0.02em" }}>{pctInt}%</text>
            </svg>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Execucao geral</div>
              <div style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 4 }}>{done} / {PHASES.length} frentes concluidas</div>
              <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 4 }}>
                realizado {pctInt}%
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="m-section-label">Por etapa</div>
      <div className="m-card">
        {EXECUTION.map((e, i) => (
          <div key={i} style={{ padding: 14, borderBottom: i < EXECUTION.length - 1 ? "1px solid var(--border)" : "none" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{e.phase}</div>
              <div style={{ fontSize: 11, color: "var(--fg-4)", fontFamily: "var(--font-mono)" }}>
                {Math.round(e.actual * 100)}% <span style={{ color: "var(--fg-5)" }}>/ {Math.round(e.planned * 100)}%</span>
              </div>
            </div>
            <div style={{ position: "relative", height: 14, background: "var(--bg-muted)", borderRadius: 4, overflow: "hidden" }}>
              {/* planned */}
              <div style={{
                position: "absolute", left: 0, top: 0, bottom: 0,
                width: (e.planned * 100) + "%",
                background: "var(--border-strong)",
                borderRadius: 4,
              }} />
              {/* realized */}
              <div style={{
                position: "absolute", left: 0, top: 0, bottom: 0,
                width: (e.actual * 100) + "%",
                background: "var(--fg)",
                borderRadius: 4,
              }} />
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 6, fontSize: 10, color: "var(--fg-4)", fontFamily: "var(--font-mono)" }}>
              <span><span style={{ display: "inline-block", width: 8, height: 8, background: "var(--fg)", borderRadius: 2, marginRight: 4, verticalAlign: "middle" }} />realiz.</span>
              <span><span style={{ display: "inline-block", width: 8, height: 8, background: "var(--border-strong)", borderRadius: 2, marginRight: 4, verticalAlign: "middle" }} />previsto</span>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

window.MobileProgresso = MobileProgresso;