// Demo pages — each page renders inside the InteractiveDemo shell.
// Visually faithful to the BinGest screenshots; data is mocked.

// ----- Reusable bits ------------------------------------------------------

function PageHead({ title, sub, right }) {
  return (
    <div className="idemo-page-head">
      <div>
        <h2 className="idemo-h1">{title}</h2>
        {sub && <div className="idemo-h1-sub">{sub}</div>}
      </div>
      {right && <div style={{ display: "flex", gap: 8 }}>{right}</div>}
    </div>);

}

function Filter({ label, icon = true }) {
  return (
    <button className="idemo-filter">
      {label}
      {icon && <IconChevronDown size={13} />}
    </button>);

}

function DateField() {
  return (
    <span className="idemo-filter" style={{ color: "#8892A8" }}>
      dd / mm / aaaa <span style={{ marginLeft: 4 }}>📅</span>
    </span>);

}

// ===========================================================================
// 1. DASHBOARD (uses existing DashboardMock-style content)
// ===========================================================================

function PageDashboard() {
  return (
    <div className="idemo-page" style={{ marginTop: -10 }}>
      {/* Hello + export */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 18 }}>
        <div>
          <h2 className="idemo-h1">Olá, BinGest</h2>
          <div className="idemo-h1-sub">Pimba Construções · quarta-feira, 13 de maio</div>
        </div>
        <button className="idemo-btn ghost">
          <IconDownload size={14} /> Exportar DRE
        </button>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
        {["Consolidado", "Somente Obras", "Somente Assistência Técnica", "Por Cliente"].map((t, i) =>
        <button key={t}
        className="idemo-filter"
        style={i === 0 ? { background: "#0B132A", color: "#fff", borderColor: "#0B132A" } : {}}>
            {t}
          </button>
        )}
      </div>

      {/* KPIs */}
      <div className="idemo-kpi-grid">
        <div className="idemo-kpi-card">
          <div className="idemo-kpi-label">Obras Ativas</div>
          <div className="idemo-kpi-val">1</div>
        </div>
        <div className="idemo-kpi-card">
          <div className="idemo-kpi-label">Funcionários Ativos</div>
          <div className="idemo-kpi-val">2</div>
        </div>
        <div className="idemo-kpi-card tint-green">
          <div className="idemo-kpi-label">Receita Bruta Total</div>
          <div className="idemo-kpi-val">R$ 19.500,00</div>
          <div className="idemo-kpi-sub">maio de 2026</div>
        </div>
        <div className="idemo-kpi-card">
          <div className="idemo-kpi-label">Resultado Operacional</div>
          <div className="idemo-kpi-val">R$ 11.290,00</div>
          <div className="idemo-kpi-sub">57,9%</div>
        </div>
      </div>

      {/* Soft cards */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 18 }}>
        <div style={{ background: "#E9F0FE", padding: "14px 16px", borderRadius: 14, display: "flex", gap: 14, alignItems: "center" }}>
          <span style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(255,255,255,.7)", display: "grid", placeItems: "center", color: "#2A5BFF" }}>
            <IconBuilding size={18} />
          </span>
          <div>
            <div style={{ fontSize: 11.5, color: "#2A5BFF" }}>Obras</div>
            <div style={{ fontSize: 17, fontWeight: 600 }}>R$ 19.500,00</div>
            <div style={{ fontSize: 11, color: "#5C6680" }}>Margem bruta 57,9%</div>
          </div>
        </div>
        <div style={{ background: "#ECE7F6", padding: "14px 16px", borderRadius: 14, display: "flex", gap: 14, alignItems: "center" }}>
          <span style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(255,255,255,.7)", display: "grid", placeItems: "center", color: "#5E45A5" }}>
            <IconHelmet size={18} />
          </span>
          <div>
            <div style={{ fontSize: 11.5, color: "#5E45A5" }}>Assistência Técnica</div>
            <div style={{ fontSize: 17, fontWeight: 600 }}>R$ 0,00</div>
            <div style={{ fontSize: 11, color: "#5C6680" }}>Margem bruta 0,0%</div>
          </div>
        </div>
      </div>

      {/* DRE + chart */}
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1.2fr", gap: 14 }}>
        <div className="idemo-table">
          <div className="idemo-thead" style={{ background: "#0B132A", color: "#fff", gridTemplateColumns: "1fr 70px 110px" }}>
            <span>DRE Consolidado</span>
            <span style={{ textAlign: "right" }}>% Rec.</span>
            <span style={{ textAlign: "right" }}>Valor</span>
          </div>
          {[
          { l: "Receita Bruta Total", v: "R$ 19.500,00", strong: true },
          { l: "Obras", v: "R$ 19.500,00", indent: true },
          { l: "(−) Custos Diretos Totais", v: "−R$ 8.210,00", pct: "−42,1%", strong: true, neg: true },
          { l: "Equipe Obras", v: "−R$ 8.210,00", indent: true, neg: true },
          { l: "= Lucro Bruto", v: "R$ 11.290,00", pct: "57,9%", strong: true, pos: true },
          { l: "= Resultado Operacional", v: "R$ 11.290,00", pct: "57,9%", strong: true, pos: true }].
          map((r, i) =>
          <div key={i} className="idemo-trow" style={{ gridTemplateColumns: "1fr 70px 110px", padding: "10px 14px" }}>
              <span style={{ paddingLeft: r.indent ? 14 : 0, color: r.indent ? "#5C6680" : "#0B132A", fontWeight: r.strong ? 600 : 400 }}>{r.l}</span>
              <span className="num muted" style={{ textAlign: "right" }}>{r.pct || ""}</span>
              <span className="num" style={{ textAlign: "right", color: r.neg ? "#DC2626" : "#0B132A", fontWeight: r.strong ? 600 : 500 }}>{r.v}</span>
            </div>
          )}
        </div>

        <div className="idemo-table" style={{ padding: 16, display: "flex", flexDirection: "column" }}>
          <div style={{ fontSize: 10.5, letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600, color: "#0B132A", marginBottom: 8 }}>
            Evolução — últimos 6 meses
          </div>
          <MiniBarChart height={170} />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 6, fontSize: 11, color: "#5C6680" }}>
            <span><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 999, background: "#F59E0B", marginRight: 5, verticalAlign: -1 }} />Custo Dir.</span>
            <span><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 999, background: "#7C5BD8", marginRight: 5, verticalAlign: -1 }} />Rec. AT</span>
            <span><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 999, background: "#2A5BFF", marginRight: 5, verticalAlign: -1 }} />Rec. Obras</span>
            <span><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 999, background: "#16A34A", marginRight: 5, verticalAlign: -1 }} />Resultado</span>
          </div>
        </div>
      </div>
    </div>);

}

