/* Účtovníček — Účtovný denník, Hlavná kniha, Saldokonto (čítané zo servera) */

const thisYear = () => new Date().getFullYear();
const yearsAvailable = () => {
  const ys = new Set([thisYear()]);
  uctStore.invoices.all().forEach(i => ys.add(+String(i.issueDate).slice(0, 4)));
  uctStore.documents.list().forEach(d => ys.add(+String(d.date).slice(0, 4)));
  return [...ys].filter(Boolean).sort((a, b) => b - a);
};
const MONTHS = ['január', 'február', 'marec', 'apríl', 'máj', 'jún', 'júl', 'august', 'september', 'október', 'november', 'december'];

/* Otvorenie dokladu z denníka: faktúra alebo doklad podľa druhu. */
function openDoc(go, e) {
  if (e.docType === 'invoice') go((e.docKind === 'purchase' ? 'purchase' : 'invoices') + ':open:' + e.docId);
  else go(e.docKind + ':open:' + e.docId);
}

function PageJournal({ go, route }) {
  const [, action, routeArg] = (route || '').split(':');
  const [year, setYear] = React.useState(() => thisYear());
  const [month, setMonth] = React.useState('');
  const [account, setAccount] = React.useState(action === 'account' ? routeArg : '');
  const [q, setQ] = React.useState('');
  const [rows, setRows] = React.useState(null);
  const [err, setErr] = React.useState(null);
  React.useEffect(() => { if (action === 'account') { setAccount(routeArg); setYear(0); } }, [route]);

  React.useEffect(() => {
    let alive = true;
    setRows(null);
    const f = { year: year || undefined, period: month ? `${year}-${month}` : undefined, account: account || undefined, q: q || undefined };
    uctStore.journal.list(f).then(r => { if (alive) setRows(r); }).catch(e => { if (alive) { setErr(e.message); setRows([]); } });
    return () => { alive = false; };
  }, [year, month, account, q]);

  const sum = (f) => (rows || []).reduce((a, e) => a + (f(e) || 0), 0);
  const years = yearsAvailable();

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Účtovný denník</h1><div className="sub">Každý zápis vznikol z dokladu - klikni naň a otvorí sa faktúra, výpis alebo doklad</div></div>
      </div>
      <div className="filters">
        <Field label="Rok">
          <select className="select" value={year} onChange={e => { setYear(+e.target.value); setMonth(''); }}>
            <option value={0}>všetky roky</option>
            {years.map(y => <option key={y} value={y}>{y}</option>)}
          </select>
        </Field>
        <Field label="Mesiac">
          <select className="select" value={month} disabled={!year} onChange={e => setMonth(e.target.value)}>
            <option value="">celý rok</option>
            {MONTHS.map((m, i) => <option key={m} value={String(i + 1).padStart(2, '0')}>{m}</option>)}
          </select>
        </Field>
        <Field label="Účet (alebo začiatok)"><input className="input mono" style={{width:120}} value={account} placeholder="311" onChange={e => setAccount(e.target.value.replace(/\D/g, ''))} /></Field>
        <Field label="Hľadať"><input className="input" style={{width:220}} value={q} placeholder="doklad, text, partner, VS" onChange={e => setQ(e.target.value)} /></Field>
        {(account || q || month) && <button className="btn btn-ghost" onClick={() => { setAccount(''); setQ(''); setMonth(''); }}>Zrušiť filter</button>}
      </div>
      {err && <ErrorNote error={err} onClose={() => setErr(null)} />}
      <div className="card">
        {rows === null ? <Loading /> : (
          <table className="tbl dense">
            <thead><tr><th>Dátum</th><th>Doklad</th><th>Účet</th><th>Text</th><th>Partner</th><th>VS</th><th className="num">MD</th><th className="num">DAL</th></tr></thead>
            <tbody>
              {rows.map(e => (
                <tr key={e.id} className="clickable" onClick={() => openDoc(go, e)}>
                  <td style={{whiteSpace:'nowrap'}}>{fmt.date(e.date)}</td>
                  <td className="mono"><span className="chip">{e.binder}</span>{e.docNumber}</td>
                  <td className="mono" title={uctStore.accounts.name(e.account)}>{e.account}</td>
                  <td style={{maxWidth:320, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}} title={e.text}>{e.text}</td>
                  <td style={{maxWidth:180, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{e.partnerName}</td>
                  <td className="mono muted">{e.vs}</td>
                  <td className="num">{e.md ? fmt.num(e.md) : ''}</td>
                  <td className="num">{e.dal ? fmt.num(e.dal) : ''}</td>
                </tr>
              ))}
              {rows.length === 0 && <tr><td colSpan="8"><div className="empty"><Icon name="list" size={36} /><h4>Žiadne zápisy</h4><div>Zápisy vznikajú z faktúr, bankových výpisov, pokladne a interných dokladov.</div></div></td></tr>}
            </tbody>
            {rows.length > 0 && <tfoot><tr className="sum"><td colSpan="6">{rows.length} {plural(rows.length, 'zápis', 'zápisy', 'zápisov')}</td><td className="num">{fmt.num(sum(e => e.md))}</td><td className="num">{fmt.num(sum(e => e.dal))}</td></tr></tfoot>}
          </table>
        )}
      </div>
    </div>
  );
}

function PageLedger({ go, route }) {
  const [year, setYear] = React.useState(() => thisYear());
  const [from, setFrom] = React.useState(() => `${thisYear()}-01-01`);
  const [to, setTo] = React.useState(() => `${thisYear()}-12-31`);
  const [level, setLevel] = React.useState('analytika');
  const [rows, setRows] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const setYearRange = (y) => { setYear(y); if (y) { setFrom(`${y}-01-01`); setTo(`${y}-12-31`); } else { setFrom(''); setTo(''); } };

  React.useEffect(() => {
    let alive = true;
    setRows(null);
    uctStore.journal.ledger(from, to).then(r => { if (alive) setRows(r); }).catch(e => { if (alive) { setErr(e.message); setRows([]); } });
    return () => { alive = false; };
  }, [from, to]);

  let shown = rows || [];
  if (level === 'syntetika' && rows) {
    const agg = {};
    rows.forEach(r => {
      const k = r.account.slice(0, 3);
      const a = agg[k] || (agg[k] = { account: k, name: uctStore.accounts.name(k + '001') || r.name, opening: 0, md: 0, dal: 0, closing: 0 });
      a.opening += r.opening; a.md += r.md; a.dal += r.dal; a.closing += r.closing;
    });
    shown = Object.values(agg).sort((a, b) => a.account.localeCompare(b.account));
  }
  const sum = (f) => shown.reduce((a, r) => a + (f(r) || 0), 0);
  const groups = {};
  shown.forEach(r => { (groups[r.account[0]] = groups[r.account[0]] || []).push(r); });
  const bal = (v) => v === 0 ? '' : fmt.num(v);

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Hlavná kniha</h1><div className="sub">Počiatočný stav, obraty za obdobie a konečný stav každého účtu</div></div>
      </div>
      <div className="filters">
        <Field label="Rok">
          <select className="select" value={year} onChange={e => setYearRange(+e.target.value)}>
            <option value={0}>vlastné obdobie</option>
            {yearsAvailable().map(y => <option key={y} value={y}>{y}</option>)}
          </select>
        </Field>
        <Field label="Od"><input className="input" type="date" value={from} onChange={e => { setYear(0); setFrom(e.target.value); }} /></Field>
        <Field label="Do"><input className="input" type="date" value={to} onChange={e => { setYear(0); setTo(e.target.value); }} /></Field>
        <Field label="Zobrazenie">
          <select className="select" value={level} onChange={e => setLevel(e.target.value)}>
            <option value="analytika">analytické účty (311001)</option><option value="syntetika">syntetické účty (311)</option>
          </select>
        </Field>
      </div>
      {err && <ErrorNote error={err} onClose={() => setErr(null)} />}
      <div className="card">
        {rows === null ? <Loading /> : (
          <table className="tbl dense">
            <thead><tr><th style={{width:90}}>Účet</th><th>Názov</th><th className="num">Počiatočný stav</th><th className="num">MD</th><th className="num">DAL</th><th className="num">Konečný stav</th></tr></thead>
            <tbody>
              {Object.keys(groups).sort().map(cls => (
                <React.Fragment key={cls}>
                  <tr className="group"><td colSpan="6">Trieda {cls} · {ACCOUNT_CLASSES[cls] || ''}</td></tr>
                  {groups[cls].map(r => (
                    <tr key={r.account} className="clickable" onClick={() => go('journal:account:' + r.account)}>
                      <td className="mono"><strong>{r.account}</strong></td>
                      <td>{r.name || <em style={{color:'var(--ink-3)'}}>účet nie je v osnove</em>}</td>
                      <td className="num">{bal(r.opening)}</td>
                      <td className="num">{bal(r.md)}</td>
                      <td className="num">{bal(r.dal)}</td>
                      <td className={`num ${r.closing < 0 ? 'neg' : ''}`}><strong>{fmt.num(r.closing)}</strong></td>
                    </tr>
                  ))}
                </React.Fragment>
              ))}
              {shown.length === 0 && <tr><td colSpan="6"><div className="empty"><Icon name="ledger" size={36} /><h4>Zatiaľ žiadne pohyby</h4><div>Hlavná kniha sa naplní z denníka.</div></div></td></tr>}
            </tbody>
            {shown.length > 0 && <tfoot><tr className="sum"><td colSpan="2">Spolu {shown.length} účtov</td><td className="num">{fmt.num(sum(r => r.opening))}</td><td className="num">{fmt.num(sum(r => r.md))}</td><td className="num">{fmt.num(sum(r => r.dal))}</td><td className="num">{fmt.num(sum(r => r.closing))}</td></tr></tfoot>}
          </table>
        )}
      </div>
      <div style={{fontSize:12, color:'var(--ink-3)', marginTop:10}}>Súčet konečných stavov všetkých účtov má byť 0 (MD = DAL). Kladné číslo = zostatok na strane MD, záporné = na strane DAL.</div>
    </div>
  );
}

