// Financeiro — 4 sub-tabs page.

function PageFinanceiro({ onAction }) {
  const [tab, setTab] = React.useState("geral");

  return (
    <div className="idemo-page">
      <PageHead
        title="Financeiro"
        sub="Despesas, contas a receber e pagamentos de funcionários"
      />

      <div className="idemo-tabs">
        {[
          { id: "geral", l: "Visão Geral" },
          { id: "despesas", l: "Despesas" },
          { id: "receber", l: "Contas a Receber" },
          { id: "pagamentos", l: "Pagamentos" },
        ].map(t => (
          <button key={t.id}
            className={`idemo-tab ${tab === t.id ? "is-active" : ""}`}
            onClick={() => setTab(t.id)}>
            {t.l}
          </button>
        ))}
      </div>

      <div key={tab} className="idemo-page">
        {tab === "geral"      && <FinGeral />}
        {tab === "despesas"   && <FinDespesas onAction={onAction} />}
        {tab === "receber"    && <FinReceber onAction={onAction} />}
        {tab === "pagamentos" && <FinPagamentos onAction={onAction} />}
      </div>
    </div>
  );
}

// ----- Visão Geral --------------------------------------------------------
function FinGeral() {
  return (
    <>
      <div className="idemo-kpi-grid">
        <div className="idemo-kpi-card">
          <div className="idemo-kpi-label">Saídas do Mês</div>
          <div className="idemo-kpi-val">R$ 7.150,00</div>
          <div style={{ marginTop: 10, fontSize: 11.5, display: "flex", justifyContent: "space-between", color: "#5C6680" }}>
            <span>Pagamentos de equipe</span><span className="num" style={{ color: "#0B132A", fontWeight: 500 }}>R$ 6.600,00</span>
          </div>
          <div style={{ marginTop: 4, fontSize: 11.5, display: "flex", justifyContent: "space-between", color: "#5C6680" }}>
            <span>Outras despesas</span><span className="num" style={{ color: "#0B132A", fontWeight: 500 }}>R$ 550,00</span>
          </div>
        </div>
        <div className="idemo-kpi-card tint-green">
          <div className="idemo-kpi-label">Recebido no Mês</div>
          <div className="idemo-kpi-val">R$ 11.500,00</div>
          <div className="idemo-kpi-sub">faturas recebidas</div>
        </div>
        <div className="idemo-kpi-card tint-blue">
          <div className="idemo-kpi-label">A Receber</div>
          <div className="idemo-kpi-val">R$ 0,00</div>
          <div className="idemo-kpi-sub">faturas abertas</div>
        </div>
        <div className="idemo-kpi-card tint-red">
          <div className="idemo-kpi-label">Saldo Devedor Equipe</div>
          <div className="idemo-kpi-val">R$ 0,00</div>
          <div className="idemo-kpi-sub">diaristas não pagos</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="idemo-table" style={{ padding: 18 }}>
          <div style={{ fontWeight: 600, marginBottom: 14 }}>Atalhos</div>
          {[
            "Ver todas as despesas",
            "Gerenciar contas a receber",
            "Registrar pagamentos de equipe",
            "Histórico de pagamentos",
          ].map((s, i) => (
            <div key={i} style={{ padding: "8px 0", fontSize: 13.5, color: "#2A5BFF", borderBottom: i<3 ? "1px solid #EEF0F5" : "none" }}>
              → {s}
            </div>
          ))}
        </div>
        <div className="idemo-table" style={{ padding: 18 }}>
          <div style={{ fontWeight: 600, marginBottom: 14 }}>Mensalistas ativos</div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", fontSize: 13.5 }}>
            <span>Fernando Jose</span>
            <span className="num muted">R$ 0,00/mês</span>
          </div>
        </div>
      </div>
    </>
  );
}

// ----- Despesas -----------------------------------------------------------
const DESP_ROWS = [
  { d: "07/05/2026", desc: "Aluguel Andaime", cat: { l: "Empresa", c: "gray" }, obra: "—", val: "R$ 550,00", action: "cancel" },
  { d: "07/05/2026", desc: "Pagamento #005 — Referência 07/05/2026 a 07/05/2026", ref: "Pagamento #005", cat: { l: "Pagamento de Equipe", c: "purple" }, obra: "—", val: "R$ 850,00" },
  { d: "07/05/2026", desc: "Pagamento #004 — Referência 01/05/2026 a 31/05/2026", ref: "Pagamento #004", cat: { l: "Pagamento de Equipe", c: "purple" }, obra: "—", val: "R$ 5.250,00" },
  { d: "06/05/2026", desc: "Pagamento #003 — Referência 01/05/2026 a 06/05/2026", ref: "Pagamento #003", cat: { l: "Pagamento de Equipe", c: "purple" }, obra: "—", val: "R$ 500,00" },
  { d: "28/04/2026", desc: "Pagamento #002 — Referência 01/04/2026 a 30/04/2026", ref: "Pagamento #002", cat: { l: "Pagamento de Equipe", c: "purple" }, obra: "—", val: "R$ 500,00" },
  { d: "28/04/2026", desc: "Pagamento #001 — Referência 01/04/2026 a 30/04/2026", ref: "Pagamento #001", cat: { l: "Pagamento de Equipe", c: "purple" }, obra: "—", val: "R$ 250,00" },
];