// ===========================================================================
// 2. CLIENTES
// ===========================================================================

function PageClientes({ onAction }) {
  return (
    <div className="idemo-page">
      <PageHead
        title="Clientes"
        sub="1 cliente"
        right={<button className="idemo-btn" onClick={() => onAction("Novo cliente — disponível no app real")}>
          <IconPlus size={13} /> Novo Cliente
        </button>} />
      
      <div className="idemo-filters">
        <Filter label="Todos os tipos" />
        <label style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "#5C6680" }}>
          <input type="checkbox" /> Mostrar inativos
        </label>
      </div>

      <div className="idemo-table">
        <div className="idemo-thead" style={{ gridTemplateColumns: "60px 1.4fr 80px 1.2fr 1fr 1fr 80px 90px" }}>
          <span></span><span>Nome</span><span>Tipo</span><span>Documento</span><span>Telefone</span><span>E-mail</span><span>Obras ativas</span><span>Status</span>
        </div>
        <div className="idemo-trow" style={{ gridTemplateColumns: "60px 1.4fr 80px 1.2fr 1fr 1fr 80px 90px" }}>
          <span>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: "#F1F3F8", color: "#5C6680", fontSize: 11, fontWeight: 600, display: "grid", placeItems: "center" }}>CO</span>
          </span>
          <span style={{ fontWeight: 500 }}>Construtora FGR</span>
          <span><span className="idemo-tag blue">PJ</span></span>
          <span className="num muted">71.304.389/0001-07</span>
          <span className="num muted">22 2222-2222</span>
          <span className="muted">—</span>
          <span><span className="idemo-tag blue" style={{ background: "#E9F0FE" }}>1</span></span>
          <span><span className="idemo-tag green"><span className="dot" />Ativo</span></span>
        </div>
      </div>
    </div>);

}

// ===========================================================================
// 3. FOLHA DE PONTO (Presenças)
// ===========================================================================

