(function () {
  const DS = window.MS7DesignSystem_5d5172;
  /* CSS só desta tela (tokens) — heatmap que funciona no preto */
  (function () {
    if (document.getElementById('ms7-analises-css')) return;
    const s = document.createElement('style');
    s.id = 'ms7-analises-css';
    s.textContent = [
      '.ms7a-heat-wrap{overflow-x:auto;margin:0 -4px;padding:2px 4px 6px;-webkit-overflow-scrolling:touch}',
      '.ms7a-heat{display:grid;grid-template-columns:44px repeat(24,minmax(0,1fr));gap:3px;align-items:center;min-width:640px}',
      '.ms7a-heat-h{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--text-secondary);text-align:center;font-variant-numeric:tabular-nums;padding-bottom:2px}',
      '.ms7a-heat-d{font-size:12px;font-weight:600;color:var(--text-primary);padding-right:6px}',
      '.ms7a-heat-c{aspect-ratio:1;border-radius:4px;background:var(--surface-muted);cursor:default;transition:transform var(--dur-fast),box-shadow var(--dur-fast)}',
      '.ms7a-heat-c.is-on{box-shadow:0 0 0 2px var(--text-primary),0 0 0 3px var(--surface-page);transform:scale(1.06);position:relative;z-index:1}',
      '.ms7a-heat-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}',
      '.ms7a-heat-v{font-size:13.5px;font-weight:500;min-height:20px;max-width:360px;color:var(--text-secondary)}.ms7a-heat-v b{font-weight:600;color:var(--text-primary)}',
      '.ms7a-heat-leg{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}',
      '.ms7a-heat-leg>i{width:120px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--surface-muted),var(--ms7-green),var(--ms7-green-900));background:linear-gradient(in oklab 90deg,var(--surface-muted),var(--ms7-green),var(--ms7-green-900))}',
    ].join('');
    document.head.appendChild(s);
  })();
  /* título de card com 1 emoji (regra do guia) */
  const ttl = function (emo, txt) {
    return (
      <React.Fragment>
        <span className="ms7-emo" aria-hidden="true" style={{ marginRight: 8 }}>
          {emo}
        </span>
        {txt}
      </React.Fragment>
    );
  };
  const DIAS = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
  /* escala sequencial em tokens: superfície → verde → acento (lima no escuro, verde-escuro no claro) */
  const heatColor = function (t) {
    if (!(t > 0)) return 'var(--surface-muted)';
    if (t < 0.5) return 'color-mix(in oklab, var(--ms7-green) ' + Math.round(8 + t * 2 * 92) + '%, var(--surface-muted))';
    return 'color-mix(in oklab, var(--ms7-green-900) ' + Math.round((t - 0.5) * 2 * 100) + '%, var(--ms7-green))';
  };
  /* grade do heatmap (só apresentação; a matriz vem pronta da tela) */
  function HeatGrid({ matrix, metricLabel, format }) {
    const [hi, setHi] = React.useState(null);
    let max = 0;
    (matrix || []).forEach(function (r) {
      r.forEach(function (v) {
        if (v > max) max = v;
      });
    });
    const f =
      format ||
      function (v) {
        return String(v);
      };
    return (
      <div>
        <div className="ms7a-heat-wrap">
          <div className="ms7a-heat">
            <span></span>
            {Array.from({ length: 24 }).map(function (_, h) {
              return (
                <span key={'h' + h} className="ms7a-heat-h">
                  {h % 3 === 0 ? h + 'h' : ''}
                </span>
              );
            })}
            {(matrix || []).map(function (row, d) {
              return (
                <React.Fragment key={d}>
                  <span className="ms7a-heat-d">{DIAS[d]}</span>
                  {row.map(function (v, h) {
                    const on = hi && hi[0] === d && hi[1] === h;
                    return (
                      <span
                        key={h}
                        className={'ms7a-heat-c' + (on ? ' is-on' : '')}
                        style={{ background: heatColor(max ? v / max : 0) }}
                        onMouseEnter={function () {
                          setHi([d, h]);
                        }}
                        onMouseLeave={function () {
                          setHi(null);
                        }}
                        onClick={function () {
                          setHi(on ? null : [d, h]);
                        }}
                      ></span>
                    );
                  })}
                </React.Fragment>
              );
            })}
          </div>
        </div>
        <div className="ms7a-heat-foot">
          <span className="ms7a-heat-v ms7-balance">
            {hi ? (
              <React.Fragment>
                <b>{DIAS[hi[0]] + ' · ' + hi[1] + 'h'}</b>
                {' — ' + metricLabel + ': '}
                <b className="ms7-num">{f(matrix[hi[0]][hi[1]])}</b>
              </React.Fragment>
            ) : (
              'Passe o mouse ou toque numa célula para ver o valor'
            )}
          </span>
          <span className="ms7a-heat-leg">
            Menor
            <i></i>
            Maior
          </span>
        </div>
      </div>
    );
  }
  function HeatmapScreen() {
    const { Card, Tabs } = DS;
    const [metric, setMetric] = usePersist('heat-m', 'lucro');
    const [per, setPer] = usePersist('heat-per', 'Todos');
    const f = { Hoje: 0.12, '7 dias': 0.35, '30 dias': 1, Todos: 1.6 }[per] || 1;
    const m = MS7.heat.map(function (r) {
      return r.map(function (v) {
        return Math.round(metric === 'lucro' ? v * f : (v * f) / 180);
      });
    });
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <PeriodBar value={per} onChange={setPer}>
          <Tabs
            value={metric}
            onChange={setMetric}
            items={[
              { id: 'lucro', label: 'Lucro' },
              { id: 'count', label: 'Quantidade' },
            ]}
            style={{ width: 240 }}
          />
        </PeriodBar>
        <Card
          title={ttl('🔥', 'Heatmap de operação')}
          subtitle={'Melhores horários para operar — ' + (metric === 'lucro' ? 'lucro' : 'quantidade') + ' por dia da semana e hora (horário de Brasília)'}
        >
          <HeatGrid matrix={m} metricLabel={metric === 'lucro' ? 'Lucro' : 'Quantidade'} format={metric === 'lucro' ? MS7.brl : MS7.num} />
        </Card>
      </div>
    );
  }
  function ProjecaoScreen() {
    const { Card, LineChart } = DS;
    DB.useDB();
    const T = DB.today;
    const day = T.getDate();
    const total = new Date(T.getFullYear(), T.getMonth() + 1, 0).getDate();
    const daily = Array.from({ length: day }).map(function (_, i) {
      const ds = DB.iso(new Date(T.getFullYear(), T.getMonth(), i + 1, 12));
      return DB.get()
        .coops.filter(function (c) {
          return c.status !== 'Lixeira' && c.inicio === ds;
        })
        .reduce(function (a, c) {
          return a + DB.calc(c).lucro;
        }, 0);
    });
    let acc = 0;
    const real = daily.map(function (v) {
      acc += v;
      return acc;
    });
    const projected = day ? (acc / day) * total : 0;
    const labels = Array.from({ length: total }).map(function (_, i) {
      return String(i + 1).padStart(2, '0') + '/' + String(T.getMonth() + 1).padStart(2, '0');
    });
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <KpiRow
          min={240}
          items={[
            { icon: 'circle-dollar-sign', label: 'Lucro realizado no mês', value: MS7.brlK(acc), tone: 'green', signed: acc },
            { icon: 'trending-up', label: 'Projeção do mês', value: MS7.brlK(projected), tone: 'blue', signed: projected },
            { icon: 'calendar-days', label: 'Progresso do mês', value: day + ' / ' + total + ' dias', tone: 'orange' },
          ]}
        />
        <Card title={ttl('📈', 'Projeção de lucro líquido')} subtitle="Realizado × projeção, dia a dia">
          <LineChart
            height={280}
            labels={labels}
            datasets={[
              { label: 'Realizado', values: real },
              {
                label: 'Projeção',
                values: labels.map(function (_, i) {
                  return Math.round((projected * (i + 1)) / total);
                }),
                dashed: true,
                color: 'var(--ms7-lime-600)',
              },
            ]}
            format={MS7.brl}
          />
          <p style={{ margin: '14px 0 0', fontSize: 12.5, fontWeight: 500, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
            Soma do lucro líquido das cooperações abertas em cada dia. A projeção segue o ritmo atual do&nbsp;mês.
          </p>
        </Card>
      </div>
    );
  }
  function CustosScreen() {
    const { Card, Input, Select, Button, DataTable, Badge, IconButton } = DS;
    const db = DB.useDB();
    const C = MS7.custosCats;
    const [per, setPer] = usePersist('custos-per', '30 dias');
    const [f, setF] = React.useState({ cat: 'proxy', valor: '', desc: '' });
    const rows = db.custos.filter(function (r) {
      return DB.inPeriod(r.data, per);
    });
    const catOf = function (id) {
      return (
        C.find(function (c) {
          return c.id === id;
        }) || C[4]
      );
    };
    const total = rows.reduce(function (a, r) {
      return a + r.valor;
    }, 0);
    const contas = DB.agg(DB.coopsFor({ per: per })).n;
    const agg = C.map(function (c) {
      return {
        c: c,
        v: rows
          .filter(function (r) {
            return r.cat === c.id;
          })
          .reduce(function (a, r) {
            return a + r.valor;
          }, 0),
      };
    }).filter(function (a) {
      return a.v > 0;
    });
    function add() {
      const v = parseFloat(String(f.valor).replace(',', '.'));
      if (!v) {
        toast('✍️ Informe o valor');
        return;
      }
      DB.A.addCusto({ comp: '09/2026', cat: f.cat, desc: f.desc || catOf(f.cat).label, valor: v });
      setF(Object.assign({}, f, { valor: '', desc: '' }));
    }
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <PeriodBar value={per} onChange={setPer} />
        <Card title={ttl('🧾', 'Registrar custo')} subtitle={'Proxies, servidores, softwares e bots entram no custo por conta.'}>
          <div className="ms7d-form">
            <Select
              label="Categoria"
              value={f.cat}
              onChange={function (e) {
                setF(Object.assign({}, f, { cat: e.target.value }));
              }}
              options={C.map(function (c) {
                return { value: c.id, label: c.label };
              })}
            />
            <Input
              label="Valor"
              prefix="R$"
              placeholder="0,00"
              value={f.valor}
              onChange={function (e) {
                setF(Object.assign({}, f, { valor: e.target.value }));
              }}
            />
            <Input
              label="Descrição"
              placeholder="Ex.: Pacote de proxies"
              value={f.desc}
              onChange={function (e) {
                setF(Object.assign({}, f, { desc: e.target.value }));
              }}
            />
            <Button variant="brand" iconLeft="plus" onClick={add} style={{ height: 42 }}>
              Registrar
            </Button>
          </div>
        </Card>
        <KpiRow
          min={230}
          items={[
            { icon: 'wallet', label: 'Custos de ferramentas', value: MS7.brlK(total), tone: 'black' },
            { icon: 'users', label: 'Contas no período', value: contas, tone: 'blue' },
            { icon: 'receipt', label: 'Ferramentas por conta', value: MS7.brl(contas ? total / contas : 0), tone: 'yellow' },
            { icon: 'tag', label: 'Custo fixo por conta', value: MS7.brl(db.config.custoConta), tone: 'orange' },
          ]}
        />
        <Grid min={340}>
          <Card title={ttl('💸', 'Custos por categoria')} subtitle={agg.length ? 'Total ' + MS7.brl(total) + ' no período' : null}>
            {agg.length ? (
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', height: 10, borderRadius: 5, overflow: 'hidden', marginBottom: 6, background: 'var(--surface-muted)' }}>
                  {agg.map(function (a) {
                    return <span key={a.c.id} style={{ width: (a.v / total) * 100 + '%', background: a.c.color, boxShadow: '-2px 0 0 var(--surface-page)' }}></span>;
                  })}
                </div>
                <div className="ms7d-list">
                  {agg.map(function (a) {
                    return (
                      <div key={a.c.id} className="ms7d-row" style={{ padding: '11px 10px' }}>
                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: a.c.color, flexShrink: 0 }}></span>
                        <span className="ms7d-t" style={{ flex: 1 }}>
                          {a.c.label}
                        </span>
                        <span className="ms7-num" style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)' }}>
                          {Math.round((a.v / total) * 100) + '%'}
                        </span>
                        <span className="ms7-num" style={{ width: 110, textAlign: 'right', fontSize: 14, fontWeight: 600 }}>
                          {MS7.brl(a.v)}
                        </span>
                      </div>
                    );
                  })}
                </div>
              </div>
            ) : (
              <Empty art="Wallet" title="Nenhum custo no período" sub="Registre proxies, servidores e softwares acima para acompanhar o custo por conta." />
            )}
          </Card>
          <Card
            title={ttl('📋', 'Registros')}
            action={
              <Button
                size="sm"
                variant="outline"
                iconLeft="download"
                onClick={function () {
                  exportCSV(
                    'custos',
                    [
                      {
                        label: 'Data',
                        get: function (r) {
                          return r.data;
                        },
                      },
                      {
                        label: 'Categoria',
                        get: function (r) {
                          return catOf(r.cat).label;
                        },
                      },
                      {
                        label: 'Descrição',
                        get: function (r) {
                          return r.desc;
                        },
                      },
                      {
                        label: 'Valor',
                        get: function (r) {
                          return r.valor;
                        },
                      },
                    ],
                    rows,
                  );
                }}
              >
                Exportar
              </Button>
            }
          >
            {!rows.length ? (
              <Empty art="Inbox" compact title="Nenhum registro no período" sub="Os custos registrados aparecem aqui com data, categoria e valor." />
            ) : null}
            <DataTable
              style={rows.length ? null : { display: 'none' }}
              rows={rows}
              columns={[
                {
                  key: 'data',
                  label: 'Data',
                  render: function (r) {
                    return <span className="ms7-num">{DB.fmtDate(r.data)}</span>;
                  },
                },
                {
                  key: 'cat',
                  label: 'Categoria',
                  render: function (r) {
                    return (
                      <Badge
                        variant="soft"
                        size="sm"
                        tone={{ proxy: 'green', servidor: 'blue', software: 'purple', bots: 'orange', outros: 'gray' }[r.cat]}
                      >
                        {catOf(r.cat).label}
                      </Badge>
                    );
                  },
                },
                { key: 'desc', label: 'Descrição' },
                {
                  key: 'valor',
                  label: 'Valor',
                  align: 'right',
                  render: function (r) {
                    return (
                      <span className="ms7-num" style={{ fontWeight: 600 }}>
                        {MS7.brl(r.valor)}
                      </span>
                    );
                  },
                },
                {
                  key: 'x',
                  label: '',
                  align: 'right',
                  render: function (r) {
                    return (
                      <IconButton
                        icon="trash-2"
                        size={30}
                        iconSize={16}
                        onClick={function () {
                          DB.A.removeCusto(r.id);
                        }}
                      />
                    );
                  },
                },
              ]}
            />
          </Card>
        </Grid>
      </div>
    );
  }
  function FolhaScreen() {
    const { Card, DataTable, Button, Modal } = DS;
    const db = DB.useDB();
    const [per, setPer] = usePersist('folha-per2', '7 dias');
    const [det, setDet] = React.useState(null);
    const add = function (ds, n) {
      const d = new Date(ds + 'T12:00:00');
      d.setDate(d.getDate() + n);
      return DB.iso(d);
    };
    const hoje = DB.iso(DB.today);
    const pp = String(per || '');
    const rg = pp.indexOf('de:') === 0 ? [pp.split(':')[1], pp.split(':')[2] || pp.split(':')[1]]
      : pp === 'Hoje' ? [hoje, hoje] : pp === 'Ontem' ? [add(hoje, -1), add(hoje, -1)] : pp === '7 dias' ? [add(hoje, -6), hoje]
      : pp === '30 dias' ? [add(hoje, -29), hoje] : pp === 'Este mês' ? [hoje.slice(0, 8) + '01', hoje] : ['2000-01-01', hoje];
    const L = DB.comissoesDe(null, rg[0], rg[1]);
    const ini = pp === 'Todos' || !per ? L.reduce(function (m, x) { return x.data < m ? x.data : m; }, hoje) : rg[0];
    const dias = Math.max(1, Math.round((new Date(rg[1] + 'T12:00:00') - new Date(ini + 'T12:00:00')) / 864e5) + 1);
    const perTxt = DB.perLabel ? DB.perLabel(per) : per;
    const ids = [];
    L.forEach(function (x) { if (ids.indexOf(x.c.opId) < 0) ids.push(x.c.opId); });
    const r2 = function (v) { return Math.round(v * 100) / 100; };
    const rows = ids
      .map(function (id) {
        const l = L.filter(function (x) { return x.c.opId === id; });
        const com = r2(l.reduce(function (s, x) { return s + x.com; }, 0));
        const lucro = r2(l.reduce(function (s, x) { return s + (DB.calc(x.c).lucro || 0); }, 0));
        const contas = l.reduce(function (s, x) { return s + (DB.calc(x.c).n || 0); }, 0);
        return { id: id, nome: DB.opApres ? DB.opApres(id) : DB.opName(id) || 'Sem operador', coops: l.length, contas: contas, com: com, dia: r2(com / dias), lucro: lucro };
      })
      .sort(function (x, y) { return y.com - x.com; });
    const s = function (k) { return rows.reduce(function (x, r) { return x + r[k]; }, 0); };
    const porDia = dias <= 31;
    const chart = (function () {
      const out = [];
      if (porDia) {
        for (let n = 0; n < dias; n++) {
          const d = add(ini, n);
          out.push({ label: DB.fmtDate(d).slice(0, 5), values: [Math.round(L.filter(function (x) { return x.data === d; }).reduce(function (t, x) { return t + x.com; }, 0))] });
        }
      } else {
        let w = DB.semanaIni(ini);
        while (w <= rg[1]) {
          const w2 = add(w, 6);
          out.push({ label: DB.fmtDate(w < ini ? ini : w).slice(0, 5), values: [Math.round(L.filter(function (x) { return x.data >= w && x.data <= w2; }).reduce(function (t, x) { return t + x.com; }, 0))] });
          w = add(w, 7);
        }
      }
      return out;
    })();
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <PeriodBar value={per} onChange={setPer} />
        <KpiRow
          items={[
            { icon: 'wallet', label: 'Ganho dos operadores', value: MS7.brl(s('com')), tone: 'blue' },
            { icon: 'calendar-days', label: 'Média por dia', value: MS7.brl(r2(s('com') / dias)), tone: 'green' },
            { icon: 'trending-up', label: 'Lucro que trouxeram', value: MS7.brl(s('lucro')), tone: s('lucro') >= 0 ? 'green' : 'orange', signed: s('lucro') },
            { icon: 'briefcase', label: 'Cooperações concluídas', value: L.length, tone: 'yellow' },
          ]}
        />
        {chart.length > 1 ? (
          <Card title={ttl('💸', porDia ? 'Ganho por dia' : 'Ganho por semana')} subtitle={perTxt}>
            <DS.BarChart height={200} data={chart} series={[{ name: 'Comissão', color: 'var(--chart-1)' }]} />
          </Card>
        ) : null}
        <Card title={ttl('👥', 'Quanto cada operador está ganhando')} subtitle={perTxt + ' · ' + dias + (dias === 1 ? ' dia' : ' dias')}>
          <Hint>A comissão já é paga no envio da meta. Aqui você vê quanto cada um ganhou no período, pelo dia em que a cooperação foi&nbsp;concluída.</Hint>
          {rows.length ? (
            <DataTable
              rows={rows}
              onRowClick={function (r) { setDet(r.id); }}
              columns={[
                { key: 'nome', label: 'Operador', render: function (r) { return <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><DS.Avatar name={r.nome} size={30} /><b style={{ fontWeight: 600 }}>{r.nome}</b></div>; } },
                { key: 'coops', label: 'Coops', align: 'center', render: function (r) { return <span className="ms7-num">{r.coops}</span>; } },
                { key: 'contas', label: 'Contas', align: 'center', render: function (r) { return <span className="ms7-num">{r.contas}</span>; } },
                { key: 'com', label: 'Ganhou', align: 'right', render: function (r) { return <b className="ms7-num" style={{ fontWeight: 600 }}>{MS7.brl(r.com)}</b>; } },
                { key: 'dia', label: 'Por dia', align: 'right', render: function (r) { return <span className="ms7-num" style={{ color: 'var(--text-secondary)' }}>{MS7.brl(r.dia)}</span>; } },
                { key: 'lucro', label: 'Lucro trazido', align: 'right', render: function (r) { return <Money v={r.lucro} signed />; } },
              ]}
            />
          ) : (
            <Empty art="Wallet" title="Nenhuma cooperação concluída neste período" sub="Escolha outro período nos filtros acima." />
          )}
        </Card>
        {det
          ? (function () {
              const l = L.filter(function (x) {
                return x.c.opId === det;
              }).sort(function (x, y) {
                return x.data < y.data ? -1 : 1;
              });
              const tot = l.reduce(function (t, x) {
                return t + x.com;
              }, 0);
              return (
                <Modal
                  open={true}
                  onClose={function () {
                    setDet(null);
                  }}
                  title={'Comissão de ' + (DB.opName(det) || 'Sem operador')}
                  subtitle={perTxt + ' · ' + l.length + (l.length === 1 ? ' cooperação' : ' cooperações') + ' · ' + MS7.brl(tot)}
                  footer={
                    <Button
                      variant="secondary"
                      onClick={function () {
                        setDet(null);
                      }}
                    >
                      Fechar
                    </Button>
                  }
                >
                  <div className="ms7d-list">
                    {l.map(function (x) {
                      return (
                        <div key={x.c.id} className="ms7d-row">
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div className="ms7d-t">{DB.coopNome(x.c)}</div>
                            <div className="ms7d-s">{'Finalizada em ' + DB.fmtDate(x.data) + ' · ' + DB.comText(x.c)}</div>
                          </div>
                          <span className="ms7-num" style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap' }}>
                            {MS7.brl(x.com)}
                          </span>
                        </div>
                      );
                    })}
                    {!l.length ? <Empty art="Coop" compact title="Nenhuma cooperação concluída neste período" sub="As cooperações concluídas do operador aparecem aqui com a comissão de cada uma." /> : null}
                  </div>
                </Modal>
              );
            })()
          : null}
      </div>
    );
  }
  Object.assign(window, { HeatmapScreen: HeatmapScreen, ProjecaoScreen: ProjecaoScreen, CustosScreen: CustosScreen, FolhaScreen: FolhaScreen });
})();