// Products view — unified catalog: inventory + sales + listing
(function () {
  const { useState, useEffect, useRef } = React;

  const eur = v => (+(v)||0).toLocaleString('es-ES',{style:'currency',currency:'EUR',minimumFractionDigits:2});
  const num = v => (+(v)||0).toLocaleString('es-ES');
  const pct = v => `${(+(v)||0).toFixed(1)} %`;

  // ── Inline COGS editor ────────────────────────────────────
  function CogsField({ asin, value, onSaved }) {
    const [editing, setEditing] = useState(false);
    const [val, setVal]         = useState((+(value)||0).toFixed(2));
    const [busy, setBusy]       = useState(false);
    const [ok, setOk]           = useState(false);
    const ref                   = useRef(null);

    useEffect(() => { if (editing) ref.current?.focus(); }, [editing]);

    async function save() {
      const n = parseFloat(val);
      if (isNaN(n) || n < 0) return;
      setBusy(true);
      try {
        await API.updateCogs(asin, n);
        onSaved(n);
        setOk(true); setEditing(false);
        setTimeout(() => setOk(false), 2000);
      } catch(e) { console.error(e); } finally { setBusy(false); }
    }

    if (!editing) return React.createElement('div', { className: 'cogs-display' },
      React.createElement('span', { className: 'cogs-label' }, 'COGS'),
      React.createElement('span', { className: `cogs-value${ok?' ok':''}` }, eur(+(value)||0)),
      React.createElement('button', { className: 'cogs-edit-btn', onClick: () => setEditing(true) }, ok ? '✓' : '✏')
    );

    return React.createElement('div', { className: 'cogs-editing' },
      React.createElement('span', { className: 'cogs-label' }, 'COGS'),
      React.createElement('input', {
        ref, type:'number', value:val, step:'0.01', min:'0',
        onChange: e => setVal(e.target.value),
        onKeyDown: e => { if(e.key==='Enter') save(); if(e.key==='Escape') setEditing(false); },
        className: 'cogs-input-inline',
      }),
      React.createElement('button', { onClick: save, disabled: busy, className: 'cogs-save-btn' }, busy ? '…' : 'OK'),
      React.createElement('button', { onClick: () => setEditing(false), className: 'cogs-cancel-btn' }, '✕')
    );
  }

  // ── Stock bar ─────────────────────────────────────────────
  function StockBar({ f, r, i, u }) {
    const total = f + r + i + u || 1;
    const segs = [
      { val: f, color: '#22c55e' }, { val: r, color: '#3b82f6' },
      { val: i, color: '#f59e0b' }, { val: u, color: '#ef4444' },
    ].filter(s => s.val > 0);
    return React.createElement('div', { className: 'stock-bar' },
      segs.map((s, idx) =>
        React.createElement('div', { key: idx, className: 'stock-bar-seg',
          style: { width: `${(s.val/total)*100}%`, background: s.color } })
      )
    );
  }

  // ── Stock badge ───────────────────────────────────────────
  function StockBadge({ stockStatus, daysLeft, fulfillable }) {
    if (stockStatus === 'out')      return React.createElement('span', { className: 'inv-badge inv-badge-out' }, 'Sin stock');
    if (stockStatus === 'critical') return React.createElement('span', { className: 'inv-badge inv-badge-critical' }, `⚠ ${daysLeft}d`);
    if (stockStatus === 'low')      return React.createElement('span', { className: 'inv-badge inv-badge-low' }, `${daysLeft}d stock`);
    return React.createElement('span', { className: 'inv-badge inv-badge-ok' },
      daysLeft != null ? `${daysLeft}d` : `${num(fulfillable)} uds`
    );
  }

  // ── Product card (grid) ───────────────────────────────────
  function ProductCard({ row, onCogsUpdate, onOpen }) {
    const u  = row.units || 1;
    const mc = !row.revenue ? 'neutral' : row.margin >= 20 ? 'green' : row.margin >= 10 ? 'amber' : 'red';
    const hasStock = row.fulfillable_qty > 0;
    const hasSales = row.revenue > 0;

    return React.createElement('div', { className: `product-card${!hasStock ? ' pc-dimmed' : ''}` },

      // Top: image + header
      React.createElement('div', { className: 'pc-header', style: { cursor: 'pointer' }, onClick: () => onOpen(row) },
        React.createElement('div', { className: 'product-img-wrap' },
          row.image_url
            ? React.createElement('img', { src: row.image_url, alt: '', className: 'product-img' })
            : React.createElement('div', { className: 'product-img-ph' }, '📦')
        ),
        React.createElement('div', { className: 'pc-title-area' },
          React.createElement('div', { className: 'pc-name' }, row.name || row.asin),
          React.createElement('div', { className: 'flex', style: { gap: 4, marginTop: 5, flexWrap: 'wrap' } },
            React.createElement('code', { className: 'badge' }, row.asin),
            row.sku && !row.sku.startsWith('amzn.gr.') &&
              React.createElement('span', { className: 'badge badge-blue' }, row.sku),
          ),
          React.createElement('div', { className: 'flex items-center', style: { gap: 6, marginTop: 6 } },
            React.createElement(StockBadge, { stockStatus: row.stockStatus, daysLeft: row.daysLeft, fulfillable: row.fulfillable_qty }),
            hasSales && React.createElement('span', { className: `margin-pill ${mc}` }, pct(row.margin)),
          )
        )
      ),

      // Stock strip
      React.createElement('div', { className: 'pc-stock-strip' },
        React.createElement('div', { className: 'pc-stock-main' },
          React.createElement('span', { style: { fontSize: 22, fontWeight: 700, color: hasStock ? 'var(--green)' : 'var(--txt-4)' } },
            num(row.fulfillable_qty)
          ),
          React.createElement('span', { style: { fontSize: 11, color: 'var(--txt-4)', marginLeft: 4 } }, 'disponibles'),
        ),
        React.createElement('div', { className: 'pc-stock-detail' },
          row.reserved_qty      > 0 && React.createElement('span', { className: 'pc-stock-chip blue'   }, `${row.reserved_qty} res.`),
          row.inbound_qty       > 0 && React.createElement('span', { className: 'pc-stock-chip amber'  }, `${row.inbound_qty} entr.`),
          row.unfulfillable_qty > 0 && React.createElement('span', { className: 'pc-stock-chip red'    }, `${row.unfulfillable_qty} no apto`),
        ),
        React.createElement(StockBar, { f: row.fulfillable_qty, r: row.reserved_qty, i: row.inbound_qty, u: row.unfulfillable_qty }),
      ),

      // Sales section
      !hasSales
        ? React.createElement('div', { className: 'pc-no-data' }, 'Sin ventas en los últimos 30 días')
        : React.createElement('div', null,
            React.createElement('div', { className: 'pc-sales-strip' },
              ...[
                { label: 'Ingresos 30d', val: eur(row.revenue),   color: 'var(--txt-1)' },
                { label: 'Unidades',     val: num(row.units),     color: 'var(--txt-1)' },
                { label: 'Beneficio',    val: eur(row.profit),    color: row.profit >= 0 ? 'var(--green)' : 'var(--red)' },
                { label: 'Total tasas',  val: eur(row.totalFees), color: 'var(--red)' },
              ].map((p, i) =>
                React.createElement('div', { key: i, className: 'metric-pill' },
                  React.createElement('div', { className: 'metric-label' }, p.label),
                  React.createElement('div', { className: 'metric-value', style: { color: p.color } }, p.val)
                )
              )
            ),
            // Per unit
            React.createElement('div', { className: 'unit-economics', style: { marginTop: 8 } },
              React.createElement('div', { className: 'unit-section-label' }, 'Por unidad vendida'),
              ...[
                { label: 'PVP',       val: eur(row.pvp_listing || row.revenue/u), color: 'var(--txt-1)' },
                row.pvp_b2b && row.pvp_b2b !== row.pvp_listing
                  ? { label: 'PVP B2B', val: eur(row.pvp_b2b), color: 'var(--accent)' }
                  : null,
                { label: 'Comisión',  val: eur(row.referralFee/u), color: 'var(--red)' },
                { label: 'Fee FBA',   val: eur(row.fbaFee/u),     color: 'var(--orange)' },
                { label: 'COGS/ud',   val: eur(row.unitCogs||0),  color: 'var(--purple)' },
                { label: 'Beneficio', val: eur(row.profit/u),     color: row.profit>=0?'var(--green)':'var(--red)' },
              ].filter(Boolean).map((col, i) =>
                React.createElement('div', { key: i, className: 'unit-col' },
                  React.createElement('div', { className: 'unit-label' }, col.label),
                  React.createElement('div', { className: 'unit-value', style: { color: col.color } }, col.val)
                )
              )
            )
          ),

      React.createElement('div', { className: 'divider', style: { margin: '12px 0 10px' } }),
      React.createElement('div', { className: 'flex items-center', style: { justifyContent: 'space-between' } },
        React.createElement(CogsField, { asin: row.asin, value: row.unitCogs, onSaved: n => onCogsUpdate(row.asin, n) }),
        React.createElement('button', { className: 'btn-open-detail', onClick: () => onOpen(row) }, 'Ver detalle →')
      )
    );
  }

  // ── Product list row ──────────────────────────────────────
  function ProductListRow({ row, onCogsUpdate, onOpen }) {
    const [open, setOpen] = useState(false);
    const u  = row.units || 1;
    const mc = !row.revenue ? 'neutral' : row.margin >= 20 ? 'green' : row.margin >= 10 ? 'amber' : 'red';

    return React.createElement('div', { className: `product-list-row${!row.fulfillable_qty ? ' pc-dimmed' : ''}` },
      // Main row
      React.createElement('div', { className: 'plr-main' },
        React.createElement('div', { className: 'plr-img', onClick: () => onOpen(row), style: { cursor:'pointer' } },
          row.image_url
            ? React.createElement('img', { src: row.image_url, alt: '', className: 'product-img' })
            : React.createElement('div', { className: 'product-img-ph', style: { fontSize: 16 } }, '📦')
        ),
        React.createElement('div', { className: 'plr-name', onClick: () => onOpen(row), style: { cursor:'pointer' } },
          React.createElement('div', { style: { fontSize: 13, fontWeight: 700, color: 'var(--txt-1)' } }, row.name || row.asin),
          React.createElement('div', { className: 'flex', style: { gap: 4, marginTop: 3 } },
            React.createElement('code', { className: 'badge' }, row.asin),
            row.sku && !row.sku.startsWith('amzn.gr.') &&
              React.createElement('span', { className: 'badge badge-blue' }, row.sku),
          )
        ),
        // Stock
        React.createElement('div', { className: 'plr-stat', style: { minWidth: 80 } },
          React.createElement('div', { className: 'metric-label' }, 'Stock'),
          React.createElement('div', { className: 'metric-value', style: { color: row.fulfillable_qty > 0 ? 'var(--green)' : 'var(--txt-4)' } },
            num(row.fulfillable_qty)
          )
        ),
        // Sales
        React.createElement('div', { className: 'plr-stat' },
          React.createElement('div', { className: 'metric-label' }, 'Ingresos 30d'),
          React.createElement('div', { className: 'metric-value' }, eur(row.revenue))
        ),
        React.createElement('div', { className: 'plr-stat' },
          React.createElement('div', { className: 'metric-label' }, 'Uds.'),
          React.createElement('div', { className: 'metric-value' }, num(row.units))
        ),
        React.createElement('div', { className: 'plr-stat' },
          React.createElement('div', { className: 'metric-label' }, 'Beneficio'),
          React.createElement('div', { className: 'metric-value fw-7', style: { color: row.profit>=0?'var(--green)':'var(--red)' } }, eur(row.profit))
        ),
        React.createElement('span', { className: `margin-pill ${mc}` }, row.revenue > 0 ? pct(row.margin) : '—'),
        React.createElement(StockBadge, { stockStatus: row.stockStatus, daysLeft: row.daysLeft, fulfillable: row.fulfillable_qty }),
        React.createElement('button', { className: 'btn-open-detail', onClick: () => onOpen(row) }, '→'),
        React.createElement('button', { className: 'plr-toggle-btn', onClick: () => setOpen(o => !o) }, open ? '▲' : '▼')
      ),
      // Expanded
      open && React.createElement('div', { className: 'plr-expand' },
        row.units > 0 && React.createElement('div', { className: 'unit-economics', style: { marginBottom: 12 } },
          React.createElement('div', { className: 'unit-section-label' }, 'Por unidad vendida'),
          ...[
            { label: 'PVP',       val: eur(row.pvp_listing || row.revenue/u), color: 'var(--txt-1)' },
            row.pvp_b2b && row.pvp_b2b !== row.pvp_listing
              ? { label: 'PVP B2B', val: eur(row.pvp_b2b), color: 'var(--accent)' }
              : null,
            { label: 'Comisión',  val: eur(row.referralFee/u), color: 'var(--red)' },
            { label: 'Fee FBA',   val: eur(row.fbaFee/u),     color: 'var(--orange)' },
            { label: 'COGS/ud',   val: eur(row.unitCogs||0),  color: 'var(--purple)' },
            { label: 'Beneficio', val: eur(row.profit/u),     color: row.profit>=0?'var(--green)':'var(--red)' },
          ].filter(Boolean).map((col, i) =>
            React.createElement('div', { key: i, className: 'unit-col' },
              React.createElement('div', { className: 'unit-label' }, col.label),
              React.createElement('div', { className: 'unit-value', style: { color: col.color } }, col.val)
            )
          )
        ),
        React.createElement(CogsField, { asin: row.asin, value: row.unitCogs, onSaved: n => onCogsUpdate(row.asin, n) })
      )
    );
  }

  // ── View toggle ───────────────────────────────────────────
  function ViewToggle({ mode, onChange }) {
    return React.createElement('div', { className: 'view-toggle' },
      React.createElement('button', { className: `vt-btn${mode==='grid'?' active':''}`, onClick: () => onChange('grid'), title: 'Cuadrícula' },
        React.createElement('svg', { width:15, height:15, viewBox:'0 0 16 16', fill:'currentColor' },
          React.createElement('rect', { x:1, y:1, width:6, height:6, rx:1 }),
          React.createElement('rect', { x:9, y:1, width:6, height:6, rx:1 }),
          React.createElement('rect', { x:1, y:9, width:6, height:6, rx:1 }),
          React.createElement('rect', { x:9, y:9, width:6, height:6, rx:1 }),
        )
      ),
      React.createElement('button', { className: `vt-btn${mode==='list'?' active':''}`, onClick: () => onChange('list'), title: 'Lista' },
        React.createElement('svg', { width:15, height:15, viewBox:'0 0 16 16', fill:'currentColor' },
          React.createElement('rect', { x:1, y:2,    width:14, height:2.5, rx:1 }),
          React.createElement('rect', { x:1, y:6.75, width:14, height:2.5, rx:1 }),
          React.createElement('rect', { x:1, y:11.5, width:14, height:2.5, rx:1 }),
        )
      )
    );
  }

  // ── Main view ─────────────────────────────────────────────
  function ProductsView({ onNav, onOpenProduct }) {
    const [rows,     setRows]     = useState(null);
    const [loading,  setLoading]  = useState(true);
    const [error,    setError]    = useState(null);
    const [filter,   setFilter]   = useState('all');
    const [viewMode, setViewMode] = useState(() => localStorage.getItem('fba_products_view') || 'grid');

    function changeView(m) { setViewMode(m); localStorage.setItem('fba_products_view', m); }

    useEffect(() => {
      API.productsFull()
        .then(res => { if(res?.error?.code==='NO_REAL_DATA') setError('NO_DATA'); else setRows(res.data||[]); })
        .catch(e => setError(e.message))
        .finally(() => setLoading(false));
    }, []);

    if (error === 'NO_DATA') return React.createElement('div', { className: 'empty-state' },
      React.createElement('p', { className: 'txt-3 mb-4' }, 'Sin datos.'),
      React.createElement('button', { onClick: () => onNav('settings'), className: 'btn-primary' }, 'Ir a configuración')
    );
    if (!rows) return React.createElement('div', { className: 'empty-state' },
      React.createElement('span', { className: 'txt-4' }, loading ? 'Cargando productos...' : error || 'Sin datos')
    );

    function updateCogs(asin, cogs) {
      setRows(prev => prev.map(r => r.asin === asin ? { ...r, unitCogs: cogs } : r));
    }

    const withStock  = rows.filter(r => r.fulfillable_qty > 0);
    const noStock    = rows.filter(r => r.fulfillable_qty === 0);
    const displayed  = filter === 'stock' ? withStock : filter === 'nostock' ? noStock : rows;
    const totalUnits = withStock.reduce((s, r) => s + r.fulfillable_qty, 0);

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

      // Header
      React.createElement('div', { className: 'flex items-center', style: { justifyContent: 'space-between', marginBottom: 16 } },
        React.createElement('div', null,
          React.createElement('h2', { style: { fontSize: 20, fontWeight: 700, color: 'var(--txt-1)', letterSpacing:'-.02em', margin: 0 } }, 'Productos'),
          React.createElement('p', { className: 'txt-3', style: { marginTop: 4, fontSize: 13 } },
            `${rows.length} referencias · ${withStock.length} con stock · ${num(totalUnits)} uds. disponibles`
          )
        ),
        React.createElement(ViewToggle, { mode: viewMode, onChange: changeView })
      ),

      // Filter tabs
      React.createElement('div', { className: 'inv-tabs', style: { marginBottom: 20 } },
        [
          { id: 'all',     label: `Todos (${rows.length})` },
          { id: 'stock',   label: `Con stock (${withStock.length})` },
          { id: 'nostock', label: `Sin stock (${noStock.length})` },
        ].map(t =>
          React.createElement('button', {
            key: t.id,
            className: `inv-tab${filter===t.id?' active':''}`,
            onClick: () => setFilter(t.id),
          }, t.label)
        )
      ),

      // Grid or list
      viewMode === 'grid'
        ? React.createElement('div', { className: 'products-grid' },
            displayed.map(row =>
              React.createElement(ProductCard, { key: row.asin, row, onCogsUpdate: updateCogs, onOpen: onOpenProduct || (() => {}) })
            )
          )
        : React.createElement('div', { className: 'products-list' },
            displayed.map(row =>
              React.createElement(ProductListRow, { key: row.asin, row, onCogsUpdate: updateCogs, onOpen: onOpenProduct || (() => {}) })
            )
          )
    );
  }

  window.ProductsView = ProductsView;
})();