function PageSaldo({ go }) {
  const [rows, setRows] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const [tab, setTab] = React.useState('311');
  React.useEffect(() => {
    let alive = true;
    uctStore.journal.saldo().then(r => { if (alive) setRows(r); }).catch(e => { if (alive) { setErr(e.message); setRows([]); } });
    return () => { alive = false; };
  }, []);
  const all = rows || [];
  const shown = all.filter(r => tab === 'all' || r.account.startsWith(tab));
  const sum = (f) => shown.reduce((a, r) => a + (f(r) || 0), 0);
  const counts = { '311': all.filter(r => r.account.startsWith('311')).length, '321': all.filter(r => r.account.startsWith('321')).length, all: all.length };
  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Saldokonto</h1><div className="sub">Otvorené položky podľa partnera a variabilného symbolu - čo kto komu ešte dlhuje</div></div>
      </div>
      <div className="tabs">
        {[['311', 'Odberatelia (311)'], ['321', 'Dodávatelia (321)'], ['all', 'Všetky saldokontné účty']].map(([k, l]) => (
          <button key={k} className={`tab ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>{l} <span style={{color:'var(--ink-4)'}}>{counts[k]}</span></button>
        ))}
      </div>
      {err && <ErrorNote error={err} onClose={() => setErr(null)} />}
      <div className="card">
        {rows === null ? <Loading /> : (
          <table className="tbl dense">
            <thead><tr><th>Partner</th><th>VS</th><th>Účet</th><th>Doklad</th><th>Dátum</th><th className="num">MD</th><th className="num">DAL</th><th className="num">Saldo</th></tr></thead>
            <tbody>
              {shown.map((r, i) => (
                <tr key={i} className="clickable" onClick={() => go('journal:account:' + r.account)} title="Zobraziť pohyby účtu v denníku">
                  <td>{r.partnerName || <em style={{color:'var(--ink-3)'}}>bez partnera</em>}</td>
                  <td className="mono">{r.vs}</td>
                  <td className="mono muted">{r.account}</td>
                  <td className="mono">{r.docNumber}</td>
                  <td>{fmt.date(r.date)}</td>
                  <td className="num">{fmt.num(r.md)}</td>
                  <td className="num">{fmt.num(r.dal)}</td>
                  <td className={`num ${r.saldo < 0 ? 'neg' : 'pos'}`}><strong>{fmt.num(r.saldo)}</strong></td>
                </tr>
              ))}
              {shown.length === 0 && <tr><td colSpan="8"><div className="empty"><Icon name="scale" size={36} /><h4>Všetko vyrovnané</h4><div>Žiadne otvorené položky.</div></div></td></tr>}
            </tbody>
            {shown.length > 0 && <tfoot><tr className="sum"><td colSpan="5">{shown.length} {plural(shown.length, 'položka', 'položky', 'položiek')}</td><td className="num">{fmt.num(sum(r => r.md))}</td><td className="num">{fmt.num(sum(r => r.dal))}</td><td className="num">{fmt.num(sum(r => r.saldo))}</td></tr></tfoot>}
          </table>
        )}
      </div>
      <div style={{fontSize:12, color:'var(--ink-3)', marginTop:10}}>Kladné saldo na 311 = odberateľ ešte nezaplatil. Záporné saldo na 321 = my ešte dlhujeme dodávateľovi. Dvojica s opačnými znamienkami na dvoch účtoch (napr. 321001 a 321002) znamená, že faktúra a platba boli zaúčtované na rôzne analytiky - tak to je aj v Profit365.</div>
    </div>
  );
}