/* Účtovníček — Banka (výpisy), Pokladňa (PPD/VPD), Interné doklady: zoznam, formulár s riadkami, detail */

const DOC_META = {
  bank: { title: 'Banka', sub: 'Bankové výpisy - každý riadok je platba s protiúčtom, úhrady faktúr sa spárujú podľa VS', one: 'výpis', newLabel: 'Nový výpis', icon: 'bank', binder: 'BAN' },
  cash: { title: 'Pokladňa', sub: 'Príjmové (PPD) a výdavkové (VPD) pokladničné doklady', one: 'doklad', newLabel: 'Nový pokladničný doklad', icon: 'wallet', binder: 'POK' },
  internal: { title: 'Interné doklady', sub: 'Zápisy, ktoré nemajú faktúru ani platbu: mzdy, odpisy, dane, začiatočné stavy', one: 'doklad', newLabel: 'Nový interný doklad', icon: 'book', binder: 'ID' },
};

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

  const all = uctStore.documents.list(kind);
  const years = [...new Set(all.map(d => String(d.date).slice(0, 4)))].sort().reverse();
  const q = search.trim().toLowerCase();
  const list = all.filter(d => (!year || String(d.date).startsWith(year)) && (!q || d.number.toLowerCase().includes(q) || (d.title || '').toLowerCase().includes(q) || (d.partnerName || '').toLowerCase().includes(q) || d.lines.some(l => (l.text || '').toLowerCase().includes(q) || (l.vs || '').includes(q))));
  const sum = (f) => list.reduce((a, d) => a + (f(d) || 0), 0);
  const balance = kind === 'bank' ? uctStore.dashboard.get().bank : kind === 'cash' ? uctStore.dashboard.get().cash : null;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>{meta.title}</h1>
          <div className="sub">{meta.sub}</div>
        </div>
        <div style={{display:'flex', gap:10, alignItems:'center'}}>
          {balance != null && <div className="pay-box" style={{padding:'8px 14px'}}><div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)'}}>Zostatok</div><strong className="mono" style={{fontSize:16}}>{fmt.eur(balance)}</strong></div>}
          <select className="select" value={year} onChange={e => setYear(e.target.value)} style={{width:110}}>
            <option value="">všetky roky</option>{years.map(y => <option key={y} value={y}>{y}</option>)}
          </select>
          <div className="search-wrap"><Icon name="search" size={14} className="search-ic" /><input className="input" placeholder="Číslo, text, partner, 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="card">
        <table className="tbl">
          <thead><tr>
            <th>Číslo</th><th>Dátum</th><th>{kind === 'cash' ? 'Účel' : kind === 'bank' ? 'Výpis' : 'Popis'}</th><th>Partner</th>
            {kind === 'internal' ? <th className="num">Suma</th> : <><th className="num">Príjem</th><th className="num">Výdaj</th></>}
            <th style={{width:40}}></th>
          </tr></thead>
          <tbody>
            {list.map(d => (
              <tr key={d.id} className="clickable" onClick={() => setOpenId(d.id)}>
                <td className="mono"><strong>{d.number}</strong>{kind === 'cash' && <span className={`badge ${d.cashType === 'vydaj' ? 'orange' : 'green'}`} style={{marginLeft:8}}>{d.cashType === 'vydaj' ? 'výdaj' : 'príjem'}</span>}{d.diff ? <span className="badge red" style={{marginLeft:8}} title={`Chýbajúce riadky z Profit365: ${fmt.eur(d.diff)}`}>neúplný</span> : null}</td>
                <td>{fmt.date(d.date)}</td>
                <td style={{maxWidth:360, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{d.title || (d.lines[0] && d.lines[0].text) || <span className="muted">{d.lines.length} {plural(d.lines.length, 'riadok', 'riadky', 'riadkov')}</span>}</td>
                <td>{d.partnerName}</td>
                {kind === 'internal' ? <td className="num">{fmt.eur(d.total)}</td> : <><td className="num pos">{d.income ? fmt.num(d.income) : ''}</td><td className="num neg">{d.expense ? fmt.num(d.expense) : ''}</td></>}
                <td><Icon name="chevronRight" /></td>
              </tr>
            ))}
            {list.length === 0 && <tr><td colSpan="7"><div className="empty"><Icon name={meta.icon} size={36} /><h4>{all.length ? 'Nič sa nenašlo' : `Zatiaľ žiadny ${meta.one}`}</h4><div>{all.length ? 'Skús iný rok alebo hľadanie.' : `Pridaj prvý tlačidlom „${meta.newLabel}" vpravo hore.`}</div></div></td></tr>}
          </tbody>
          {list.length > 0 && (
            <tfoot><tr className="sum">
              <td colSpan="4">{list.length} {plural(list.length, meta.one, kind === 'bank' ? 'výpisy' : 'doklady', kind === 'bank' ? 'výpisov' : 'dokladov')}</td>
              {kind === 'internal' ? <td className="num">{fmt.eur(sum(d => d.total))}</td> : <><td className="num">{fmt.num(sum(d => d.income))}</td><td className="num">{fmt.num(sum(d => d.expense))}</td></>}
              <td></td>
            </tr></tfoot>
          )}
        </table>
      </div>

      {creating && <DocumentForm kind={kind} onClose={() => { setCreating(false); go(kind); }} onSaved={(d) => { setCreating(false); setOpenId(d.id); setToast(`${d.number} uložený.`); }} />}
      {openId && !creating && <DocumentDetail id={openId} kind={kind} onClose={() => { setOpenId(null); go(kind); }} setToast={setToast} go={go} />}
      {Toast}
    </div>
  );
}

