/* ============================================================
   PCP — Gestão: desempenho dos produtos nos marketplaces
   Dados demonstrativos até a integração com as APIs dos canais.
   ============================================================ */

const MKT_PERFORMANCE_PRODUCTS = [
  { id: 1, produto: "Suporte articulado para monitor", sku: "SUP-MON-01", canal: "ml", cliques: 1842, compras: 96, faturamento: 14304.00, tendencia: 12.4 },
  { id: 2, produto: "Organizador de mesa modular", sku: "ORG-MOD-02", canal: "shopee", cliques: 1376, compras: 82, faturamento: 7298.00, tendencia: 8.1 },
  { id: 3, produto: "Base elevada para notebook", sku: "BAS-NOT-01", canal: "ml", cliques: 1064, compras: 48, faturamento: 6715.20, tendencia: -2.3 },
  { id: 4, produto: "Kit suporte para ferramentas", sku: "KIT-FER-04", canal: "shopee", cliques: 892, compras: 37, faturamento: 4251.30, tendencia: 5.7 },
  { id: 5, produto: "Prateleira industrial compacta", sku: "PRA-IND-02", canal: "ml", cliques: 731, compras: 21, faturamento: 5229.00, tendencia: -4.8 },
  { id: 6, produto: "Gancho de parede reforçado", sku: "GAN-REF-06", canal: "shopee", cliques: 648, compras: 44, faturamento: 2151.60, tendencia: 15.2 },
];

const MKT_PERFORMANCE_HISTORY = {
  "7": [
    { label: "30", ml: 315, shopee: 241 }, { label: "31", ml: 349, shopee: 257 },
    { label: "01", ml: 326, shopee: 269 }, { label: "02", ml: 378, shopee: 288 },
    { label: "03", ml: 402, shopee: 304 }, { label: "04", ml: 391, shopee: 297 },
    { label: "05", ml: 431, shopee: 332 },
  ],
  "30": [
    { label: "Sem 1", ml: 1042, shopee: 821 }, { label: "Sem 2", ml: 1198, shopee: 904 },
    { label: "Sem 3", ml: 1281, shopee: 976 }, { label: "Sem 4", ml: 1492, shopee: 1115 },
    { label: "Atual", ml: 1248, shopee: 987 },
  ],
  "90": [
    { label: "Jun", ml: 2864, shopee: 2142 }, { label: "Jul", ml: 3421, shopee: 2689 },
    { label: "Ago", ml: 4018, shopee: 3131 }, { label: "Set", ml: 1248, shopee: 987 },
  ],
};

const MKT_CHANNELS = {
  ml: { label: "Mercado Livre", short: "ML", icon: "tag" },
  shopee: { label: "Shopee", short: "SH", icon: "cart" },
};

function PerformanceBars({ data, channel }) {
  const keys = channel === "todos" ? ["ml", "shopee"] : [channel];
  const max = Math.max(1, ...data.reduce((values, d) => [...values, ...keys.map((key) => d[key])], []));
  return (
    <div className="mkt-chart" aria-label="Evolução de cliques por período">
      <div className="mkt-chart-grid"><i /><i /><i /><i /></div>
      {data.map((d) => (
        <div className="mkt-chart-col" key={d.label}>
          <div className="mkt-chart-bars">
            {keys.map((key) => (
              <span key={key} className={"mkt-chart-bar " + key}
                title={MKT_CHANNELS[key].label + ": " + d[key].toLocaleString("pt-BR") + " cliques"}
                style={{ height: Math.max(5, (d[key] / max) * 100) + "%" }} />
            ))}
          </div>
          <span className="mkt-chart-label">{d.label}</span>
        </div>
      ))}
    </div>
  );
}

function ChannelMark({ channel }) {
  const meta = MKT_CHANNELS[channel];
  return (
    <span className={"mkt-channel-mark " + channel}>
      <span className="mkt-channel-logo">{meta.short}</span>
      <span>{meta.label}</span>
    </span>
  );
}

