// pages/CronogramaPage.jsx — real data

function CronogramaPage() {
  // Calcular meses dinamicamente com base nas datas reais
  const startDate = PROJECT.startDate ? new Date(String(PROJECT.startDate).slice(0,10) + "T12:00:00") : null;
  const endDate = PROJECT.endDate ? new Date(String(PROJECT.endDate).slice(0,10) + "T12:00:00") : null;

  let monthsLabels = [];
  let totalMonths = 1;
  if (startDate && endDate) {
    const d = new Date(startDate);
    while (d <= endDate) {
      monthsLabels.push(d.toLocaleDateString("pt-BR", { month: "short", year: "2-digit" }).replace(".", ""));
      d.setMonth(d.getMonth() + 1);
    }
    totalMonths = Math.max(monthsLabels.length, 1);
  } else {
    monthsLabels = MONTHS;
    totalMonths = monthsLabels.length;
  }

  // Posicao do hoje
  let todayPos = 50;
  if (startDate && endDate) {
    const now = new Date();
    const elapsed = Math.max(0, Math.min(1, (now - startDate) / (endDate - startDate)));
    todayPos = elapsed * 100;
  }

  const done = PHASES.filter(p => p.stage === "done").length;
  const active = PHASES.filter(p => p.stage === "active").length;
  const future = PHASES.filter(p => p.stage === "future").length;

  return (
    <div className="page" style={{ maxWidth: "none" }}>
      <div className="page-header">
        <div>
          <h1 className="page-title">Cronograma</h1>
          <div className="page-sub">
            {PHASES.length} fase{PHASES.length !== 1 ? "s" : ""}
            {PROJECT.startDate ? " · " + fmtDate(PROJECT.startDate) : ""}
            {PROJECT.endDate ? " → " + fmtDate(PROJECT.endDate) : ""}
          </div>
        </div>
      </div>

      <div className="grid grid-4" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label">Fases concluidas</div>
          <div className="kpi-value">{done}<span style={{ fontSize: 14, color: "#999", marginLeft: 4 }}>/ {PHASES.length}</span></div>
          <div className="kpi-foot"><span>{PHASES.filter(p => p.stage === "done").map(p => p.name).slice(0, 2).join(" · ") || "—"}</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Em andamento</div>
          <div className="kpi-value">{active}</div>
          <div className="kpi-foot"><span>{PHASES.filter(p => p.stage === "active").map(p => p.name).slice(0, 2).join(", ") || "—"}</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Fases futuras</div>
          <div className="kpi-value">{future}</div>
          <div className="kpi-foot"><span>previstas</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Progresso geral</div>
          <div className="kpi-value">{Math.round((PROJECT.progress || 0) * 100)}%</div>
          <div className="kpi-foot"><span>da obra</span></div>
        </div>
      </div>

      {PHASES.length === 0 ? (
        <div className="card" style={{ padding: 32, textAlign: "center", color: "#999" }}>
          Cronograma ainda nao cadastrado. Frentes de trabalho apareceriam aqui assim que forem configuradas.
        </div>
      ) : (
        <div className="gantt">
          <div className="gantt-head">
            <div>Fase</div>
            <div className="gantt-months" style={{ gridTemplateColumns: "repeat(" + totalMonths + ", 1fr)" }}>
              {monthsLabels.map((m, i) => (
                <div key={i} style={{ padding: "10px 4px", borderRight: i < totalMonths - 1 ? "1px solid var(--border)" : "none", textAlign: "center", fontSize: 10 }}>{m}</div>
              ))}
            </div>
          </div>
          {PHASES.map((p, i) => {
            const left = (Math.max(0, p.start) / totalMonths) * 100;
            const width = Math.max(0, ((p.end - p.start) / totalMonths) * 100);
            return (
              <div key={i} className="gantt-row">
                <div className="gantt-label">
                  <div className="gantt-label-name">{p.name}</div>
                  <div className="gantt-label-meta">
                    {p.stage === "done" ? "concluida" : p.stage === "active" ? Math.round(p.progress * 100) + "% concluido" : "prevista"}
                  </div>
                </div>
                <div className="gantt-track">
                  <div className={"gantt-bar " + (p.stage === "done" ? "done" : p.stage === "future" ? "future" : "")}
                    style={{ left: left + "%", width: width + "%" }}>
                    {p.stage === "active" && <div className="prog" style={{ width: (p.progress * 100) + "%" }} />}
                    <span style={{ position: "relative", zIndex: 1 }}>{Math.round(p.progress * 100)}%</span>
                  </div>
                  <div className="gantt-today" style={{ left: todayPos + "%" }} />
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.CronogramaPage = CronogramaPage;