/* ============================================================
   PCP — Canais de venda: Mercado Livre & Shopee
   Pedidos integrados dos marketplaces, concentrados na
   categoria "Pedidos" da sidebar.
   ============================================================ */

const MKT_ORDERS = {
  ml: [],
  shopee: [],
};

const MKT_STATUS = {
  novo:      { label: "Novo", tone: "accent" },
  a_enviar:  { label: "A enviar", tone: "warn" },
  enviado:   { label: "Enviado", tone: undefined },
  entregue:  { label: "Entregue", tone: "ok" },
  cancelado: { label: "Cancelado", tone: "crit" },
};

const MKT_FILTERS = [
  { id: "todos", label: "Todos" },
  { id: "novo", label: "Novos" },
  { id: "a_enviar", label: "A enviar" },
  { id: "enviado", label: "Enviados" },
  { id: "entregue", label: "Entregues" },
];

function MarketplaceScreen({ app, channel, name, icon, sync }) {
  const [q, setQ] = useState("");
  const [filter, setFilter] = useState("todos");
  const all = MKT_ORDERS[channel];
  const rows = all.filter((o) =>
    (filter === "todos" || o.status === filter) &&
    (!q || (o.id + o.comprador + o.produto).toLowerCase().includes(q.toLowerCase()))
  );

  const aEnviar = all.filter((o) => o.status === "novo" || o.status === "a_enviar").length;
  const enviados = all.filter((o) => o.status === "enviado").length;
  const fatur = all.filter((o) => o.status !== "cancelado").reduce((s, o) => s + o.valor, 0);
  const fmt = (v) => DB.BRL(v).replace("R$\u00a0", "R$ ");

  const importar = (o) => app.openModal("confirm", {
    title: "Importar pedido para o PCP?",
    icon: "download",
    message: <>O pedido <b>{o.id}</b> de <b>{name}</b> será criado como pedido interno e entrará na fila de produção.</>,
    confirmLabel: "Importar pedido",
    successMsg: "Pedido " + o.id + " importado para o PCP",
    onConfirm: () => app.criarPedido({ os: "ML" + o.id.slice(-5), cliente: o.comprador + " · " + name, produto: o.produto, qtd: o.qtd, valor: o.valor, prio: 5, entrega: "—", canal: channel === "ml" ? "mercado_livre" : "shopee" }),
  });

  const rowMenu = (o) => [
    { icon: "eye", label: "Ver detalhe", onClick: () => app.openModal("pedidoMktDetail", { o, channel, name, icon }) },
    { icon: "download", label: "Importar para o PCP", onClick: () => importar(o) },
    { icon: "link", label: "Abrir no " + name, onClick: () => { window.open("https://www." + (channel === "ml" ? "mercadolivre.com.br/vendas" : "shopee.com.br/portal/sale") + "/" + o.id, "_blank"); } },
    { icon: "printer", label: "Etiqueta de envio", onClick: () => PCPExport.printEtiqueta(o, name) },
  ];

  return (
    <div className="view-inner">
      <div className="page-head head-row">
        <div>
          <div className="crumb">Pedidos</div>
          <h1 className="page-title">{name}</h1>
          <p className="page-sub">
            <span className="mkt-chip"><Icon name={icon} size={12} />{name}</span>
            {all.length} pedidos · sincronizado há {sync}
          </p>
        </div>
        <div className="spacer" />
        <div className="row gap8">
          <IconBtn icon="settings" bordered title="Gerenciar integração" onClick={() => app.setRoute("integracoes")} />
          <Btn icon="upload" onClick={() => app.openModal("importarRelatorioCanal", { canal: channel === "ml" ? "mercado_livre" : "shopee" })}>Importar relatório</Btn>
          <Btn icon="refresh" onClick={() => app.toast("Sincronização com " + name + " ainda não disponível", "info", { sub: "integração de API em construção" })}>Sincronizar</Btn>
          <Btn icon="download" variant="primary" disabled={aEnviar === 0} onClick={() => app.toast("Importação automática ainda não disponível", "info", { sub: "abra cada pedido e use 'Importar' por enquanto" })}>Importar pendentes</Btn>
        </div>
      </div>

      <div className="metrics" style={{ gridTemplateColumns: "repeat(4, 1fr)", marginBottom: 18 }}>
        <MetricCard icon={icon} label="Pedidos no canal" value={all.length} />
        <MetricCard icon="inbox" label="A enviar" value={aEnviar} state={aEnviar ? "warn" : undefined} foot="aguardando expedição" />
        <MetricCard icon="truck" label="Em trânsito" value={enviados} />
        <MetricCard icon="dollar" label="Faturamento" value={fmt(fatur)} foot="últimos 7 dias" />
      </div>

      <AnalyticsCanalCard app={app} canal={channel === "ml" ? "mercado_livre" : "shopee"} canalLabel={name} />

      <div className="toolbar" style={{ marginBottom: 14 }}>
        <div className="input" style={{ width: 280 }}>
          <Icon name="search" size={15} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar por pedido, comprador ou item…" />
        </div>
        <div className="seg">
          {MKT_FILTERS.map((f) => (
            <button key={f.id} className={filter === f.id ? "on" : ""} onClick={() => setFilter(f.id)}>{f.label}</button>
          ))}
        </div>
      </div>

      {rows.length === 0 ? (
        <Empty icon={icon} title="Nenhum pedido neste filtro" >Ajuste a busca ou o filtro de status para ver os pedidos do {name}.</Empty>
      ) : (
        <div className="card tbl-wrap">
          <table className="tbl">
            <thead><tr><th>Pedido</th><th>Comprador</th><th>Produto</th><th className="num">Qtd</th><th className="num">Valor</th><th>Envio</th><th>Data</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {rows.map((o) => {
                const st = MKT_STATUS[o.status];
                return (
                  <tr key={o.id} className="clickable" onClick={() => app.openModal("pedidoMktDetail", { o, channel, name, icon })}>
                    <td><span className="mono strong">{o.id}</span></td>
                    <td className="strong">{o.comprador}</td>
                    <td className="muted">{o.produto}</td>
                    <td className="num">{o.qtd}</td>
                    <td className="num strong">{fmt(o.valor)}</td>
                    <td className="muted small">{o.envio}</td>
                    <td>{o.data}</td>
                    <td><Badge tone={st.tone} dotted>{st.label}</Badge></td>
                    <td onClick={(e) => e.stopPropagation()}><RowMenu items={rowMenu(o)} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function MercadoLivre({ app }) {
  return <MarketplaceScreen app={app} channel="ml" name="Mercado Livre" icon="tag" sync="4 min" />;
}
function Shopee({ app }) {
  return <MarketplaceScreen app={app} channel="shopee" name="Shopee" icon="cart" sync="7 min" />;
}

// ---------------- Detalhe de pedido de marketplace ----------------
const MKT_FEE = { ml: 0.12, shopee: 0.14 };

function PedidoMktDetail({ app, onClose, o, channel, name, icon }) {
  const st = MKT_STATUS[o.status];
  const fmt = (v) => DB.BRL(v).replace("R$\u00a0", "R$ ");
  const subtotal = o.valor;
  const comissao = Math.round(subtotal * (MKT_FEE[channel] || 0.12) * 100) / 100;
  const liquido = Math.round((subtotal - comissao) * 100) / 100;
  const importar = () => {
    onClose();
    app.openModal("confirm", {
      title: "Importar pedido para o PCP?", icon: "download",
      message: <>O pedido <b>{o.id}</b> de <b>{name}</b> será criado como pedido interno.</>,
      confirmLabel: "Importar pedido", successMsg: "Pedido " + o.id + " importado para o PCP",
      onConfirm: () => app.criarPedido({ os: (channel === "ml" ? "ML" : "SH") + o.id.slice(-5), cliente: o.comprador + " · " + name, produto: o.produto, qtd: o.qtd, valor: o.valor, prio: 5, entrega: "—", canal: channel === "ml" ? "mercado_livre" : "shopee" }),
    });
  };
  return (
    <Modal size="md" icon={icon} title={"Pedido " + o.id} sub={name + " · " + o.comprador} onClose={onClose}
      footer={<><Btn icon="link" onClick={() => window.open("https://www." + (channel === "ml" ? "mercadolivre.com.br/vendas" : "shopee.com.br/portal/sale") + "/" + o.id, "_blank")}>Abrir no {name}</Btn><Btn icon="printer" onClick={() => PCPExport.printEtiqueta(o, name)}>Etiqueta</Btn><span className="spacer" /><Btn variant="primary" icon="download" onClick={importar}>Importar para o PCP</Btn></>}>
      <div className="row" style={{ gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
        <span className="mkt-chip" style={{ margin: 0 }}><Icon name={icon} size={12} />{name}</span>
        <Badge tone={st.tone} dotted>{st.label}</Badge>
        <Badge tone={o.pgto === "aprovado" ? "ok" : "crit"} dotted>{o.pgto === "aprovado" ? "Pago" : "Estornado"}</Badge>
      </div>

      <div className="sec-label" style={{ marginTop: 0 }}>Item</div>
      <div className="card card-pad" style={{ marginBottom: 16 }}>
        <div className="row" style={{ gap: 12, alignItems: "flex-start" }}>
          <div className="grow"><div className="strong">{o.produto}</div><div className="small muted">{o.qtd} un · {fmt(subtotal / o.qtd)} / un</div></div>
          <div className="mono strong">{fmt(subtotal)}</div>
        </div>
      </div>

      <div className="sec-label" style={{ marginTop: 0 }}>Repasse estimado</div>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-pad row" style={{ padding: "10px 14px" }}><span className="grow muted">Subtotal</span><span className="mono">{fmt(subtotal)}</span></div>
        <div className="card-pad row" style={{ padding: "10px 14px", borderTop: "1px solid var(--line)" }}><span className="grow muted">Comissão {name} ({Math.round((MKT_FEE[channel] || 0.12) * 100)}%)</span><span className="mono" style={{ color: "var(--crit)" }}>− {fmt(comissao)}</span></div>
        <div className="card-pad row" style={{ padding: "12px 14px", borderTop: "1px solid var(--line-strong)" }}><span className="grow strong">Líquido a receber</span><span className="mono strong" style={{ color: "var(--ok)" }}>{fmt(liquido)}</span></div>
      </div>

      <div className="field-grid c2">
        <Field label="Envio"><div className="fld" style={{ display: "flex", alignItems: "center" }}>{o.envio}</div></Field>
        <Field label="Data do pedido"><div className="fld" style={{ display: "flex", alignItems: "center" }}>{o.data}</div></Field>
      </div>
    </Modal>
  );
}
if (window.MODALS) window.MODALS.pedidoMktDetail = PedidoMktDetail;

// ---------------- Card de Analytics do canal (importado via XLSX) ----------------
function AnalyticsCanalCard({ app, canal, canalLabel }) {
  const todos = (app.analyticsCanais || []).filter((a) => a.canal === canal);
  if (todos.length === 0) {
    return (
      <div className="card card-pad" style={{ marginBottom: 18 }}>
        <div className="row gap8" style={{ alignItems: "center" }}>
          <Icon name="chart" size={18} className="muted" />
          <div className="grow">
            <div className="strong">Analytics do {canalLabel}</div>
            <div className="small muted">Importe um relatório XLSX (Shop Stats, Sales Overview ou Product Overview) para ver métricas do canal aqui.</div>
          </div>
          <Btn size="sm" icon="upload" onClick={() => app.openModal("importarRelatorioCanal", { canal })}>Importar relatório</Btn>
        </div>
      </div>
    );
  }

  // Agrega tudo por dia: soma vendas/visitantes/pedidos
  const porDia = {};
  todos.forEach((a) => {
    if (!porDia[a.data]) porDia[a.data] = { data: a.data, vendas: 0, pedidos: 0, visitantes: 0, cliques: 0 };
    // Prefer registros 'shop_stats' (mais confiáveis pra valor diário); se não tem, usa sales_overview agregado.
    // Para evitar double-count, prefere registros sem hora (diário).
    if (a.hora == null && a.fonte === "shop_stats") {
      porDia[a.data].vendas = Math.max(porDia[a.data].vendas, +a.vendas || 0);
      porDia[a.data].pedidos = Math.max(porDia[a.data].pedidos, +a.pedidos || 0);
      porDia[a.data].visitantes = Math.max(porDia[a.data].visitantes, +a.visitantes || 0);
      porDia[a.data].cliques = Math.max(porDia[a.data].cliques, +a.cliques || 0);
    } else if (porDia[a.data].vendas === 0) {
      porDia[a.data].vendas += +a.vendas || 0;
      porDia[a.data].pedidos += +a.pedidos || 0;
      porDia[a.data].visitantes += +a.visitantes || 0;
      porDia[a.data].cliques += +a.cliques || 0;
    }
  });
  const dias = Object.values(porDia).sort((a, b) => a.data.localeCompare(b.data));
  const totalVendas = dias.reduce((s, d) => s + d.vendas, 0);
  const totalPedidos = dias.reduce((s, d) => s + d.pedidos, 0);
  const totalVisitantes = dias.reduce((s, d) => s + d.visitantes, 0);
  const ticket = totalPedidos > 0 ? totalVendas / totalPedidos : 0;
  const conv = totalVisitantes > 0 ? (totalPedidos / totalVisitantes * 100) : 0;
  const ultimos14 = dias.slice(-14);
  const maxV = Math.max(1, ...ultimos14.map((d) => d.vendas));
  const fmtBR = (v) => DB.BRL(v).replace("R$ ", "R$ ");

  return (
    <div className="card" style={{ marginBottom: 18 }}>
      <div className="card-head">
        <Icon name="chart" size={16} />
        <h3>Analytics do {canalLabel}</h3>
        <span className="sub">{dias.length} dias importados</span>
        <span className="spacer" />
        <Btn size="sm" icon="upload" onClick={() => app.openModal("importarRelatorioCanal", { canal })}>Importar mais</Btn>
        <Btn size="sm" icon="trash" onClick={() => app.openModal("confirm", {
          title: `Limpar analytics do ${canalLabel}?`,
          danger: true,
          message: <>Remove os <b>{todos.length} registros</b> de analytics importados deste canal. Os <b>lançamentos financeiros</b> criados a partir dessa importação continuam (use Financeiro → Limpar importados se quiser apagar também).</>,
          confirmLabel: "Limpar analytics",
          successMsg: `Analytics do ${canalLabel} limpos`,
          onConfirm: () => {
            const restante = (app.analyticsCanais || []).filter((a) => a.canal !== canal);
            app.analyticsCanaisApi.replaceAll(restante);
            if (app.logEvento) app.logEvento("limpar_analytics_canal", { tipo: "analytics", id: canal }, { quantidade: todos.length });
          },
        })}>Limpar</Btn>
      </div>
      <div className="card-pad">
        <div className="metrics" style={{ gridTemplateColumns: "repeat(4, 1fr)", marginBottom: 16 }}>
          <MetricCard icon="dollar" label="Vendas (importadas)" value={fmtBR(totalVendas)} state="ok" />
          <MetricCard icon="fileText" label="Pedidos" value={totalPedidos} />
          <MetricCard icon="users" label="Visitantes" value={totalVisitantes} />
          <MetricCard icon="trendUp" label="Conversão" value={conv.toFixed(2) + "%"} foot={"ticket " + fmtBR(ticket)} />
        </div>
        <div className="small muted" style={{ marginBottom: 6 }}>Vendas dos últimos {ultimos14.length} dias importados</div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 90 }}>
          {ultimos14.map((d) => (
            <div key={d.data} title={`${d.data} · ${fmtBR(d.vendas)}`} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4, height: "100%" }}>
              <div style={{ flex: 1, width: "100%", display: "flex", alignItems: "flex-end" }}>
                <div style={{ width: "100%", height: (d.vendas / maxV * 100) + "%", minHeight: 2, borderRadius: "4px 4px 0 0", background: "var(--accent)" }} />
              </div>
              <span style={{ fontSize: 9.5, color: "var(--muted)" }}>{d.data.slice(8)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MercadoLivre, Shopee, MarketplaceScreen, PedidoMktDetail, MKT_ORDERS, MKT_STATUS, AnalyticsCanalCard });