function DesempenhoMarketplaces({ app }) {
  const [period, setPeriod] = useState("30");
  const [channel, setChannel] = useState("todos");
  const [query, setQuery] = useState("");

  const periodFactor = period === "7" ? 0.24 : period === "90" ? 2.76 : 1;
  const products = MKT_PERFORMANCE_PRODUCTS
    .filter((item) => channel === "todos" || item.canal === channel)
    .map((item) => ({
      ...item,
      cliquesPeriodo: Math.round(item.cliques * periodFactor),
      comprasPeriodo: Math.round(item.compras * periodFactor),
      faturamentoPeriodo: item.faturamento * periodFactor,
    }))
    .filter((item) => !query || (item.produto + " " + item.sku).toLowerCase().includes(query.toLowerCase()));

  const allForMetrics = MKT_PERFORMANCE_PRODUCTS
    .filter((item) => channel === "todos" || item.canal === channel)
    .map((item) => ({
      ...item,
      cliquesPeriodo: Math.round(item.cliques * periodFactor),
      comprasPeriodo: Math.round(item.compras * periodFactor),
      faturamentoPeriodo: item.faturamento * periodFactor,
    }));

  const clicks = allForMetrics.reduce((sum, item) => sum + item.cliquesPeriodo, 0);
  const purchases = allForMetrics.reduce((sum, item) => sum + item.comprasPeriodo, 0);
  const revenue = allForMetrics.reduce((sum, item) => sum + item.faturamentoPeriodo, 0);
  const conversion = clicks ? (purchases / clicks) * 100 : 0;
  const fmtMoney = (value) => DB.BRL(value).replace("R$\u00a0", "R$ ");
  const fmtNumber = (value) => value.toLocaleString("pt-BR");

  return (
    <div className="view-inner">
      <div className="page-head head-row mkt-performance-head">
        <div>
          <div className="crumb">Gestão</div>
          <h1 className="page-title">Desempenho nos marketplaces</h1>
          <p className="page-sub">Acompanhe acessos, compras e conversão dos seus anúncios.</p>
        </div>
        <div className="row gap8 mkt-performance-actions">
          <div className="seg" aria-label="Período da análise">
            {[{ id: "7", label: "7 dias" }, { id: "30", label: "30 dias" }, { id: "90", label: "90 dias" }].map((item) => (
              <button key={item.id} className={period === item.id ? "on" : ""} onClick={() => setPeriod(item.id)}>{item.label}</button>
            ))}
          </div>
          <Btn icon="settings" onClick={() => app.setRoute("integracoes")}>Integrações</Btn>
        </div>
      </div>

      <div className="mkt-demo-notice">
        <span className="mkt-demo-icon"><Icon name="chart" size={17} /></span>
        <div className="grow">
          <div className="strong">Visualização demonstrativa</div>
          <div className="small muted">Os dados abaixo são exemplos. Após conectar Mercado Livre e Shopee, esta tela será atualizada automaticamente.</div>
        </div>
        <Badge tone="info" dotted>Dados de exemplo</Badge>
      </div>

      <div className="mkt-channel-filter">
        {[
          { id: "todos", label: "Todos os canais", icon: "layers" },
          { id: "ml", label: "Mercado Livre", icon: "tag" },
          { id: "shopee", label: "Shopee", icon: "cart" },
        ].map((item) => (
          <button key={item.id} className={channel === item.id ? "active" : ""} onClick={() => setChannel(item.id)}>
            <Icon name={item.icon} size={15} />{item.label}
          </button>
        ))}
      </div>

      <div className="metrics mkt-performance-metrics">
        <MetricCard icon="eye" label="Cliques nos produtos" value={fmtNumber(clicks)} delta="9,8%" deltaTone="up" foot="vs. período anterior" />
        <MetricCard icon="cart" label="Compras" value={fmtNumber(purchases)} delta="6,4%" deltaTone="up" foot="pedidos confirmados" />
        <MetricCard icon="percent" label="Compra por clique" value={conversion.toFixed(2).replace(".", ",") + "%"} foot="taxa de conversão" state="ok" />
        <MetricCard icon="dollar" label="Faturamento atribuído" value={fmtMoney(revenue)} delta="11,2%" deltaTone="up" foot="vendas após o clique" />
      </div>

      <div className="mkt-performance-grid">
        <div className="card">
          <div className="card-head">
            <Icon name="chart" size={16} />
            <h3>Evolução dos acessos</h3>
            <span className="sub">Cliques nos anúncios</span>
            <span className="spacer" />
            <div className="mkt-chart-legend">
              {(channel === "todos" ? ["ml", "shopee"] : [channel]).map((key) => (
                <span key={key}><i className={key} />{MKT_CHANNELS[key].label}</span>
              ))}
            </div>
          </div>
          <div className="card-pad">
            <PerformanceBars data={MKT_PERFORMANCE_HISTORY[period]} channel={channel} />
          </div>
        </div>

        <div className="card mkt-summary-card">
          <div className="card-head">
            <Icon name="percent" size={16} />
            <h3>Conversão por canal</h3>
          </div>
          <div className="card-pad">
            {["ml", "shopee"].map((key) => {
              const items = MKT_PERFORMANCE_PRODUCTS.filter((item) => item.canal === key);
              const channelClicks = items.reduce((sum, item) => sum + Math.round(item.cliques * periodFactor), 0);
              const channelPurchases = items.reduce((sum, item) => sum + Math.round(item.compras * periodFactor), 0);
              const rate = channelClicks ? (channelPurchases / channelClicks) * 100 : 0;
              return (
                <div className="mkt-channel-summary" key={key}>
                  <div className="row">
                    <ChannelMark channel={key} />
                    <span className="spacer" />
                    <span className="mkt-conversion-value">{rate.toFixed(2).replace(".", ",")}%</span>
                  </div>
                  <Bar value={rate * 10} tone={key === "ml" ? "" : "warn"} />
                  <div className="small muted">{fmtNumber(channelPurchases)} compras em {fmtNumber(channelClicks)} cliques</div>
                </div>
              );
            })}
            <div className="mkt-insight">
              <Icon name="trendUp" size={16} />
              <span><b>Oportunidade:</b> os anúncios da Shopee têm a maior conversão no período.</span>
            </div>
          </div>
        </div>
      </div>

      <div className="card mkt-products-card">
        <div className="card-head">
          <Icon name="package" size={16} />
          <h3>Desempenho por produto</h3>
          <span className="sub">Ordenado por número de cliques</span>
          <span className="spacer" />
          <div className="input mkt-product-search">
            <Icon name="search" size={14} />
            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Buscar produto ou SKU…" />
          </div>
        </div>
        {products.length === 0 ? (
          <Empty icon="search" title="Nenhum produto encontrado">Tente outro nome ou SKU.</Empty>
        ) : (
          <div className="tbl-wrap">
            <table className="tbl mkt-performance-table">
              <thead><tr><th>Produto</th><th>Canal</th><th className="num">Cliques</th><th className="num">Compras</th><th className="num">Compra por clique</th><th className="num">Faturamento</th><th className="num">Tendência</th></tr></thead>
              <tbody>
                {products.map((item) => {
                  const rate = item.cliquesPeriodo ? (item.comprasPeriodo / item.cliquesPeriodo) * 100 : 0;
                  const positive = item.tendencia >= 0;
                  return (
                    <tr key={item.id}>
                      <td><div className="strong">{item.produto}</div><div className="sku">{item.sku}</div></td>
                      <td><ChannelMark channel={item.canal} /></td>
                      <td className="num strong">{fmtNumber(item.cliquesPeriodo)}</td>
                      <td className="num">{fmtNumber(item.comprasPeriodo)}</td>
                      <td className="num"><span className="mkt-rate">{rate.toFixed(2).replace(".", ",")}%</span></td>
                      <td className="num mono">{fmtMoney(item.faturamentoPeriodo)}</td>
                      <td className="num"><span className={"mkt-trend " + (positive ? "up" : "down")}><Icon name={positive ? "trendUp" : "trendDown"} size={12} />{Math.abs(item.tendencia).toFixed(1).replace(".", ",")}%</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DesempenhoMarketplaces });