/**
 * TrendApp — Extrato de comissão + Detalhe do lançamento (§9)
 *
 * Estilo bancário premium:
 *   - HeroHeader dark
 *   - Seletor de mês (Ago/Jul/Jun/Mai)
 *   - Chips de período (todo mês / 15d / 7d / customizado)
 *   - Saldo grande no topo
 *   - Lançamentos agrupados por dia (HOJE / ONTEM / 04 AGO...)
 *   - Saldo acumulado à direita de cada lançamento
 *
 * NUNCA mostrar: override, comissão de terceiros, fórmulas, base de cálculo
 * de terceiros, auditoria de reconciliação.
 */

// (hooks em logo.jsx)

const MESES_HIST = [
  { id: '2026-08', label: 'Ago/26', ativo: true },
  { id: '2026-07', label: 'Jul/26' },
  { id: '2026-06', label: 'Jun/26' },
  { id: '2026-05', label: 'Mai/26' },
  { id: '2026-04', label: 'Abr/26' },
  { id: '2026-03', label: 'Mar/26' },
];

// Multiplicadores mockados para cada mês histórico (mais realista que
// mostrar sempre o mesmo dataset)
const MULTIPLICADOR_MES = {
  '2026-08': 1.0,
  '2026-07': 1.32,
  '2026-06': 1.18,
  '2026-05': 1.08,
  '2026-04': 1.14,
  '2026-03': 0.94,
};