/* Príjem/výdaj v riadku: protiúčet DAL = peniaze prišli, protiúčet MD = peniaze odišli. */
function lineIncome(l) { return l.dal || 0; }
function lineExpense(l) { return l.md || 0; }

function DocumentForm({ kind, document, onClose, onSaved }) {
  const isNew = !document;
  const meta = DOC_META[kind];
  const [d, setD] = React.useState(() => isNew ? uctStore.documents.blank(kind) : structuredClone(document));
  const [preview, setPreview] = React.useState('…');
  const [error, setError] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const money = kind !== 'internal';

  React.useEffect(() => {
    if (!isNew) return;
    const y = +String(d.date || '').slice(0, 4) || new Date().getFullYear();
    const sk = kind === 'bank' ? 'bank' : kind === 'cash' ? (d.cashType === 'vydaj' ? 'cashout' : 'cashin') : 'internal';
    uctStore.documents.nextNumber(sk, y).then(r => setPreview(r.number)).catch(() => setPreview('?'));
  }, [d.date, d.cashType, isNew]);

  const set = (k, v) => setD(prev => ({ ...prev, [k]: v }));
  const setLine = (i, patch) => setD(prev => ({ ...prev, lines: prev.lines.map((l, j) => j === i ? { ...l, ...patch } : l) }));
  const addLine = () => set('lines', [...d.lines, { text: '', account: '', md: 0, dal: 0, partnerId: '', partnerName: '', vs: '' }]);
  const delLine = (i) => set('lines', d.lines.length > 1 ? d.lines.filter((_, j) => j !== i) : d.lines);
  const pickLinePartner = (i, p) => setLine(i, { partnerId: p ? p.id : '', partnerName: p ? p.name : '' });
  const income = d.lines.reduce((a, l) => a + lineIncome(l), 0);
  const expense = d.lines.reduce((a, l) => a + lineExpense(l), 0);
  const sumMD = d.lines.reduce((a, l) => a + (l.md || 0), 0);
  const sumDAL = d.lines.reduce((a, l) => a + (l.dal || 0), 0);

  /* Napovedanie faktúry podľa VS: keď riadok má VS neuhradenej faktúry, ponúkni sumu a účet. */
  const matchInvoice = (vs) => {
    if (!vs) return null;
    const kindWanted = kind === 'cash' && d.cashType === 'vydaj' ? 'purchase' : null;
    return uctStore.invoices.all().find(i => i.vs === vs && i.status !== 'storno' && (!kindWanted || i.kind === kindWanted)) || null;
  };
  const applyInvoice = (i, inv) => {
    const rest = uctStore.invoices.rest(inv);
    const patch = { partnerId: inv.partnerId, partnerName: inv.partnerName, account: inv.account, text: patchText(d.lines[i].text, `Úhrada ${inv.number}`) };
    if (inv.kind === 'sales') { patch.dal = rest; patch.md = 0; } else { patch.md = rest; patch.dal = 0; }
    setLine(i, patch);
  };
  const patchText = (cur, def) => cur && cur.trim() ? cur : def;

  const save = async () => {
    setError(null);
    if (d.lines.some(l => !l.account)) { setError('Každý riadok potrebuje účet.'); return; }
    if (!money && Math.round((sumMD - sumDAL) * 100) !== 0) { setError(`Interný doklad nie je vyrovnaný: MD ${fmt.num(sumMD)}, DAL ${fmt.num(sumDAL)}.`); return; }
    setSaving(true);
    try {
      const saved = isNew ? await uctStore.documents.create(d) : await uctStore.documents.update(d);
      onSaved(saved);
    } catch (e) { setError(e.message); }
    setSaving(false);
  };

  return (
    <Drawer wide title={isNew ? meta.newLabel : `Úprava ${d.number}`}
      sub={isNew ? <>Dostane číslo <strong className="mono">{preview}</strong></> : null}
      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 ? 'Uložiť a zaúčtovať' : 'Uložiť zmeny'}</button>
      </>}>
      <ErrorNote error={error} onClose={() => setError(null)} />
      <div className="row r3" style={{alignItems:'start'}}>
        <Field label={kind === 'bank' ? 'Dátum výpisu (účtovania)' : 'Dátum'}><input className="input" type="date" value={d.date} onChange={e => set('date', e.target.value)} /></Field>
        {kind === 'cash' && (
          <Field label="Typ dokladu">
            <select className="select" value={d.cashType} onChange={e => set('cashType', e.target.value)}><option value="prijem">Príjmový (PPD) - peniaze do pokladne</option><option value="vydaj">Výdavkový (VPD) - peniaze z pokladne</option></select>
          </Field>
        )}
        {money && <Field label={kind === 'bank' ? 'Účet banky v osnove' : 'Účet pokladne v osnove'}><AccountPicker value={d.moneyAccount} onChange={v => set('moneyAccount', v)} prefixes={[kind === 'bank' ? '22' : '21']} /></Field>}
        {kind !== 'bank' && <Field label="Partner (nepovinné)"><PartnerSelect value={d.partnerId} onPick={p => setD(prev => ({ ...prev, partnerId: p ? p.id : '', partnerName: p ? p.name : '' }))} /></Field>}
      </div>
      <Field label={kind === 'cash' ? 'Účel' : 'Popis'} style={{marginTop:12}}><input className="input" value={d.title} onChange={e => set('title', e.target.value)} placeholder={kind === 'bank' ? 'Výpis č. 8 za august' : kind === 'cash' ? 'Cestovné náhrady - služobná cesta Žilina' : 'Mzdy 10/2026'} /></Field>

      <div style={{marginTop:20}}>
        <div style={{fontSize:12, color:'var(--ink-2)', fontWeight:500, marginBottom:8}}>{money ? 'Pohyby (riadky výpisu)' : 'Zápisy (MD / DAL)'}</div>
        <table className="lines-edit" style={{width:'100%'}}>
          <thead><tr>
            <th style={{width:'28%'}}>Text</th><th style={{width:140}}>{money ? 'Protiúčet' : 'Účet'}</th><th>Partner</th><th style={{width:110}}>VS</th>
            <th style={{width:110}}>{money ? 'Príjem' : 'MD'}</th><th style={{width:110}}>{money ? 'Výdaj' : 'DAL'}</th><th style={{width:36}}></th>
          </tr></thead>
          <tbody>
            {d.lines.map((l, i) => {
              const inv = matchInvoice(l.vs);
              return (
                <tr key={i}>
                  <td><input className="input" value={l.text} placeholder={money ? 'Úhrada faktúry, poplatok…' : 'Hrubá mzda 10/2026'} onChange={e => setLine(i, { text: e.target.value })} /></td>
                  <td><AccountPicker value={l.account} onChange={v => setLine(i, { account: v })} /></td>
                  <td>
                    <select className="select" value={l.partnerId || ''} onChange={e => pickLinePartner(i, uctStore.partners.get(e.target.value))}>
                      <option value="">—</option>
                      {uctStore.partners.list().map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                    </select>
                  </td>
                  <td>
                    <input className="input mono" value={l.vs} onChange={e => setLine(i, { vs: e.target.value.replace(/\D/g, '') })} />
                    {inv && (inv.account !== l.account || (lineIncome(l) + lineExpense(l)) === 0) && <button className="btn btn-sm" style={{marginTop:4, whiteSpace:'nowrap'}} title={`${inv.number} · ${inv.partnerName} · zostáva ${fmt.eur(uctStore.invoices.rest(inv))}`} onClick={() => applyInvoice(i, inv)}>↳ {inv.number}</button>}
                  </td>
                  <td><DecimalInput value={money ? l.dal : l.md} onCommit={v => setLine(i, money ? { dal: v } : { md: v })} /></td>
                  <td><DecimalInput value={money ? l.md : l.dal} onCommit={v => setLine(i, money ? { md: v } : { dal: v })} /></td>
                  <td><button className="btn btn-ghost btn-sm btn-icon" title="Odobrať riadok" onClick={() => delLine(i)} disabled={d.lines.length === 1}><Icon name="x" size={14} /></button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <button className="btn btn-sm" style={{marginTop:8}} onClick={addLine}><Icon name="plus" size={14} /> Pridať riadok</button>
        <div className="totals">
          <table><tbody>
            {money ? <>
              <tr><td>Príjmy</td><td className="num">{fmt.eur(income)}</td></tr>
              <tr><td>Výdaje</td><td className="num">{fmt.eur(expense)}</td></tr>
              <tr className="grand"><td>Zmena zostatku</td><td className="num" style={{color: income - expense < 0 ? 'var(--danger)' : 'var(--accent)'}}>{fmt.eur(income - expense)}</td></tr>
            </> : <>
              <tr><td>MD spolu</td><td className="num">{fmt.eur(sumMD)}</td></tr>
              <tr><td>DAL spolu</td><td className="num">{fmt.eur(sumDAL)}</td></tr>
              <tr className="grand"><td>Rozdiel</td><td className="num" style={{color: Math.abs(sumMD - sumDAL) > 0.004 ? 'var(--danger)' : 'var(--accent)'}}>{fmt.eur(sumMD - sumDAL)}</td></tr>
            </>}
          </tbody></table>
        </div>
      </div>
      <Field label="Poznámka" style={{marginTop:10}}><textarea className="textarea" rows={2} value={d.note || ''} onChange={e => set('note', e.target.value)} /></Field>
      <div style={{marginTop:12, fontSize:12, color:'var(--ink-3)', lineHeight:1.5}}>
        {kind === 'bank' && 'Riadok s účtom 311… a VS faktúry sa po uložení spáruje s faktúrou a tá bude uhradená. Zadaj VS a klikni na ponúknuté číslo faktúry - doplní sa partner, účet aj suma.'}
        {kind === 'cash' && 'Príjmový doklad: protiúčet je napr. 602… (tržba) alebo 365… (vklad spoločníka). Výdavkový: napr. 512… (cestovné), 501… (materiál).'}
        {kind === 'internal' && 'Každý riadok má účet a sumu na strane MD alebo DAL. Doklad musí byť vyrovnaný: súčet MD = súčet DAL.'}
      </div>
    </Drawer>
  );
}

function DocumentDetail({ id, kind, onClose, setToast, go }) {
  const d = uctStore.documents.get(id);
  const meta = DOC_META[kind];
  const [editing, setEditing] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [entries, setEntries] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  React.useEffect(() => { if (d) uctStore.journal.list({ doc: d.id }).then(setEntries).catch(() => setEntries([])); }, [id, d && d.updatedAt]);
  if (!d) return null;
  const money = kind !== 'internal';
  const remove = async () => {
    if (!await askConfirm({ title: `Vymazať ${d.number}?`, message: 'Zmiznú aj jeho zápisy v denníku a úhrady faktúr, ktoré z neho vznikli. Číslo v rade ostane preskočené.', confirmLabel: 'Vymazať', danger: true })) return;
    try { await uctStore.documents.remove(d.id); setToast('Doklad vymazaný.'); onClose(); } catch (e) { setError(e.message); }
  };
  const invoiceFor = (vs) => vs ? uctStore.invoices.all().find(i => i.vs === vs) : null;
  if (editing) return <DocumentForm kind={kind} document={d} onClose={() => setEditing(false)} onSaved={() => { setEditing(false); setToast('Doklad uložený.'); }} />;

  return (
    <Drawer wide title={<span className="inv-number">{d.number}</span>}
      sub={<>{kind === 'cash' && <span className={`badge ${d.cashType === 'vydaj' ? 'orange' : 'green'}`}>{d.cashType === 'vydaj' ? 'výdavkový' : 'príjmový'}</span>} <span style={{marginLeft: kind === 'cash' ? 8 : 0}}>{fmt.date(d.date)}{d.source === 'profit365' ? ' · prenesený z Profit365' : ''}</span></>}
      onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" style={{marginRight:'auto', color:'var(--danger)'}} onClick={remove}><Icon name="trash" /> Vymazať</button>
        <button className="btn" onClick={() => go('journal:doc:' + d.id)}><Icon name="list" /> V denníku</button>
        <button className="btn btn-brand" onClick={() => setEditing(true)}><Icon name="edit" /> Upraviť</button>
      </>}>
      <ErrorNote error={error} onClose={() => setError(null)} />
      {d.diff ? <div className="demo-banner" style={{margin:'0 0 14px'}}><Icon name="info" size={16} /><span>V Profit365 tento výpis nemal zaúčtované všetky riadky: pohyb na účte {d.moneyAccount} sa od riadkov líši o <strong>{fmt.eur(d.diff)}</strong>. Denník je prenesený tak, ako bol - doplň chýbajúce riadky cez Upraviť.</span></div> : null}
      <div className="kv-grid" style={{marginBottom:18}}>
        <div style={{gridColumn:'1 / -1'}}><div className="k">{kind === 'cash' ? 'Účel' : 'Popis'}</div><div className="v"><strong>{d.title || '—'}</strong></div></div>
        {money && <div><div className="k">{kind === 'bank' ? 'Účet banky' : 'Účet pokladne'}</div><div className="v mono">{d.moneyAccount} <span style={{fontFamily:'var(--font-ui)', color:'var(--ink-3)', fontSize:12}}>{uctStore.accounts.name(d.moneyAccount)}</span></div></div>}
        {d.partnerName && <div><div className="k">Partner</div><div className="v">{d.partnerName}</div></div>}
        {money && <div><div className="k">Príjmy</div><div className="v mono pos">{fmt.eur(d.income)}</div></div>}
        {money && <div><div className="k">Výdaje</div><div className="v mono neg">{fmt.eur(d.expense)}</div></div>}
        {!money && <div><div className="k">Suma</div><div className="v mono">{fmt.eur(d.total)}</div></div>}
      </div>
      <table className="tbl dense doc-lines">
        <thead><tr><th>Text</th><th>{money ? 'Protiúčet' : 'Účet'}</th><th>Partner</th><th>VS</th><th className="num">{money ? 'Príjem' : 'MD'}</th><th className="num">{money ? 'Výdaj' : 'DAL'}</th></tr></thead>
        <tbody>
          {d.lines.map((l, i) => {
            const inv = invoiceFor(l.vs);
            return (
              <tr key={i}>
                <td>{l.text}</td>
                <td className="mono" title={uctStore.accounts.name(l.account)}>{l.account} <span style={{fontFamily:'var(--font-ui)', color:'var(--ink-3)', fontSize:11}}>{uctStore.accounts.name(l.account)}</span></td>
                <td>{l.partnerName}</td>
                <td className="mono">{l.vs}{inv && <button className="btn btn-sm btn-ghost" style={{marginLeft:6}} title={`Otvoriť ${inv.number}`} onClick={() => go((inv.kind === 'purchase' ? 'purchase' : 'invoices') + ':open:' + inv.id)}>{inv.number}</button>}</td>
                <td className="num">{(money ? l.dal : l.md) ? fmt.num(money ? l.dal : l.md) : ''}</td>
                <td className="num">{(money ? l.md : l.dal) ? fmt.num(money ? l.md : l.dal) : ''}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      {d.note && <div style={{marginTop:12, fontSize:13, color:'var(--ink-2)', whiteSpace:'pre-line'}}>{d.note}</div>}
      <div style={{marginTop:20}}>
        <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)', marginBottom:6}}>Zaúčtovanie v denníku</div>
        {entries === null ? <Loading /> : (
          <table className="tbl dense">
            <thead><tr><th>Účet</th><th>Text</th><th className="num">MD</th><th className="num">DAL</th></tr></thead>
            <tbody>{entries.map(e => <tr key={e.id}><td className="mono">{e.account} <span style={{fontFamily:'var(--font-ui)', color:'var(--ink-3)', fontSize:11}}>{uctStore.accounts.name(e.account)}</span></td><td>{e.text}</td><td className="num">{e.md ? fmt.num(e.md) : ''}</td><td className="num">{e.dal ? fmt.num(e.dal) : ''}</td></tr>)}</tbody>
          </table>
        )}
      </div>
      {ConfirmUI}
    </Drawer>
  );
}