// pages/DiariosPage.jsx — real data com filtros, export PDF e lightbox de fotos

function DiariosPage() {
  const [selected, setSelected] = React.useState(() => DIARIES[0]?.id || null);
  const [filterOpen, setFilterOpen] = React.useState(false);
  const [filterStatus, setFilterStatus] = React.useState("all"); // all | normal | parado
  const [filterPeriod, setFilterPeriod] = React.useState("all"); // all | 7 | 30 | 90
  const [lightbox, setLightbox] = React.useState(null); // { photos: [...], index: 0 }

  // Filtra a lista de diarios
  const filtered = React.useMemo(() => {
    let list = DIARIES.slice();
    if (filterStatus !== "all") {
      list = list.filter((d) => {
        if (filterStatus === "parado") return d.status === "stopped";
        if (filterStatus === "normal") return d.status === "normal";
        if (filterStatus === "parcial") return d.status === "partial";
        return true;
      });
    }
    if (filterPeriod !== "all") {
      const days = parseInt(filterPeriod, 10);
      const from = Date.now() - days * 86400000;
      list = list.filter((d) => {
        const t = new Date(String(d.date).slice(0, 10) + "T12:00:00").getTime();
        return t >= from;
      });
    }
    return list;
  }, [filterStatus, filterPeriod]);

  // Garante que o selecionado pertence ao filtrado (senao seleciona o primeiro)
  React.useEffect(() => {
    if (!filtered.length) return;
    if (!filtered.find((d) => d.id === selected)) setSelected(filtered[0].id);
  }, [filtered, selected]);

  const diary = filtered.find((d) => d.id === selected) || filtered[0] || null;

  const handleExport = () => {
    const params = new URLSearchParams();
    if (filterPeriod !== "all") params.set("days", filterPeriod);
    if (filterStatus !== "all") params.set("status", filterStatus);
    const url = "/portal-cliente/api/diarios/export.pdf" + (params.toString() ? "?" + params : "");
    // Abre em nova aba — navegador mostra PDF inline, usuario pode salvar/imprimir
    window.open(url, "_blank");
  };

  const clearFilters = () => { setFilterStatus("all"); setFilterPeriod("all"); };
  const filtersActive = filterStatus !== "all" || filterPeriod !== "all";

  if (!DIARIES.length) {
    return (
      <div className="page">
        <div className="page-header">
          <div>
            <h1 className="page-title">Diarios de obra</h1>
            <div className="page-sub">0 registros</div>
          </div>
        </div>
        <div className="card" style={{ padding: 32, textAlign: "center", color: "#999" }}>
          Nenhum diario registrado ainda. Seu engenheiro lanca os primeiros diarios no sistema e eles aparecem aqui.
        </div>
      </div>
    );
  }

  const statusPill = (s, label) => {
    const cls = s === "normal" ? "green" : s === "partial" ? "amber" : "red";
    return <span className={"pill " + cls}><span className="status-dot" style={{ background: cls === "green" ? "#16a34a" : cls === "amber" ? "#b45309" : "#dc2626" }} />{label}</span>;
  };

  // Fotos reais do diario (com URL servida pelo backend do portal)
  const fotos = (diary?._raw?.DiarioFotos || []).map((f) => ({
    id: f.id,
    url: `/portal-cliente/api/diarios/foto/${f.id}`,
    legenda: f.legenda || null,
  }));

  return (
    <div className="page" style={{ maxWidth: "none" }}>
      <div className="page-header">
        <div>
          <h1 className="page-title">Diarios de obra</h1>
          <div className="page-sub">
            {filtered.length} {filtered.length === 1 ? "registro" : "registros"}
            {filtersActive && ` (filtrados de ${DIARIES.length})`}
            {" · " + PROJECT.name}
          </div>
        </div>
        <div className="page-actions" style={{ position: "relative" }}>
          <button
            className={"btn" + (filtersActive ? " primary" : "")}
            onClick={() => setFilterOpen((v) => !v)}
          >
            <I.Filter size={14} />
            {filtersActive ? `Filtros (${[filterStatus !== "all" && "status", filterPeriod !== "all" && "periodo"].filter(Boolean).length})` : "Filtrar"}
          </button>
          <button className="btn" onClick={handleExport} title="Baixar lista em PDF">
            <I.Download size={14} /> Exportar PDF
          </button>

          {filterOpen && (
            <div style={{
              position: "absolute", right: 0, top: "calc(100% + 6px)",
              background: "#fff", border: "1px solid var(--border)",
              borderRadius: 8, padding: 14, minWidth: 240,
              boxShadow: "0 10px 30px rgba(0,0,0,0.08)", zIndex: 20,
            }}>
              <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Status</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 12 }}>
                {[
                  { v: "all", l: "Todos" },
                  { v: "normal", l: "Normal" },
                  { v: "parcial", l: "Parcial" },
                  { v: "parado", l: "Parado" },
                ].map((opt) => (
                  <button
                    key={opt.v}
                    onClick={() => setFilterStatus(opt.v)}
                    className="btn"
                    style={{
                      height: 28, fontSize: 12,
                      background: filterStatus === opt.v ? "#0A0A0A" : "#fff",
                      color: filterStatus === opt.v ? "#fff" : "#3A3A3A",
                      borderColor: filterStatus === opt.v ? "#0A0A0A" : "var(--border)",
                    }}
                  >
                    {opt.l}
                  </button>
                ))}
              </div>
              <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Periodo</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {[
                  { v: "all", l: "Todos" },
                  { v: "7", l: "7 dias" },
                  { v: "30", l: "30 dias" },
                  { v: "90", l: "90 dias" },
                ].map((opt) => (
                  <button
                    key={opt.v}
                    onClick={() => setFilterPeriod(opt.v)}
                    className="btn"
                    style={{
                      height: 28, fontSize: 12,
                      background: filterPeriod === opt.v ? "#0A0A0A" : "#fff",
                      color: filterPeriod === opt.v ? "#fff" : "#3A3A3A",
                      borderColor: filterPeriod === opt.v ? "#0A0A0A" : "var(--border)",
                    }}
                  >
                    {opt.l}
                  </button>
                ))}
              </div>
              {filtersActive && (
                <button
                  onClick={clearFilters}
                  className="btn"
                  style={{ marginTop: 12, width: "100%", height: 30, fontSize: 12 }}
                >
                  Limpar filtros
                </button>
              )}
            </div>
          )}
        </div>
      </div>

      {filtered.length === 0 ? (
        <div className="card" style={{ padding: 32, textAlign: "center", color: "#999" }}>
          Nenhum diario corresponde aos filtros selecionados.
          <div style={{ marginTop: 12 }}>
            <button className="btn" onClick={clearFilters}>Limpar filtros</button>
          </div>
        </div>
      ) : (
      <div style={{ display: "grid", gridTemplateColumns: "340px 1fr", gap: 20 }}>
        {/* Lista */}
        <div className="card" style={{ height: "fit-content", maxHeight: "calc(100vh - 180px)", overflow: "auto" }}>
          <div className="card-head"><div className="card-title">Historico</div><div className="card-sub mono">{filtered.length}</div></div>
          <div>
            {filtered.map(d => (
              <div key={d.id} onClick={() => setSelected(d.id)}
                style={{
                  padding: "14px 16px",
                  borderBottom: "1px solid var(--border)",
                  borderLeft: selected === d.id ? "2px solid #0A0A0A" : "2px solid transparent",
                  paddingLeft: selected === d.id ? 14 : 16,
                  background: selected === d.id ? "#FAFAFA" : "transparent",
                  cursor: "pointer",
                }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div>
                    <div className="mono" style={{ fontSize: 12, color: "#0A0A0A", fontWeight: 500 }}>{fmtDateShort(d.date)} · {d.weekday}</div>
                    <div style={{ fontSize: 11, color: "#999", fontFamily: "var(--font-mono)", marginTop: 2 }}>{d.id}</div>
                  </div>
                  <span className="status-dot" style={{
                    background: d.status === "normal" ? "#16a34a" : d.status === "partial" ? "#b45309" : "#dc2626"
                  }} />
                </div>
                <div style={{ fontSize: 12, color: "#3A3A3A", marginTop: 8, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
                  {d.activities[0] || "Sem atividades registradas"}
                </div>
                <div style={{ display: "flex", gap: 10, marginTop: 8, fontSize: 10.5, color: "#999", fontFamily: "var(--font-mono)" }}>
                  <span>{d.photos} {d.photos === 1 ? "foto" : "fotos"}</span>
                  <span>·</span>
                  <span>{d.team.reduce((a, b) => a + b.count, 0)} {d.team.reduce((a, b) => a + b.count, 0) === 1 ? "pessoa" : "pessoas"}</span>
                  <span>·</span>
                  <span>{d.weather.temp}°</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Detalhe */}
        {diary && (
        <div className="stack" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="card">
            <div className="card-head" style={{ alignItems: "flex-start" }}>
              <div>
                <div style={{ fontSize: 20, fontWeight: 600, color: "#0A0A0A", letterSpacing: "-0.02em" }}>
                  {new Date(diary.date + "T12:00:00").toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
                </div>
                <div className="mono" style={{ fontSize: 12, color: "#999", marginTop: 4 }}>{diary.id} · {diary.author}</div>
              </div>
              {statusPill(diary.status, diary.statusLabel)}
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderBottom: "1px solid var(--border)" }}>
              <div style={{ padding: 18, borderRight: "1px solid var(--border)" }}>
                <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Clima</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{diary.weather.temp}°</div>
                <div style={{ fontSize: 11, color: "#666", marginTop: 2 }}>{diary.weather.cond}</div>
              </div>
              <div style={{ padding: 18, borderRight: "1px solid var(--border)" }}>
                <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Chuva</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{diary.weather.rain}<span style={{ fontSize: 12, color: "#999", marginLeft: 4 }}>mm</span></div>
              </div>
              <div style={{ padding: 18, borderRight: "1px solid var(--border)" }}>
                <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Equipe</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{diary.team.reduce((a, b) => a + b.count, 0)}</div>
                <div style={{ fontSize: 11, color: "#666", marginTop: 2 }}>{diary.team.reduce((a, b) => a + b.count, 0) === 1 ? "pessoa" : "pessoas"}</div>
              </div>
              <div style={{ padding: 18 }}>
                <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Fotos</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{diary.photos}</div>
              </div>
            </div>

            <div style={{ padding: 20 }}>
              <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 10 }}>Fotos do dia</div>
              {fotos.length > 0 ? (
                <div className="photo-grid">
                  {fotos.map((f, i) => (
                    <div
                      key={f.id}
                      className={"placeholder" + (i === 0 ? " hero" : "")}
                      onClick={() => setLightbox({ photos: fotos, index: i })}
                      style={{ cursor: "pointer", background: "#000", padding: 0 }}
                      title={f.legenda || "Foto " + (i + 1)}
                    >
                      <img
                        src={f.url}
                        alt={f.legenda || "Foto " + (i + 1)}
                        loading="lazy"
                        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                      />
                    </div>
                  ))}
                </div>
              ) : <div style={{ color: "#999", fontSize: 13 }}>Sem fotos neste dia.</div>}
            </div>

            <div style={{ padding: 20, borderTop: "1px solid var(--border)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
              <div>
                <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 10 }}>Atividades executadas</div>
                {diary.activities.length === 0 ? (
                  <div style={{ color: "#999", fontSize: 13 }}>Sem registros detalhados.</div>
                ) : (
                  <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                    {diary.activities.map((a, i) => (
                      <li key={i} style={{ padding: "10px 0", borderTop: i ? "1px solid var(--border)" : "none", fontSize: 13, color: "#3A3A3A", display: "flex", gap: 10 }}>
                        <span className="mono" style={{ color: "#bdbdbd", width: 22 }}>{String(i + 1).padStart(2, "0")}</span>
                        <span style={{ flex: 1 }}>{a}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
              <div>
                <div style={{ fontSize: 11, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 10 }}>Equipe presente</div>
                {diary.team.length === 0 ? (
                  <div style={{ color: "#999", fontSize: 13 }}>Nenhum colaborador em campo.</div>
                ) : (
                  <table className="t" style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden" }}>
                    <tbody>
                      {diary.team.map((t, i) => (
                        <tr key={i}>
                          <td style={{ fontWeight: 500 }}>{t.role}</td>
                          <td style={{ fontSize: 12, color: "#666" }}>{t.company}</td>
                          <td className="mono right" style={{ fontWeight: 500 }}>{t.count}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
                {diary.note && (
                  <div style={{ marginTop: 16, padding: 12, background: "#FAFAFA", border: "1px solid var(--border)", borderRadius: 6, fontSize: 12, color: "#3A3A3A" }}>
                    <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4 }}>Observacao</div>
                    {diary.note}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
        )}
      </div>
      )}

      {/* Lightbox de fotos */}
      {lightbox && (
        <div
          style={{
            position: "fixed", inset: 0, background: "rgba(0,0,0,0.86)",
            zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center",
            flexDirection: "column", gap: 14,
          }}
          onClick={() => setLightbox(null)}
        >
          <div style={{ position: "absolute", top: 18, right: 24, display: "flex", gap: 12 }}>
            <span style={{ color: "#fff", fontSize: 13, fontFamily: "var(--font-mono)" }}>
              {lightbox.index + 1} / {lightbox.photos.length}
            </span>
            <button
              onClick={(e) => { e.stopPropagation(); setLightbox(null); }}
              style={{ background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", color: "#fff", borderRadius: 6, padding: "4px 10px", cursor: "pointer", fontSize: 13 }}
            >
              Fechar
            </button>
          </div>
          <img
            src={lightbox.photos[lightbox.index].url}
            alt={lightbox.photos[lightbox.index].legenda || "Foto"}
            style={{ maxWidth: "88vw", maxHeight: "80vh", borderRadius: 8, boxShadow: "0 20px 60px rgba(0,0,0,0.4)" }}
            onClick={(e) => e.stopPropagation()}
          />
          {lightbox.photos[lightbox.index].legenda && (
            <div style={{ color: "#fff", fontSize: 13, maxWidth: 600, textAlign: "center" }}>
              {lightbox.photos[lightbox.index].legenda}
            </div>
          )}
          <div style={{ display: "flex", gap: 10 }}>
            <button
              onClick={(e) => { e.stopPropagation(); setLightbox((l) => l && { ...l, index: (l.index - 1 + l.photos.length) % l.photos.length }); }}
              style={{ background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", color: "#fff", borderRadius: 6, padding: "8px 16px", cursor: "pointer", fontSize: 13 }}
            >
              ← Anterior
            </button>
            <button
              onClick={(e) => { e.stopPropagation(); setLightbox((l) => l && { ...l, index: (l.index + 1) % l.photos.length }); }}
              style={{ background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", color: "#fff", borderRadius: 6, padding: "8px 16px", cursor: "pointer", fontSize: 13 }}
            >
              Proxima →
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

window.DiariosPage = DiariosPage;