function ExtratoScreen({ payload }) {
  const { back } = useRouter();
  const { tweaks } = useTweaks();
  const fmt = window.TrendFmt;

  const { lancamentos: lancRaw, emApuracao, loading, error } = payload;

  const [mesSel, setMesSel] = useState('2026-08');
  const [periodo, setPeriodo] = useState('todo');   // 'todo' | '15d' | '7d' | 'custom'
  const [detalheOpen, setDetalheOpen] = useState(null);

  // Aplica override do Tweaks
  const lancamentosBase = useMemo(() => {
    if (tweaks.comissaoOverride === 'auto') return lancRaw;
    if (tweaks.comissaoOverride === 'em_apuracao') return [];
    return lancRaw.map(l => ({ ...l, comStatus: tweaks.comissaoOverride }));
  }, [lancRaw, tweaks.comissaoOverride]);

  const emApur = useMemo(() => {
    if (tweaks.comissaoOverride === 'em_apuracao') {
      return lancRaw.map(l => ({ ...l, comStatus: 'em_apuracao' }));
    }
    return emApuracao;
  }, [emApuracao, lancRaw, tweaks.comissaoOverride]);

  // Simula dataset por mês (multiplicador + shift de datas)
  const lancamentosMes = useMemo(() => {
    const mult = MULTIPLICADOR_MES[mesSel] ?? 1.0;
    const [ano, mes] = mesSel.split('-').map(Number);
    // remapear datas para o mês selecionado
    return lancamentosBase.map((l, i) => {
      const diaOriginal = new Date(l.data).getDate();
      // clamp dia ao último dia do mês
      const lastDay = new Date(ano, mes, 0).getDate();
      const dia = Math.min(diaOriginal, lastDay);
      const novaData = `${ano}-${String(mes).padStart(2, '0')}-${String(dia).padStart(2, '0')}`;
      return {
        ...l,
        data: novaData,
        comissao: Math.round(l.comissao * mult * 100) / 100,
      };
    });
  }, [lancamentosBase, mesSel]);

  // Filtra por período dentro do mês selecionado
  const lancamentosFiltrados = useMemo(() => {
    if (periodo === 'todo') return lancamentosMes;
    const [ano, mes] = mesSel.split('-').map(Number);
    // Define "hoje" fictício = último lançamento do mês
    if (lancamentosMes.length === 0) return [];
    const dias = periodo === '7d' ? 7 : periodo === '15d' ? 15 : 999;
    const todosDias = lancamentosMes.map(l => new Date(l.data).getDate());
    const maxDia = Math.max(...todosDias);
    const minDia = maxDia - dias + 1;
    return lancamentosMes.filter(l => new Date(l.data).getDate() >= minDia);
  }, [lancamentosMes, periodo, mesSel]);

  // Ordena DESC por data (mais recente primeiro — estilo banco)
  const lancamentosOrdenados = useMemo(() => {
    return [...lancamentosFiltrados].sort((a, b) => b.data.localeCompare(a.data));
  }, [lancamentosFiltrados]);

  // Agrupamento por dia
  const gruposPorDia = useMemo(() => {
    const map = new Map();
    for (const l of lancamentosOrdenados) {
      if (!map.has(l.data)) map.set(l.data, []);
      map.get(l.data).push(l);
    }
    return Array.from(map.entries()).map(([data, itens]) => ({ data, itens }));
  }, [lancamentosOrdenados]);

  // Saldo acumulado — do mais antigo pro mais recente
  const totalPeriodo = useMemo(() => lancamentosFiltrados.reduce((s, l) => s + (l.comissao || 0), 0), [lancamentosFiltrados]);
  const saldosPorLancamento = useMemo(() => {
    // Ordenamos ASC para acumular, depois voltamos como Map por id
    const asc = [...lancamentosFiltrados].sort((a, b) => a.data.localeCompare(b.data));
    let acc = 0;
    const map = new Map();
    for (const l of asc) {
      acc += l.comissao || 0;
      map.set(l.pedido, Math.round(acc * 100) / 100);
    }
    return map;
  }, [lancamentosFiltrados]);

  const mesLabel = MESES_HIST.find(m => m.id === mesSel)?.label || fmt.fmtCompetencia(mesSel + '-01');

  return (
    <div className="page page-enter">
      <div className="page-body" style={{ paddingTop: 0 }}>
        {/* HeroHeader premium com back button */}
        <HeroHeader
          eyebrow="Extrato de comissão"
          title={fmt.fmtCompetencia(mesSel + '-01')}
          subtitle={loading ? undefined : `${lancamentosFiltrados.length} ${lancamentosFiltrados.length === 1 ? 'lançamento' : 'lançamentos'}${emApur.length > 0 && mesSel === '2026-08' ? ` · ${emApur.length} em apuração` : ''}`}
          minHeight={220}
          action={{
            icon: 'arrow-left',
            ariaLabel: 'Voltar',
            onClick: () => back('/inicio'),
          }}
        >
          {/* Saldo grande dentro do hero */}
          {!loading && (
            <div style={{ marginTop: 4 }}>
              <div style={{
                fontSize: 10.5, fontWeight: 400,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(245,247,247,0.55)',
                marginBottom: 8,
              }}>Comissão do período</div>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 4,
                fontVariantNumeric: 'tabular-nums',
              }}>
                <span style={{
                  fontSize: 18, fontWeight: 300,
                  color: 'rgba(245,247,247,0.55)',
                  marginRight: 4,
                }}>R$</span>
                <span style={{
                  fontSize: 42, fontWeight: 300,
                  letterSpacing: '-0.045em',
                  lineHeight: 1,
                  color: '#F5F7F7',
                }}>{fmt.fmtBRLParts(totalPeriodo).int}</span>
                <span style={{
                  fontSize: 20, fontWeight: 300,
                  color: 'rgba(245,247,247,0.55)',
                  letterSpacing: '-0.02em',
                }}>{fmt.fmtBRLParts(totalPeriodo).dec}</span>
              </div>
            </div>
          )}
        </HeroHeader>

        {/* Chips de mês (scroll horizontal) */}
        <div style={{
          display: 'flex',
          gap: 8,
          overflowX: 'auto',
          padding: '16px 20px 0',
          scrollbarWidth: 'none',
        }}>
          {MESES_HIST.map(m => (
            <button
              key={m.id}
              onClick={() => setMesSel(m.id)}
              style={{
                padding: '8px 16px',
                borderRadius: 999,
                fontSize: 12.5,
                fontWeight: 500,
                whiteSpace: 'nowrap',
                flexShrink: 0,
                background: mesSel === m.id ? 'var(--foreground)' : 'transparent',
                color: mesSel === m.id ? 'var(--background)' : 'var(--muted-foreground)',
                border: mesSel === m.id ? '1px solid var(--foreground)' : '1px solid var(--border)',
                transition: 'background 120ms, color 120ms',
              }}
            >{m.label}</button>
          ))}
        </div>

        {/* Chips de período (7d / 15d / mês todo / customizado) */}
        <div style={{
          display: 'flex',
          gap: 0,
          padding: '16px 20px 0',
          borderBottom: '1px solid var(--border)',
          marginTop: 4,
        }}>
          {[
            { id: 'todo',   label: 'Mês todo' },
            { id: '15d',    label: '15 dias' },
            { id: '7d',     label: '7 dias' },
            { id: 'custom', label: 'Personalizar' },
          ].map(p => (
            <button
              key={p.id}
              onClick={() => {
                if (p.id === 'custom') alert('Seletor customizado — apenas visual no protótipo');
                else setPeriodo(p.id);
              }}
              style={{
                padding: '12px 4px',
                marginRight: 20,
                fontSize: 13,
                fontWeight: 500,
                color: periodo === p.id ? 'var(--foreground)' : 'var(--muted-foreground)',
                background: 'transparent',
                whiteSpace: 'nowrap',
                borderBottom: periodo === p.id ? '1.5px solid var(--foreground)' : '1.5px solid transparent',
                marginBottom: '-1px',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}
            >
              {p.id === 'custom' && <Icon name="calendar" size={13} strokeWidth={1.5} />}
              {p.label}
            </button>
          ))}
        </div>

        <div className="stack" style={{ paddingTop: 8 }}>
          {error && <ErrorBanner onRetry={() => location.reload()} />}

          {/* Banner de apuração — só no mês atual */}
          {mesSel === '2026-08' && emApur.length > 0 && !loading && (
            <div style={{
              padding: '14px 0',
              borderBottom: '1px solid var(--border)',
              display: 'flex', gap: 10, alignItems: 'flex-start',
              fontSize: 13,
            }}>
              <span aria-hidden="true" style={{
                marginTop: 6, flexShrink: 0,
                width: 6, height: 6, borderRadius: 999,
                background: 'oklch(0.75 0.14 75)',
              }} />
              <span style={{ color: 'var(--muted-foreground)' }}>
                <strong style={{ color: 'var(--foreground)', fontWeight: 500 }}>{emApur.length}</strong>
                {' '}pedidos ainda em apuração — valores serão consolidados no fechamento.
              </span>
            </div>
          )}

          {/* Lançamentos agrupados por dia */}
          {loading ? (
            <div><SkelCard h={60} /><SkelCard h={80} /><SkelCard h={80} /></div>
          ) : gruposPorDia.length === 0 ? (
            <div style={{ padding: '48px 0' }}>
              <EmptyState
                icon="receipt"
                title="Nenhum lançamento no período"
                description="Ajuste o filtro de período ou selecione outro mês."
              />
            </div>
          ) : (
            <div>
              {gruposPorDia.map(({ data, itens }) => (
                <div key={data} style={{ marginBottom: 8 }}>
                  <DayHeader data={data} mesSel={mesSel} />
                  {itens.map(l => (
                    <LancamentoRow
                      key={l.pedido}
                      l={l}
                      saldo={saldosPorLancamento.get(l.pedido)}
                      onClick={() => setDetalheOpen(l)}
                    />
                  ))}
                </div>
              ))}
            </div>
          )}

          {/* Em apuração — só no mês atual */}
          {mesSel === '2026-08' && emApur.length > 0 && !loading && (
            <Section title="Em apuração" description="Sem valor definido — aguardando fechamento">
              <div>
                {emApur.map(l => (
                  <div key={l.pedido} className="hairline-row" style={{ cursor: 'default' }}>
                    <span aria-hidden="true" style={{
                      marginTop: 8, flexShrink: 0,
                      width: 6, height: 6, borderRadius: 999,
                      background: 'oklch(0.75 0.14 75)',
                    }} />
                    <div className="grow" style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 500 }}>{l.pedido}</div>
                      <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 3 }} className="truncate">
                        {l.cliente} · {fmt.fmtDate(l.data, { compact: true })}
                      </div>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>Em apuração</div>
                  </div>
                ))}
              </div>
            </Section>
          )}

          <div style={{ fontSize: 11, color: 'var(--muted-foreground)', textAlign: 'center', padding: '12px 12px 0' }}>
            Este extrato poderá refletir ajustes até o fechamento do período.
          </div>
        </div>
      </div>

      <Sheet open={!!detalheOpen} onClose={() => setDetalheOpen(null)} title="Detalhe do lançamento">
        {detalheOpen && <LancamentoDetalhe l={detalheOpen} saldo={saldosPorLancamento.get(detalheOpen.pedido)} />}
      </Sheet>
    </div>
  );
}

