// ============================================================
// Acqua Riacho Verde — Seção Lotes Disponíveis (dinâmica)
// Dados: lotes-data.js (gerado da planilha oficial). Sem valores.
// ============================================================

const LOTE_STATUS_LABEL = { disponivel: "Disponível", reservado: "Reservado" };

function fmtArea(a) {
  return a.toLocaleString("pt-BR", { minimumFractionDigits: 0, maximumFractionDigits: 2 });
}

function LotesDisponiveis({ onNav }) {
  const base = (window.LOTES_DATA && window.LOTES_DATA.lotes) || [];
  const atualizado = new Date().toLocaleDateString("pt-BR");

  const [quadra, setQuadra] = React.useState("todas");
  const [somenteDisp, setSomenteDisp] = React.useState(true);
  const [ordem, setOrdem] = React.useState("codigo");
  const [sel, setSel] = React.useState([]);

  const quadras = React.useMemo(() => {
    const set = [];
    base.forEach((l) => { if (set.indexOf(l.q) === -1) set.push(l.q); });
    return set;
  }, [base]);

  const filtrados = React.useMemo(() => {
    let out = base.filter((l) => (quadra === "todas" || l.q === quadra) && (!somenteDisp || l.st === "disponivel"));
    if (ordem === "area-desc") out = out.slice().sort((a, b) => b.area - a.area);
    else if (ordem === "area-asc") out = out.slice().sort((a, b) => a.area - b.area);
    return out;
  }, [base, quadra, somenteDisp, ordem]);

  const grupos = React.useMemo(() => {
    if (ordem !== "codigo") return [{ q: null, itens: filtrados }];
    const map = [];
    filtrados.forEach((l) => {
      let g = map.filter((x) => x.q === l.q)[0];
      if (!g) { g = { q: l.q, itens: [] }; map.push(g); }
      g.itens.push(l);
    });
    return map;
  }, [filtrados, ordem]);

  function key(l) { return l.q + "-" + l.n; }
  function toggle(l) {
    if (l.st !== "disponivel") return;
    const k = key(l);
    setSel(function (prev) { return prev.indexOf(k) === -1 ? prev.concat([k]) : prev.filter(function (x) { return x !== k; }); });
  }

  const selLotes = base.filter(function (l) { return sel.indexOf(key(l)) !== -1; });
  const areaSel = selLotes.reduce(function (s, l) { return s + l.area; }, 0);
  const codigos = selLotes.map(function (l) { return "QD " + l.q + " / " + l.n; }).join(", ");
  const waHref = "https://wa.me/5598991051950?text=" + encodeURIComponent(
    "Olá! Tenho interesse " + (selLotes.length === 1 ? "no lote " : "nos lotes ") + codigos +
    " do Acqua Riacho Verde. Poderia me enviar valores e condições de pagamento?"
  );

  return (
    <section className="arv-section lotes-disp" id="lotes">
      <div className="arv-section-head">
        <span className="arv-eyebrow">Lotes</span>
        <h2>Lotes disponíveis</h2>
        <p className="arv-section-sub">
          Selecione os que interessam e fale com nossa equipe.
        </p>
        <div className="arv-section-cta">
          <a className="arv-btn ghost" href="./assets/documents/planta-condominio.pdf" target="_blank" rel="noopener noreferrer" download>
            <i className="ph ph-download-simple"></i> Baixar planta do condomínio
          </a>
        </div>
      </div>

      <div className="arv-lotes-wrap">
        <div className="arv-lotes-toolbar">
          <div className="arv-quadra-chips">
            <button className={"arv-chip" + (quadra === "todas" ? " active" : "")} onClick={function () { setQuadra("todas"); }}>Todas</button>
            {quadras.map(function (q) {
              const disp = base.filter(function (l) { return l.q === q && l.st === "disponivel"; }).length;
              return (
                <button key={q} className={"arv-chip" + (quadra === q ? " active" : "")} onClick={function () { setQuadra(q); }}>
                  Quadra {q}<span className="arv-chip-num">{disp}</span>
                </button>
              );
            })}
          </div>
          <div className="arv-lotes-controls">
            <label className="arv-switch">
              <input type="checkbox" checked={somenteDisp} onChange={function (e) { setSomenteDisp(e.target.checked); }} />
              <span className="arv-switch-track"><span className="arv-switch-knob"></span></span>
              Somente disponíveis
            </label>
            <div className="arv-select-mini">
              <i className="ph ph-arrows-down-up"></i>
              <select value={ordem} onChange={function (e) { setOrdem(e.target.value); }}>
                <option value="codigo">Por quadra</option>
                <option value="area-desc">Maior área</option>
                <option value="area-asc">Menor área</option>
              </select>
            </div>
          </div>
        </div>

        {grupos.map(function (g, gi) {
          return (
            <div className="arv-lote-grupo" key={g.q || gi}>
              {g.q && <h3 className="arv-lote-grupo-tit">Quadra {g.q}<span>{g.itens.length} {g.itens.length === 1 ? "lote" : "lotes"}</span></h3>}
              <div className="arv-lote-grid">
                {g.itens.map(function (l) {
                  const k = key(l);
                  const ativo = sel.indexOf(k) !== -1;
                  return (
                    <button
                      key={k}
                      type="button"
                      className={"arv-lote-card " + l.st + (ativo ? " sel" : "")}
                      onClick={function () { toggle(l); }}
                      disabled={l.st !== "disponivel"}
                    >
                      <span className="arv-lote-num">{l.n}</span>
                      <span className="arv-lote-cod">QD {l.q}</span>
                      <span className="arv-lote-area">{fmtArea(l.area)} m²</span>
                      <span className={"arv-lote-status " + l.st}>{LOTE_STATUS_LABEL[l.st]}</span>
                      {ativo && <i className="ph ph-check-circle arv-lote-check"></i>}
                    </button>
                  );
                })}
              </div>
            </div>
          );
        })}

        {filtrados.length === 0 && (
          <p className="arv-lotes-vazio">Nenhum lote nesta seleção. Ajuste os filtros acima.</p>
        )}

        <p className="arv-lotes-nota">
          Atualizado em {atualizado}. Disponibilidade sujeita a confirmação comercial. Valores e condições de pagamento são informados pela equipe de vendas.
        </p>
      </div>

      <div className={"arv-lotes-bar" + (selLotes.length ? " show" : "")}>
        <div className="arv-lotes-bar-inner">
          <div className="arv-lotes-bar-info">
            <strong>{selLotes.length} {selLotes.length === 1 ? "lote selecionado" : "lotes selecionados"}</strong>
            <span>{codigos} · {fmtArea(Math.round(areaSel * 100) / 100)} m² no total</span>
          </div>
          <div className="arv-lotes-bar-actions">
            <button className="arv-btn ghost" onClick={function () { setSel([]); }}>Limpar</button>
            <a className="arv-btn primary" href={waHref} target="_blank" rel="noopener noreferrer">
              <i className="ph ph-whatsapp-logo"></i> Consultar valores
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LotesDisponiveis });