const FOLHA_ROWS = [
{ date: "07/05/2026", name: "Filipe Freitas", role: "Pedreiro", origem: "Obra", cliente: "—", local: "—", unidade: "—", d: 1, he: 0, alm: "—", tr: "—", muted: true },
{ date: "07/05/2026", name: "Filipe Freitas", role: "Pedreiro", origem: "Obra", cliente: "Construtora FGR", local: "Condomínio das Acácias", unidade: "2001 - T2", d: 1, he: 0, alm: "—", tr: "—" },
{ date: "06/05/2026", name: "Fernando Jose", role: "Encarregado", origem: "Obra", cliente: "Construtora FGR", local: "Condomínio das Acácias", unidade: "2001 - T2", d: 1, he: 1, alm: "Sim", tr: "Sim" },
{ date: "06/05/2026", name: "Filipe Freitas", role: "Pedreiro", origem: "Obra", cliente: "Construtora FGR", local: "Condomínio das Acácias", unidade: "2001 - T2", d: 1, he: 0, alm: "—", tr: "—" },
{ date: "28/04/2026", name: "Filipe Freitas", role: "Pedreiro", origem: "Obra", cliente: "Construtora FGR", local: "Condomínio das Acácias", unidade: "2001 - T2", d: 1, he: 0, alm: "Sim", tr: "—" }];


function PageFolha({ onAction }) {
  const cols = "90px 1.2fr 70px 1.2fr 1.3fr 90px 70px 70px 70px 70px";
  return (
    <div className="idemo-page">
      <PageHead
        title="Presenças"
        sub="Histórico unificado de lançamentos de presença — Obras e Assistência Técnica"
        right={
        <>
            <button className="idemo-btn" onClick={() => onAction("Lançar ponto — disponível no app real")}>
              <IconPlus size={13} /> Lançar Ponto
            </button>
            <button className="idemo-btn ghost">
              <IconDownload size={13} /> Exportar CSV
            </button>
          </>
        } />
      

      <div style={{ fontSize: 12.5, color: "#5C6680", marginBottom: 10 }}>5 lançamentos</div>

      <div className="idemo-filters">
        <Filter label="Todas as origens" />
        <Filter label="Todos os clientes" />
        <Filter label="Todas obras/locais" />
        <Filter label="Todos os funcionários" />
        <DateField />
        <DateField />
        <Filter label="Todos os status" />
      </div>

      <div className="idemo-table">
        <div className="idemo-thead" style={{ gridTemplateColumns: cols }}>
          <span>Data</span><span>Funcionário</span><span>Origem</span><span>Cliente</span>
          <span>Local/Obra</span><span>Unidade</span>
          <span style={{ textAlign: "right" }}>Diárias</span>
          <span style={{ textAlign: "right" }}>H. extra</span>
          <span style={{ textAlign: "center" }}>Almoço</span>
          <span style={{ textAlign: "center" }}>Transp.</span>
        </div>
        {FOLHA_ROWS.map((r, i) =>
        <div key={i} className="idemo-trow" style={{ gridTemplateColumns: cols, opacity: r.muted ? .55 : 1 }}>
            <span className="muted">{r.date}</span>
            <span>
              <div style={{ fontWeight: 500 }}>{r.name}</div>
              <div style={{ fontSize: 11.5, color: "#5C6680" }}>{r.role}</div>
            </span>
            <span><span className="idemo-tag blue" style={{ background: "#E9F0FE" }}>{r.origem}</span></span>
            <span className="muted" style={{ fontSize: 12.5 }}>{r.cliente}</span>
            <span className="muted" style={{ fontSize: 12.5 }}>{r.local}</span>
            <span className="muted" style={{ fontSize: 12.5 }}>{r.unidade}</span>
            <span className="num" style={{ textAlign: "right", fontWeight: 500 }}>{r.d}</span>
            <span className="num muted" style={{ textAlign: "right" }}>{r.he}</span>
            <span className="num green" style={{ textAlign: "center", fontWeight: 500 }}>{r.alm}</span>
            <span className="num green" style={{ textAlign: "center", fontWeight: 500 }}>{r.tr}</span>
          </div>
        )}
        <div className="idemo-trow" style={{ gridTemplateColumns: cols, background: "#FBFCFE", fontSize: 12 }}>
          <span></span><span></span><span></span><span></span><span></span>
          <span className="muted" style={{ textAlign: "right" }}>Totais (confirmados):</span>
          <span className="num" style={{ textAlign: "right", fontWeight: 600 }}>4</span>
          <span className="num" style={{ textAlign: "right", fontWeight: 600 }}>1</span>
          <span></span><span></span>
        </div>
      </div>
    </div>);

}

