/* Účtovníček — Vystavené faktúry: zoznam, formulár, detail s úhradami, tlač */

const INV_META = {
  sales: { title: 'Vystavené faktúry', series: 'VF1', partner: 'Odberateľ', newLabel: 'Nová faktúra', route: 'invoices', verb: 'vystavená', doc: 'Faktúra' },
  proforma: { title: 'Zálohové faktúry', series: 'VF2', partner: 'Odberateľ', newLabel: 'Nová zálohová faktúra', route: 'proforma', verb: 'vystavená', doc: 'Zálohová faktúra' },
  purchase: { title: 'Prijaté faktúry', series: 'DFA', partner: 'Dodávateľ', newLabel: 'Nová prijatá faktúra', route: 'purchase', verb: 'prijatá', doc: 'Faktúra' },
};
/* Účty (predkontácia) sa ukazujú len v podvojnom účtovníctve. */
const showAccounting = () => uctStore.ctx.mode() === 'podvojne';

function PageInvoices({ kind = 'sales', go, route }) {
  const meta = INV_META[kind];
  const [, action, routeId] = (route || '').split(':');
  const [filter, setFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [openId, setOpenId] = React.useState(action === 'open' ? routeId : null);
  const [creating, setCreating] = React.useState(action === 'new');
  const [setToast, Toast] = useToast();
  React.useEffect(() => {
    if (action === 'open') setOpenId(routeId);
    if (action === 'new') setCreating(true);
  }, [route]);

  const all = uctStore.invoices.list(kind);
  const q = search.trim().toLowerCase();
  const list = all.filter(i => {
    if (filter === 'unpaid' && !(i.status === 'vystavena' || i.status === 'ciastocne')) return false;
    if (filter === 'paid' && i.status !== 'uhradena') return false;
    if (filter === 'overdue' && !uctStore.invoices.isOverdue(i)) return false;
    return !q || i.number.toLowerCase().includes(q) || i.partnerName.toLowerCase().includes(q) || (i.vs || '').includes(q) || (i.supplierNumber || '').toLowerCase().includes(q);
  });
  const sum = (arr, f) => arr.reduce((a, i) => a + (f(i) || 0), 0);
  const counts = {
    all: all.length,
    unpaid: all.filter(i => i.status === 'vystavena' || i.status === 'ciastocne').length,
    paid: all.filter(i => i.status === 'uhradena').length,
    overdue: all.filter(uctStore.invoices.isOverdue).length,
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>{meta.title}</h1>
          <div className="sub">rad {meta.series} · {all.length} {plural(all.length, 'faktúra', 'faktúry', 'faktúr')} · neuhradené {fmt.eur(sum(all.filter(i => i.status !== 'storno'), uctStore.invoices.rest))}{kind === 'proforma' ? ' · zálohová faktúra sa neúčtuje, účtuje sa až riadna faktúra a platba' : ''}</div>
        </div>
        <div style={{display:'flex', gap:10}}>
          <div className="search-wrap">
            <Icon name="search" size={14} className="search-ic" />
            <input className="input" placeholder={`Číslo, ${meta.partner.toLowerCase()}, VS…`} value={search} onChange={e => setSearch(e.target.value)} />
          </div>
          <button className="btn btn-brand" onClick={() => setCreating(true)}><Icon name="plus" /> {meta.newLabel}</button>
        </div>
      </div>

      <div className="tabs">
        {[['all', 'Všetky'], ['unpaid', 'Neuhradené'], ['overdue', 'Po splatnosti'], ['paid', 'Uhradené']].map(([k, l]) => (
          <button key={k} className={`tab ${filter === k ? 'active' : ''}`} onClick={() => setFilter(k)}>{l} <span style={{color:'var(--ink-4)'}}>{counts[k]}</span></button>
        ))}
      </div>

      <div className="card">
        <table className="tbl">
          <thead><tr>
            <th>Číslo</th><th>{meta.partner}</th><th>{kind === 'purchase' ? 'Prijatá' : 'Vystavená'}</th><th>Splatnosť</th><th>VS</th><th>Stav</th><th className="num">Suma</th><th className="num">Zostáva</th><th></th>
          </tr></thead>
          <tbody>
            {list.map(inv => (
              <tr key={inv.id} className="clickable" onClick={() => setOpenId(inv.id)}>
                <td className="mono"><strong>{inv.number}</strong></td>
                <td>{inv.partnerName}{inv.demo && <span className="badge gray" style={{marginLeft:8}}>ukážka</span>}{kind === 'purchase' && inv.supplierNumber && inv.supplierNumber !== inv.vs && <div className="muted" style={{fontSize:11}}>č. dod. {inv.supplierNumber}</div>}</td>
                <td>{fmt.date(inv.issueDate)}</td>
                <td style={uctStore.invoices.isOverdue(inv) ? {color:'var(--danger)'} : undefined}>{fmt.date(inv.dueDate)}</td>
                <td className="mono muted">{inv.vs}</td>
                <td><StatusBadge inv={inv} /></td>
                <td className="num">{fmt.eur(inv.total)}</td>
                <td className="num">{inv.status === 'uhradena' ? <span style={{color:'var(--ink-4)'}}>0,00 €</span> : fmt.eur(uctStore.invoices.rest(inv))}</td>
                <td><Icon name="chevronRight" /></td>
              </tr>
            ))}
            {list.length === 0 && <tr><td colSpan="9"><div className="empty"><Icon name="file" size={36} /><h4>{all.length ? 'Nič tu nie je' : 'Zatiaľ žiadne faktúry'}</h4><div>{all.length ? 'Skús iný filter alebo hľadanie.' : (kind === 'sales' ? 'Vystav prvú faktúru tlačidlom vpravo hore.' : 'Zapíš prvú prijatú faktúru tlačidlom vpravo hore.')}</div></div></td></tr>}
          </tbody>
          {list.length > 0 && (
            <tfoot><tr>
              <td colSpan="6" style={{color:'var(--ink-3)', fontSize:12}}>{list.length} {plural(list.length, 'faktúra', 'faktúry', 'faktúr')}</td>
              <td className="num"><strong>{fmt.eur(sum(list, i => i.total))}</strong></td>
              <td className="num"><strong>{fmt.eur(sum(list.filter(i => i.status !== 'storno'), uctStore.invoices.rest))}</strong></td>
              <td></td>
            </tr></tfoot>
          )}
        </table>
      </div>

      {creating && <InvoiceForm kind={kind} onClose={() => { setCreating(false); go(meta.route); }} onSaved={(inv) => { setCreating(false); setOpenId(inv.id); setToast(kind === 'purchase' ? `Faktúra ${inv.number} zapísaná.` : `Faktúra ${inv.number} vystavená.`); }} />}
      {openId && !creating && <InvoiceDetail id={openId} onClose={() => { setOpenId(null); go(meta.route); }} setToast={setToast} go={go} />}
      {Toast}
    </div>
  );
}

/* --- Formulár (nová aj úprava) --- */

function InvoiceForm({ kind = 'sales', invoice, onClose, onSaved }) {
  const isNew = !invoice;
  if (invoice) kind = invoice.kind;
  const meta = INV_META[kind];
  const sales = kind !== 'purchase';
  const acc = showAccounting();
  const [inv, setInv] = React.useState(() => isNew ? uctStore.invoices.blank(kind) : structuredClone(invoice));
  const [showAccounts, setShowAccounts] = React.useState(() => acc && kind === 'purchase');
  const [preview, setPreview] = React.useState({ number: '…', vs: '' });
  const [error, setError] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [addingPartner, setAddingPartner] = React.useState(false);
  const partners = uctStore.partners.list();
  const company = uctStore.company.get();

  React.useEffect(() => {
    if (!isNew) return;
    const y = +String(inv.issueDate || '').slice(0, 4) || new Date().getFullYear();
    uctStore.invoices.nextNumber(kind, y).then(setPreview).catch(() => setPreview({ number: '?', vs: '' }));
  }, [inv.issueDate, isNew]);

  const set = (k, v) => setInv(prev => ({ ...prev, [k]: v }));
  const pickPartner = (id) => {
    const p = uctStore.partners.get(id);
    if (!p) { setInv(prev => ({ ...prev, partnerId: '', partnerName: '', partnerIco: '', partnerDic: '', partnerIcDph: '', partnerAddress: '' })); return; }
    setInv(prev => ({ ...prev, partnerId: p.id, partnerName: p.name, partnerIco: p.ico || '', partnerDic: p.dic || '', partnerIcDph: p.icDph || '', partnerAddress: uctStore.partners.addressLine(p) }));
  };
  const setRow = (i, k, v) => setInv(prev => {
    const rows = prev.rows.map((r, j) => j === i ? { ...r, [k]: v } : r);
    rows[i].total = Math.round((rows[i].qty || 0) * (rows[i].unitPrice || 0) * 100) / 100;
    return { ...prev, rows };
  });
  const addRow = () => set('rows', [...inv.rows, { description: '', qty: 1, unit: 'ks', unitPrice: 0, total: 0, account: kind === 'purchase' ? '518001' : '602001' }]);
  const delRow = (i) => set('rows', inv.rows.length > 1 ? inv.rows.filter((_, j) => j !== i) : inv.rows);
  const total = inv.rows.reduce((a, r) => a + (Math.round((r.qty || 0) * (r.unitPrice || 0) * 100) / 100), 0);

  const save = async () => {
    if (!inv.partnerName) { setError(sales ? 'Vyber odberateľa.' : 'Vyber dodávateľa.'); return; }
    if (inv.rows.some(r => !r.description.trim())) { setError('Každá položka musí mať popis.'); return; }
    if (inv.dueDate < inv.issueDate) { setError('Splatnosť nemôže byť pred dátumom vystavenia.'); return; }
    setSaving(true); setError(null);
    try {
      const saved = isNew ? await uctStore.invoices.create(inv) : await uctStore.invoices.update(inv);
      onSaved(saved);
    } catch (e) { setError(e.message); }
    setSaving(false);
  };

  return (
    <Drawer wide title={isNew ? meta.newLabel : `Úprava faktúry ${inv.number}`}
      sub={isNew ? <>Dostane {sales ? 'číslo' : 'interné číslo'} <strong className="mono">{preview.number}</strong>{preview.vs && <> · VS <span className="mono">{preview.vs}</span></>}{kind === 'proforma' && ' · zálohová faktúra nie je daňový doklad'}</> : <>VS <span className="mono">{inv.vs}</span></>}
      onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Zrušiť</button>
        <button className="btn btn-brand" disabled={saving} onClick={save}><Icon name="check" /> {isNew ? (sales ? 'Vystaviť faktúru' : 'Zapísať faktúru') : 'Uložiť zmeny'}</button>
      </>}>
      <ErrorNote error={error} onClose={() => setError(null)} />
      {sales && !company.name && <div className="demo-banner" style={{margin:'0 0 14px'}}><Icon name="info" size={16} /><span>Firma nemá vyplnené údaje - na faktúre bude prázdna hlavička. Doplň ich v Nastaveniach.</span></div>}

      <div className="row" style={{gridTemplateColumns:'minmax(0, 3fr) minmax(0, 2fr)', gap:20, alignItems:'start'}}>
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <Field label={meta.partner}>
            <div style={{display:'flex', gap:8}}>
              <select className="select" value={inv.partnerId} onChange={e => pickPartner(e.target.value)}>
                <option value="">— vyber partnera —</option>
                {partners.map(p => <option key={p.id} value={p.id}>{p.name}{p.ico ? ` (${p.ico})` : ''}</option>)}
              </select>
              <button className="btn" title="Nový partner" onClick={() => setAddingPartner(true)}><Icon name="plus" /></button>
            </div>
          </Field>
          {!sales && (
            <div className="row">
              <Field label="Číslo faktúry dodávateľa"><input className="input mono" value={inv.supplierNumber || ''} onChange={e => set('supplierNumber', e.target.value)} placeholder="2026045" /></Field>
              <Field label="Variabilný symbol" hint="Podľa neho sa spáruje platba z banky"><input className="input mono" value={inv.vs || ''} onChange={e => set('vs', e.target.value.replace(/\D/g, ''))} placeholder="2026045" /></Field>
            </div>
          )}
          {inv.partnerName && (
            <div className="pay-box" style={{fontSize:13}}>
              <strong>{inv.partnerName}</strong>
              <div style={{color:'var(--ink-2)'}}>{inv.partnerAddress || <em>bez adresy</em>}</div>
              <div className="mono" style={{fontSize:12, color:'var(--ink-3)'}}>{[inv.partnerIco && `IČO ${inv.partnerIco}`, inv.partnerDic && `DIČ ${inv.partnerDic}`, inv.partnerIcDph && `IČ DPH ${inv.partnerIcDph}`].filter(Boolean).join(' · ')}</div>
            </div>
          )}
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="row">
            <Field label={sales ? 'Dátum vystavenia' : 'Dátum prijatia'}><input className="input" type="date" value={inv.issueDate} onChange={e => { const v = e.target.value; setInv(prev => ({ ...prev, issueDate: v, deliveryDate: prev.deliveryDate === prev.issueDate ? v : prev.deliveryDate, dueDate: isNew ? uctStore.util.addDays(v, uctStore.settings.get().defaultDueDays || 14) : prev.dueDate })); }} /></Field>
            <Field label="Dátum dodania"><input className="input" type="date" value={inv.deliveryDate} onChange={e => set('deliveryDate', e.target.value)} /></Field>
          </div>
          <div className="row">
            <Field label="Splatnosť"><input className="input" type="date" value={inv.dueDate} onChange={e => set('dueDate', e.target.value)} /></Field>
            <Field label="Spôsob úhrady">
              <select className="select" value={inv.paymentMethod} onChange={e => set('paymentMethod', e.target.value)}>
                <option value="prevod">Prevodom</option><option value="hotovost">V hotovosti</option><option value="karta">Kartou</option>
              </select>
            </Field>
          </div>
        </div>
      </div>

      <div style={{marginTop:22}}>
        <div style={{fontSize:12, color:'var(--ink-2)', fontWeight:500, marginBottom:8}}>Položky</div>
        <table className="rows-edit">
          <thead><tr><th style={{width: showAccounts ? '34%' : '46%'}}>Popis</th><th style={{width:90}}>Množstvo</th><th style={{width:70}}>MJ</th><th style={{width:120}}>Cena za MJ</th><th style={{width:120}} className="num">Spolu</th>{showAccounts && <th style={{width:150}}>{sales ? 'Výnosový účet' : 'Nákladový účet'}</th>}<th style={{width:40}}></th></tr></thead>
          <tbody>
            {inv.rows.map((r, i) => (
              <tr key={i}>
                <td><input className="input" value={r.description} placeholder="Napr. Vývoj softvéru 10/2026" onChange={e => setRow(i, 'description', e.target.value)} /></td>
                <td><DecimalInput value={r.qty} onCommit={v => setRow(i, 'qty', v)} /></td>
                <td><input className="input" value={r.unit} onChange={e => setRow(i, 'unit', e.target.value)} /></td>
                <td><DecimalInput value={r.unitPrice} onCommit={v => setRow(i, 'unitPrice', v)} /></td>
                <td className="num">{fmt.eur(Math.round((r.qty || 0) * (r.unitPrice || 0) * 100) / 100)}</td>
                {showAccounts && <td><AccountPicker value={r.account} onChange={v => setRow(i, 'account', v)} prefixes={sales ? ['6'] : ['5', '0', '1', '3']} /></td>}
                <td><button className="btn btn-ghost btn-sm btn-icon" title="Odobrať položku" onClick={() => delRow(i)} disabled={inv.rows.length === 1}><Icon name="x" size={14} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{display:'flex', gap:8, marginTop:8, alignItems:'center'}}>
          <button className="btn btn-sm" onClick={addRow}><Icon name="plus" size={14} /> Pridať položku</button>
          {acc && kind !== 'proforma' && <button className="btn btn-sm btn-ghost" onClick={() => setShowAccounts(v => !v)}>{showAccounts ? 'Skryť účty' : 'Zaúčtovanie (účty)'}</button>}
          {showAccounts && <span style={{fontSize:12, color:'var(--ink-3)'}}>{sales ? 'Pohľadávka na účte' : 'Záväzok na účte'} <AccountPicker value={inv.account} onChange={v => set('account', v)} prefixes={[sales ? '31' : '32']} style={{display:'inline-flex', verticalAlign:'middle'}} className="input mono" /></span>}
        </div>
        <div className="totals">
          <table><tbody>
            {company.vatPayer
              ? <tr><td>Základ dane</td><td className="num">{fmt.eur(total)}</td></tr>
              : <tr><td style={{color:'var(--ink-3)'}}>Neplatiteľ DPH</td><td className="num"></td></tr>}
            <tr className="grand"><td>Celkom na úhradu</td><td className="num">{fmt.eur(total)}</td></tr>
          </tbody></table>
        </div>
      </div>

      {sales && <Field label="Úvodný text na faktúre" style={{marginTop:10}} hint="Napr. „Fakturujem Vám cenu za vykonanú prácu podľa § 39 Autorského zákona za obdobie…“"><textarea className="textarea" rows={2} value={inv.introText || ''} onChange={e => set('introText', e.target.value)} /></Field>}
      <Field label="Poznámka na faktúre" style={{marginTop:10}}><textarea className="textarea" rows={2} value={inv.note} onChange={e => set('note', e.target.value)} placeholder="Napr. číslo objednávky, obdobie plnenia…" /></Field>

      {addingPartner && <PartnerDrawer id={null} onClose={() => setAddingPartner(false)} onSaved={(p) => { setAddingPartner(false); pickPartner(p.id); }} />}
    </Drawer>
  );
}

/* --- Detail s úhradami a tlačou --- */

function InvoiceDetail({ id, onClose, setToast, go }) {
  const inv = uctStore.invoices.get(id);
  const sales = !inv || inv.kind !== 'purchase';
  const acc = showAccounting();
  const [editing, setEditing] = React.useState(false);
  const [payments, setPayments] = React.useState(null);
  React.useEffect(() => {
    if (!inv || !inv.vs || !acc || inv.kind === 'proforma') { setPayments([]); return; }
    uctStore.journal.list({ vs: inv.vs, docType: 'document', account: sales ? '311' : '321' }).then(setPayments).catch(() => setPayments([]));
  }, [id, inv && inv.updatedAt]);
  const [printing, setPrinting] = React.useState(false);
  const [pay, setPay] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  if (!inv) return null;
  const rest = uctStore.invoices.rest(inv);

  const savePayment = async () => {
    setError(null);
    try {
      const paidManual = Math.round(((inv.paidManual || 0) + (pay.amount || 0)) * 100) / 100;
      const paid = Math.round((paidManual + (inv.paidAuto || 0)) * 100) / 100;
      await uctStore.invoices.update({ ...inv, paidManual, paidDate: pay.date });
      setToast(paid + 0.005 >= inv.total ? 'Faktúra je uhradená.' : 'Čiastočná úhrada zapísaná.');
      setPay(null);
    } catch (e) { setError(e.message); }
  };
  const undoPayments = async () => {
    if (!await askConfirm({ title: 'Zrušiť ručne zapísané úhrady?', message: 'Úhrady spárované z banky alebo pokladne ostanú - tie sa rušia na doklade, z ktorého vznikli.', confirmLabel: 'Zrušiť ručné úhrady' })) return;
    try { await uctStore.invoices.update({ ...inv, paidManual: 0, paidDate: '' }); setToast('Ručné úhrady zrušené.'); } catch (e) { setError(e.message); }
  };
  const remove = async () => {
    if (!await askConfirm({ title: `Vymazať faktúru ${inv.number}?`, message: 'Vystavená faktúra sa v účtovníctve bežne nemaže, ale stornuje. Vymazanie použi len pri omyle hneď po vystavení - číslo v rade ostane preskočené.', confirmLabel: 'Vymazať', danger: true })) return;
    try { await uctStore.invoices.remove(inv.id); setToast('Faktúra vymazaná.'); onClose(); } catch (e) { setError(e.message); }
  };
  const storno = async () => {
    if (!await askConfirm({ title: `Stornovať faktúru ${inv.number}?`, message: 'Faktúra ostane v zozname ako stornovaná a nepočíta sa do pohľadávok.', confirmLabel: 'Stornovať', danger: true })) return;
    try { await uctStore.invoices.update({ ...inv, status: 'storno' }); setToast('Faktúra stornovaná.'); } catch (e) { setError(e.message); }
  };

  if (editing) return <InvoiceForm invoice={inv} onClose={() => setEditing(false)} onSaved={() => { setEditing(false); setToast('Faktúra uložená.'); }} />;

  return (
    <Drawer wide title={<span className="inv-number">{inv.number}</span>} sub={<><StatusBadge inv={inv} /> <span style={{marginLeft:8}}>{inv.kind === 'proforma' ? 'zálohová, vystavená' : sales ? 'vystavená' : 'prijatá'} {fmt.date(inv.issueDate)}{inv.demo ? ' · ukážková' : ''}{inv.source === 'profit365' ? ' · prenesená z Profit365' : ''}{inv.source === 'flexi' ? ' · prenesená z Flexi' : ''}{inv.source === 'danova-xlsx' ? ' · zo zošita daňovej evidencie' : ''}</span></>} onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" style={{marginRight:'auto', color:'var(--danger)'}} onClick={remove}><Icon name="trash" /> Vymazať</button>
        {inv.status !== 'storno' && <button className="btn btn-ghost" onClick={storno}>Stornovať</button>}
        {sales && <a className="btn" href={uctStore.backup.pdfUrl(inv.id, true)} download><Icon name="download" /> Stiahnuť PDF</a>}
        {sales && <button className="btn" onClick={() => setPrinting(true)}><Icon name="print" /> Náhľad / tlač</button>}
        {acc && inv.kind !== 'proforma' && <button className="btn" onClick={() => go('journal:doc:' + inv.id)}><Icon name="list" /> V denníku</button>}
        {inv.status !== 'storno' && <button className="btn" onClick={() => setEditing(true)}><Icon name="edit" /> Upraviť</button>}
        {inv.status !== 'uhradena' && inv.status !== 'storno' && <button className="btn btn-brand" onClick={() => setPay({ amount: rest, date: uctStore.util.today() })}><Icon name="coins" /> Zapísať úhradu</button>}
      </>}>
      <ErrorNote error={error} onClose={() => setError(null)} />
      <div className="row" style={{gridTemplateColumns:'minmax(0, 3fr) minmax(0, 2fr)', gap:20, alignItems:'start'}}>
        <div>
          <div className="kv-grid" style={{marginBottom:18}}>
            <div style={{gridColumn:'1 / -1'}}><div className="k">{sales ? 'Odberateľ' : 'Dodávateľ'}</div><div className="v"><strong>{inv.partnerName}</strong><div style={{color:'var(--ink-2)', fontSize:13}}>{inv.partnerAddress}</div><div className="mono" style={{fontSize:12, color:'var(--ink-3)'}}>{[inv.partnerIco && `IČO ${inv.partnerIco}`, inv.partnerDic && `DIČ ${inv.partnerDic}`, inv.partnerIcDph && `IČ DPH ${inv.partnerIcDph}`].filter(Boolean).join(' · ')}</div></div></div>
            <div><div className="k">Dátum dodania</div><div className="v">{fmt.date(inv.deliveryDate)}</div></div>
            <div><div className="k">Splatnosť</div><div className="v" style={uctStore.invoices.isOverdue(inv) ? {color:'var(--danger)'} : undefined}>{fmt.date(inv.dueDate)}</div></div>
            <div><div className="k">Variabilný symbol</div><div className="v mono">{inv.vs || '—'}</div></div>
            {!sales && inv.supplierNumber && <div><div className="k">Číslo dodávateľa</div><div className="v mono">{inv.supplierNumber}</div></div>}
            {acc && inv.kind !== 'proforma' && <div><div className="k">Účet</div><div className="v mono">{inv.account} <span style={{fontFamily:'var(--font-ui)', fontSize:12, color:'var(--ink-3)'}}>{uctStore.accounts.name(inv.account)}</span></div></div>}
            <div><div className="k">Úhrada</div><div className="v">{({prevod:'prevodom', hotovost:'v hotovosti', karta:'kartou'})[inv.paymentMethod] || inv.paymentMethod}</div></div>
          </div>
          <table className="tbl">
            <thead><tr><th>Položka</th>{acc && <th>Účet</th>}<th className="num">Množstvo</th><th className="num">Cena za MJ</th><th className="num">Spolu</th></tr></thead>
            <tbody>{inv.rows.map((r, i) => <tr key={i}><td>{r.description}</td>{acc && <td className="mono muted" title={uctStore.accounts.name(r.account)}>{r.account}</td>}<td className="num">{fmt.qty(r.qty)} {r.unit}</td><td className="num">{fmt.eur(r.unitPrice)}</td><td className="num">{fmt.eur(r.total)}</td></tr>)}</tbody>
            <tfoot><tr><td colSpan={acc ? 4 : 3} style={{textAlign:'right', fontWeight:600}}>Celkom</td><td className="num" style={{fontWeight:600, fontSize:15}}>{fmt.eur(inv.total)}</td></tr></tfoot>
          </table>
          {inv.introText && <div style={{marginTop:12, fontSize:13, color:'var(--ink-2)', whiteSpace:'pre-line'}}><span className="k" style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)'}}>Úvodný text</span><br />{inv.introText}</div>}
          {inv.note && <div style={{marginTop:12, fontSize:13, color:'var(--ink-2)', whiteSpace:'pre-line'}}><span className="k" style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)'}}>Poznámka</span><br />{inv.note}</div>}
        </div>
        <div className="pay-box">
          <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)'}}>Úhrady</div>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:8, fontSize:13}}><span>Fakturované</span><strong className="mono">{fmt.eur(inv.total)}</strong></div>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:4, fontSize:13}}><span>Uhradené{inv.paidDate ? ` (${fmt.date(inv.paidDate)})` : ''}</span><strong className="mono">{fmt.eur(inv.paid)}</strong></div>
          {(inv.paidAuto > 0 || inv.paidManual > 0) && <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:2}}>{inv.paidAuto > 0 && <>z banky/pokladne {fmt.eur(inv.paidAuto)}</>}{inv.paidAuto > 0 && inv.paidManual !== 0 && ' · '}{inv.paidManual !== 0 && <>ručne {fmt.eur(inv.paidManual)}</>}</div>}
          <div style={{display:'flex', justifyContent:'space-between', marginTop:8, paddingTop:8, borderTop:'1px solid var(--border-strong)', fontSize:14}}><span>Zostáva</span><strong className="mono" style={{color: rest > 0 ? 'var(--warn)' : 'var(--accent)'}}>{fmt.eur(inv.status === 'storno' ? 0 : rest)}</strong></div>
          {pay && (
            <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:10}}>
              <Field label="Prijatá suma"><DecimalInput value={pay.amount} onCommit={v => setPay({ ...pay, amount: v })} /></Field>
              <Field label="Dátum prijatia"><input className="input" type="date" value={pay.date} onChange={e => setPay({ ...pay, date: e.target.value })} /></Field>
              <div style={{display:'flex', gap:8, justifyContent:'flex-end'}}>
                <button className="btn btn-sm btn-ghost" onClick={() => setPay(null)}>Zrušiť</button>
                <button className="btn btn-sm btn-brand" onClick={savePayment}><Icon name="check" size={14} /> Zapísať</button>
              </div>
            </div>
          )}
          {!pay && inv.paidManual > 0 && inv.status !== 'storno' && <button className="btn btn-sm btn-ghost" style={{marginTop:12}} onClick={undoPayments}>Zrušiť ručné úhrady</button>}
          {payments && payments.length > 0 && (
            <div style={{marginTop:14}}>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)'}}>Platby podľa VS</div>
              <ul className="list-plain" style={{fontSize:12.5}}>
                {payments.map(e => <li key={e.id} style={{cursor:'pointer'}} onClick={() => go(e.docKind + ':open:' + e.docId)}><div><span className="mono">{e.docNumber}</span><small>{fmt.date(e.date)} · {e.account}</small></div><strong className="mono">{fmt.eur(sales ? e.dal - e.md : e.md - e.dal)}</strong></li>)}
              </ul>
            </div>
          )}
          <div style={{marginTop:14, fontSize:12, color:'var(--ink-3)', lineHeight:1.5}}>{acc ? 'Úhrady sa párujú z bankových výpisov a pokladne podľa variabilného symbolu. Ručná úhrada je pre prípady bez dokladu.' : uctStore.ctx.has('danova') ? 'Úhrady vznikajú zápisom príjmu v daňovej evidencii (Príjmy). Ručná úhrada je skratka bez rozdelenia príjmu.' : 'Úhradu zapíš, keď prídu peniaze.'}</div>
        </div>
      </div>

      {printing && <PrintModal inv={inv} onClose={() => setPrinting(false)} />}
      {ConfirmUI}
    </Drawer>
  );
}