// ─── Header de dia (agrupamento estilo banco) ─────────────────────────────
function DayHeader({ data, mesSel }) {
  const fmt = window.TrendFmt;
  // Determinar HOJE/ONTEM baseado no mês selecionado
  // Só marca HOJE/ONTEM se estivermos vendo o mês atual (2026-08)
  const isMesAtual = mesSel === '2026-08';
  const dt = new Date(data);
  const dia = dt.getDate();
  const label = (() => {
    if (isMesAtual && dia === 13) return 'HOJE';
    if (isMesAtual && dia === 12) return 'ONTEM';
    // dia + mês curto (ex.: 04 AGO)
    return dt.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' })
      .toUpperCase().replace('.', '');
  })();

  return (
    <div style={{
      padding: '16px 0 8px',
      fontSize: 11,
      fontWeight: 500,
      letterSpacing: '0.10em',
      textTransform: 'uppercase',
      color: 'var(--muted-foreground)',
    }}>
      {label}
    </div>
  );
}

// ─── Lançamento row ─────────────────────────────────────────────────────────
function LancamentoRow({ l, saldo, onClick }) {
  const fmt = window.TrendFmt;
  const label = l.comStatus === 'lancada' ? 'Lançada' : 'Gerada';
  return (
    <div className="hairline-row" onClick={onClick} role="button" tabIndex={0}>
      <div className="grow" style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }}>Comissão</span>
          <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)' }}>{label}</span>
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 4 }} className="truncate">
          {l.cliente} · {l.pedido}
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div className="tabnum" style={{ fontSize: 14, fontWeight: 500, color: 'oklch(0.5 0.12 155)' }}>
          + {fmt.fmtBRL(l.comissao)}
        </div>
        {saldo != null && (
          <div style={{ fontSize: 11, color: 'var(--muted-foreground)', marginTop: 3, fontVariantNumeric: 'tabular-nums' }}>
            saldo {fmt.fmtBRL(saldo, { showCents: false })}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Sheet — detalhe ────────────────────────────────────────────────────────
function LancamentoDetalhe({ l, saldo }) {
  const fmt = window.TrendFmt;
  return (
    <div>
      <div className="between" style={{ marginBottom: 12 }}>
        <div>
          <div className="eyebrow">Pedido</div>
          <div style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>{l.pedido}</div>
        </div>
        <ComissaoPill status={l.comStatus} />
      </div>

      <FieldRow label="Cliente" value={l.cliente} mono={false} />
      <FieldRow label="Data" value={fmt.fmtDate(l.data)} />
      <FieldRow label="Valor da comissão" value={fmt.fmtBRL(l.comissao)} />
      {l.percentual != null && <FieldRow label="Sua comissão (%)" value={`${(l.percentual * 100).toFixed(1).replace('.', ',')}%`} />}
      <FieldRow
        label="Situação"
        value={window.TrendMocks.COMISSAO_LABEL[l.comStatus]?.text}
        mono={false}
      />
      {saldo != null && <FieldRow label="Saldo acumulado" value={fmt.fmtBRL(saldo)} />}

      <div style={{
        marginTop: 14, padding: '10px 12px', borderRadius: 10,
        background: 'var(--muted)',
        fontSize: 12, color: 'var(--muted-foreground)', lineHeight: 1.5,
      }}>
        Este lançamento poderá refletir ajustes até o fechamento do período.
      </div>

      <button
        className="btn secondary block"
        style={{ marginTop: 16 }}
        onClick={() => { location.hash = `#/pedido/${l.pedido}`; }}
      >
        Abrir pedido
        <Icon name="chevron-right" size={16} />
      </button>
    </div>
  );
}

Object.assign(window, { ExtratoScreen });