// ===========================================================================
// 4. OBRAS
// ===========================================================================

function PageObras({ onAction }) {
  return (
    <div className="idemo-page">
      <PageHead
        title="Obras"
        sub="1 obra encontrada"
        right={<button className="idemo-btn" onClick={() => onAction("Nova obra — disponível no app real")}>
          <IconPlus size={13} /> Nova Obra
        </button>} />
      

      <div className="idemo-filters">
        <Filter label="Todos os status" />
        <Filter label="Todos os tipos" />
        <button className="idemo-filter">Mostrar arquivadas</button>
      </div>

      <div className="idemo-card" onClick={() => onAction("Abrindo Condomínio das Acácias…")}>
        <div className="idemo-card-title">
          <span>Condomínio das Acácias</span>
          <span className="idemo-tag green"><span className="dot" />Ativa</span>
        </div>
        <div className="idemo-card-meta">
          <span className="idemo-tag blue">Entrega de Apto.</span>
          <span>1 unidade</span>
        </div>
        <div className="idemo-card-foot">
          <span className="muted">Início: 02/01/2025</span>
          <span style={{ fontWeight: 600, color: "#2A5BFF" }}>R$ 19.500,00 <span style={{ color: "#5C6680", fontWeight: 400 }}>este mês</span></span>
        </div>
      </div>
    </div>);

}

// ===========================================================================
// 5. SERVIÇOS
// ===========================================================================

const SERV_ROWS = [
{ unit: "2001 - T2 — 3Q", type: "1ª Vistoria — Unidade 2001 - T2", team: "—", status: "Concluído", ini: "07/05/2026", fim: "07/05/2026", val: "R$ 8.000,00" },
{ unit: "2001 - T2 — 3Q", type: "Pintura — Unidade 2001 - T2", team: "—", status: "Concluído", ini: "06/05/2026", fim: "07/05/2026", val: "R$ 3.500,00" },
{ unit: "2001 - T2 — 3Q", type: "1ª Vistoria — Unidade 2001 - T2", team: "—", status: "Concluído", ini: "06/05/2026", fim: "06/05/2026", val: "R$ 8.000,00" },
{ unit: "2001 - T2 — 3Q", type: "Pintura — Unidade 2001 - T2", team: "Filipe, Fernando", status: "Concluído", ini: "28/04/2026", fim: "28/04/2026", val: "R$ 3.500,00" },
{ unit: "2001 - T2 — 3Q", type: "1ª Vistoria — Unidade 2001 - T2", team: "Filipe", status: "Concluído", ini: "20/04/2026", fim: "28/04/2026", val: "R$ 8.000,00" }];


function PageServicos({ onAction }) {
  const cols = "100px 130px 1.6fr 1fr 110px 95px 95px 110px";
  return (
    <div className="idemo-page">
      <PageHead
        title="Serviços"
        sub="Todos os serviços da empresa"
        right={<button className="idemo-btn" onClick={() => onAction("Novo serviço — disponível no app real")}>
          <IconPlus size={13} /> Novo Serviço
        </button>} />
      

      <div style={{ marginBottom: 12, display: "flex", alignItems: "center", gap: 10, background: "#fff", border: "1px solid #E3E7EF", borderRadius: 8, padding: "8px 14px", color: "#8892A8", fontSize: 12.5, maxWidth: 520 }}>
        🔎 Pesquisar por unidade, obra, tipo de serviço…
      </div>

      <div style={{ fontSize: 12.5, color: "#5C6680", marginBottom: 10 }}>5 serviços</div>

      <div className="idemo-filters">
        <Filter label="Todas as origens" />
        <Filter label="Todas as obras" />
        <Filter label="Todos os tipos" />
        <Filter label="Todos os status" />
        <DateField />
        <DateField />
      </div>

      <div className="idemo-table">
        <div className="idemo-thead" style={{ gridTemplateColumns: cols }}>
          <span>Origem</span><span>Unidade</span><span>Tipo de serviço</span><span>Equipe</span>
          <span>Status</span><span>Início</span><span>Conclusão</span>
          <span style={{ textAlign: "right" }}>Receita</span>
        </div>
        {SERV_ROWS.map((r, i) =>
        <div key={i} className="idemo-trow" style={{ gridTemplateColumns: cols }}>
            <span>
              <span className="idemo-tag blue" style={{ background: "#E9F0FE" }}>Obra</span>
              <div style={{ fontSize: 11.5, color: "#5C6680", marginTop: 4 }}>Condomínio das Acácias</div>
            </span>
            <span className="muted" style={{ fontSize: 12 }}>{r.unit}</span>
            <span>{r.type}</span>
            <span className="muted" style={{ fontSize: 12 }}>{r.team}</span>
            <span><span className="idemo-tag green"><span className="dot" />{r.status}</span></span>
            <span className="num muted">{r.ini}</span>
            <span className="num muted">{r.fim}</span>
            <span className="num" style={{ textAlign: "right", fontWeight: 600 }}>{r.val}</span>
          </div>
        )}
      </div>
    </div>);

}

