// pages/mobile/MobileDashboard.jsx — real data

function MobileDashboard({ onNav, onOpenCam }) {
  const last = DIARIES[0] || null;
  const user = window.PORTAL_USER || {};
  const firstName = (user.nome || "").split(" ")[0] || "cliente";
  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 equipeHoje = last ? (last.team || []).reduce((a, t) => a + (t.count || 0), 0) : 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 (
    <>
      <h1 className="m-title">Ola, {firstName}.</h1>
      <div className="m-subtitle">{PROJECT.name || "Sua obra"}</div>

      <div className="m-quick-row">
        <button className="m-quick" onClick={() => onNav("diarios")}>
          <span className="ico"><I.Book size={15} /></span>
          <span>Diarios</span>
        </button>
        <button className="m-quick" onClick={() => onNav("cameras")}>
          <span className="ico"><I.Cam size={15} /></span>
          <span>Cameras</span>
        </button>
        <button className="m-quick" onClick={() => onNav("financeiro")}>
          <span className="ico"><I.Wallet size={15} /></span>
          <span>Financ.</span>
        </button>
        <button className="m-quick" onClick={() => onNav("cronograma")}>
          <span className="ico"><I.Calendar size={15} /></span>
          <span>Prazo</span>
        </button>
      </div>

      <div className="m-kpi-scroll">
        <div className="m-kpi">
          <div className="m-kpi-label">Progresso</div>
          <div className="m-kpi-value">{progressPct}%</div>
          <div className="bar" style={{ marginTop: 8 }}><span style={{ width: progressPct + "%" }} /></div>
          <div className="m-kpi-foot">{PHASES.filter(p => p.stage === "done").length} de {PHASES.length} frentes</div>
        </div>
        <div className="m-kpi">
          <div className="m-kpi-label">Prazo</div>
          <div className="m-kpi-value">{daysLeft}<span style={{ fontSize: 11, color: "#999", marginLeft: 4 }}>d</span></div>
          <div className="m-kpi-foot">entrega {PROJECT.endDate ? fmtDate(PROJECT.endDate) : "—"}</div>
        </div>
        <div className="m-kpi">
          <div className="m-kpi-label">Pago</div>
          <div className="m-kpi-value" style={{ fontSize: 20 }}>{formatBRLShort(PROJECT.paid)}</div>
          <div className="bar" style={{ marginTop: 8 }}><span style={{ width: paidPct + "%" }} /></div>
          <div className="m-kpi-foot">{paidPct}% de {formatBRLShort(PROJECT.budget)}</div>
        </div>
        <div className="m-kpi">
          <div className="m-kpi-label">Equipe</div>
          <div className="m-kpi-value">{equipeHoje}</div>
          <div className="m-kpi-foot">ultimo diario</div>
        </div>
      </div>

      <div className="m-weather-chip">
        <I.Cloud size={26} />
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
            <div className="m-weather-temp">{WEATHER_TODAY.temp || 0}°</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{WEATHER_TODAY.cond}</div>
          </div>
          <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 2 }}>
            {WEATHER_TODAY.min || 0}°/{WEATHER_TODAY.max || 0}° · {WEATHER_TODAY.rain || 0}mm · {WEATHER_TODAY.wind || 0} km/h
          </div>
        </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.status === "stopped" ? "parado" : last.status === "partial" ? "parcial" : "normal"}
          </span>
        )}
      </div>

      {last && (
        <>
          <div className="m-section-label">
            <span>Ultimo diario</span>
            <a onClick={() => onNav("diarios")}>ver todos <I.Chevron size={10} /></a>
          </div>
          <div className="m-card" onClick={() => onNav("diarios")} style={{ cursor: "pointer" }}>
            <div className="m-card-body">
              <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 10 }}>
                <div style={{ width: 48, textAlign: "center", borderRight: "1px solid var(--border)", paddingRight: 10, fontFamily: "var(--font-mono)" }}>
                  <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1 }}>{fmtDateShort(last.date).split("/")[0]}</div>
                  <div style={{ fontSize: 9, color: "var(--fg-4)", textTransform: "uppercase", marginTop: 3 }}>
                    {(() => { try { return new Date(String(last.date).slice(0,10) + "T12:00:00").toLocaleDateString("pt-BR", { month: "short" }).replace(".", ""); } catch { return ""; } })()}
                  </div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{last.weekday}</div>
                  <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 1 }}>{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>
              {last.activities.length > 0 && (
                <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                  {last.activities.slice(0, 3).map((a, i) => (
                    <li key={i} style={{ padding: "6px 0", borderTop: i ? "1px solid var(--border)" : "none", fontSize: 12.5, color: "var(--fg-2)", display: "flex", gap: 8 }}>
                      <span className="mono" style={{ color: "var(--fg-5)", width: 18, flexShrink: 0 }}>{String(i + 1).padStart(2, "0")}</span>
                      <span>{a}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        </>
      )}

      {CAMERAS.length > 0 && (
        <>
          <div className="m-section-label">
            <span>Cameras ao vivo</span>
            <a onClick={() => onNav("cameras")}>ver todas <I.Chevron size={10} /></a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {CAMERAS.slice(0, 2).map((c) => (
              <div key={c.id} className="m-cam" onClick={() => onOpenCam(c)}>
                <div className="cam-stripes"></div>
                <div className="cam-overlay">
                  <div className="cam-top">
                    <div className="cam-tag"><I.Dot size={6} className="cam-live" /> LIVE</div>
                    <div className="cam-tag">{c.id}</div>
                  </div>
                  <div>
                    <div className="cam-name" style={{ fontSize: 11 }}>{c.name}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      {MILESTONES.length > 0 && (
        <>
          <div className="m-section-label">Proximos marcos</div>
          <div className="m-card">
            {MILESTONES.map((m, i) => (
              <div key={i} className="m-mile">
                <div className="m-mile-date">
                  <div className="m-mile-d">{fmtDateShort(m.date).split("/")[0]}</div>
                  <div className="m-mile-m">
                    {(() => { 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, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{m.label}</div>
                  <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 1 }}>em {m.days} dias</div>
                </div>
                {m.fin && <span className="pill">fin</span>}
              </div>
            ))}
          </div>
        </>
      )}
    </>
  );
}

window.MobileDashboard = MobileDashboard;