/* global React, Invoice, Storage */

const { useState, useEffect, useMemo, useRef } = React;

const prettyDateFromTs = (ts) => {
  if (!ts) return '';
  const d = new Date(ts);
  return d.toLocaleString('es-VE', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
};

const summarizeInvoice = (entry) => {
  const d = entry.data || {};
  const num = d.number ? `#${d.number}` : '(sin nº)';
  const who = d.receiver?.name || d.sender?.name || 'Sin destinatario';
  const total = (d.items || []).reduce((s, it) => {
    const q = parseFloat(it.qty), p = parseFloat(it.price);
    return s + (isNaN(q) || isNaN(p) ? 0 : q * p);
  }, 0) - (parseFloat(d.discount) || 0);
  return { num, who, total };
};

// ============================================================
// Default state
// ============================================================

const makeEmptyItem = () => ({
  desc: '',
  qty: '1',
  price: '',
  mode: 'air', // 'air' | 'mar'
  // optional maritime dims
  useDims: false,
  L: '', W: '', H: '',
});

const DEFAULT_LOGO = 'ola-express-logo.png';
   
 const DEFAULT_DATA = {
   date: '',
  number: '',
  dueDate: '',
  paymentMethod: 'Zelle',
  paymentDetail: 'logisticainternacional@enviaola.com',
  paymentHolder: 'Ola Express LLC',
  sender: { name: '', phone: '' },
  receiver: { name: '', id: '', phone1: '', phone2: '', showPhone2: true, city: '', address: '' },
  items: [makeEmptyItem()],
  discount: '',
  logo: DEFAULT_LOGO,
};

// ============================================================
// Helpers
// ============================================================

const todayPretty = () => {
  const d = new Date();
  const months = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
};

const calcMaritimePrice = (L, W, H) => {
  const l = parseFloat(L), w = parseFloat(W), h = parseFloat(H);
  if (isNaN(l) || isNaN(w) || isNaN(h) || l <= 0 || w <= 0 || h <= 0) return null;
  return (l * w * h) / 1728 * 45;
};

const fmtUSD = (n) => {
  if (n === null || n === undefined || isNaN(n)) return '—';
  return '$' + Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

// Format Venezuelan ID as 'V- 00.000.000' regardless of input
const formatCedula = (raw) => {
  if (!raw) return '';
  const s = String(raw).trim().toUpperCase();
  // Detect prefix letter (V/E/J/P/G); default V
  let prefix = 'V';
  const letterMatch = s.match(/^[VEJPG]/);
  if (letterMatch) prefix = letterMatch[0];
  // Extract digits only
  const digits = s.replace(/\D/g, '');
  if (!digits) return '';
  // Group with thousands dots from the right
  const grouped = digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  return `${prefix}- ${grouped}`;
};

// Format phone as '000-0000000' (3-digit area code, dash, 7 digits)
// Accepts any input; trims to first 10 digits, ignores everything else.
const formatPhone = (raw) => {
  if (!raw) return '';
  const digits = String(raw).replace(/\D/g, '').slice(0, 10);
  if (!digits) return '';
  if (digits.length <= 3) return digits;
  return `${digits.slice(0, 3)}-${digits.slice(3)}`;
};

// Generate next invoice number for today: DDMMNN where NN is sequence
const generateInvoiceNumber = (savedList) => {
  const d = new Date();
  const dd = String(d.getDate()).padStart(2, '0');
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const prefix = `${dd}${mm}`;
  // Look at saved invoices that start with today's prefix
  let max = 0;
  (savedList || []).forEach(entry => {
    const num = entry.data && entry.data.number;
    if (num && typeof num === 'string' && num.startsWith(prefix)) {
      const tail = num.slice(prefix.length);
      const n = parseInt(tail, 10);
      if (!isNaN(n) && n > max) max = n;
    }
  });
  const seq = String(max + 1).padStart(2, '0');
  return `${prefix}${seq}`;
};

// ============================================================
// Warnings (soft)
// ============================================================

const computeWarnings = (data) => {
  const w = [];

  // Cédula format check (now expects 'V- 00.000.000' style after auto-format)
  if (data.receiver.id) {
    const cid = data.receiver.id.trim();
    const ok = /^[VEJPG]-\s?\d{1,3}(\.\d{3}){0,3}$/.test(cid);
    if (!ok) {
      w.push(`La cédula "${cid}" no tiene un formato típico (ej: V- 12.345.678).`);
    }
  }

  // Items
  data.items.forEach((it, i) => {
    const qty = parseFloat(it.qty);
    const price = parseFloat(it.price);
    if (it.desc && (!it.qty || isNaN(qty))) {
      w.push(`Item #${i+1}: cantidad inválida o vacía.`);
    }
    if (it.desc && (!it.price || isNaN(price))) {
      w.push(`Item #${i+1}: precio vacío o inválido.`);
    }
    if (!isNaN(price) && price > 0 && price < 1) {
      w.push(`Item #${i+1}: precio de ${fmtUSD(price)} parece muy bajo.`);
    }
    if (!isNaN(price) && price > 5000) {
      w.push(`Item #${i+1}: precio de ${fmtUSD(price)} parece muy alto, ¿verificar?`);
    }
    // Dims vs price mismatch
    if (it.useDims && it.L && it.W && it.H && !isNaN(price)) {
      const calc = calcMaritimePrice(it.L, it.W, it.H);
      if (calc !== null && Math.abs(calc - price) > 0.5) {
        w.push(`Item #${i+1}: precio manual (${fmtUSD(price)}) no coincide con cálculo marítimo (${fmtUSD(calc)}).`);
      }
    }
  });

  // Discount > subtotal
  const subtotal = data.items.reduce((s, it) => {
    const q = parseFloat(it.qty), p = parseFloat(it.price);
    return s + (isNaN(q) || isNaN(p) ? 0 : q * p);
  }, 0);
  const disc = parseFloat(data.discount) || 0;
  if (disc > subtotal && disc > 0) {
    w.push(`Descuento (${fmtUSD(disc)}) es mayor que el subtotal (${fmtUSD(subtotal)}).`);
  }
  if (disc < 0) {
    w.push(`Descuento no puede ser negativo.`);
  }

  return w;
};

// ============================================================
// Item row (form side)
// ============================================================

const ItemRow = ({ item, index, onChange, onRemove, canRemove }) => {
  const update = (patch) => onChange({ ...item, ...patch });

  const calcPrice = item.useDims ? calcMaritimePrice(item.L, item.W, item.H) : null;

  return (
    <div className="item-card">
      <div className="item-head">
        <span className="item-num">ITEM #{index + 1}</span>
        {canRemove && (
          <button className="btn-remove" onClick={onRemove} title="Eliminar ítem">×</button>
        )}
      </div>

      <div className="item-grid">
        <div className="field">
          <label>Descripción</label>
          <input
            type="text"
            value={item.desc}
            onChange={e => update({ desc: e.target.value })}
            placeholder="Caja Medium, Plastificado, Pick up…"
          />
        </div>
        <div className="field">
          <label>Cant.</label>
          <input
            type="number"
            min="0"
            step="1"
            value={item.qty}
            onChange={e => update({ qty: e.target.value })}
          />
        </div>
        <div className="field">
          <label>Precio $</label>
          <input
            type="number"
            min="0"
            step="0.01"
            value={item.price}
            onChange={e => update({ price: e.target.value })}
            placeholder="0.00"
          />
        </div>
        <div className="field">
          <label>Total</label>
          <input
            type="text"
            readOnly
            value={(() => {
              const q = parseFloat(item.qty), p = parseFloat(item.price);
              if (isNaN(q) || isNaN(p)) return '';
              return fmtUSD(q * p);
            })()}
            style={{ background: '#f0f0f0', color: '#555' }}
          />
        </div>
      </div>

      {/* Mode toggle: Air vs Mar */}
      <div className="mode-toggle">
        <button
          type="button"
          className={`mode-btn ${item.mode === 'air' ? 'active' : ''}`}
          onClick={() => update({ mode: 'air' })}
        >✈ Air</button>
        <button
          type="button"
          className={`mode-btn ${item.mode === 'mar' ? 'active' : ''}`}
          onClick={() => update({ mode: 'mar' })}
        >🚢 Mar</button>
      </div>

      <div style={{marginTop: 8}}>
        <label style={{fontSize: 11, color: '#666', display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer'}}>
          <input
            type="checkbox"
            checked={item.useDims}
            onChange={e => update({ useDims: e.target.checked })}
          />
          Caja marítima · calcular precio por medidas (L × A × H)
        </label>
      </div>

      {item.useDims && (
        <div className="item-dims">
          <div className="dims-head">📦 Fórmula marítima: (L × A × H) ÷ 1728 × 45</div>
          <div className="dims-grid">
            <div className="field">
              <label>Largo (in)</label>
              <input
                type="number"
                min="0"
                step="0.01"
                value={item.L}
                onChange={e => update({ L: e.target.value })}
              />
            </div>
            <div className="field">
              <label>Ancho (in)</label>
              <input
                type="number"
                min="0"
                step="0.01"
                value={item.W}
                onChange={e => update({ W: e.target.value })}
              />
            </div>
            <div className="field">
              <label>Alto (in)</label>
              <input
                type="number"
                min="0"
                step="0.01"
                value={item.H}
                onChange={e => update({ H: e.target.value })}
              />
            </div>
            <button
              className="file-btn"
              style={{background: 'var(--ocre)', color: '#fff', border: 'none', padding: '7px 10px', whiteSpace: 'nowrap'}}
              onClick={() => {
                if (calcPrice !== null) {
                  update({ price: calcPrice.toFixed(2) });
                }
              }}
              disabled={calcPrice === null}
            >
              Aplicar
            </button>
          </div>
          {calcPrice !== null && (
            <div className="dims-calc">
              ({item.L} × {item.W} × {item.H}) ÷ 1728 × 45 = <strong>{fmtUSD(calcPrice)}</strong>
              {item.price && Math.abs(parseFloat(item.price) - calcPrice) < 0.01 && ' ✓ aplicado'}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

// ============================================================
// Main App
// ============================================================

// Merge stored data with current schema so drafts/saved invoices from older
// versions still pick up new fields (city, paymentMethod, mode, default logo, etc.)
const hydrate = (stored) => {
  if (!stored) return DEFAULT_DATA;
  return {
    ...DEFAULT_DATA,
    ...stored,
    sender:   { ...DEFAULT_DATA.sender,   ...(stored.sender   || {}) },
    receiver: { ...DEFAULT_DATA.receiver, ...(stored.receiver || {}) },
    items: (stored.items && stored.items.length
      ? stored.items.map(it => ({ ...makeEmptyItem(), ...it }))
      : [makeEmptyItem()]),
    logo: stored.logo || DEFAULT_LOGO,
    paymentMethod: stored.paymentMethod || DEFAULT_DATA.paymentMethod,
    paymentDetail: stored.paymentDetail !== undefined ? stored.paymentDetail : DEFAULT_DATA.paymentDetail,
    paymentHolder: stored.paymentHolder || DEFAULT_DATA.paymentHolder,
  };
};

const App = () => {
  const [data, setData] = useState(() => hydrate(Storage.loadDraft()));
  const [currentId, setCurrentId] = useState(null);
  const [savedList, setSavedList] = useState(() => Storage.list());
  const [savedFlash, setSavedFlash] = useState(false);
  const [showLibrary, setShowLibrary] = useState(false);
  const [search, setSearch] = useState('');
  const fileInputRef = useRef(null);
  const importInputRef = useRef(null);

  const warnings = useMemo(() => computeWarnings(data), [data]);

  // Autosave draft whenever data changes (debounced)
  useEffect(() => {
    const t = setTimeout(() => Storage.saveDraft(data), 400);
    return () => clearTimeout(t);
  }, [data]);

  // Auto-generate invoice number on first load if empty
  useEffect(() => {
    if (!data.number) {
      const next = generateInvoiceNumber(savedList);
      setData(d => d.number ? d : { ...d, number: next });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const refreshList = () => setSavedList(Storage.list());

  const saveCurrent = () => {
    const id = Storage.save(data, currentId);
    setCurrentId(id);
    refreshList();
    setSavedFlash(true);
    setTimeout(() => setSavedFlash(false), 1400);
  };

  const loadInvoice = (id) => {
    const entry = Storage.get(id);
    if (!entry) return;
    setData(hydrate(entry.data));
    setCurrentId(id);
    setShowLibrary(false);
  };

  const deleteInvoice = (id) => {
    if (!confirm('¿Eliminar esta factura guardada? No se puede deshacer.')) return;
    Storage.remove(id);
    if (currentId === id) setCurrentId(null);
    refreshList();
  };

  const duplicateInvoice = (id) => {
    const newId = Storage.duplicate(id);
    refreshList();
    if (newId) loadInvoice(newId);
  };

  const exportBackup = () => {
    const payload = Storage.exportAll();
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `ola-express-facturas-${new Date().toISOString().slice(0,10)}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const triggerImport = () => importInputRef.current && importInputRef.current.click();

  const onImportFile = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      try {
        const payload = JSON.parse(ev.target.result);
        const n = Storage.importAll(payload, { merge: true });
        refreshList();
        alert(`Importadas ${n} facturas correctamente.`);
      } catch (err) {
        alert('No se pudo importar: ' + err.message);
      }
    };
    reader.readAsText(file);
    e.target.value = '';
  };

  const filteredList = savedList.filter(entry => {
    if (!search.trim()) return true;
    const q = search.toLowerCase();
    const d = entry.data || {};
    return (
      (d.number || '').toLowerCase().includes(q) ||
      (d.receiver?.name || '').toLowerCase().includes(q) ||
      (d.sender?.name || '').toLowerCase().includes(q) ||
      (d.receiver?.id || '').toLowerCase().includes(q)
    );
  });

  const update = (patch) => setData(d => ({ ...d, ...patch }));
  const updateSender = (patch) => setData(d => ({ ...d, sender: { ...d.sender, ...patch } }));
  const updateReceiver = (patch) => setData(d => ({ ...d, receiver: { ...d.receiver, ...patch } }));

  const updateItem = (index, newItem) => {
    setData(d => ({
      ...d,
      items: d.items.map((it, i) => i === index ? newItem : it),
    }));
  };

  const addItem = () => {
    setData(d => ({ ...d, items: [...d.items, makeEmptyItem()] }));
  };

  const removeItem = (index) => {
    setData(d => ({ ...d, items: d.items.filter((_, i) => i !== index) }));
  };

  const onLogoChange = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => update({ logo: ev.target.result });
    reader.readAsDataURL(file);
  };

  const clearLogo = () => {
    update({ logo: DEFAULT_LOGO });
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const resetAll = () => {
    if (confirm('¿Empezar una factura nueva? Se borrarán los datos actuales del formulario (las facturas guardadas no se tocan).')) {
      const fresh = { ...DEFAULT_DATA, number: generateInvoiceNumber(savedList) };
      setData(fresh);
      setCurrentId(null);
      Storage.clearDraft();
      if (fileInputRef.current) fileInputRef.current.value = '';
    }
  };

  const fillSampleDate = () => update({ date: todayPretty() });

  return (
    <div className="app">
      {/* ---------- FORM PANE ---------- */}
      <aside className="form-pane">
        <div className="form-inner">
          <div className="form-header">
            <div>
              <h1 className="form-title">Generador de Facturas</h1>
              <div className="form-sub">
                OLA EXPRESS · Logística internacional
                {currentId && <span style={{marginLeft: 8, color: 'var(--ocre)'}}>· editando guardada</span>}
              </div>
            </div>
            <button
              className="library-toggle"
              onClick={() => setShowLibrary(s => !s)}
              title="Facturas guardadas"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
              </svg>
              <span>{savedList.length}</span>
            </button>
          </div>

          {showLibrary && (
            <section className="library">
              <div className="library-head">
                <strong>Facturas guardadas</strong>
                <div className="library-actions">
                  <button className="mini-btn" onClick={exportBackup} title="Descargar respaldo .json">↓ Respaldo</button>
                  <button className="mini-btn" onClick={triggerImport} title="Cargar respaldo .json">↑ Importar</button>
                  <input
                    ref={importInputRef}
                    type="file"
                    accept="application/json,.json"
                    onChange={onImportFile}
                    style={{display: 'none'}}
                  />
                </div>
              </div>
              <input
                type="text"
                className="library-search"
                placeholder="Buscar por nº, nombre, cédula…"
                value={search}
                onChange={e => setSearch(e.target.value)}
              />
              {filteredList.length === 0 ? (
                <div className="library-empty">
                  {savedList.length === 0
                    ? 'No hay facturas guardadas todavía. Llena el formulario y toca "Guardar".'
                    : 'Sin resultados para esa búsqueda.'}
                </div>
              ) : (
                <ul className="library-list">
                  {filteredList.map(entry => {
                    const { num, who, total } = summarizeInvoice(entry);
                    const isCurrent = entry.id === currentId;
                    return (
                      <li key={entry.id} className={`library-item ${isCurrent ? 'active' : ''}`}>
                        <button className="library-main" onClick={() => loadInvoice(entry.id)}>
                          <div className="library-line1">
                            <span className="library-num">{num}</span>
                            <span className="library-total">{fmtUSD(total)}</span>
                          </div>
                          <div className="library-line2">
                            <span className="library-who">{who}</span>
                            <span className="library-when">{prettyDateFromTs(entry.updatedAt)}</span>
                          </div>
                        </button>
                        <div className="library-tools">
                          <button className="mini-btn" onClick={() => duplicateInvoice(entry.id)} title="Duplicar">⎘</button>
                          <button className="mini-btn danger" onClick={() => deleteInvoice(entry.id)} title="Eliminar">×</button>
                        </div>
                      </li>
                    );
                  })}
                </ul>
              )}
            </section>
          )}

          {/* Block 1 — Datos de factura */}
          <section className="block">
            <h2 className="block-title"><span className="num">1</span>Datos de factura</h2>

            <div className="field-row">
              <div className="field">
                <label>Fecha de emisión</label>
                <input
                  type="text"
                  value={data.date}
                  onChange={e => update({ date: e.target.value })}
                  placeholder="18 Abril 2026"
                  onFocus={e => { if (!data.date) fillSampleDate(); }}
                />
              </div>
              <div className="field">
                <label>Nº de invoice</label>
                <input
                  type="text"
                  value={data.number}
                  onChange={e => update({ number: e.target.value })}
                  placeholder="10042"
                />
              </div>
            </div>

            <div className="field-row">
              <div className="field full">
                <label>Due date <span style={{color: '#999', textTransform: 'none', letterSpacing: 0, fontWeight: 400}}>(dejar en blanco por defecto)</span></label>
                <input
                  type="text"
                  value={data.dueDate}
                  onChange={e => update({ dueDate: e.target.value })}
                  placeholder="— opcional —"
                />
              </div>
            </div>

            <div className="field-row" style={{marginTop: 4}}>
              <div className="field full">
                <label>Logo de OLA EXPRESS</label>
                <div className="logo-input">
                  <div className="logo-preview">
                    {data.logo
                      ? <img src={data.logo} alt="logo" />
                      : <span className="logo-placeholder">LOGO</span>}
                  </div>
                  <div className="logo-controls">
                    <label className="file-btn">
                      Cambiar imagen
                      <input
                        type="file"
                        ref={fileInputRef}
                        accept="image/*"
                        onChange={onLogoChange}
                        style={{display: 'none'}}
                      />
                    </label>
                    {data.logo !== DEFAULT_LOGO && <button className="logo-clear" onClick={clearLogo}>Restaurar logo por defecto</button>}
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Block 2 — Envía */}
          <section className="block">
            <h2 className="block-title"><span className="num">2</span>Envía · EE.UU.</h2>
            <div className="field-row">
              <div className="field full">
                <label>Nombre y apellido</label>
                <input
                  type="text"
                  value={data.sender.name}
                  onChange={e => updateSender({ name: e.target.value })}
                  placeholder="—"
                />
              </div>
            </div>
            <div className="field-row">
              <div className="field full">
                <label>Teléfono</label>
                <input
                  type="text"
                  value={data.sender.phone}
                  onChange={e => updateSender({ phone: formatPhone(e.target.value) })}
                  placeholder="000-0000000"
                />
              </div>
            </div>
          </section>

          {/* Block 3 — Recibe */}
          <section className="block">
            <h2 className="block-title"><span className="num">3</span>Recibe · Venezuela</h2>
            <div className="field-row">
              <div className="field full">
                <label>Nombre y apellido</label>
                <input
                  type="text"
                  value={data.receiver.name}
                  onChange={e => updateReceiver({ name: e.target.value })}
                  placeholder="—"
                />
              </div>
            </div>
            <div className="field-row">
              <div className="field full">
                <label>Número de cédula</label>
                <input
                  type="text"
                  value={data.receiver.id}
                  onChange={e => updateReceiver({ id: formatCedula(e.target.value) })}
                  placeholder="V- 12.345.678"
                />
              </div>
            </div>
            <div className="field-row phones-row">
              <div className="field">
                <label>Teléfono 1</label>
                <input
                  type="text"
                  value={data.receiver.phone1}
                  onChange={e => updateReceiver({ phone1: formatPhone(e.target.value) })}
                  placeholder="000-0000000"
                />
              </div>
              {data.receiver.showPhone2 ? (
                <div className="field">
                  <label>
                    Teléfono 2
                    <button
                      type="button"
                      className="field-action"
                      onClick={() => updateReceiver({ phone2: '', showPhone2: false })}
                      title="Quitar segundo teléfono"
                      aria-label="Quitar segundo teléfono"
                    >
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="3 6 5 6 21 6" />
                        <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
                        <path d="M10 11v6" />
                        <path d="M14 11v6" />
                        <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
                      </svg>
                    </button>
                  </label>
                  <input
                    type="text"
                    value={data.receiver.phone2}
                    onChange={e => updateReceiver({ phone2: formatPhone(e.target.value) })}
                    placeholder="000-0000000"
                  />
                </div>
              ) : (
                <div className="field">
                  <label>&nbsp;</label>
                  <button
                    type="button"
                    className="add-phone-btn"
                    onClick={() => updateReceiver({ showPhone2: true })}
                  >+ Agregar segundo teléfono</button>
                </div>
              )}
            </div>
            <div className="field-row">
              <div className="field full">
                <label>Ciudad</label>
                <input
                  type="text"
                  value={data.receiver.city}
                  onChange={e => updateReceiver({ city: e.target.value })}
                  placeholder="Caracas, Maracaibo, Valencia…"
                />
              </div>
            </div>
            <div className="field-row">
              <div className="field full">
                <label>Dirección completa</label>
                <textarea
                  value={data.receiver.address}
                  onChange={e => updateReceiver({ address: e.target.value })}
                  placeholder="Calle, urbanización, edificio, referencia…"
                />
              </div>
            </div>
          </section>

          {/* Block 3.5 — Método de pago */}
          <section className="block">
            <h2 className="block-title"><span className="num">4</span>Método de pago</h2>
            <div className="field-row">
              <div className="field full">
                <label>Método</label>
                <select
                  value={data.paymentMethod}
                  onChange={e => update({ paymentMethod: e.target.value })}
                >
                  <option value="Zelle">Zelle</option>
                  <option value="Transferencia">Transferencia bancaria</option>
                  <option value="Efectivo">Efectivo</option>
                  <option value="PayPal">PayPal</option>
                  <option value="Cashapp">Cash App</option>
                  <option value="Zinli">Zinli</option>
                  <option value="Pago Móvil">Pago Móvil</option>
                  <option value="Otro">Otro</option>
                </select>
              </div>
            </div>
            <div className="field-row">
              <div className="field full">
                <label>Titular de cuenta</label>
                <input
                  type="text"
                  value={data.paymentHolder}
                  onChange={e => update({ paymentHolder: e.target.value })}
                  placeholder="Ola Express LLC"
                />
              </div>
            </div>
            <div className="field-row">
              <div className="field full">
                <label>Detalle (correo, número, cuenta…)</label>
                <input
                  type="text"
                  value={data.paymentDetail}
                  onChange={e => update({ paymentDetail: e.target.value })}
                  placeholder="logisticainternacional@enviaola.com"
                />
              </div>
            </div>
          </section>

          {/* Block 4 — Items */}
          <section className="block">
            <h2 className="block-title"><span className="num">5</span>Items</h2>
            <div className="items">
              {data.items.map((it, i) => (
                <ItemRow
                  key={i}
                  item={it}
                  index={i}
                  onChange={(newIt) => updateItem(i, newIt)}
                  onRemove={() => removeItem(i)}
                  canRemove={data.items.length > 1}
                />
              ))}
              <button className="btn-add" onClick={addItem}>+ Agregar ítem</button>
            </div>
          </section>

          {/* Block 5 — Totales */}
          <section className="block">
            <h2 className="block-title"><span className="num">6</span>Totales</h2>
            <div className="field-row">
              <div className="field full">
                <label>Descuento $ (opcional)</label>
                <input
                  type="number"
                  min="0"
                  step="0.01"
                  value={data.discount}
                  onChange={e => update({ discount: e.target.value })}
                  placeholder="0.00"
                />
              </div>
            </div>

            {/* Live summary */}
            {(() => {
              const sub = data.items.reduce((s, it) => {
                const q = parseFloat(it.qty), p = parseFloat(it.price);
                return s + (isNaN(q) || isNaN(p) ? 0 : q * p);
              }, 0);
              const disc = parseFloat(data.discount) || 0;
              const total = sub - disc;
              return (
                <div style={{fontSize: 12.5, color: '#444', background: '#fafafa', padding: '10px 12px', borderRadius: 6, border: '1px solid #ececec', fontFamily: 'ui-monospace, monospace'}}>
                  Subtotal: <strong>{fmtUSD(sub)}</strong> · Descuento: <strong>{fmtUSD(disc)}</strong> · <span style={{color: 'var(--navy)'}}>Total: <strong>{fmtUSD(total)}</strong></span>
                </div>
              );
            })()}
          </section>

          {/* Warnings */}
          {warnings.length > 0 && (
            <div className="warnings">
              {warnings.map((w, i) => (
                <div className="warn" key={i}>
                  <span className="warn-dot"></span>
                  <span>{w}</span>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="actions">
          <button className="btn btn-secondary" onClick={resetAll}>Nueva</button>
          <button className="btn btn-primary" onClick={saveCurrent}>
            {savedFlash ? '✓ Guardada' : (currentId ? 'Actualizar' : 'Guardar')}
          </button>
          <button className="btn btn-ocre" onClick={() => { saveCurrent(); setTimeout(() => window.print(), 80); }}>Guardar + PDF</button>
        </div>
      </aside>

      {/* ---------- PREVIEW PANE ---------- */}
      <main className="preview-pane">
        <div className="invoice-wrap">
          <Invoice data={data} />
        </div>
      </main>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);