function FinDespesas({ onAction }) {
  const cols = "95px 2fr 130px 100px 110px 90px";
  return (
    <div className="idemo-table" style={{ padding: 20 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>Despesas</h3>
        <button className="idemo-btn dark" onClick={() => onAction("Lançar despesa — disponível no app real")}>
          <IconPlus size={13} /> Lançar Despesa
        </button>
      </div>

      <div className="idemo-filters" style={{ marginBottom: 14 }}>
        <Filter label="Todas as origens" />
        <DateField />
        <DateField />
      </div>

      <div style={{ border: "1px solid #E3E7EF", borderRadius: 10, overflow: "hidden" }}>
        <div className="idemo-thead" style={{ gridTemplateColumns: cols }}>
          <span>Data</span><span>Descrição</span><span>Categoria</span><span>Obra/Local</span>
          <span style={{ textAlign: "right" }}>Valor</span><span style={{ textAlign: "right" }}></span>
        </div>
        {DESP_ROWS.map((r, i) => (
          <div key={i} className="idemo-trow" style={{ gridTemplateColumns: cols }}>
            <span className="num muted">{r.d}</span>
            <span>
              <div>{r.desc.split("Pagamento #").length > 1
                ? <>{r.desc.split(r.ref || "").map((part, j, arr) => (
                    j < arr.length - 1
                      ? <>{part}<span style={{ color: "#7C5BD8" }}>{r.ref}</span></>
                      : part
                  ))}</>
                : r.desc}
              </div>
            </span>
            <span><span className={`idemo-tag ${r.cat.c}`}>{r.cat.l}</span></span>
            <span className="muted">{r.obra}</span>
            <span className="num" style={{ textAlign: "right", fontWeight: 600 }}>{r.val}</span>
            <span style={{ textAlign: "right" }}>
              {r.action === "cancel"
                ? <button onClick={() => onAction("Despesa cancelada (mock)")} style={{ background: "transparent", border: "none", color: "#DC2626", fontSize: 12.5, cursor: "pointer", fontWeight: 500 }}>Cancelar</button>
                : <span className="muted" style={{ fontSize: 12.5 }}>Vinculado</span>}
            </span>
          </div>
        ))}
        <div className="idemo-trow" style={{ gridTemplateColumns: cols, background: "#FBFCFE" }}>
          <span></span>
          <span style={{ color: "#5C6680", fontSize: 12.5 }}>Total (6 despesas) — esta página: 6</span>
          <span></span><span></span>
          <span className="num" style={{ textAlign: "right", fontWeight: 700, fontSize: 14 }}>R$ 7.900,00</span>
          <span></span>
        </div>
      </div>
    </div>
  );
}

// ----- Contas a Receber ---------------------------------------------------
function FinReceber({ onAction }) {
  const cols = "100px 1.7fr 1.3fr 130px 110px";
  return (
    <>
      <div className="idemo-kpi-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        <div className="idemo-kpi-card tint-blue">
          <div className="idemo-kpi-label">A Receber (abertas)</div>
          <div className="idemo-kpi-val">R$ 0,00</div>
        </div>
        <div className="idemo-kpi-card tint-green">
          <div className="idemo-kpi-label">Recebido (total)</div>
          <div className="idemo-kpi-val">R$ 19.500,00</div>
        </div>
        <div className="idemo-kpi-card">
          <div className="idemo-kpi-label">Total faturas</div>
          <div className="idemo-kpi-val">2</div>
        </div>
      </div>

      <div className="idemo-table" style={{ padding: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>Faturas</h3>
          <button className="idemo-btn dark" onClick={() => onAction("Nova fatura — disponível no app real")}>
            <IconPlus size={13} /> Nova Fatura
          </button>
        </div>

        <div className="idemo-filters" style={{ marginBottom: 14 }}>
          <Filter label="Todos os status" />
          <Filter label="Obras e AT" />
        </div>

        <div style={{ border: "1px solid #E3E7EF", borderRadius: 10, overflow: "hidden" }}>
          <div className="idemo-thead" style={{ gridTemplateColumns: cols }}>
            <span>Data</span><span>Obra / Local</span><span>Período</span>
            <span style={{ textAlign: "right" }}>Valor</span><span>Status</span>
          </div>
          {[
            { d: "07/05/2026", obra: "Condomínio das Acácias", cli: "(Construtora FGR)", per: "01/05/2026 — 31/05/2026", v: "R$ 11.500,00" },
            { d: "28/04/2026", obra: "Condomínio das Acácias", cli: "(Construtora FGR)", per: "01/04/2026 — 30/04/2026", v: "R$ 8.000,00" },
          ].map((r, i) => (
            <div key={i} className="idemo-trow" style={{ gridTemplateColumns: cols }}>
              <span className="num muted">{r.d}</span>
              <span><span style={{ fontWeight: 600, color: "#2A5BFF" }}>{r.obra}</span> <span className="muted">{r.cli}</span></span>
              <span className="num muted">{r.per}</span>
              <span className="num" style={{ textAlign: "right", fontWeight: 600 }}>{r.v}</span>
              <span><span className="idemo-tag green">Recebida</span></span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ----- Pagamentos ---------------------------------------------------------
function FinPagamentos({ onAction }) {
  const [sub, setSub] = React.useState("funcionarios");
  return (
    <>
      <div style={{ display: "inline-flex", padding: 4, borderRadius: 8, background: "#fff", border: "1px solid #E3E7EF", marginBottom: 18 }}>
        {[{id:"funcionarios", l:"Funcionários"}, {id:"historico", l:"Histórico"}].map(s => (
          <button key={s.id}
            onClick={() => setSub(s.id)}
            style={{
              padding: "8px 18px", borderRadius: 6, border: "none",
              background: sub === s.id ? "#F1F3F8" : "transparent",
              fontSize: 13, fontWeight: sub === s.id ? 600 : 500,
              color: sub === s.id ? "#0B132A" : "#5C6680",
              cursor: "pointer",
            }}>{s.l}</button>
        ))}
      </div>

      <div className="idemo-kpi-grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
        <div className="idemo-kpi-card tint-red">
          <div className="idemo-kpi-label">Saldo Devedor Total</div>
          <div className="idemo-kpi-val">R$ 0,00</div>
          <div className="idemo-kpi-sub">todos os funcionários · todos os períodos</div>
        </div>
        <div className="idemo-kpi-card tint-green">
          <div className="idemo-kpi-label">Pago no Mês</div>
          <div className="idemo-kpi-val">R$ 6.600,00</div>
          <div className="idemo-kpi-sub">pagamentos confirmados este mês</div>
        </div>
      </div>

      <div className="idemo-table" style={{ padding: 20, marginBottom: 14 }}>
        <h3 style={{ margin: 0, marginBottom: 14, fontSize: 17, fontWeight: 600 }}>Diaristas</h3>
        <div style={{ border: "1px solid #E3E7EF", borderRadius: 10, overflow: "hidden" }}>
          <div className="idemo-thead" style={{ gridTemplateColumns: "30px 1.6fr 110px 1.2fr 100px 110px 24px" }}>
            <span></span><span>Funcionário</span><span>Último pag.</span><span>Período ref.</span>
            <span style={{ textAlign: "right" }}>Diárias pend.</span><span>Saldo devedor</span><span></span>
          </div>
          <div className="idemo-trow" style={{ gridTemplateColumns: "30px 1.6fr 110px 1.2fr 100px 110px 24px" }}>
            <span><input type="checkbox" /></span>
            <span>
              <div style={{ fontWeight: 500 }}>Filipe Freitas</div>
              <div style={{ fontSize: 11.5, color: "#5C6680" }}>Pedreiro</div>
              <div style={{ fontSize: 11.5, color: "#F59E0B" }}>1 vale: −R$ 750,00</div>
            </span>
            <span className="num muted">07/05/2026</span>
            <span className="num muted">01/05/2026 — 31/05/2026</span>
            <span className="num" style={{ textAlign: "right" }}>1 dia</span>
            <span className="green" style={{ fontWeight: 500 }}>Em dia</span>
            <span><IconChevron size={14} style={{ color: "#8892A8" }} /></span>
          </div>
        </div>
      </div>

      <div className="idemo-table" style={{ padding: 20 }}>
        <h3 style={{ margin: 0, marginBottom: 14, fontSize: 17, fontWeight: 600 }}>Mensalistas</h3>
        <div style={{ border: "1px solid #E3E7EF", borderRadius: 10, overflow: "hidden" }}>
          <div className="idemo-thead" style={{ gridTemplateColumns: "1.6fr 110px 1.2fr 110px 110px 90px" }}>
            <span>Funcionário</span><span>Último pag.</span><span>Período ref.</span>
            <span style={{ textAlign: "right" }}>Salário base</span><span>Saldo devedor</span><span></span>
          </div>
          <div className="idemo-trow" style={{ gridTemplateColumns: "1.6fr 110px 1.2fr 110px 110px 90px" }}>
            <span>
              <div style={{ fontWeight: 500 }}>Fernando Jose</div>
              <div style={{ fontSize: 11.5, color: "#5C6680" }}>Encarregado</div>
            </span>
            <span className="num muted">07/05/2026</span>
            <span className="num muted">07/05/2026 — 07/05/2026</span>
            <span className="num" style={{ textAlign: "right", fontWeight: 600, color: "#7C5BD8" }}>R$ 0,00<span style={{ fontSize: 10, color: "#5C6680", fontWeight: 400 }}>/mês</span></span>
            <span className="muted">—</span>
            <span><button onClick={() => onAction("Pagamento processado (mock)")} style={{ padding: "5px 14px", borderRadius: 6, border: "none", background: "#7C5BD8", color: "#fff", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>Pagar</button></span>
          </div>
        </div>
      </div>
    </>
  );
}

window.PageFinanceiro = PageFinanceiro;