function PrintModal({ inv, onClose }) {
  return (
    <div className="modal-overlay" style={{zIndex:500}} onClick={onClose}>
      <div className="modal" style={{maxWidth:'min(900px, 96vw)'}} onClick={e => e.stopPropagation()}>
        <div className="modal-h" style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <h2>Náhľad faktúry {inv.number}</h2>
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn-brand" onClick={() => window.print()}><Icon name="print" /> Tlačiť alebo uložiť ako PDF</button>
            <button className="btn btn-ghost btn-icon" onClick={onClose}><Icon name="x" /></button>
          </div>
        </div>
        <div className="print-wrap"><InvoicePrint inv={inv} /></div>
      </div>
    </div>
  );
}

function InvoicePrint({ inv }) {
  const c = uctStore.company.get();
  const proforma = inv.kind === 'proforma';
  return (
    <div className="inv-print">
      <div className="ip-top">
        <div><h1>{proforma ? 'Zálohová faktúra' : 'Faktúra'} {inv.number}</h1><div style={{color:'#666'}}>{proforma ? 'Nie je daňovým dokladom' : c.vatPayer ? 'Daňový doklad' : 'Nie sme platiteľom DPH'}</div></div>
        <div style={{textAlign:'right'}}><div className="ip-lbl">Variabilný symbol</div><div style={{fontSize:18, fontWeight:600}}>{inv.vs}</div></div>
      </div>
      <div className="ip-cols">
        <div><div className="ip-lbl">Dodávateľ</div><div className="ip-box"><strong>{c.name}</strong>{c.address}<br />{[c.ico && `IČO: ${c.ico}`, c.dic && `DIČ: ${c.dic}`, c.icDph && `IČ DPH: ${c.icDph}`].filter(Boolean).join(' · ')}{c.registration && <><br /><span style={{fontSize:11, color:'#666'}}>{c.registration}</span></>}</div></div>
        <div><div className="ip-lbl">Odberateľ</div><div className="ip-box"><strong>{inv.partnerName}</strong>{inv.partnerAddress}<br />{[inv.partnerIco && `IČO: ${inv.partnerIco}`, inv.partnerDic && `DIČ: ${inv.partnerDic}`, inv.partnerIcDph && `IČ DPH: ${inv.partnerIcDph}`].filter(Boolean).join(' · ')}</div></div>
      </div>
      <div className="ip-meta">
        <div><span>Dátum vystavenia</span>{fmt.date(inv.issueDate)}</div>
        <div><span>Dátum dodania</span>{fmt.date(inv.deliveryDate)}</div>
        <div><span>Dátum splatnosti</span><strong>{fmt.date(inv.dueDate)}</strong></div>
        <div><span>Spôsob úhrady</span>{({prevod:'prevodom', hotovost:'v hotovosti', karta:'kartou'})[inv.paymentMethod] || inv.paymentMethod}</div>
      </div>
      {c.bank && <div className="ip-meta" style={{gridTemplateColumns:'2fr 1fr 1fr'}}><div><span>IBAN</span><strong>{c.bank}</strong></div><div><span>Banka</span>{c.bankName || '—'}</div><div><span>Mena</span>{inv.currency}</div></div>}
      {inv.introText && <div className="ip-note" style={{marginBottom:10}}>{inv.introText}</div>}
      <table className="ip-rows">
        <thead><tr><th>Popis</th><th className="num">Množstvo</th><th className="num">Cena za MJ</th><th className="num">Spolu</th></tr></thead>
        <tbody>{inv.rows.map((r, i) => <tr key={i}><td>{r.description}</td><td className="num">{fmt.qty(r.qty)} {r.unit}</td><td className="num">{fmt.num(r.unitPrice)}</td><td className="num">{fmt.num(r.total)}</td></tr>)}</tbody>
      </table>
      <div className="ip-total"><div><span>Celkom na úhradu</span><span>{fmt.eur(inv.total)}</span></div></div>
      {inv.note && <div className="ip-note">{inv.note}</div>}
      <div className="ip-foot">Vystavil: {c.name}{c.email ? ` · ${c.email}` : ''}{c.phone ? ` · ${c.phone}` : ''}</div>
    </div>
  );
}