// Mobile app — full BinGest mobile experience with 4 routable screens.
// Used inside the InteractiveDemo iPhone frame.

const MOBILE_NAV = [
  { id: "inicio", l: "Início", Icon: IconDashboard },
  { id: "obras",  l: "Obras",  Icon: IconBuilding },
  { id: "ponto",  l: "Ponto",  Icon: IconClock },
  { id: "fin",    l: "$",      Icon: IconWallet },
];

function BingestMobile({ screen, onNav, withActivity = true }) {
  return (
    <div style={{
      background: "#FBFCFE",
      width: "100%", height: "100%",
      display: "flex", flexDirection: "column",
      fontFamily: "var(--font-sans)",
      color: "#0B132A",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Top bar — navy */}
      <div style={{
        background: "#0D1A3A",
        padding: "12px 16px 18px",
        color: "#fff",
        flex: "0 0 auto",
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 10,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <IconLogo size={22} />
            <span style={{ fontWeight: 600, fontSize: 14, letterSpacing: "-0.01em" }}>BinGest</span>
          </div>
          <div style={{
            width: 30, height: 30, borderRadius: 999,
            background: "#2A5BFF", color: "#fff",
            display: "grid", placeItems: "center",
            fontSize: 11, fontWeight: 600,
          }}>ED</div>
        </div>
        <div style={{ fontSize: 11.5, color: "#8C97B8", letterSpacing: ".02em" }}>
          Pimba Construções · maio 2026
        </div>
      </div>

      {/* Curved content area */}
      <div style={{
        background: "#FBFCFE",
        borderRadius: "20px 20px 0 0",
        marginTop: -12,
        padding: 16,
        flex: 1,
        zIndex: 1,
        position: "relative",
        overflow: "auto",
      }} key={screen}>
        {screen === "inicio" && <MobileInicio withActivity={withActivity} />}
        {screen === "obras"  && <MobileObras />}
        {screen === "ponto"  && <MobilePonto />}
        {screen === "fin"    && <MobileFin />}
      </div>

      {/* FAB (only on certain screens) */}
      {(screen === "ponto" || screen === "obras") && (
        <button style={{
          position: "absolute",
          bottom: 76, right: 16,
          width: 52, height: 52, borderRadius: 16,
          background: "#2A5BFF", color: "#fff",
          display: "grid", placeItems: "center",
          boxShadow: "0 12px 24px -8px rgba(42,91,255,.5)",
          zIndex: 3, border: "none", cursor: "pointer",
        }}>
          <IconPlus size={20} />
        </button>
      )}

      {/* Bottom tab bar */}
      <div style={{
        background: "#fff",
        borderTop: "1px solid #E3E7EF",
        padding: "8px 4px 14px",
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 4,
        flex: "0 0 auto",
      }}>
        {MOBILE_NAV.map(it => {
          const active = screen === it.id;
          return (
            <button key={it.id}
              onClick={() => onNav && onNav(it.id)}
              style={{
                display: "flex", flexDirection: "column", alignItems: "center",
                padding: "6px 0",
                color: active ? "#2A5BFF" : "#8892A8",
                background: "transparent", border: "none", cursor: "pointer",
              }}>
              <span style={{
                width: 44, height: 22, borderRadius: 999,
                background: active ? "#E9F0FE" : "transparent",
                display: "grid", placeItems: "center",
                marginBottom: 3,
                transition: "background .2s",
              }}>
                <it.Icon size={16} />
              </span>
              <span style={{ fontSize: 10, fontWeight: active ? 600 : 500 }}>{it.l}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// =================== Screens ===================

function MobileInicio({ withActivity }) {
  return (
    <div className="idemo-page">
      <h2 style={{ margin: "0 0 14px 0", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>
        Olá, Eduardo
      </h2>

      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 16,
      }}>
        <MobileKpi label="Receita do mês" value={19500} tint="green" icon={<IconWallet size={11} />} />
        <MobileKpi label="Margem op." value={57.9} suffix="%" decimals={1} tint="blue" icon={<IconSpark size={11} />} />
      </div>

      {/* DRE summary card */}
      <div style={{
        background: "#fff", border: "1px solid #E3E7EF", borderRadius: 14,
        padding: 14, marginBottom: 16,
      }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "#5C6680", marginBottom: 8 }}>
          DRE — maio
        </div>
        {[
          { l: "Receita Bruta", v: "R$ 19.500,00", c: "#0B132A" },
          { l: "Custos diretos", v: "−R$ 8.210,00", c: "#DC2626" },
          { l: "Resultado op.", v: "R$ 11.290,00", c: "#16A34A", bold: true },
        ].map((r, i) => (
          <div key={i} style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "8px 0", fontSize: 12.5,
            borderTop: i ? "1px solid #EEF0F5" : "none",
          }}>
            <span style={{ color: "#5C6680" }}>{r.l}</span>
            <span className="mono tabular" style={{ color: r.c, fontWeight: r.bold ? 700 : 500 }}>{r.v}</span>
          </div>
        ))}
      </div>

      {/* Quick actions */}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 16,
      }}>
        <QuickAction icon={<IconClock size={16} />} label="Lançar presença" color="#2A5BFF" />
        <QuickAction icon={<IconReport size={16} />} label="Ver DRE" color="#16A34A" />
      </div>

      {withActivity && <MobileActivity />}
    </div>
  );
}

function QuickAction({ icon, label, color }) {
  return (
    <div style={{
      background: "#fff",
      border: "1px solid #E3E7EF",
      borderRadius: 12,
      padding: "12px 14px",
      display: "flex", alignItems: "center", gap: 10,
    }}>
      <span style={{
        width: 30, height: 30, borderRadius: 8,
        background: `${color}15`, color,
        display: "grid", placeItems: "center",
      }}>{icon}</span>
      <span style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.2 }}>{label}</span>
    </div>
  );
}

function MobileActivity() {
  const events = [
    { t: "diária", title: "Diária registrada", sub: "Carlos Souza · R$ 180,00", color: "#16A34A", icon: <IconCheck size={11} /> },
    { t: "dre", title: "DRE atualizado", sub: "Margem 57,9%", color: "#2A5BFF", icon: <IconBolt size={11} /> },
    { t: "checkin", title: "Check-in no canteiro", sub: "Fernando Jose · 07h12", color: "#16A34A", icon: <IconClock size={11} /> },
  ];
  return (
    <>
      <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "#5C6680", marginBottom: 10 }}>
        Atividade recente
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {events.map((ev, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 12px",
            background: "#fff", border: "1px solid #E3E7EF", borderRadius: 12,
          }}>
            <span style={{
              width: 26, height: 26, borderRadius: 8,
              background: ev.color, color: "#fff",
              display: "grid", placeItems: "center",
              flex: "0 0 26px",
            }}>{ev.icon}</span>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: "-0.01em" }}>{ev.title}</div>
              <div style={{ fontSize: 10.5, color: "#5C6680" }}>{ev.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

// ----- OBRAS ------------------------------------------------------------
function MobileObras() {
  return (
    <div className="idemo-page">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <h2 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>Obras</h2>
        <span style={{ fontSize: 11.5, color: "#5C6680" }}>1 obra ativa</span>
      </div>

      <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
        <span style={{ padding: "5px 10px", borderRadius: 999, background: "#2A5BFF", color: "#fff", fontSize: 11, fontWeight: 600 }}>Ativas (1)</span>
        <span style={{ padding: "5px 10px", borderRadius: 999, background: "#fff", color: "#5C6680", fontSize: 11, fontWeight: 500, border: "1px solid #E3E7EF" }}>Concluídas</span>
        <span style={{ padding: "5px 10px", borderRadius: 999, background: "#fff", color: "#5C6680", fontSize: 11, fontWeight: 500, border: "1px solid #E3E7EF" }}>Pausadas</span>
      </div>

      <div style={{
        background: "#fff", border: "1px solid #E3E7EF", borderRadius: 14,
        padding: 16, marginBottom: 10,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em" }}>Condomínio das Acácias</div>
            <div style={{ fontSize: 11.5, color: "#5C6680", marginTop: 2 }}>Construtora FGR</div>
          </div>
          <span style={{ padding: "2px 8px", borderRadius: 999, background: "#D1FAE5", color: "#15803D", fontSize: 10, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: "#22C55E" }} />Ativa
          </span>
        </div>

        <div style={{ display: "flex", gap: 6, marginBottom: 12, flexWrap: "wrap" }}>
          <span style={{ padding: "3px 8px", borderRadius: 999, background: "#E9F0FE", color: "#1E4FD8", fontSize: 10, fontWeight: 600 }}>Entrega de Apto.</span>
          <span style={{ padding: "3px 8px", borderRadius: 999, background: "#F1F3F8", color: "#5C6680", fontSize: 10 }}>1 unidade</span>
        </div>

        {/* mini progress bar */}
        <div style={{ marginBottom: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10.5, marginBottom: 4 }}>
            <span style={{ color: "#5C6680" }}>Progresso</span>
            <span style={{ fontWeight: 600 }}>72%</span>
          </div>
          <div style={{ height: 5, borderRadius: 999, background: "#F1F3F8", overflow: "hidden" }}>
            <div style={{ width: "72%", height: "100%", background: "linear-gradient(90deg, #2A5BFF, #16A34A)", borderRadius: 999 }} />
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, paddingTop: 10, borderTop: "1px solid #EEF0F5" }}>
          <div>
            <div style={{ fontSize: 10, color: "#5C6680", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>Receita</div>
            <div className="mono tabular" style={{ fontSize: 14, fontWeight: 600, color: "#16A34A" }}>R$ 19.500</div>
          </div>
          <div>
            <div style={{ fontSize: 10, color: "#5C6680", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>Margem</div>
            <div className="mono tabular" style={{ fontSize: 14, fontWeight: 600 }}>57,9%</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ----- PONTO ------------------------------------------------------------
function MobilePonto() {
  const entries = [
    { name: "Filipe Freitas", role: "Pedreiro", time: "07h12", date: "Hoje", d: 1, he: 0, status: "ok" },
    { name: "Fernando Jose", role: "Encarregado", time: "07h05", date: "Hoje", d: 1, he: 1, status: "ok" },
    { name: "Filipe Freitas", role: "Pedreiro", time: "07h08", date: "Ontem", d: 1, he: 0, status: "ok" },
  ];
  return (
    <div className="idemo-page">
      <h2 style={{ margin: "0 0 4px 0", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>Folha de ponto</h2>
      <div style={{ fontSize: 12, color: "#5C6680", marginBottom: 14 }}>13 de maio · 2 presenças hoje</div>

      <div style={{
        background: "linear-gradient(135deg, #2A5BFF, #1E4FD8)",
        color: "#fff",
        borderRadius: 14, padding: 14, marginBottom: 16,
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div>
          <div style={{ fontSize: 10.5, opacity: .8, letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>
            Lançar presença
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>Toque para registrar</div>
        </div>
        <span style={{
          width: 36, height: 36, borderRadius: 12,
          background: "rgba(255,255,255,.2)", display: "grid", placeItems: "center",
        }}><IconPlus size={18} /></span>
      </div>

      <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "#5C6680", marginBottom: 10 }}>
        Últimos lançamentos
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {entries.map((e, i) => (
          <div key={i} style={{
            background: "#fff", border: "1px solid #E3E7EF", borderRadius: 12,
            padding: "12px 14px", display: "flex", alignItems: "center", gap: 12,
          }}>
            <span style={{
              width: 36, height: 36, borderRadius: 999,
              background: "#E9F0FE", color: "#1E4FD8",
              display: "grid", placeItems: "center", fontSize: 12, fontWeight: 600,
              flex: "0 0 36px",
            }}>{e.name.split(" ").map(s => s[0]).join("").slice(0,2)}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{e.name}</div>
              <div style={{ fontSize: 11, color: "#5C6680" }}>{e.role} · {e.date} {e.time}</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 2 }}>
              <span style={{ fontSize: 12, fontWeight: 600 }}>{e.d}d{e.he ? ` +${e.he}he` : ""}</span>
              <span style={{ fontSize: 9, color: "#16A34A", display: "inline-flex", alignItems: "center", gap: 3 }}>
                <span style={{ width: 5, height: 5, borderRadius: 999, background: "#22C55E" }} /> sincronizado
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ----- FIN --------------------------------------------------------------
function MobileFin() {
  return (
    <div className="idemo-page">
      <h2 style={{ margin: "0 0 4px 0", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>Financeiro</h2>
      <div style={{ fontSize: 12, color: "#5C6680", marginBottom: 14 }}>maio · 2026</div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 10 }}>
        <div style={{ padding: "12px 14px", borderRadius: 12, background: "#ECFDF5", border: "1px solid #BCEAD4" }}>
          <div style={{ fontSize: 9.5, color: "#15803D", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>Recebido</div>
          <div className="mono tabular" style={{ fontSize: 17, fontWeight: 700, color: "#15803D", marginTop: 2 }}>R$ 11.500</div>
        </div>
        <div style={{ padding: "12px 14px", borderRadius: 12, background: "#FEF2F2", border: "1px solid #FBD3D3" }}>
          <div style={{ fontSize: 9.5, color: "#B91C1C", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>Saídas</div>
          <div className="mono tabular" style={{ fontSize: 17, fontWeight: 700, color: "#B91C1C", marginTop: 2 }}>R$ 7.150</div>
        </div>
        <div style={{ padding: "12px 14px", borderRadius: 12, background: "#EEF3FF", border: "1px solid #D7E2FA" }}>
          <div style={{ fontSize: 9.5, color: "#1E4FD8", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>A receber</div>
          <div className="mono tabular" style={{ fontSize: 17, fontWeight: 700, color: "#1E4FD8", marginTop: 2 }}>R$ 0,00</div>
        </div>
        <div style={{ padding: "12px 14px", borderRadius: 12, background: "#fff", border: "1px solid #E3E7EF" }}>
          <div style={{ fontSize: 9.5, color: "#5C6680", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>Saldo equipe</div>
          <div className="mono tabular" style={{ fontSize: 17, fontWeight: 700, marginTop: 2 }}>R$ 0,00</div>
        </div>
      </div>

      <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "#5C6680", margin: "10px 0" }}>
        Atalhos
      </div>
      {[
        "Lançar despesa",
        "Emitir fatura",
        "Pagar diaristas",
        "Histórico de pagamentos",
      ].map((s, i) => (
        <div key={i} style={{
          display: "flex", alignItems: "center", gap: 12,
          padding: "12px 14px",
          background: "#fff", border: "1px solid #E3E7EF", borderRadius: 12,
          marginBottom: 6, fontSize: 13, fontWeight: 500,
        }}>
          <span style={{
            width: 28, height: 28, borderRadius: 8,
            background: "#E9F0FE", color: "#1E4FD8",
            display: "grid", placeItems: "center",
            flex: "0 0 28px",
          }}><IconWallet size={14} /></span>
          <span style={{ flex: 1 }}>{s}</span>
          <IconChevron size={14} style={{ color: "#8892A8" }} />
        </div>
      ))}
    </div>
  );
}

// Shared mobile KPI
function MobileKpi({ label, value, suffix = "", decimals = 0, tint = "blue", icon }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let raf, t0;
    const dur = 1100;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(value * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value]);

  const display = decimals
    ? n.toLocaleString("pt-BR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
    : Math.round(n).toLocaleString("pt-BR");

  const colors = {
    green: { bg: "#ECFDF5", border: "#BCEAD4", fg: "#15803D" },
    blue:  { bg: "#EEF3FF", border: "#D7E2FA", fg: "#1E4FD8" },
  }[tint];

  return (
    <div style={{
      background: colors.bg, border: `1px solid ${colors.border}`,
      borderRadius: 12, padding: "10px 12px",
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 5,
        fontSize: 9.5, color: colors.fg,
        letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600,
        marginBottom: 4,
      }}>
        {icon} {label}
      </div>
      <div className="mono tabular" style={{
        fontSize: 16, fontWeight: 600, letterSpacing: "-0.02em",
        color: colors.fg,
      }}>
        {tint === "green" ? "R$ " : ""}{display}{suffix}
      </div>
    </div>
  );
}

Object.assign(window, { BingestMobile, MOBILE_NAV });