/* ============================================================
   PCP — Integrações / Canais + Vínculo de anúncios
   ============================================================ */

const CANAIS_INT = [
  { id: "loja", name: "Loja / Balcão", icon: "building", status: "nativo", conta: "Vendas presenciais e ordens de serviço", anuncios: null, pedidos: 0, pendentes: 0, sync: null },
  { id: "mercado_livre", name: "Mercado Livre", icon: "tag", status: "disponivel", conta: "Integração disponível para conectar", anuncios: null, pedidos: 0, pendentes: 0, sync: null },
  { id: "shopee", name: "Shopee", icon: "cart", status: "disponivel", conta: "Integração disponível para conectar", anuncios: null, pedidos: 0, pendentes: 0, sync: null },
  { id: "amazon", name: "Amazon", icon: "package", status: "disponivel", conta: "Integração disponível para conectar", anuncios: null, pedidos: 0, pendentes: 0, sync: null },
];

const STATUS_CANAL = {
  nativo: { label: "Nativo", tone: undefined },
  conectado: { label: "Conectado", tone: "ok" },
  disponivel: { label: "Disponível", tone: "warn" },
};

const LISTINGS_SEED = [];

const MAP_META = {
  vinculado: { label: "Vinculado", tone: "ok" },
  nao_vinculado: { label: "Não vinculado", tone: "warn" },
  conflito: { label: "Conflito", tone: "crit" },
};
const CANAL_NOME = { mercado_livre: "Mercado Livre", shopee: "Shopee", loja: "Loja" };
const CANAL_ICON = { mercado_livre: "tag", shopee: "cart", loja: "building" };

