// Offers.jsx — Oferty: formularz ofertowy z podpowiedzią ceny wg cennika
(function () {
  const { useState, useEffect } = React;
  const VAT_RATE = 0.23;

  function fmtPLN(v) {
    return Math.round(v).toLocaleString('pl-PL') + ' zł';
  }
  function fmtVal(v) {
    if (v >= 1000000) return (v/1000000).toFixed(1).replace('.',',') + ' M zł';
    if (v >= 1000) return Math.round(v/1000) + ' k zł';
    return Math.round(v) + ' zł';
  }
  function calcOffer(offer) {
    const netto = offer.items.reduce((s,it) => s + (Number(it.qty)||0)*(Number(it.price)||0), 0);
    const discountAmount = netto * (Number(offer.discount)||0) / 100;
    const afterDiscount = netto - discountAmount;
    const vat = afterDiscount * VAT_RATE;
    const brutto = afterDiscount + vat;
    return { netto, discountAmount, afterDiscount, vat, brutto };
  }

  const inputStyle = { width:'100%', padding:'9px 12px', borderRadius:9, border:'1px solid var(--bdr)', background:'var(--bg-input)', color:'var(--t1)', fontSize:13, outline:'none' };
  const labelStyle = { fontSize:11, fontWeight:600, color:'var(--t3)', marginBottom:5, display:'block', textTransform:'uppercase', letterSpacing:0.5 };
  const iconBtnStyle = { width:28, height:28, borderRadius:7, border:'1px solid var(--bdr)', background:'var(--bg1)', color:'var(--t2)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', outline:'none', flexShrink:0 };

  function StatusPill({ statusId }) {
    const s = (window.SEED.offerStatuses||[]).find(x=>x.id===statusId) || { label:statusId, color:'#64748B' };
    return (
      <span style={{ display:'inline-flex', alignItems:'center', gap:5, padding:'3px 10px', borderRadius:99, background:s.color+'22', fontSize:12, fontWeight:600, color:s.color }}>
        <span style={{ width:6, height:6, borderRadius:'50%', background:s.color, display:'inline-block' }} />
        {s.label}
      </span>
    );
  }

  // ── New offer modal ──────────────────────────────────────────────
  function NewOfferModal({ onClose, onSave, prefillClient, priceList }) {
    const clients = window.SEED.clients || [];
    const [clientId, setClientId] = useState(prefillClient?.id || clients[0]?.id || '');
    const [discount, setDiscount] = useState(0);
    const mkRow = (product) => ({ rid: Math.random().toString(36).slice(2), priceId: product?.id || '', name: product?.name || '', unit: product?.unit || 'jednorazowo', qty:1, price: product?.price || 0 });
    const [items, setItems] = useState(() => [mkRow(priceList[0])]);

    const client = clients.find(c => c.id === clientId);
    const setRow = (rid, patch) => setItems(prev => prev.map(r => r.rid===rid ? { ...r, ...patch } : r));
    const pickProduct = (rid, priceId) => {
      const p = priceList.find(x => x.id === priceId);
      setRow(rid, { priceId, name:p?.name||'', unit:p?.unit||'jednorazowo', price:p?.price||0 });
    };
    const addRow = () => setItems(prev => [...prev, mkRow(priceList[0])]);
    const removeRow = (rid) => setItems(prev => prev.length>1 ? prev.filter(r=>r.rid!==rid) : prev);

    const netto = items.reduce((s,it)=> s + (Number(it.qty)||0)*(Number(it.price)||0), 0);
    const discountAmount = netto * (Number(discount)||0) / 100;
    const afterDiscount = netto - discountAmount;
    const vat = afterDiscount * VAT_RATE;
    const brutto = afterDiscount + vat;
    const canSave = !!client && items.every(it => it.name && Number(it.qty) > 0);

    const submit = () => {
      if (!canSave) return;
      const today = new Date();
      const pad = n => String(n).padStart(2,'0');
      const dateStr = `${pad(today.getDate())}.${pad(today.getMonth()+1)}.${today.getFullYear()}`;
      const valid = new Date(today.getTime() + 14*86400000);
      const validStr = `${pad(valid.getDate())}.${pad(valid.getMonth()+1)}.${valid.getFullYear()}`;
      onSave({
        id: 'OF-' + today.getFullYear() + '-' + Math.floor(100 + Math.random()*899),
        clientId: client.id, company: client.company, person: client.person,
        date: dateStr, validUntil: validStr, status:'draft', discount:Number(discount)||0,
        items: items.map(it => ({ name:it.name, qty:Number(it.qty)||0, unit:it.unit, price:Number(it.price)||0 })),
      });
      onClose();
    };

    return (
      <>
        <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.5)', zIndex:60, backdropFilter:'blur(3px)' }} />
        <div style={{ position:'fixed', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:660, maxWidth:'94vw', maxHeight:'88vh', overflowY:'auto', background:'var(--bg-sidebar)', border:'1px solid var(--bdr)', borderRadius:18, zIndex:61, padding:24, boxShadow:'0 30px 80px rgba(0,0,0,.5)', backdropFilter:'blur(32px)' }}>
          <div style={{ fontSize:16, fontWeight:700, color:'var(--t1)', marginBottom:4 }}>Nowa oferta</div>
          <div style={{ fontSize:12, color:'var(--t3)', marginBottom:18 }}>Wybierz pozycje z cennika — cena podpowiada się automatycznie, można ją nadpisać</div>

          <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:10, marginBottom:18 }}>
            <div>
              <label style={labelStyle}>Klient *</label>
              <window.DemoSelect value={clientId} onChange={setClientId} options={clients.map(c=>({value:c.id,label:c.company}))} />
            </div>
            <div>
              <label style={labelStyle}>Rabat (%)</label>
              <input type="number" min="0" max="100" style={inputStyle} value={discount} onChange={e=>setDiscount(e.target.value)} />
            </div>
          </div>

          {/* Line items */}
          <div style={{ display:'grid', gridTemplateColumns:'2.2fr 0.6fr 1fr 1fr 26px', gap:8, padding:'0 2px', marginBottom:6 }}>
            {['Pozycja z cennika','Ilość','Cena jedn.','Wartość',''].map(h => (
              <div key={h} style={{ fontSize:10.5, fontWeight:600, color:'var(--t3)', textTransform:'uppercase', letterSpacing:0.5 }}>{h}</div>
            ))}
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {items.map(row => {
              const rowTotal = (Number(row.qty)||0) * (Number(row.price)||0);
              return (
                <div key={row.rid} style={{ display:'grid', gridTemplateColumns:'2.2fr 0.6fr 1fr 1fr 26px', gap:8, alignItems:'center' }}>
                  <window.DemoSelect value={row.priceId} onChange={v=>pickProduct(row.rid, v)} options={priceList.map(p=>({value:p.id,label:p.name}))} />
                  <input type="number" min="1" style={inputStyle} value={row.qty} onChange={e=>setRow(row.rid,{qty:e.target.value})} />
                  <input type="number" min="0" style={inputStyle} value={row.price} onChange={e=>setRow(row.rid,{price:e.target.value})} />
                  <div style={{ fontSize:12.5, fontWeight:700, color:'var(--t1)', textAlign:'right', paddingRight:2, whiteSpace:'nowrap' }}>{fmtPLN(rowTotal)}</div>
                  <button onClick={()=>removeRow(row.rid)} disabled={items.length===1} style={{ ...iconBtnStyle, color: items.length===1?'var(--t3)':'#EF4444', cursor: items.length===1?'not-allowed':'pointer' }}><window.Icon name="x" size={13} /></button>
                </div>
              );
            })}
          </div>
          <button onClick={addRow} style={{ marginTop:10, marginBottom:18, padding:'7px 14px', borderRadius:8, border:'1px dashed var(--bdr2)', background:'transparent', color:'var(--t2)', fontWeight:600, fontSize:12.5, cursor:'pointer' }}>+ Dodaj pozycję</button>

          {/* Totals */}
          <div className="glass-card" style={{ padding:16, display:'flex', flexDirection:'column', gap:6 }}>
            {[
              ['Suma netto', fmtPLN(netto)],
              [`Rabat (${discount||0}%)`, '– ' + fmtPLN(discountAmount)],
              ['Po rabacie (netto)', fmtPLN(afterDiscount)],
              ['VAT (23%)', fmtPLN(vat)],
            ].map(([l,v],i) => (
              <div key={i} style={{ display:'flex', justifyContent:'space-between', fontSize:12.5, color:'var(--t2)' }}>
                <span>{l}</span><span style={{ color:'var(--t1)', fontWeight:600 }}>{v}</span>
              </div>
            ))}
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:15, paddingTop:8, marginTop:4, borderTop:'1px solid var(--bdr)' }}>
              <span style={{ fontWeight:700, color:'var(--t1)' }}>Suma brutto</span>
              <span style={{ fontWeight:800, color:'#7C5CFF' }}>{fmtPLN(brutto)}</span>
            </div>
          </div>

          <div style={{ display:'flex', gap:8, marginTop:22 }}>
            <button onClick={onClose} style={{ flex:1, padding:'10px 0', borderRadius:10, border:'1px solid var(--bdr)', background:'var(--bg1)', color:'var(--t1)', fontWeight:600, fontSize:13, cursor:'pointer' }}>Anuluj</button>
            <button onClick={submit} disabled={!canSave} style={{ flex:1, padding:'10px 0', borderRadius:10, border:'none', background: canSave ? 'linear-gradient(135deg,#7C5CFF,#4DA3FF)' : 'var(--bg2)', color: canSave ? '#fff' : 'var(--t3)', fontWeight:600, fontSize:13, cursor: canSave ? 'pointer' : 'not-allowed' }}>Utwórz ofertę</button>
          </div>
        </div>
      </>
    );
  }

  // ── Offer drawer — preview / status / print ───────────────────────
  function OfferDrawer({ offer, onClose, onStatusChange }) {
    useEffect(() => {
      const esc = (e) => { if (e.key === 'Escape') onClose(); };
      document.addEventListener('keydown', esc);
      return () => document.removeEventListener('keydown', esc);
    }, []);
    const c = calcOffer(offer);
    const statuses = window.SEED.offerStatuses || [];

    return (
      <>
        <div onClick={onClose} className="no-print" style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.45)', zIndex:40, backdropFilter:'blur(3px)' }} />
        <div className="detail-drawer" style={{
          position:'fixed', top:0, right:0, bottom:0, width:460,
          background:'var(--bg-sidebar)', borderLeft:'1px solid var(--bdr)',
          backdropFilter:'blur(32px)', WebkitBackdropFilter:'blur(32px)',
          zIndex:50, display:'flex', flexDirection:'column',
          animation:'slideInRight .25s cubic-bezier(.4,0,.2,1)',
          boxShadow:'-20px 0 60px rgba(0,0,0,0.4)',
        }}>
          <div className="no-print" style={{ padding:'20px 24px 16px', borderBottom:'1px solid var(--bdr)', display:'flex', alignItems:'center', gap:14 }}>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:15, fontWeight:700, color:'var(--t1)' }}>{offer.id}</div>
              <div style={{ fontSize:12, color:'var(--t3)', marginTop:1 }}>{offer.company}</div>
            </div>
            <StatusPill statusId={offer.status} />
            <button onClick={onClose} style={iconBtnStyle}><window.Icon name="x" size={15} /></button>
          </div>

          <div style={{ flex:1, overflowY:'auto', padding:'20px 24px' }}>
            <div className="print-area" style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div style={{ display:'flex', justifyContent:'space-between', gap:12 }}>
                <div>
                  <div style={{ fontSize:16, fontWeight:800, color:'var(--t1)' }}>DemoCRM Sp. z o.o.</div>
                  <div style={{ fontSize:11.5, color:'var(--t3)', lineHeight:1.5 }}>ul. Przykładowa 12, 00-000 Warszawa<br/>NIP 000-000-00-00</div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontSize:13, fontWeight:700, color:'var(--t1)' }}>Oferta {offer.id}</div>
                  <div style={{ fontSize:11.5, color:'var(--t3)', marginTop:2 }}>Data: {offer.date}</div>
                  <div style={{ fontSize:11.5, color:'var(--t3)' }}>Ważna do: {offer.validUntil}</div>
                </div>
              </div>

              <div className="glass-card" style={{ padding:14 }}>
                <div style={{ fontSize:10.5, fontWeight:600, color:'var(--t3)', textTransform:'uppercase', letterSpacing:0.6, marginBottom:6 }}>Dla</div>
                <div style={{ fontSize:13.5, fontWeight:700, color:'var(--t1)' }}>{offer.company}</div>
                <div style={{ fontSize:12, color:'var(--t2)' }}>{offer.person}</div>
              </div>

              <div>
                <div style={{ display:'grid', gridTemplateColumns:'2fr 0.6fr 1fr 1fr', gap:6, padding:'0 4px 6px', borderBottom:'1px solid var(--bdr)' }}>
                  {['Pozycja','Ilość','Cena jedn.','Wartość'].map(h => (
                    <div key={h} style={{ fontSize:10, fontWeight:600, color:'var(--t3)', textTransform:'uppercase', letterSpacing:0.5 }}>{h}</div>
                  ))}
                </div>
                {offer.items.map((it,i) => (
                  <div key={i} style={{ display:'grid', gridTemplateColumns:'2fr 0.6fr 1fr 1fr', gap:6, padding:'8px 4px', borderBottom: i<offer.items.length-1?'1px solid var(--bdr)':'none' }}>
                    <div style={{ fontSize:12.5, color:'var(--t1)' }}>{it.name}<div style={{ fontSize:10.5, color:'var(--t3)' }}>{it.unit}</div></div>
                    <div style={{ fontSize:12.5, color:'var(--t2)' }}>{it.qty}</div>
                    <div style={{ fontSize:12.5, color:'var(--t2)' }}>{fmtPLN(it.price)}</div>
                    <div style={{ fontSize:12.5, fontWeight:700, color:'var(--t1)' }}>{fmtPLN(it.qty*it.price)}</div>
                  </div>
                ))}
              </div>

              <div style={{ display:'flex', flexDirection:'column', gap:5, width:'100%', maxWidth:260, marginLeft:'auto' }}>
                <div style={{ display:'flex', justifyContent:'space-between', fontSize:12, color:'var(--t2)' }}><span>Suma netto</span><span>{fmtPLN(c.netto)}</span></div>
                {offer.discount > 0 && <div style={{ display:'flex', justifyContent:'space-between', fontSize:12, color:'var(--t2)' }}><span>Rabat ({offer.discount}%)</span><span>– {fmtPLN(c.discountAmount)}</span></div>}
                <div style={{ display:'flex', justifyContent:'space-between', fontSize:12, color:'var(--t2)' }}><span>VAT (23%)</span><span>{fmtPLN(c.vat)}</span></div>
                <div style={{ display:'flex', justifyContent:'space-between', fontSize:15, paddingTop:6, marginTop:2, borderTop:'1px solid var(--bdr)' }}>
                  <span style={{ fontWeight:700, color:'var(--t1)' }}>Razem brutto</span>
                  <span style={{ fontWeight:800, color:'#7C5CFF' }}>{fmtPLN(c.brutto)}</span>
                </div>
              </div>

              <div style={{ fontSize:10.5, color:'var(--t3)', textAlign:'center', marginTop:8 }}>Oferta ważna do {offer.validUntil} · Dokument wygenerowany w DemoCRM</div>
            </div>
          </div>

          <div className="no-print" style={{ padding:'16px 24px', borderTop:'1px solid var(--bdr)', display:'flex', flexDirection:'column', gap:10 }}>
            <div style={{ display:'flex', gap:6 }}>
              {statuses.map(s => (
                <button key={s.id} onClick={()=>onStatusChange(offer.id, s.id)} disabled={s.id===offer.status} style={{
                  flex:1, padding:'7px 0', borderRadius:8, fontSize:11, fontWeight:600, cursor: s.id===offer.status?'default':'pointer',
                  border: s.id===offer.status ? `1.5px solid ${s.color}` : '1px solid var(--bdr)',
                  background: s.id===offer.status ? s.color+'22' : 'var(--bg1)',
                  color: s.id===offer.status ? s.color : 'var(--t2)',
                }}>{s.label}</button>
              ))}
            </div>
            <div style={{ display:'flex', gap:8 }}>
              <button onClick={()=>window.print()} style={{ flex:1, padding:'9px 0', borderRadius:10, border:'1px solid var(--bdr)', background:'var(--bg1)', color:'var(--t1)', fontWeight:600, fontSize:13, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:7 }}><window.Icon name="printer" size={14} /> Drukuj / PDF</button>
              {offer.status === 'accepted' && (
                <button onClick={()=>{ window.__createPaymentForOffer && window.__createPaymentForOffer(offer, c.brutto); }} style={{ flex:1, padding:'9px 0', borderRadius:10, border:'none', background:'linear-gradient(135deg,#7C5CFF,#4DA3FF)', color:'#fff', fontWeight:600, fontSize:13, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:7 }}><window.Icon name="credit-card" size={14} /> Utwórz plan płatności</button>
              )}
            </div>
          </div>
        </div>
        <style>{`@keyframes slideInRight { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }`}</style>
      </>
    );
  }

  // ── Price list modal (cennik) — przeglądanie, dodawanie, edycja ────
  function PriceListModal({ priceList, setPriceList, onClose }) {
    const [editingId, setEditingId] = useState(null);
    const [showAdd, setShowAdd] = useState(false);
    const [form, setForm] = useState({ name:'', category:'', unit:'jednorazowo', price:'' });
    const setF = (k,v) => setForm(f => ({ ...f, [k]:v }));

    const categories = [...new Set(priceList.map(p => p.category))];
    const canSaveForm = form.name.trim().length > 0 && form.category.trim().length > 0 && Number(form.price) > 0;

    const startAdd = () => { setEditingId(null); setForm({ name:'', category: categories[0] || 'Moduł', unit:'jednorazowo', price:'' }); setShowAdd(true); };
    const startEdit = (p) => { setShowAdd(false); setEditingId(p.id); setForm({ name:p.name, category:p.category, unit:p.unit, price:String(p.price) }); };
    const cancelForm = () => { setEditingId(null); setShowAdd(false); };

    const saveForm = () => {
      if (!canSaveForm) return;
      if (editingId) {
        setPriceList(prev => prev.map(p => p.id === editingId
          ? { ...p, name:form.name.trim(), category:form.category.trim(), unit:form.unit.trim() || 'jednorazowo', price:Number(form.price) }
          : p));
      } else {
        setPriceList(prev => [...prev, {
          id: 'P' + Math.random().toString(36).slice(2,7).toUpperCase(),
          name: form.name.trim(), category: form.category.trim(), unit: form.unit.trim() || 'jednorazowo', price: Number(form.price),
        }]);
      }
      cancelForm();
    };

    const removeItem = (id) => { setPriceList(prev => prev.filter(p => p.id !== id)); if (editingId === id) cancelForm(); };

    const editForm = (
      <div className="glass-card" style={{ padding:14, display:'flex', flexDirection:'column', gap:10 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
          <div><label style={labelStyle}>Nazwa *</label><input style={inputStyle} value={form.name} onChange={e=>setF('name',e.target.value)} placeholder="np. Wdrożenie systemu CRM" autoFocus /></div>
          <div>
            <label style={labelStyle}>Kategoria *</label>
            <input style={inputStyle} value={form.category} onChange={e=>setF('category',e.target.value)} placeholder="np. Moduł" list="cennik-categories" />
            <datalist id="cennik-categories">{categories.map(c => <option key={c} value={c} />)}</datalist>
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
          <div><label style={labelStyle}>Jednostka</label><input style={inputStyle} value={form.unit} onChange={e=>setF('unit',e.target.value)} placeholder="jednorazowo" /></div>
          <div><label style={labelStyle}>Cena netto (zł) *</label><input type="number" min="0" style={inputStyle} value={form.price} onChange={e=>setF('price',e.target.value)} placeholder="0" /></div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <button onClick={cancelForm} style={{ flex:1, padding:'8px 0', borderRadius:8, border:'1px solid var(--bdr)', background:'var(--bg1)', color:'var(--t1)', fontWeight:600, fontSize:12.5, cursor:'pointer' }}>Anuluj</button>
          <button onClick={saveForm} disabled={!canSaveForm} style={{ flex:1, padding:'8px 0', borderRadius:8, border:'none', background: canSaveForm ? 'linear-gradient(135deg,#7C5CFF,#4DA3FF)' : 'var(--bg2)', color: canSaveForm ? '#fff' : 'var(--t3)', fontWeight:600, fontSize:12.5, cursor: canSaveForm ? 'pointer' : 'not-allowed', display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
            <window.Icon name="check" size={13} /> {editingId ? 'Zapisz zmiany' : 'Dodaj pozycję'}
          </button>
        </div>
      </div>
    );

    return (
      <>
        <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.5)', zIndex:60, backdropFilter:'blur(3px)' }} />
        <div style={{ position:'fixed', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:580, maxWidth:'94vw', maxHeight:'86vh', overflowY:'auto', background:'var(--bg-sidebar)', border:'1px solid var(--bdr)', borderRadius:18, zIndex:61, padding:24, boxShadow:'0 30px 80px rgba(0,0,0,.5)', backdropFilter:'blur(32px)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:4 }}>
            <div style={{ fontSize:16, fontWeight:700, color:'var(--t1)' }}>Cennik usług</div>
            <button onClick={onClose} style={iconBtnStyle}><window.Icon name="x" size={15} /></button>
          </div>
          <div style={{ fontSize:12, color:'var(--t3)', marginBottom:18 }}>Pozycje dostępne przy tworzeniu oferty — ceny netto</div>

          {showAdd && <div style={{ marginBottom:18 }}>{editForm}</div>}

          {categories.map(cat => (
            <div key={cat} style={{ marginBottom:16 }}>
              <div style={{ fontSize:11, fontWeight:600, color:'#7C5CFF', textTransform:'uppercase', letterSpacing:0.6, marginBottom:8 }}>{cat}</div>
              <div className="glass-card" style={{ overflow:'hidden' }}>
                {priceList.filter(p=>p.category===cat).map((p,i,arr) => editingId === p.id ? (
                  <div key={p.id} style={{ padding:14, borderBottom: i<arr.length-1 ? '1px solid var(--bdr)' : 'none' }}>{editForm}</div>
                ) : (
                  <div key={p.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'11px 16px', borderBottom: i<arr.length-1 ? '1px solid var(--bdr)' : 'none' }}>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13, color:'var(--t1)' }}>{p.name}</div>
                      <div style={{ fontSize:11, color:'var(--t3)', marginTop:1 }}>{p.unit}</div>
                    </div>
                    <div style={{ fontSize:13.5, fontWeight:700, color:'var(--t1)', whiteSpace:'nowrap' }}>{fmtPLN(p.price)}</div>
                    <button onClick={()=>startEdit(p)} style={iconBtnStyle} title="Edytuj"><window.Icon name="edit-2" size={13} /></button>
                    <button onClick={()=>removeItem(p.id)} style={{ ...iconBtnStyle, color:'#EF4444' }} title="Usuń"><window.Icon name="trash" size={13} /></button>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {!showAdd && (
            <button onClick={startAdd} style={{ width:'100%', padding:'10px 0', borderRadius:10, border:'1px dashed var(--bdr2)', background:'transparent', color:'var(--t2)', fontWeight:600, fontSize:13, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:7 }}>
              <window.Icon name="plus-circle" size={15} /> Dodaj nową pozycję
            </button>
          )}
        </div>
      </>
    );
  }

  // ── Offers (main export) ──────────────────────────────────────────
  window.Offers = function Offers({ prefillClient, onPrefillConsumed }) {
    const [offers, setOffers] = useState(() => window.SEED.offers || []);
    const [priceList, setPriceList] = useState(() => window.SEED.priceList || []);
    const [search, setSearch] = useState('');
    const [filterStatus, setFilterStatus] = useState('all');
    const [selected, setSelected] = useState(null);
    const [showNew, setShowNew] = useState(false);
    const [showPriceList, setShowPriceList] = useState(false);
    const [pendingClient, setPendingClient] = useState(null);

    useEffect(() => {
      if (prefillClient) {
        setPendingClient(prefillClient);
        setShowNew(true);
        onPrefillConsumed && onPrefillConsumed();
      }
    }, [prefillClient]);

    const statuses = window.SEED.offerStatuses || [];
    const filtered = offers.filter(o => {
      const matchSearch = o.company.toLowerCase().includes(search.toLowerCase()) || o.id.toLowerCase().includes(search.toLowerCase());
      const matchStatus = filterStatus === 'all' || o.status === filterStatus;
      return matchSearch && matchStatus;
    });

    const totalValue = offers.reduce((s,o) => s + calcOffer(o).brutto, 0);
    const acceptedValue = offers.filter(o=>o.status==='accepted').reduce((s,o) => s + calcOffer(o).brutto, 0);

    const handleStatusChange = (id, status) => {
      setOffers(prev => prev.map(o => o.id===id ? { ...o, status } : o));
      setSelected(prev => prev && prev.id===id ? { ...prev, status } : prev);
    };

    return (
      <div>
        <div className="stats-bar" style={{ display:'flex', gap:12, marginBottom:20 }}>
          {[
            { label:'Wszystkie oferty', val: String(offers.length), color:'#7C5CFF' },
            { label:'Łączna wartość',    val: fmtVal(totalValue),   color:'#4DA3FF' },
            { label:'Zaakceptowane',     val: fmtVal(acceptedValue),color:'#22C55E' },
          ].map((s,i) => (
            <div key={i} className="glass-card" style={{ flex:1, padding:'14px 18px' }}>
              <div style={{ fontSize:11, color:'var(--t3)', marginBottom:4 }}>{s.label}</div>
              <div style={{ fontSize:19, fontWeight:800, color:s.color }}>{s.val}</div>
            </div>
          ))}
        </div>

        <div style={{ display:'flex', gap:12, marginBottom:20, alignItems:'center', flexWrap:'wrap' }}>
          <div style={{ position:'relative', flex:'1', maxWidth:340 }}>
            <span style={{ position:'absolute', left:11, top:'50%', transform:'translateY(-50%)', color:'var(--t3)', display:'flex' }}><window.Icon name="search" size={14} /></span>
            <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Szukaj ofert…"
              style={{ width:'100%', padding:'9px 12px 9px 34px', borderRadius:10, border:'1px solid var(--bdr)', background:'var(--bg-input)', color:'var(--t1)', fontSize:13, outline:'none' }} />
          </div>
          <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
            <button onClick={()=>setFilterStatus('all')} style={{
              padding:'7px 14px', borderRadius:9, border:'1px solid var(--bdr)',
              background: filterStatus==='all' ? 'rgba(124,92,255,.2)' : 'var(--bg1)',
              color: filterStatus==='all' ? '#7C5CFF' : 'var(--t2)',
              fontWeight: filterStatus==='all' ? 600 : 400, fontSize:12, cursor:'pointer', outline:'none',
            }}>Wszystkie</button>
            {statuses.map(s => (
              <button key={s.id} onClick={()=>setFilterStatus(s.id)} style={{
                padding:'7px 14px', borderRadius:9, border:'1px solid var(--bdr)',
                background: filterStatus===s.id ? s.color+'22' : 'var(--bg1)',
                color: filterStatus===s.id ? s.color : 'var(--t2)',
                fontWeight: filterStatus===s.id ? 600 : 400, fontSize:12, cursor:'pointer', outline:'none',
              }}>{s.label}</button>
            ))}
          </div>
          <div style={{ flex:1 }} />
          <button onClick={()=>setShowPriceList(true)} style={{ padding:'9px 16px', borderRadius:10, border:'1px solid var(--bdr)', background:'var(--bg1)', color:'var(--t1)', fontWeight:600, fontSize:13, cursor:'pointer', display:'flex', alignItems:'center', gap:7 }}><window.Icon name="list" size={14} /> Cennik</button>
          <button onClick={()=>setShowNew(true)} style={{ padding:'9px 18px', borderRadius:10, border:'none', background:'linear-gradient(135deg,#7C5CFF,#4DA3FF)', color:'#fff', fontWeight:600, fontSize:13, cursor:'pointer' }}>+ Nowa oferta</button>
        </div>

        <div className="glass-card" style={{ overflowX:'auto', WebkitOverflowScrolling:'touch' }}>
          <table style={{ width:'100%', minWidth:680, borderCollapse:'collapse' }}>
            <thead>
              <tr style={{ borderBottom:'1px solid var(--bdr)' }}>
                {['Numer','Klient','Data','Ważna do','Wartość brutto','Status'].map(h => (
                  <th key={h} style={{ padding:'12px 16px', textAlign:'left', fontSize:11, fontWeight:600, color:'var(--t3)', textTransform:'uppercase', letterSpacing:0.6, whiteSpace:'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtered.map((o,i) => (
                <tr key={o.id} onClick={()=>setSelected(o)}
                  style={{ borderBottom: i<filtered.length-1 ? '1px solid var(--bdr)' : 'none', cursor:'pointer', transition:'background .15s' }}
                  onMouseEnter={e=>e.currentTarget.style.background='var(--bg-hover)'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}
                >
                  <td style={{ padding:'13px 16px', fontSize:13, fontWeight:600, color:'var(--t1)', whiteSpace:'nowrap' }}>{o.id}</td>
                  <td style={{ padding:'13px 16px', fontSize:13, color:'var(--t2)' }}>{o.company}</td>
                  <td style={{ padding:'13px 16px', fontSize:12, color:'var(--t3)' }}>{o.date}</td>
                  <td style={{ padding:'13px 16px', fontSize:12, color:'var(--t3)' }}>{o.validUntil}</td>
                  <td style={{ padding:'13px 16px', fontSize:13, fontWeight:700, color:'var(--t1)' }}>{fmtVal(calcOffer(o).brutto)}</td>
                  <td style={{ padding:'13px 16px' }}><StatusPill statusId={o.status} /></td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length === 0 && (
            <div style={{ padding:'40px', textAlign:'center', color:'var(--t3)', fontSize:14 }}>Brak ofert dla podanych filtrów</div>
          )}
        </div>

        {selected && <OfferDrawer offer={selected} onClose={()=>setSelected(null)} onStatusChange={handleStatusChange} />}
        {showPriceList && <PriceListModal priceList={priceList} setPriceList={setPriceList} onClose={()=>setShowPriceList(false)} />}
        {showNew && <NewOfferModal
          onClose={()=>{ setShowNew(false); setPendingClient(null); }}
          onSave={o => setOffers(prev => [o, ...prev])}
          prefillClient={pendingClient}
          priceList={priceList}
        />}
      </div>
    );
  };
})();