// Contabilidad — per-product & per-order margin reconciliation
(function () {
  const { useState, useEffect } = React;

  const eur = v => (+(v)||0).toLocaleString('es-ES', { style:'currency', currency:'EUR', minimumFractionDigits:2 });
  const pct = (v, total) => total > 0 ? ((v/total)*100).toFixed(1) : '0.0';

  // ── Waterfall KPIs ───────────────────────────────────────────────────────
  function WaterfallKPIs({ revenue, fees, cogs, refunds, profit }) {
    const margin      = revenue > 0 ? (profit/revenue*100).toFixed(1) : '—';
    const profitColor = profit >= 0 ? 'var(--green)' : 'var(--red)';
    const steps = [
      { label: 'Ingresos brutos', value: revenue,  color: 'var(--accent)', sign: null },
      { label: 'Tarifas Amazon',  value: fees,     color: 'var(--red)',    sign: '−', sub: pct(fees, revenue) + '% ventas' },
      { label: 'COGS',            value: cogs,     color: 'var(--amber)',  sign: '−', sub: pct(cogs, revenue) + '% ventas' },
      refunds > 0 && { label: 'Reembolsos', value: refunds, color: 'var(--red)', sign: '−' },
      { label: 'G. Neta', value: profit, color: profitColor, sign: '=', sub: `Margen ${margin}%`, bold: true },
    ].filter(Boolean);

    return React.createElement('div', { className: 'waterfall-strip' },
      steps.map(s =>
        React.createElement(React.Fragment, { key: s.label },
          s.sign && React.createElement('div', { className: 'waterfall-arrow' }, s.sign),
          React.createElement('div', { className: 'waterfall-card' + (s.bold ? ' waterfall-card--total' : '') },
            React.createElement('div', { className: 'kpi-label' }, s.label),
            React.createElement('div', { className: 'kpi-value', style: { fontSize: 20, color: s.color, fontWeight: s.bold ? 700 : 600 } },
              eur(Math.abs(s.value))
            ),
            s.sub && React.createElement('div', { className: 'kpi-sub-txt', style: { marginTop: 4 } }, s.sub)
          )
        )
      )
    );
  }

  // ── Breakdown bar ────────────────────────────────────────────────────────
  function BreakdownBar({ revenue, fees, cogs, profit }) {
    if (!revenue) return React.createElement('span', { style: { color: 'var(--txt-4)', fontSize: 11 } }, '—');
    const feePct  = Math.min(100, (fees  / revenue) * 100);
    const cogsPct = Math.min(100 - feePct, (cogs / revenue) * 100);
    const profPct = Math.max(0, 100 - feePct - cogsPct);
    const losing  = (fees + cogs) > revenue;

    return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 3 } },
      React.createElement('div', {
        style: { display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', width: 100, background: '#f0f2f6' }
      },
        feePct  > 0 && React.createElement('div', { title: `Tarifas: ${pct(fees, revenue)}%`,  style: { width: feePct  + '%', background: '#ef4444', height: '100%' } }),
        cogsPct > 0 && React.createElement('div', { title: `COGS: ${pct(cogs, revenue)}%`,     style: { width: cogsPct + '%', background: '#f59e0b', height: '100%' } }),
        profPct > 0 && React.createElement('div', { title: `Margen: ${pct(profit, revenue)}%`, style: { width: profPct + '%', background: losing ? '#ef4444' : '#22c55e', height: '100%' } })
      ),
      React.createElement('div', { style: { fontSize: 9, color: 'var(--txt-4)', display: 'flex', gap: 6 } },
        React.createElement('span', { style: { color: '#ef4444' } }, pct(fees,  revenue) + '%'),
        React.createElement('span', { style: { color: '#f59e0b' } }, pct(cogs,  revenue) + '%'),
        React.createElement('span', { style: { color: losing ? '#ef4444' : '#22c55e', fontWeight: 600 } }, pct(profit, revenue) + '%')
      )
    );
  }

  // ── Fee detail expand row ────────────────────────────────────────────────
  function FeeDetail({ r, colSpan, settled }) {
    const feeSections = [
      {
        title: 'Tarifas Amazon',
        items: [
          { label: 'Comisión (Referral Fee)',      value: r.referralFee||0, color: '#ef4444' },
          { label: 'Tarifa FBA (Fulfillment Fee)', value: r.fbaFee||0,      color: '#8b5cf6' },
          (r.storageFee||0) > 0 && { label: 'Almacenamiento',       value: r.storageFee,       color: '#f59e0b' },
          (r.otherFees||0)  > 0 && { label: 'Otras tarifas Amazon', value: r.otherFees,         color: '#94a3b8' },
        ].filter(Boolean),
      },
      {
        title: 'Costes del producto',
        items: [
          (r.cogs||0) > 0 && {
            label: `COGS${r.unitCogs > 0 ? ` (${r.units||1} uds × ${eur(r.unitCogs)})` : ''}`,
            value: r.cogs||0, color: '#d97706',
          },
        ].filter(Boolean),
      },
      (r.refundAmount||0) > 0 && {
        title: 'Reembolsos',
        items: [{ label: 'Devoluciones clientes', value: r.refundAmount||0, color: '#ef4444' }],
      },
    ].filter(Boolean);

    const unsettled = settled === 0 || settled === false;

    return React.createElement('tr', { style: { background: 'var(--bg)' } },
      React.createElement('td', { colSpan, style: { padding: '4px 24px 16px 56px', borderBottom: '1px solid var(--border-2)' } },
        unsettled && React.createElement('div', {
          style: { display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--amber-bg)', border: '1px solid #fcd34d', borderRadius: 8, padding: '4px 10px', fontSize: 11, color: 'var(--amber)', marginBottom: 10 }
        }, '⏳ Pendiente liquidación — Amazon publica los costes 24-48h después del envío'),

        React.createElement('div', { style: { display: 'flex', gap: 24, flexWrap: 'wrap' } },
          feeSections.map(section =>
            section.items.length > 0 && React.createElement('div', { key: section.title },
              React.createElement('div', { style: { fontSize: 10, fontWeight: 700, color: 'var(--txt-4)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 } },
                section.title
              ),
              section.items.map(item =>
                React.createElement('div', { key: item.label, style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, marginBottom: 4, minWidth: 240 } },
                  React.createElement('span', { style: { width: 8, height: 8, borderRadius: 2, background: item.color, display: 'inline-block', flexShrink: 0 } }),
                  React.createElement('span', { style: { color: 'var(--txt-2)', flex: 1 } }, item.label),
                  React.createElement('span', { style: { fontWeight: 700, color: 'var(--txt-1)', minWidth: 70, textAlign: 'right' } }, eur(item.value)),
                  r.revenue > 0 && React.createElement('span', { style: { color: 'var(--txt-4)', fontSize: 10, minWidth: 52, textAlign: 'right' } }, pct(item.value, r.revenue) + '%')
                )
              )
            )
          )
        )
      )
    );
  }

  // ── Margin pill ──────────────────────────────────────────────────────────
  function MarginPill({ profit, revenue }) {
    const mg    = revenue > 0 ? +(profit/revenue*100).toFixed(1) : 0;
    const color = mg >= 20 ? '#22c55e' : mg >= 10 ? '#f59e0b' : '#ef4444';
    const bg    = mg >= 20 ? 'rgba(34,197,94,.1)' : mg >= 10 ? 'rgba(245,158,11,.1)' : 'rgba(239,68,68,.1)';
    return React.createElement('span', {
      style: { display:'inline-block', padding:'2px 8px', borderRadius:12, fontSize:11, fontWeight:700, color, background:bg }
    }, `${mg.toFixed(1)}%`);
  }

  // ── Sort button ──────────────────────────────────────────────────────────
  function SortBtn({ id, label, sort, setSort }) {
    const active = sort === id;
    return React.createElement('button', {
      onClick: () => setSort(id),
      style: {
        background: active ? 'var(--accent-bg)' : 'transparent',
        border: 'none', cursor: 'pointer', padding: '2px 8px',
        borderRadius: 12, fontSize: 11, fontWeight: active ? 700 : 400,
        color: active ? 'var(--accent)' : 'var(--txt-3)',
      },
    }, (active ? '▼ ' : '') + label);
  }

  // ── By-product table ─────────────────────────────────────────────────────
  function ProductTable({ rows }) {
    const [sort, setSort]       = useState('profit');
    const [expanded, setExpanded] = useState({});

    const active = (rows||[]).filter(r => (r.revenue||0) > 0 || (r.units||0) > 0);
    if (!active.length) return null;

    const sorted = [...active].sort((a, b) => {
      if (sort === 'margin')  return (b.revenue > 0 ? b.profit/b.revenue : -99) - (a.revenue > 0 ? a.profit/a.revenue : -99);
      if (sort === 'revenue') return (b.revenue||0) - (a.revenue||0);
      return (b.profit||0) - (a.profit||0);
    });

    const tot = sorted.reduce((s, r) => ({
      units:   s.units   + (r.units||0),
      revenue: s.revenue + (r.revenue||0),
      fees:    s.fees    + (r.totalFees||0),
      cogs:    s.cogs    + (r.cogs||0),
      profit:  s.profit  + (r.profit||0),
    }), { units:0, revenue:0, fees:0, cogs:0, profit:0 });

    const COLS = ['', 'Producto', 'Uds.', 'Ingresos', 'Tarifas Amazon', 'COGS', 'G. Neta', 'Margen', 'Desglose'];

    return React.createElement('div', { className: 'card', style: { padding: '20px 24px' } },
      React.createElement('div', { className: 'card-header', style: { marginBottom: 16 } },
        React.createElement('span', { className: 'card-title' }, 'Por producto'),
        React.createElement('div', { style: { display: 'flex', gap: 4, alignItems: 'center' } },
          React.createElement('span', { style: { fontSize: 11, color: 'var(--txt-4)', marginRight: 4 } }, 'Ordenar:'),
          React.createElement(SortBtn, { id: 'profit',  label: 'G. Neta', sort, setSort }),
          React.createElement(SortBtn, { id: 'revenue', label: 'Ventas',  sort, setSort }),
          React.createElement(SortBtn, { id: 'margin',  label: 'Margen',  sort, setSort }),
        )
      ),
      React.createElement('div', { style: { overflowX: 'auto' } },
        React.createElement('table', { className: 'data-table sb-table' },
          React.createElement('thead', null,
            React.createElement('tr', null,
              COLS.map(h => React.createElement('th', { key: h, className: h&&h!=='Producto'?'r':'' }, h))
            )
          ),
          React.createElement('tbody', null,
            sorted.flatMap(r => {
              const open = !!expanded[r.asin];
              const rows = [
                React.createElement('tr', {
                  key: r.asin, style: { cursor: 'pointer' },
                  onClick: () => setExpanded(e => ({ ...e, [r.asin]: !e[r.asin] })),
                },
                  React.createElement('td', { style: { width: 24, color: 'var(--txt-4)', fontSize: 12, userSelect: 'none' } }, open ? '▾' : '▸'),
                  React.createElement('td', { style: { minWidth: 200 } },
                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
                      r.image_url && React.createElement('img', {
                        src: r.image_url, alt: '',
                        style: { width: 36, height: 36, borderRadius: 6, objectFit: 'contain', border: '1px solid var(--border)', flexShrink: 0 }
                      }),
                      React.createElement('div', null,
                        React.createElement('div', { style: { fontSize: 12, fontWeight: 600 } },
                          (r.name||r.asin).length > 38 ? (r.name||r.asin).slice(0,38)+'…' : (r.name||r.asin)
                        ),
                        React.createElement('div', { style: { fontSize: 10, color: 'var(--txt-4)', marginTop: 2 } }, r.asin)
                      )
                    )
                  ),
                  React.createElement('td', { className: 'r', style: { color: 'var(--txt-3)' } }, r.units||0),
                  React.createElement('td', { className: 'r fw-7' }, eur(r.revenue||0)),
                  React.createElement('td', { className: 'r', style: { color: 'var(--red)' } },
                    React.createElement('div', null, eur(r.totalFees||0)),
                    r.revenue > 0 && React.createElement('div', { style: { fontSize: 9, color: 'var(--txt-4)', marginTop: 1 } }, pct(r.totalFees, r.revenue) + '% ventas')
                  ),
                  React.createElement('td', { className: 'r', style: { color: 'var(--amber)' } },
                    (r.cogs||0) > 0
                      ? React.createElement('div', null,
                          eur(r.cogs),
                          r.revenue > 0 && React.createElement('div', { style: { fontSize: 9, color: 'var(--txt-4)', marginTop: 1 } }, pct(r.cogs, r.revenue) + '% ventas')
                        )
                      : React.createElement('span', { style: { color: 'var(--txt-4)' } }, '—')
                  ),
                  React.createElement('td', { className: 'r fw-7', style: { color: (r.profit||0)>=0?'var(--green)':'var(--red)' } }, eur(r.profit||0)),
                  React.createElement('td', { className: 'r' }, React.createElement(MarginPill, { profit: r.profit||0, revenue: r.revenue||0 })),
                  React.createElement('td', { className: 'r' }, React.createElement(BreakdownBar, { revenue: r.revenue||0, fees: r.totalFees||0, cogs: r.cogs||0, profit: r.profit||0 }))
                ),
                open && React.createElement(FeeDetail, { key: r.asin + '_d', r, colSpan: COLS.length }),
              ].filter(Boolean);
              return rows;
            }),
            // Total row
            React.createElement('tr', { style: { borderTop: '2px solid var(--border)', fontWeight: 700, background: 'var(--bg)' } },
              React.createElement('td'),
              React.createElement('td', null, 'TOTAL'),
              React.createElement('td', { className: 'r' }, tot.units),
              React.createElement('td', { className: 'r fw-7' }, eur(tot.revenue)),
              React.createElement('td', { className: 'r', style: { color: 'var(--red)' } }, eur(tot.fees)),
              React.createElement('td', { className: 'r', style: { color: 'var(--amber)' } }, eur(tot.cogs)),
              React.createElement('td', { className: 'r fw-7', style: { color: tot.profit>=0?'var(--green)':'var(--red)' } }, eur(tot.profit)),
              React.createElement('td', { className: 'r' }, React.createElement(MarginPill, { profit: tot.profit, revenue: tot.revenue })),
              React.createElement('td', { className: 'r' }, React.createElement(BreakdownBar, { revenue: tot.revenue, fees: tot.fees, cogs: tot.cogs, profit: tot.profit }))
            )
          )
        )
      )
    );
  }

  // ── By-order table ───────────────────────────────────────────────────────
  function OrderTable({ rows }) {
    const [sort, setSort]       = useState('date');
    const [expanded, setExpanded] = useState({});

    if (!rows?.length) return React.createElement('div', { className: 'card', style: { padding: 24, textAlign: 'center', color: 'var(--txt-4)' } },
      'Sin pedidos con datos financieros en este período. Los datos llegan con 24-48h de retraso.'
    );

    const sorted = [...rows].sort((a, b) => {
      if (sort === 'margin')  return b.margin - a.margin;
      if (sort === 'revenue') return (b.revenue||0) - (a.revenue||0);
      if (sort === 'profit')  return (b.profit||0) - (a.profit||0);
      return (b.posted_date||'') > (a.posted_date||'') ? 1 : -1;
    });

    const COLS = ['', 'Fecha', 'Pedido', 'Producto', 'Uds.', 'Ingresos', 'Tarifas', 'COGS', 'G. Neta', 'Margen'];

    return React.createElement('div', { className: 'card', style: { padding: '20px 24px' } },
      React.createElement('div', { className: 'card-header', style: { marginBottom: 16 } },
        React.createElement('span', { className: 'card-title' }, `Por pedido (${rows.length} pedidos)`),
        React.createElement('div', { style: { display: 'flex', gap: 4, alignItems: 'center' } },
          React.createElement('span', { style: { fontSize: 11, color: 'var(--txt-4)', marginRight: 4 } }, 'Ordenar:'),
          React.createElement(SortBtn, { id: 'date',    label: 'Fecha',   sort, setSort }),
          React.createElement(SortBtn, { id: 'profit',  label: 'G. Neta', sort, setSort }),
          React.createElement(SortBtn, { id: 'revenue', label: 'Ventas',  sort, setSort }),
          React.createElement(SortBtn, { id: 'margin',  label: 'Margen',  sort, setSort }),
        )
      ),
      React.createElement('div', { style: { overflowX: 'auto' } },
        React.createElement('table', { className: 'data-table sb-table' },
          React.createElement('thead', null,
            React.createElement('tr', null,
              COLS.map(h => React.createElement('th', { key: h, className: h&&h!=='Producto'&&h!=='Pedido'?'r':'' }, h))
            )
          ),
          React.createElement('tbody', null,
            sorted.flatMap(r => {
              const key  = r.order_id + '_' + r.asin;
              const open = !!expanded[key];
              return [
                React.createElement('tr', {
                  key, style: { cursor: 'pointer' },
                  onClick: () => setExpanded(e => ({ ...e, [key]: !e[key] })),
                },
                  React.createElement('td', { style: { width: 24, color: 'var(--txt-4)', fontSize: 12 } }, open ? '▾' : '▸'),
                  React.createElement('td', { style: { fontSize: 12, color: 'var(--txt-3)', whiteSpace: 'nowrap' } }, r.posted_date||'—'),
                  React.createElement('td', { style: { fontSize: 11, color: 'var(--txt-4)', fontFamily: 'monospace' } }, r.order_id),
                  React.createElement('td', { style: { minWidth: 180 } },
                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
                      r.image_url && React.createElement('img', {
                        src: r.image_url, alt: '',
                        style: { width: 32, height: 32, borderRadius: 5, objectFit: 'contain', border: '1px solid var(--border)', flexShrink: 0 }
                      }),
                      React.createElement('div', null,
                        React.createElement('div', { style: { fontSize: 12, fontWeight: 600 } },
                          (r.name||r.asin).length > 32 ? (r.name||r.asin).slice(0,32)+'…' : (r.name||r.asin)
                        ),
                        React.createElement('div', { style: { fontSize: 10, color: 'var(--txt-4)' } }, r.asin)
                      )
                    )
                  ),
                  React.createElement('td', { className: 'r', style: { color: 'var(--txt-3)' } }, r.units||1),
                  React.createElement('td', { className: 'r fw-7' }, eur(r.revenue||0)),
                  React.createElement('td', { className: 'r', style: { color: r.settled ? 'var(--red)' : 'var(--txt-4)' } },
                    r.settled ? eur(r.totalFees||0) : React.createElement('span', { title: 'Pendiente liquidación Amazon' }, '⏳ —')
                  ),
                  React.createElement('td', { className: 'r', style: { color: 'var(--amber)' } }, (r.cogs||0)>0 ? eur(r.cogs) : '—'),
                  React.createElement('td', { className: 'r fw-7', style: { color: (r.profit||0)>=0?'var(--green)':'var(--red)' } }, eur(r.profit||0)),
                  React.createElement('td', { className: 'r' }, React.createElement(MarginPill, { profit: r.profit||0, revenue: r.revenue||0 }))
                ),
                open && React.createElement(FeeDetail, { key: key+'_d', r, colSpan: COLS.length, settled: r.settled }),
              ].filter(Boolean);
            })
          )
        )
      )
    );
  }

  // ── Main ─────────────────────────────────────────────────────────────────
  function FinanzasView({ preset, range }) {
    const [mode,    setMode]    = useState('producto');
    const [data,    setData]    = useState(null);
    const [orders,  setOrders]  = useState(null);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
      if (!range?.from) return;
      setLoading(true);
      Promise.all([
        API.byProduct(range.from, range.to).catch(() => null),
        API.byOrder(range.from, range.to).catch(() => null),
      ]).then(([prod, ord]) => {
        setData(prod?.data || []);
        setOrders(ord?.data || []);
      }).finally(() => setLoading(false));
    }, [range?.from, range?.to]);

    if (loading) return React.createElement('div', { className: 'empty-state' },
      React.createElement('span', { className: 'txt-4' }, 'Cargando contabilidad...')
    );
    if (!data) return null;

    const active = data.filter(r => (r.revenue||0) > 0 || (r.units||0) > 0);
    const totalRevenue = active.reduce((s,r) => s+(r.revenue||0), 0);
    const totalFees    = active.reduce((s,r) => s+(r.totalFees||0), 0);
    const totalCogs    = active.reduce((s,r) => s+(r.cogs||0), 0);
    const totalRefunds = active.reduce((s,r) => s+(r.refundAmount||0), 0);
    const totalProfit  = active.reduce((s,r) => s+(r.profit||0), 0);

    const hasData = totalRevenue > 0 || (orders||[]).length > 0;

    return React.createElement('div', { className: 'view-pad' },

      hasData && React.createElement(WaterfallKPIs, {
        revenue: totalRevenue, fees: totalFees, cogs: totalCogs,
        refunds: totalRefunds, profit: totalProfit,
      }),

      // Toggle
      React.createElement('div', { style: { display: 'flex', gap: 8, marginBottom: 20 } },
        [{ id:'producto', label:'Por producto' }, { id:'pedido', label:'Por pedido' }].map(m =>
          React.createElement('button', {
            key: m.id,
            onClick: () => setMode(m.id),
            style: {
              padding: '7px 18px', borderRadius: 20, fontSize: 13, fontWeight: mode===m.id?700:400,
              border: `1.5px solid ${mode===m.id?'var(--accent)':'var(--border)'}`,
              background: mode===m.id?'var(--accent-bg)':'var(--surface)',
              color: mode===m.id?'var(--accent)':'var(--txt-3)',
              cursor: 'pointer',
            },
          }, m.label)
        )
      ),

      !hasData && React.createElement('div', { className: 'empty-state' },
        React.createElement('span', { className: 'txt-4' },
          'Sin datos para este período. Los datos de Amazon llegan con 24-48h de retraso.'
        )
      ),

      mode === 'producto' && React.createElement(ProductTable, { rows: data }),
      mode === 'pedido'   && React.createElement(OrderTable,   { rows: orders })
    );
  }

  window.FinanzasView = FinanzasView;
})();