// ===========================================================================
// 6. EQUIPE
// ===========================================================================

function PageEquipe({ onAction }) {
  const cols = "1.4fr 1fr 100px 90px 90px 90px 100px 110px 80px";
  return (
    <div className="idemo-page">
      <PageHead
        title="Equipe"
        sub="Gerencie os funcionários da sua empresa"
        right={<button className="idemo-btn" onClick={() => onAction("Adicionar funcionário — disponível no app real")}>
          <IconPlus size={13} /> Adicionar Funcionário
        </button>} />
      

      <div className="idemo-filters">
        <Filter label="Todas as funções" />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "#5C6680" }}>
          <span style={{
            width: 32, height: 16, borderRadius: 999,
            background: "#E3E7EF", position: "relative"
          }}>
            <span style={{
              position: "absolute", top: 2, left: 2,
              width: 12, height: 12, borderRadius: 999,
              background: "#fff", boxShadow: "0 1px 2px rgba(0,0,0,.2)"
            }} />
          </span>
          Mostrar inativos e desligados
        </span>
      </div>

      <div style={{ fontSize: 12.5, color: "#5C6680", marginBottom: 10 }}>2 funcionários</div>

      <div className="idemo-table">
        <div className="idemo-thead" style={{ gridTemplateColumns: cols }}>
          <span>Nome</span><span>Função</span>
          <span style={{ textAlign: "right" }}>Diária/Salário</span>
          <span style={{ textAlign: "right" }}>Hora extra</span>
          <span style={{ textAlign: "right" }}>Almoço</span>
          <span style={{ textAlign: "right" }}>Transp.</span>
          <span>Telefone</span><span>Status</span><span></span>
        </div>
        <div className="idemo-trow" style={{ gridTemplateColumns: cols }}>
          <span style={{ fontWeight: 500 }}>Fernando Jose</span>
          <span><span className="idemo-tag blue">Encarregado</span></span>
          <span className="num" style={{ textAlign: "right" }}>R$ 0,00</span>
          <span className="num" style={{ textAlign: "right" }}>R$ 10,00</span>
          <span className="num" style={{ textAlign: "right" }}>R$ 0,00</span>
          <span className="num" style={{ textAlign: "right" }}>R$ 0,00</span>
          <span className="muted">—</span>
          <span style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span className="idemo-tag green"><span className="dot" />Ativo</span>
            <span className="idemo-tag purple">Mensalista</span>
          </span>
          <span><button className="idemo-btn ghost" style={{ padding: "5px 12px", fontSize: 12 }}>Editar</button></span>
        </div>
        <div className="idemo-trow" style={{ gridTemplateColumns: cols }}>
          <span style={{ fontWeight: 500 }}>Filipe Freitas</span>
          <span><span className="idemo-tag amber">Pedreiro</span></span>
          <span className="num" style={{ textAlign: "right" }}>R$ 250,00</span>
          <span className="num" style={{ textAlign: "right" }}>R$ 10,00</span>
          <span className="num" style={{ textAlign: "right" }}>R$ 0,00</span>
          <span className="num" style={{ textAlign: "right" }}>R$ 0,00</span>
          <span className="muted">—</span>
          <span style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span className="idemo-tag green"><span className="dot" />Ativo</span>
            <span className="idemo-tag blue">Diarista</span>
          </span>
          <span><button className="idemo-btn ghost" style={{ padding: "5px 12px", fontSize: 12 }}>Editar</button></span>
        </div>
      </div>
    </div>);

}

Object.assign(window, {
  PageHead, Filter, DateField,
  PageDashboard, PageClientes, PageFolha,
  PageObras, PageServicos, PageEquipe
});