// ProductDetail — slide-over panel with Ventas / Stock / Proveedor tabs
(function () {
  const { useState, useEffect } = React;

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

  // ── Ventas tab ────────────────────────────────────────────────────────────
  function VentasTab({ asin }) {
    const [data, setData]       = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      const from = new Date(Date.now() - 90 * 86400_000).toISOString().split('T')[0];
      const to   = new Date(Date.now() - 86400_000).toISOString().split('T')[0];
      API.salesByAsin(asin, from, to)
        .then(res => setData(res?.data || []))
        .catch(() => setData([]))
        .finally(() => setLoading(false));
    }, [asin]);

    if (loading) return React.createElement('div', { className: 'detail-loading' }, 'Cargando ventas...');
    if (!data.length) return React.createElement('div', { className: 'detail-empty' },
      'Sin datos de ventas para este producto en los últimos 90 días.'
    );

    const totals = data.reduce((a, r) => ({
      revenue: a.revenue + r.revenue,
      units:   a.units   + r.units,
      profit:  a.profit  + r.profit,
    }), { revenue: 0, units: 0, profit: 0 });

    const W = 560, H = 200, PL = 52, PB = 28, PR = 10;
    const cW = W - PL - PR, cH = H - PB;
    const maxRev = Math.max(...data.map(r => r.revenue), 0.01);
    const bW = Math.max(2, cW / data.length - 1);

    return React.createElement('div', null,
      React.createElement('div', { className: 'detail-kpi-row' },
        [
          { label: 'Ingresos 90d', val: eur(totals.revenue), color: 'var(--txt-1)' },
          { label: 'Unidades',     val: num(totals.units),   color: 'var(--txt-1)' },
          { label: 'Beneficio 90d',val: eur(totals.profit),  color: totals.profit >= 0 ? 'var(--green)' : 'var(--red)' },
        ].map((k, i) =>
          React.createElement('div', { key: i, className: 'detail-kpi' },
            React.createElement('div', { className: 'metric-label' }, k.label),
            React.createElement('div', { className: 'metric-value fw-7', style: { color: k.color } }, k.val)
          )
        )
      ),
      React.createElement('svg', { width: '100%', viewBox: `0 0 ${W} ${H}`, style: { marginTop: 16, overflow: 'visible' } },
        data.map((r, i) => {
          const x = PL + i * (cW / data.length);
          const h = Math.max((r.revenue / maxRev) * cH, r.revenue > 0 ? 1 : 0);
          return React.createElement('rect', {
            key: i, x: x + 0.5, y: cH - h, width: bW, height: h,
            fill: r.profit >= 0 ? '#4ade80' : '#f87171', opacity: 0.85,
          });
        }),
        React.createElement('line', { x1: PL, y1: cH, x2: W - PR, y2: cH, stroke: '#e2e8f0', strokeWidth: 1 }),
        [0, 0.5, 1].map(f =>
          React.createElement('text', { key: f, x: PL - 4, y: cH - f * cH + 4, textAnchor: 'end', fontSize: 9, fill: '#94a3b8' },
            eur(maxRev * f)
          )
        )
      ),
      React.createElement('div', { style: { fontSize: 11, color: 'var(--txt-4)', marginTop: 6, textAlign: 'center' } },
        'Verde = beneficio positivo · Rojo = pérdida · Datos financieros con retraso 24-48h'
      )
    );
  }

  // ── Stock tab ─────────────────────────────────────────────────────────────
  function StockTab({ asin, product }) {
    const [history, setHistory] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      API.inventoryHistory(asin, 90)
        .then(res => setHistory(res?.data || []))
        .catch(() => setHistory([]))
        .finally(() => setLoading(false));
    }, [asin]);

    if (loading) return React.createElement('div', { className: 'detail-loading' }, 'Cargando historial de stock...');

    const fulfillable  = product.fulfillable_qty || 0;
    const reserved     = product.reserved_qty    || 0;
    const inbound      = product.inbound_qty      || 0;
    const unfulfillable= product.unfulfillable_qty|| 0;
    const avgDaily     = product.avgDaily          || 0;
    const daysLeft     = avgDaily > 0 ? Math.round(fulfillable / avgDaily) : null;

    const pts = history || [];
    const W = 560, H = 180, PL = 40, PB = 24, PR = 10;
    const cW = W - PL - PR, cH = H - PB;
    const maxStock = Math.max(...pts.map(p => p.stock), ...pts.map(p => p.inbound), fulfillable + inbound, 1);
    const toX = i => PL + (pts.length > 1 ? (i / (pts.length - 1)) * cW : cW / 2);
    const toY = v => cH - (v / maxStock) * cH;

    let histPath = '';
    pts.forEach((p, i) => { histPath += (i === 0 ? 'M' : 'L') + ` ${toX(i)} ${toY(p.stock)}`; });

    let forecastPath = '';
    if (avgDaily > 0 && fulfillable > 0 && pts.length > 0) {
      const lastX  = toX(pts.length - 1);
      const lastY  = toY(fulfillable);
      const segW   = pts.length > 1 ? cW / (pts.length - 1) : 20;
      const endX   = Math.min(lastX + (fulfillable / avgDaily) * segW, W - PR + 30);
      forecastPath = `M ${lastX} ${lastY} L ${endX} ${toY(0)}`;
    }

    return React.createElement('div', null,
      React.createElement('div', { className: 'detail-stock-row' },
        [
          { label: 'Disponible', val: fulfillable,   color: '#22c55e' },
          { label: 'Reservado',  val: reserved,      color: '#3b82f6' },
          { label: 'Entrante',   val: inbound,       color: '#f59e0b' },
          { label: 'No apto',    val: unfulfillable, color: '#ef4444' },
        ].map((s, i) =>
          React.createElement('div', { key: i, className: 'detail-stock-item' },
            React.createElement('div', { className: 'metric-value fw-7', style: { fontSize: 22, color: s.color } }, num(s.val)),
            React.createElement('div', { className: 'metric-label', style: { marginTop: 2 } }, s.label)
          )
        )
      ),
      daysLeft != null && React.createElement('div', { className: 'detail-days-chip' },
        daysLeft > 0
          ? `Stock para ~${daysLeft} días · velocidad ${avgDaily.toFixed(1)} uds/día`
          : 'Sin stock disponible'
      ),
      pts.length > 1
        ? React.createElement('svg', { width: '100%', viewBox: `0 0 ${W} ${H}`, style: { marginTop: 16, overflow: 'visible' } },
            React.createElement('line', { x1: PL, y1: cH, x2: W - PR, y2: cH, stroke: '#e2e8f0', strokeWidth: 1 }),
            histPath && React.createElement('path', { d: histPath, fill: 'none', stroke: '#3b82f6', strokeWidth: 2 }),
            forecastPath && React.createElement('path', { d: forecastPath, fill: 'none', stroke: '#ef4444', strokeWidth: 1.5, strokeDasharray: '5 3' }),
            [0, 0.5, 1].map(f =>
              React.createElement('text', { key: f, x: PL - 4, y: cH - f * cH + 4, textAnchor: 'end', fontSize: 9, fill: '#94a3b8' },
                Math.round(maxStock * f)
              )
            )
          )
        : React.createElement('div', { className: 'detail-empty', style: { marginTop: 16 } },
            'Historial limitado. Más datos disponibles tras sucesivas sincronizaciones.'
          )
    );
  }

  // ── Proveedor tab ─────────────────────────────────────────────────────────
  function ProveedorTab({ asin }) {
    const [loading, setLoading] = useState(true);
    const [saving, setSaving]   = useState(false);
    const [saved, setSaved]     = useState(false);
    const [form, setForm]       = useState({ name:'', url:'', unit_cost:'', moq:'', lead_days:'', notes:'' });

    useEffect(() => {
      API.getSupplier(asin)
        .then(res => {
          if (res?.data) {
            const d = res.data;
            setForm({
              name:      d.name      || '',
              url:       d.url       || '',
              unit_cost: d.unit_cost != null ? String(d.unit_cost) : '',
              moq:       d.moq       != null ? String(d.moq)       : '',
              lead_days: d.lead_days != null ? String(d.lead_days) : '',
              notes:     d.notes     || '',
            });
          }
        })
        .catch(() => {})
        .finally(() => setLoading(false));
    }, [asin]);

    function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

    async function save() {
      setSaving(true);
      try {
        await API.saveSupplier(asin, {
          name:      form.name      || null,
          url:       form.url       || null,
          unit_cost: form.unit_cost ? parseFloat(form.unit_cost) : null,
          moq:       form.moq       ? parseInt(form.moq)         : null,
          lead_days: form.lead_days ? parseInt(form.lead_days)   : null,
          notes:     form.notes     || null,
        });
        setSaved(true);
        setTimeout(() => setSaved(false), 3000);
      } catch (e) { console.error(e); } finally { setSaving(false); }
    }

    if (loading) return React.createElement('div', { className: 'detail-loading' }, 'Cargando...');

    const fields = [
      { key: 'name',      label: 'Nombre del proveedor', type: 'text',   ph: 'Ej: Shenzhen Tech Co.' },
      { key: 'url',       label: 'URL (Alibaba / web)',  type: 'url',    ph: 'https://...' },
      { key: 'unit_cost', label: 'Coste unitario (€)',   type: 'number', ph: '0.00' },
      { key: 'moq',       label: 'MOQ (mínimo pedido)',  type: 'number', ph: '100' },
      { key: 'lead_days', label: 'Lead time (días)',     type: 'number', ph: '30' },
    ];

    return React.createElement('div', { className: 'detail-supplier-form' },
      React.createElement('h4', { className: 'detail-section-title' }, 'Datos del proveedor / Alibaba'),
      ...fields.map(f =>
        React.createElement('div', { key: f.key, className: 'detail-field' },
          React.createElement('label', { className: 'detail-field-label' }, f.label),
          React.createElement('input', {
            type: f.type, value: form[f.key], placeholder: f.ph,
            onChange: e => set(f.key, e.target.value),
            className: 'detail-input',
          })
        )
      ),
      React.createElement('div', { className: 'detail-field' },
        React.createElement('label', { className: 'detail-field-label' }, 'Notas'),
        React.createElement('textarea', {
          value: form.notes, placeholder: 'Condiciones, descuentos, observaciones...',
          onChange: e => set('notes', e.target.value),
          className: 'detail-textarea', rows: 4,
        })
      ),
      React.createElement('button', {
        onClick: save, disabled: saving, className: 'btn-primary', style: { marginTop: 4 },
      }, saved ? '✓ Guardado' : saving ? 'Guardando...' : 'Guardar proveedor')
    );
  }

  // ── Main ProductDetail ────────────────────────────────────────────────────
  function ProductDetail({ product, onClose }) {
    const [tab, setTab] = useState('ventas');

    const TABS = [
      { id: 'ventas',    label: 'Ventas 90d' },
      { id: 'stock',     label: 'Stock' },
      { id: 'proveedor', label: 'Proveedor' },
    ];

    return React.createElement('div', { className: 'detail-overlay', onClick: onClose },
      React.createElement('div', { className: 'detail-panel', onClick: e => e.stopPropagation() },

        // Header
        React.createElement('div', { className: 'detail-header' },
          React.createElement('div', { className: 'detail-product-meta' },
            product.image_url
              ? React.createElement('img', { src: product.image_url, className: 'detail-thumb', alt: '' })
              : React.createElement('div', { className: 'detail-thumb-ph' }, '📦'),
            React.createElement('div', { style: { flex: 1, minWidth: 0 } },
              React.createElement('div', { className: 'detail-product-name' }, product.name || product.asin),
              React.createElement('div', { className: 'flex', style: { gap: 6, marginTop: 4, flexWrap: 'wrap' } },
                React.createElement('code', { className: 'badge' }, product.asin),
                product.sku && !product.sku.startsWith('amzn.gr.') &&
                  React.createElement('span', { className: 'badge badge-blue' }, product.sku),
              )
            )
          ),
          React.createElement('button', { className: 'detail-close-btn', onClick: onClose }, '✕')
        ),

        // Tabs
        React.createElement('div', { className: 'detail-tabs' },
          TABS.map(t =>
            React.createElement('button', {
              key: t.id,
              className: `detail-tab${tab === t.id ? ' active' : ''}`,
              onClick: () => setTab(t.id),
            }, t.label)
          )
        ),

        // Body
        React.createElement('div', { className: 'detail-body' },
          tab === 'ventas'    && React.createElement(VentasTab,    { asin: product.asin }),
          tab === 'stock'     && React.createElement(StockTab,     { asin: product.asin, product }),
          tab === 'proveedor' && React.createElement(ProveedorTab, { asin: product.asin }),
        )
      )
    );
  }

  window.ProductDetail = ProductDetail;
})();