function Integracoes({ app }) {
  const [tab, setTab] = useState("canais");
  const [listings, setListings] = useState(LISTINGS_SEED);
  const [q, setQ] = useState("");
  const [fMap, setFMap] = useState("todos");
  const fmt = (v) => DB.BRL(v).replace("R$\u00a0", "R$ ");

  const mapear = (lst, produto) => setListings((ls) => ls.map((x) => x === lst ? { ...x, produto, map: "vinculado" } : x));
  const rows = listings.filter((l) => (fMap === "todos" || l.map === fMap) && (!q || (l.ext + l.titulo + (l.produto || "")).toLowerCase().includes(q.toLowerCase())));
  const pend = listings.filter((l) => l.map !== "vinculado").length;

  return (
    <div className="view-inner" style={{ maxWidth: 980 }}>
      <div className="page-head head-row">
        <div>
          <div className="crumb">Sistema</div>
          <h1 className="page-title">Integrações</h1>
          <p className="page-sub">Canais de venda, sincronização e vínculo de anúncios</p>
        </div>
        <div className="spacer" />
        <Btn icon="refresh" onClick={() => app.toast("Sincronização automática em construção", "info", { sub: "conecte os canais individualmente abaixo" })}>Sincronizar tudo</Btn>
      </div>

      <div className="toolbar" style={{ marginBottom: 18 }}>
        <div className="seg">
          <button className={tab === "canais" ? "on" : ""} onClick={() => setTab("canais")}><Icon name="refresh" size={14} />Canais</button>
          <button className={tab === "anuncios" ? "on" : ""} onClick={() => setTab("anuncios")}><Icon name="tag" size={14} />Anúncios{pend ? <span className="count alert" style={{ marginLeft: 6 }}>{pend}</span> : null}</button>
        </div>
      </div>

      {tab === "canais" ? (
        <div className="ent-cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          {CANAIS_INT.map((c) => {
            const s = STATUS_CANAL[c.status];
            return (
              <div key={c.id} className="card card-pad">
                <div className="row" style={{ gap: 11, alignItems: "flex-start" }}>
                  <span className="ws-logo" style={{ width: 40, height: 40, flex: "none" }}><Icon name={c.icon} size={19} /></span>
                  <div className="grow">
                    <div className="row" style={{ gap: 8 }}><span className="strong" style={{ fontSize: 15 }}>{c.name}</span><Badge tone={s.tone} dotted>{s.label}</Badge></div>
                    <div className="small muted" style={{ marginTop: 2 }}>{c.conta}</div>
                  </div>
                </div>

                {c.status === "conectado" && (
                  <>
                    <div className="row" style={{ gap: 0, margin: "14px 0 4px", borderTop: "1px solid var(--line)", paddingTop: 12 }}>
                      <div className="grow"><div className="mono strong" style={{ fontSize: 17 }}>{c.anuncios}</div><div className="small muted">anúncios</div></div>
                      <div className="grow"><div className="mono strong" style={{ fontSize: 17 }}>{c.pedidos}</div><div className="small muted">pedidos</div></div>
                      <div className="grow"><div className="mono strong" style={{ fontSize: 17, color: c.pendentes ? "var(--warn)" : "var(--ink)" }}>{c.pendentes}</div><div className="small muted">a vincular</div></div>
                    </div>
                    <div className="row gap8" style={{ marginTop: 12 }}>
                      <Btn size="sm" icon="refresh" onClick={() => app.toast("Sincronização de " + c.name + " em construção", "info", { sub: "use a importação manual de pedidos" })}>Sincronizar</Btn>
                      <Btn size="sm" icon="settings" onClick={() => app.openModal("configCanal", { canal: c })}>Configurar</Btn>
                      <span className="spacer" />
                      <span className="small muted">sincronizado {c.sync}</span>
                    </div>
                  </>
                )}
                {c.status === "nativo" && <div className="small muted" style={{ marginTop: 14, borderTop: "1px solid var(--line)", paddingTop: 12 }}>{c.pedidos} pedidos · canal interno, sempre ativo.</div>}
                {c.status === "disponivel" && (
                  <div className="row" style={{ marginTop: 14, borderTop: "1px solid var(--line)", paddingTop: 12 }}>
                    <span className="small muted grow">Conecte para importar pedidos e anúncios.</span>
                    <Btn size="sm" variant="primary" icon="link" onClick={() => app.openModal("confirm", { title: "Conectar " + c.name + "?", icon: "link", message: <>Você será redirecionado para autorizar o acesso à sua conta {c.name}.</>, confirmLabel: "Conectar", successMsg: c.name + " conectado" })}>Conectar</Btn>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      ) : (
        <>
          <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 anúncio, título ou produto…" />
            </div>
            <div className="seg">
              {[["todos", "Todos"], ["nao_vinculado", "Não vinculados"], ["conflito", "Conflitos"], ["vinculado", "Vinculados"]].map(([k, l]) => (
                <button key={k} className={fMap === k ? "on" : ""} onClick={() => setFMap(k)}>{l}</button>
              ))}
            </div>
          </div>
          <div className="card tbl-wrap">
            <table className="tbl">
              <thead><tr><th>Anúncio</th><th>Canal</th><th>Produto interno</th><th className="num">Preço</th><th className="num">Estoque</th><th>Mapeamento</th><th></th></tr></thead>
              <tbody>
                {rows.map((l) => {
                  const mm = MAP_META[l.map];
                  return (
                    <tr key={l.ext} className={l.map === "conflito" ? "row-warn" : ""}>
                      <td><div className="strong">{l.titulo}</div><div className="mono small muted">{l.ext}</div></td>
                      <td><span className="mkt-chip" style={{ margin: 0 }}><Icon name={CANAL_ICON[l.canal]} size={12} />{CANAL_NOME[l.canal]}</span></td>
                      <td>{l.produto ? <span className="strong">{l.produto}</span> : <span className="muted small">— sem vínculo —</span>}</td>
                      <td className="num strong">{fmt(l.preco)}</td>
                      <td className="num" style={{ color: l.estoque === 0 ? "var(--crit)" : undefined }}>{l.estoque}</td>
                      <td><Badge tone={mm.tone} dotted>{mm.label}</Badge></td>
                      <td onClick={(e) => e.stopPropagation()} style={{ textAlign: "right" }}>
                        {l.map === "vinculado"
                          ? <RowMenu items={[{ icon: "edit", label: "Trocar vínculo", onClick: () => app.openModal("vincularAnuncio", { listing: l, onMap: mapear }) }, { icon: "link", label: "Abrir anúncio", onClick: () => app.toast("Abrindo " + l.ext, "info") }]} />
                          : <Btn size="sm" icon="link" variant={l.map === "conflito" ? undefined : "primary"} onClick={() => app.openModal("vincularAnuncio", { listing: l, onMap: mapear })}>Vincular</Btn>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}

// ---------------- Modal: configurar canal ----------------
function ConfigCanalForm({ app, onClose, canal }) {
  const [autoStock, setAutoStock] = useState(true);
  const [autoImport, setAutoImport] = useState(true);
  return (
    <Modal size="md" icon={canal.icon} title={"Configurar " + canal.name} sub={canal.conta} onClose={onClose}
      footer={<><Btn variant="danger" icon="link" onClick={() => { onClose(); app.toast(canal.name + " desconectado", "info"); }}>Desconectar</Btn><span className="spacer" /><Btn onClick={onClose}>Fechar</Btn><Btn variant="primary" icon="check" onClick={() => { onClose(); app.toast("Configurações salvas", "ok"); }}>Salvar</Btn></>}>
      <Field label="Conta conectada"><div className="fld-wrap"><Icon name="users" size={15} className="ico-in" /><input className="fld" defaultValue={canal.conta} readOnly /></div></Field>
      <Field label="URL de webhook" help="cole esta URL no painel do canal para receber pedidos em tempo real">
        <div className="fld-wrap"><Icon name="link" size={15} className="ico-in" /><input className="fld mono" style={{ fontSize: 12 }} defaultValue={"https://estoquepcp-69231.web.app/api/webhooks/" + canal.id} readOnly /></div>
      </Field>
      <div className="card" style={{ marginTop: 4 }}>
        <div className="card-pad row" style={{ padding: "12px 14px" }}><div className="grow"><div className="strong">Sincronizar estoque automaticamente</div><div className="small muted">Publica o saldo disponível nos anúncios a cada movimento.</div></div><Toggle on={autoStock} onClick={() => setAutoStock(!autoStock)} /></div>
        <div className="card-pad row" style={{ padding: "12px 14px", borderTop: "1px solid var(--line)" }}><div className="grow"><div className="strong">Importar pedidos automaticamente</div><div className="small muted">Cria o pedido interno assim que a venda é confirmada.</div></div><Toggle on={autoImport} onClick={() => setAutoImport(!autoImport)} /></div>
      </div>
    </Modal>
  );
}

// ---------------- Modal: vincular anúncio ↔ produto ----------------
function VincularAnuncioForm({ app, onClose, listing, onMap }) {
  const opcoes = ["Suporte de TV articulado", "Suporte de TV fixo", "Grelha 60cm", "Dobradiça reforçada", "Prateleira industrial", "Sapateira 5 níveis", "Mão-francesa 40cm", "Cantoneira kit 4"];
  const [prod, setProd] = useState(listing.produto || "");
  const salvar = () => {
    if (!prod) return app.toast("Selecione um produto", "crit");
    onMap && onMap(listing, prod);
    onClose();
    app.toast("Anúncio vinculado", "ok", { sub: listing.ext + " → " + prod });
  };
  return (
    <Modal size="md" icon="link" title="Vincular anúncio" sub={listing.titulo} onClose={onClose}
      footer={<><span className="spacer" /><Btn onClick={onClose}>Cancelar</Btn><Btn variant="primary" icon="check" onClick={salvar}>Vincular</Btn></>}>
      {listing.map === "conflito" && (
        <div className="note-inline" style={{ display: "flex", gap: 8, padding: "10px 12px", background: "var(--crit-tint)", borderRadius: "var(--radius)", marginBottom: 14, fontSize: 13, color: "var(--crit)" }}>
          <Icon name="alert" size={16} /> <span>Outro anúncio já aponta para este produto. Escolha o produto correto para resolver o conflito.</span>
        </div>
      )}
      <div className="field-grid c2">
        <Field label="Anúncio (canal)"><div className="fld" style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name={CANAL_ICON[listing.canal]} size={14} />{CANAL_NOME[listing.canal]}</div></Field>
        <Field label="Código externo"><div className="fld mono" style={{ display: "flex", alignItems: "center", fontSize: 12 }}>{listing.ext}</div></Field>
      </div>
      <Field label="Produto interno" req help="o saldo deste produto será publicado no anúncio">
        <select className="fld" value={prod} onChange={(e) => setProd(e.target.value)}>
          <option value="">Selecione um produto…</option>
          {opcoes.map((o) => <option key={o} value={o}>{o}</option>)}
        </select>
      </Field>
    </Modal>
  );
}

// lightweight toggle (matches design system)
function Toggle({ on, onClick }) {
  return (
    <button onClick={onClick} aria-pressed={on} style={{ width: 40, height: 23, borderRadius: 20, border: "1px solid var(--line-strong)", background: on ? "var(--accent)" : "var(--bg)", position: "relative", cursor: "pointer", flex: "none", transition: "background .15s" }}>
      <span style={{ position: "absolute", top: 2, left: on ? 19 : 2, width: 17, height: 17, borderRadius: "50%", background: "#fff", transition: "left .15s", boxShadow: "0 1px 2px rgba(0,0,0,.25)" }} />
    </button>
  );
}

if (window.MODALS) { window.MODALS.configCanal = ConfigCanalForm; window.MODALS.vincularAnuncio = VincularAnuncioForm; }
Object.assign(window, { Integracoes, ConfigCanalForm, VincularAnuncioForm, Toggle });