// pages/DashboardPage.jsx — real data

function DashboardPage({ onNav }) {
  const last = DIARIES[0] || null;
  const progressPct = Math.round((PROJECT.progress || 0) * 100);
  const paidPct = PROJECT.budget > 0 ? Math.round((PROJECT.paid / PROJECT.budget) * 100) : 0;

  const daysLeft = (() => {
    if (!PROJECT.endDate) return "—";
    try {
      const end = new Date(String(PROJECT.endDate).slice(0,10) + "T12:00:00");
      const today = new Date(); today.setHours(0,0,0,0);
      return Math.max(0, Math.round((end - today) / 86400000));
    } catch { return "—"; }
  })();
  const daysDone = (() => {
    if (!PROJECT.startDate) return 0;
    try {
      const start = new Date(String(PROJECT.startDate).slice(0,10) + "T12:00:00");
      const today = new Date(); today.setHours(0,0,0,0);
      return Math.max(0, Math.round((today - start) / 86400000));
    } catch { return 0; }
  })();

  const equipeHoje = last ? (last.team || []).reduce((a, t) => a + (t.count || 0), 0) : 0;
  const equipeFuncs = last ? (last.team || []).length : 0;

  const formatBRLShort = (v) => {
    if (!v) return "R$ 0";
    if (v >= 1_000_000) return "R$ " + (v / 1_000_000).toFixed(2).replace(".", ",") + " mi";
    if (v >= 1_000) return "R$ " + (v / 1_000).toFixed(0) + " mil";
    return fmtBRL(v);
  };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Visao geral</h1>
          <div className="page-sub">{PROJECT.code} · {PROJECT.name}</div>
        </div>
      </div>

      <div className="grid grid-4" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label">Progresso geral</div>
          <div className="kpi-value">{progressPct}%</div>
          <div className="bar" style={{ marginTop: 10 }}><span style={{ width: progressPct + "%" }} /></div>
          <div className="kpi-foot">
            <span>{PHASES.filter(p => p.stage === "done").length} de {PHASES.length} frentes</span>
            <span>concluidas</span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Prazo</div>
          <div className="kpi-value">{daysLeft}<span style={{ fontSize: 14, color: "#999", marginLeft: 6 }}>dias</span></div>
          <div className="kpi-delta">restantes · entrega {PROJECT.endDate ? fmtDate(PROJECT.endDate) : "—"}</div>
          <div className="kpi-foot">
            <span>Inicio {PROJECT.startDate ? fmtDate(PROJECT.startDate) : "—"}</span>
            <span>{daysDone} dias corridos</span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Financeiro pago</div>
          <div className="kpi-value" style={{ fontSize: 28 }}>{formatBRLShort(PROJECT.paid)}</div>
          <div className="bar" style={{ marginTop: 10 }}><span style={{ width: paidPct + "%" }} /></div>
          <div className="kpi-foot"><span>{paidPct}% do total</span><span>de {formatBRLShort(PROJECT.budget)}</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Equipe no ultimo diario</div>
          <div className="kpi-value">{equipeHoje || 0}</div>
          <div className="kpi-delta">{equipeFuncs} funcoes registradas</div>
          <div className="kpi-foot">
            <span>Diarios: {DIARIES.length}</span>
            <span>ultimos 90 dias</span>
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 320px", marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Fisico vs Financeiro</div>
              <div className="card-sub">% executado · % pago do contrato</div>
            </div>
            <div className="chart-legend">
              <span><i className="legend-sw" style={{ background: "#0A0A0A" }} />Fisico</span>
              <span><i className="legend-sw" style={{ background: "#999", borderStyle: "dashed" }} />Financeiro</span>
            </div>
          </div>
          <div className="card-body">
            {FISICO_FINANCEIRO.length ? (
              <FisicoFinanceiro data={FISICO_FINANCEIRO} />
            ) : (
              <div style={{ padding: 40, textAlign: "center", color: "#999", fontSize: 13 }}>
                Aguardando registros de progresso e pagamentos.
              </div>
            )}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="card-title">Ultimo diario</div>
            <div className="card-sub mono">{last ? fmtDateShort(last.date) : "—"}</div>
          </div>
          <div className="card-body">
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <div className="mono" style={{ fontSize: 38, fontWeight: 500, letterSpacing: "-0.02em" }}>{WEATHER_TODAY.temp || 0}°</div>
              <div style={{ color: "#666", fontSize: 13 }}>{WEATHER_TODAY.cond}</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11 }}>
              <div><div style={{ color: "#999" }}>MIN/MAX</div><div style={{ color: "#0A0A0A" }}>{WEATHER_TODAY.min || 0}° / {WEATHER_TODAY.max || 0}°</div></div>
              <div><div style={{ color: "#999" }}>CHUVA</div><div style={{ color: "#0A0A0A" }}>{WEATHER_TODAY.rain || 0} mm</div></div>
              <div><div style={{ color: "#999" }}>VENTO</div><div style={{ color: "#0A0A0A" }}>{WEATHER_TODAY.wind || 0} km/h</div></div>
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
              <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Status</div>
              {last ? (
                <span className={"pill " + (last.status === "stopped" ? "red" : last.status === "partial" ? "amber" : "green")}>
                  <span className="status-dot" style={{ background: last.status === "stopped" ? "#dc2626" : last.status === "partial" ? "#b45309" : "#16a34a" }} />
                  {last.statusLabel}
                </span>
              ) : <span className="pill">Sem diarios</span>}
            </div>
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 320px", marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Progresso vs mao de obra</div>
              <div className="card-sub">Equipes registradas no diario</div>
            </div>
            <div className="chart-legend">
              <span><i className="legend-sw" style={{ background: "#0A0A0A" }} />Trabalhadores</span>
              <span><i className="legend-sw" style={{ background: "#999" }} />Progresso (%)</span>
            </div>
          </div>
          <div className="card-body">
            {EXEC_VS_TEAM.length ? <ExecTeam data={EXEC_VS_TEAM} /> : <div style={{ padding: 40, textAlign: "center", color: "#999", fontSize: 13 }}>Informe o total de trabalhadores no diario para acompanhar esta metrica.</div>}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="card-title">Proximos marcos</div>
            <div className="card-sub mono">{MILESTONES.length} eventos</div>
          </div>
          <div>
            {MILESTONES.length === 0 ? (
              <div style={{ padding: "22px 18px", color: "#999", fontSize: 12 }}>Nenhum marco agendado.</div>
            ) : MILESTONES.map((m, i) => (
              <div key={i} style={{ padding: "12px 18px", borderBottom: i < MILESTONES.length - 1 ? "1px solid var(--border)" : "none", display: "flex", gap: 12, alignItems: "center" }}>
                <div style={{ width: 44, textAlign: "center", borderRight: "1px solid var(--border)", paddingRight: 12 }}>
                  <div className="mono" style={{ fontSize: 18, fontWeight: 500, lineHeight: 1 }}>{fmtDateShort(m.date).split("/")[0]}</div>
                  <div className="mono" style={{ fontSize: 9, color: "#999", textTransform: "uppercase", marginTop: 2 }}>
                    {(() => { try { return new Date(String(m.date).slice(0,10) + "T12:00:00").toLocaleDateString("pt-BR", { month: "short" }).replace(".", ""); } catch { return "—"; } })()}
                  </div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500, color: "#0A0A0A" }}>{m.label}</div>
                  <div style={{ fontSize: 11, color: "#999", fontFamily: "var(--font-mono)", marginTop: 2 }}>em {m.days} dias</div>
                </div>
                {m.fin && <span className="pill">fin</span>}
              </div>
            ))}
          </div>
        </div>
      </div>

      {last && (
        <>
          <div className="section-label">Ultimo diario de obra</div>
          <div className="card">
            <div className="card-head">
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: "#0A0A0A", letterSpacing: "-0.01em" }}>
                    {(() => {
                      try {
                        return new Date(String(last.date).slice(0,10) + "T12:00:00").toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
                      } catch { return last.date; }
                    })()}
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: "#999", marginTop: 2 }}>{last.id} · {last.author}</div>
                </div>
                <span className={"pill " + (last.status === "stopped" ? "red" : last.status === "partial" ? "amber" : "green")}>
                  <span className="status-dot" style={{ background: last.status === "stopped" ? "#dc2626" : last.status === "partial" ? "#b45309" : "#16a34a" }} />
                  {last.statusLabel}
                </span>
              </div>
              <button className="btn ghost" onClick={() => onNav("diarios")}>Ver diario completo <I.Arrow size={13} /></button>
            </div>
            <div className="card-body">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                <div>
                  <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>Atividades</div>
                  {last.activities.length ? (
                    <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                      {last.activities.slice(0, 4).map((a, i) => (
                        <li key={i} style={{ padding: "7px 0", borderTop: i ? "1px solid var(--border)" : "none", fontSize: 13, color: "#3A3A3A", display: "flex", gap: 10 }}>
                          <span className="mono" style={{ color: "#bdbdbd", width: 20 }}>{String(i + 1).padStart(2, "0")}</span>
                          <span style={{ flex: 1 }}>{a}</span>
                        </li>
                      ))}
                    </ul>
                  ) : <div style={{ color: "#999", fontSize: 12 }}>Sem atividades registradas.</div>}
                </div>
                <div>
                  {(() => {
                    // Se o ultimo diario tem fotos, mostra as dele;
                    // senao, procura o diario mais recente com fotos ("Ultimas fotos da obra")
                    const diarioComFotos =
                      last.photos > 0 && last._raw?.DiarioFotos?.length
                        ? last
                        : DIARIES.find((d) => d.photos > 0 && d._raw?.DiarioFotos?.length);

                    if (!diarioComFotos) {
                      return (
                        <>
                          <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>
                            Fotos
                          </div>
                          <div style={{ color: "#999", fontSize: 12 }}>
                            Sem fotos registradas nos diarios desta obra ainda.
                          </div>
                        </>
                      );
                    }

                    const isLast = diarioComFotos.id === last.id;
                    const fotos = diarioComFotos._raw.DiarioFotos.slice(0, 4);
                    return (
                      <>
                        <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>
                          {isLast
                            ? `Fotos do dia · ${diarioComFotos.photos}`
                            : `Ultimas fotos · ${fmtDateShort(diarioComFotos.date)} (${diarioComFotos.photos})`}
                        </div>
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 4 }}>
                          {fotos.map((f, i) => (
                            <div
                              key={i}
                              className="placeholder"
                              onClick={() => onNav("diarios")}
                              style={{ aspectRatio: "1", cursor: "pointer", background: "#000", padding: 0 }}
                              title="Ver no diario"
                            >
                              <img
                                src={"/portal-cliente/api/diarios/foto/" + f.id}
                                alt={"Foto " + (i + 1)}
                                loading="lazy"
                                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                              />
                            </div>
                          ))}
                        </div>
                      </>
                    );
                  })()}
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

window.DashboardPage = DashboardPage;