// pages/mobile/MobileDiarios.jsx

function MobileDiarios() {
  const [open, setOpen] = React.useState(null);
  const [period, setPeriod] = React.useState("all"); // all | 7 | 30

  const statusColor = (s) => s === "normal" ? "green" : s === "partial" ? "amber" : "red";

  const filtered = React.useMemo(() => {
    if (period === "all") return DIARIES;
    const days = parseInt(period, 10);
    const from = Date.now() - days * 86400000;
    return DIARIES.filter((d) => new Date(d.date + "T12:00:00").getTime() >= from);
  }, [period]);

  return (
    <>
      <h1 className="m-title">Diarios</h1>
      <div className="m-subtitle">
        {filtered.length} {filtered.length === 1 ? "registro" : "registros"} · {PROJECT.name}
      </div>

      <div className="m-seg" style={{ marginBottom: 14 }}>
        <button className={period === "all" ? "on" : ""} onClick={() => setPeriod("all")}>todos</button>
        <button className={period === "7" ? "on" : ""} onClick={() => setPeriod("7")}>ult. 7d</button>
        <button className={period === "30" ? "on" : ""} onClick={() => setPeriod("30")}>ult. 30d</button>
      </div>

      {filtered.length === 0 && (
        <div className="m-card" style={{ padding: 24, textAlign: "center", color: "var(--fg-4)", fontSize: 13 }}>
          Nenhum diario no periodo.
        </div>
      )}

      <div className="m-card">
        {filtered.map(d => {
          const day = d.date.split("-")[2];
          const mo = new Date(d.date + "T12:00:00").toLocaleDateString("pt-BR", { month: "short" }).replace(".", "");
          return (
            <div key={d.id} className="m-diary-row" onClick={() => setOpen(d)}>
              <div className="m-diary-date">
                <div className="m-diary-day">{day}</div>
                <div className="m-diary-mo">{mo}</div>
              </div>
              <div className="m-diary-body">
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                  <span className={"pill " + statusColor(d.status)} style={{ height: 18, fontSize: 10 }}>{d.statusLabel}</span>
                </div>
                <div style={{ fontSize: 12, color: "var(--fg-2)", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
                  {d.activities[0] || "Sem atividades registradas"}
                </div>
                <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 4 }}>
                  {d.weather.temp}° · {d.team.reduce((s, t) => s + t.count, 0)} pess. · {d.photos} fotos
                </div>
              </div>
              <I.Chevron size={14} style={{ color: "var(--fg-5)" }} />
            </div>
          );
        })}
      </div>

      {open && <DiaryBottomSheet diary={open} onClose={() => setOpen(null)} />}
    </>
  );
}

function DiaryBottomSheet({ diary, onClose }) {
  const d = diary;
  return (
    <>
      <div className="m-sheet-backdrop" onClick={onClose} />
      <div className="m-bsheet">
        <div className="m-sheet-handle" />
        <div className="m-sheet-head" style={{ background: "#fff" }}>
          <div>
            <div className="m-sheet-title">
              {new Date(d.date + "T12:00:00").toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long" })}
            </div>
            <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 2 }}>
              {d.id} · {d.author}
            </div>
          </div>
          <button className="m-sheet-close" onClick={onClose}><I.X size={14} /></button>
        </div>

        <div className="m-bsheet-body">
          <div style={{ padding: 14 }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 14 }}>
              <span className={"pill " + (d.status === "normal" ? "green" : d.status === "partial" ? "amber" : "red")}>
                <span className="status-dot" style={{ background: d.status === "normal" ? "#16a34a" : d.status === "partial" ? "#b45309" : "#dc2626" }} />
                {d.statusLabel}
              </span>
              <span className="pill">{d.weather.temp}° · {d.weather.cond}</span>
              <span className="pill">{d.team.reduce((s, t) => s + t.count, 0)} pessoas</span>
            </div>

            {d.note && (
              <div style={{ padding: 10, background: "#fffbeb", border: "1px solid #fef3c7", borderRadius: 8, fontSize: 12, color: "#92400e", marginBottom: 14 }}>
                <div style={{ fontSize: 9.5, textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 3, fontFamily: "var(--font-mono)" }}>Observação</div>
                {d.note}
              </div>
            )}

            <div className="m-section-label" style={{ margin: "0 0 8px" }}>Atividades</div>
            <div className="m-card" style={{ marginBottom: 14 }}>
              <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                {d.activities.map((a, i) => (
                  <li key={i} style={{ padding: "11px 14px", borderBottom: i < d.activities.length - 1 ? "1px solid var(--border)" : "none", fontSize: 13, color: "var(--fg-2)", display: "flex", gap: 10 }}>
                    <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 className="m-section-label" style={{ margin: "0 0 8px" }}>Equipe</div>
            <div className="m-card" style={{ marginBottom: 14 }}>
              {d.team.length === 0 ? (
                <div style={{ padding: 14, fontSize: 12.5, color: "var(--fg-4)" }}>Sem equipe em campo.</div>
              ) : d.team.map((t, i) => (
                <div key={i} style={{ padding: "10px 14px", borderBottom: i < d.team.length - 1 ? "1px solid var(--border)" : "none", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div>
                    <div style={{ fontSize: 12.5, fontWeight: 500 }}>{t.role}</div>
                    <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 1 }}>{t.company}</div>
                  </div>
                  <div className="mono" style={{ fontSize: 16, fontWeight: 500 }}>{t.count}</div>
                </div>
              ))}
            </div>

            <div className="m-section-label" style={{ margin: "0 0 8px" }}>Fotos · {d.photos}</div>
            <div className="photo-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
              {Array.from({ length: Math.min(d.photos, 9) }).map((_, i) => (
                <div key={i} className="placeholder">
                  <span className="placeholder-label" style={{ fontSize: 9, padding: "1px 5px" }}>{i + 1}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.MobileDiarios = MobileDiarios;