/* Účtovníček — Nastavenia: firma, číselné rady, záloha, ukážkové dáta, o appke */

function PageSettings({ route, setToast, mode }) {
  const initial = (route || '').split(':')[1] || 'company';
  const [tab, setTab] = React.useState(initial);
  React.useEffect(() => { const t = (route || '').split(':')[1]; if (t) setTab(t); }, [route]);
  const tabs = [['company', 'Firma'], ['series', 'Číselné rady']];
  if (mode === 'podvojne') tabs.push(['import', 'Import z Profit365']);
  tabs.push(['flexi', 'Import z Flexi']);
  if (mode === 'danova') tabs.push(['danova', 'Import zo zošita']);
  tabs.push(['backup', 'Záloha'], ['account', 'Účet']);
  if (mode === 'podvojne') tabs.push(['demo', 'Ukážkové dáta']);
  tabs.push(['about', 'O appke']);
  return (
    <div className="page">
      <div className="page-head"><div><h1>Nastavenia</h1><div className="sub">{(uctStore.ctx.company() || {}).name} · údaje firmy, číslovanie dokladov, import a záloha</div></div></div>
      <div className="tabs">
        {tabs.map(([k, l]) => (
          <button key={k} className={`tab ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>
      {tab === 'company' && <CompanyForm setToast={setToast} mode={mode} />}
      {tab === 'series' && <SeriesTab setToast={setToast} />}
      {tab === 'import' && <ImportTab setToast={setToast} />}
      {tab === 'flexi' && <FlexiTab setToast={setToast} />}
      {tab === 'danova' && <DanovaTab setToast={setToast} />}
      {tab === 'backup' && <BackupTab setToast={setToast} />}
      {tab === 'account' && <AccountTab setToast={setToast} />}
      {tab === 'demo' && <DemoTab setToast={setToast} />}
      {tab === 'about' && <AboutTab />}
    </div>
  );
}

function FlexiTab({ setToast }) {
  const s = uctStore.settings.get();
  const [file, setFile] = React.useState(null);
  const [rename, setRename] = React.useState(() => uctStore.invoices.list('sales').some(i => i.number.startsWith('VFA-')));
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [result, setResult] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  const hasVFA = uctStore.invoices.list('sales').some(i => i.number.startsWith('VFA-'));
  const run = async () => {
    if (!file) { setError('Vyber súbor XML z Flexi.'); return; }
    if (!await askConfirm({ title: 'Načítať faktúry z Flexi?', message: `Súbor ${file.name}.\n\nPred importom sa odloží záloha databázy. Faktúry, ktoré tu už sú, sa nezaložia druhýkrát - len sa im doplnia položky a adresa.${rename ? '\n\nDoklady VFA- sa premenujú na VF1- ako vo Flexi.' : ''}`, confirmLabel: 'Načítať' })) return;
    setBusy(true); setError(null); setResult(null);
    try { const r = await uctStore.flexi.run(file, rename); setResult(r); setToast('Faktúry z Flexi načítané.'); }
    catch (e) { setError(e.message); }
    setBusy(false);
  };
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(340px, 1fr))', gap:18, maxWidth:1000}}>
      <div className="card">
        <div className="card-h"><div><h3>Import z ABRA Flexi</h3><div className="desc">{s.lastImport ? `Naposledy načítané ${fmt.date(s.lastImport)}` : 'Zatiaľ nič nenačítané'}</div></div></div>
        <div className="card-b" style={{display:'flex', flexDirection:'column', gap:14}}>
          <ErrorNote error={error} onClose={() => setError(null)} />
          <ol style={{margin:0, paddingLeft:18, fontSize:13, color:'var(--ink-2)', lineHeight:1.7}}>
            <li>V klientovi Flexi otvor <strong>Vydané faktúry</strong>, klikni do zoznamu a stlač <strong>Ctrl+A</strong>.</li>
            <li>Pravým tlačidlom na označené riadky vyber <strong>Export XML</strong> a ulož súbor (ide do WinStrom/Export).</li>
            <li>Súbor vyber tu a klikni Načítať. To isté môžeš urobiť pre Prijaté faktúry.</li>
          </ol>
          <Field label="Export XML z Flexi"><input className="input" type="file" accept=".xml,text/xml" onChange={e => setFile(e.target.files && e.target.files[0] || null)} /></Field>
          {hasVFA && <label style={{fontSize:13, color:'var(--ink-2)', display:'flex', gap:8, alignItems:'center'}}><input type="checkbox" checked={rename} onChange={e => setRename(e.target.checked)} /> premenovať doklady VFA- (z Profit365) na VF1- ako vo Flexi</label>}
          <div><button className="btn btn-brand" disabled={busy} onClick={run}><Icon name="upload" /> {busy ? 'Načítavam…' : 'Načítať z Flexi'}</button></div>
        </div>
      </div>
      {result && (
        <div className="card">
          <div className="card-h"><div><h3>Výsledok importu</h3><div className="desc">záloha pred importom: <span className="mono">{result.backupFile || '—'}</span></div></div></div>
          <div className="card-b import-result">
            <div><span className="chip">nové faktúry {result.created}</span><span className="chip">doplnené {result.updated}</span><span className="chip">už boli {result.skipped}</span><span className="chip">noví partneri {result.partners}</span>{result.renamed > 0 && <span className="chip">premenované VFA→VF1 {result.renamed}</span>}</div>
            {result.warnings.length > 0 && <><p style={{marginBottom:4}}><strong>Upozornenia ({result.warnings.length}):</strong></p><ul>{result.warnings.map((m, i) => <li key={i} style={{fontSize:12}}>{m}</li>)}</ul></>}
          </div>
        </div>
      )}
      {ConfirmUI}
    </div>
  );
}

function DanovaTab({ setToast }) {
  const [file, setFile] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [result, setResult] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  const run = async () => {
    if (!file) { setError('Vyber súbor JSON z prevodníka zošita.'); return; }
    if (!await askConfirm({ title: 'Načítať daňovú evidenciu?', message: `Súbor ${file.name}.\n\nPred importom sa odloží záloha. Príjmy načítané zo zošita skôr sa nahradia, ručne zapísané príjmy ostanú. Faktúry, ktoré tu už sú, dostanú rozdelenie príjmu zo zošita.`, confirmLabel: 'Načítať' })) return;
    setBusy(true); setError(null); setResult(null);
    try { const r = await uctStore.danova.run(file); setResult(r); setToast('Daňová evidencia načítaná.'); }
    catch (e) { setError(e.message); }
    setBusy(false);
  };
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(340px, 1fr))', gap:18, maxWidth:1000}}>
      <div className="card">
        <div className="card-h"><div><h3>Import zo zošita daňovej evidencie</h3><div className="desc">listy Pohľadávky RRRR a Príjmy RRRR</div></div></div>
        <div className="card-b" style={{display:'flex', flexDirection:'column', gap:14}}>
          <ErrorNote error={error} onClose={() => setError(null)} />
          <p style={{fontSize:13, color:'var(--ink-2)', margin:0, lineHeight:1.7}}>Zošit sa najprv prevedie prevodníkom <span className="mono">danova_xlsx_to_json.py</span> (v podkladoch Účtovníčka) na súbor JSON, ten sa vyberie tu. Stĺpce sa čítajú podľa hlavičiek, takže staršie roky s iným rozložením prejdú tiež.</p>
          <Field label="Súbor JSON z prevodníka"><input className="input" type="file" accept=".json,application/json" onChange={e => setFile(e.target.files && e.target.files[0] || null)} /></Field>
          <div><button className="btn btn-brand" disabled={busy} onClick={run}><Icon name="upload" /> {busy ? 'Načítavam…' : 'Načítať daňovú evidenciu'}</button></div>
        </div>
      </div>
      {result && (
        <div className="card">
          <div className="card-h"><div><h3>Výsledok importu</h3><div className="desc">záloha pred importom: <span className="mono">{result.backupFile || '—'}</span></div></div></div>
          <div className="card-b import-result">
            <div><span className="chip">pohľadávky {result.receivables}</span><span className="chip">z toho nové faktúry {result.created}</span><span className="chip">príjmy {result.incomes}</span><span className="chip">roky {result.years}</span></div>
            {result.warnings.length > 0 && <><p style={{marginBottom:4}}><strong>Upozornenia ({result.warnings.length}):</strong></p><ul>{result.warnings.map((m, i) => <li key={i} style={{fontSize:12}}>{m}</li>)}</ul></>}
          </div>
        </div>
      )}
      {ConfirmUI}
    </div>
  );
}

function AccountTab({ setToast }) {
  const u = uctStore.auth.user() || {};
  const st = uctStore.auth.state() || {};
  if (st.oidc) {
    return (
      <div className="card" style={{maxWidth:520}}>
        <div className="card-h"><div><h3>Účet</h3><div className="desc">prihlásená ako <strong>{u.name || u.login}</strong> ({u.login})</div></div></div>
        <div className="card-b" style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.6}}>
          Prihlásenie ide cez firemný {st.provider || 'Authentik'}. Heslo, dvojfaktor aj odhlásenie zo všetkých zariadení sa riešia tam, Účtovníček si vlastné heslo nedrží.
        </div>
      </div>
    );
  }
  const [oldPw, setOld] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [pw2, setPw2] = React.useState('');
  const [error, setError] = React.useState(null);
  const save = async () => {
    setError(null);
    if (pw !== pw2) { setError('Nové heslá sa nezhodujú.'); return; }
    try { await uctStore.auth.changePassword(oldPw, pw); setOld(''); setPw(''); setPw2(''); setToast('Heslo zmenené.'); }
    catch (e) { setError(e.message); }
  };
  return (
    <div className="card" style={{maxWidth:520}}>
      <div className="card-h"><div><h3>Účet</h3><div className="desc">prihlásená ako <strong>{u.name || u.login}</strong> ({u.login})</div></div></div>
      <div className="card-b" style={{display:'flex', flexDirection:'column', gap:12}}>
        <ErrorNote error={error} onClose={() => setError(null)} />
        <Field label="Staré heslo"><input className="input" type="password" autoComplete="current-password" value={oldPw} onChange={e => setOld(e.target.value)} /></Field>
        <Field label="Nové heslo"><input className="input" type="password" autoComplete="new-password" value={pw} onChange={e => setPw(e.target.value)} /></Field>
        <Field label="Nové heslo ešte raz"><input className="input" type="password" autoComplete="new-password" value={pw2} onChange={e => setPw2(e.target.value)} /></Field>
        <div style={{display:'flex', justifyContent:'flex-end'}}><button className="btn btn-brand" onClick={save}><Icon name="check" /> Zmeniť heslo</button></div>
        <div style={{fontSize:12, color:'var(--ink-3)'}}>Toto mení len miestne heslo pre prihlásenie bez internetu. Heslo do Diarika sa mení v Diariku; pri ďalšom online prihlásení sa miestne heslo zrovná s ním.</div>
      </div>
    </div>
  );
}

function CompanyForm({ setToast, mode }) {
  const podvojne = mode === 'podvojne';
  const [c, setC] = React.useState(() => ({ name: '', ico: '', dic: '', icDph: '', address: '', bank: '', bankName: '', registration: '', email: '', phone: '', vatPayer: false, legalForm: '', unitSize: '', bankAccount: '221001', cashAccount: '211001', ...uctStore.company.get() }));
  const [s, setS] = React.useState(() => ({ ...uctStore.settings.get() }));
  const [error, setError] = React.useState(null);
  const set = (k) => (e) => setC({ ...c, [k]: e.target.value });
  const save = async () => {
    setError(null);
    try {
      await uctStore.company.save(c);
      await uctStore.settings.save(s);
      setToast('Nastavenia firmy uložené.');
    } catch (e) { setError(e.message); }
  };
  return (
    <div className="card" style={{maxWidth:760}}>
      <div className="card-h"><div><h3>Účtovná jednotka</h3><div className="desc">Tieto údaje sa tlačia na faktúry. Polia sú rovnaké ako v Mzdáriku.</div></div></div>
      <div className="card-b" style={{display:'flex', flexDirection:'column', gap:14}}>
        <ErrorNote error={error} onClose={() => setError(null)} />
        <Field label="Názov firmy"><input className="input" value={c.name} onChange={set('name')} /></Field>
        <div className="row r3">
          <Field label="IČO"><input className="input" value={c.ico} onChange={set('ico')} /></Field>
          <Field label="DIČ"><input className="input" value={c.dic} onChange={set('dic')} /></Field>
          <Field label="IČ DPH" hint="Len platiteľ DPH"><input className="input" value={c.icDph} onChange={set('icDph')} disabled={!c.vatPayer} /></Field>
        </div>
        <Field label="Sídlo (jeden riadok)"><input className="input" value={c.address} onChange={set('address')} placeholder="Ulica 1, 040 01 Košice" /></Field>
        <div className="row">
          <Field label="IBAN"><input className="input mono" value={c.bank} onChange={set('bank')} /></Field>
          <Field label="Banka / BIC"><input className="input" value={c.bankName} onChange={set('bankName')} /></Field>
        </div>
        <Field label="Zápis v registri" hint="Napr. OR Mestského súdu Košice, oddiel Sro, vložka č. …"><input className="input" value={c.registration} onChange={set('registration')} /></Field>
        <div className="row r3">
          <Field label="Právna forma"><input className="input" value={c.legalForm || ''} onChange={set('legalForm')} placeholder={podvojne ? 's. r. o.' : 'živnosť'} /></Field>
          {podvojne && <Field label="Veľkosť účtovnej jednotky">
            <select className="select" value={c.unitSize || ''} onChange={set('unitSize')}><option value="">—</option><option value="mikro">mikro</option><option value="mala">malá</option><option value="velka">veľká</option></select>
          </Field>}
          {podvojne && <Field label="Účty v osnove" hint="banka · pokladňa">
            <div style={{display:'flex', gap:6}}><input className="input mono" value={c.bankAccount || ''} onChange={set('bankAccount')} placeholder="221001" /><input className="input mono" value={c.cashAccount || ''} onChange={set('cashAccount')} placeholder="211001" /></div>
          </Field>}
        </div>
        <div className="row">
          <Field label="E-mail"><input className="input" value={c.email} onChange={set('email')} /></Field>
          <Field label="Telefón"><input className="input" value={c.phone} onChange={set('phone')} /></Field>
        </div>
        <div className="toggle-row">
          <div><div className="ttl">Platiteľ DPH</div><div className="dsc">Dnes neplatiteľ. Keď sa to zmení, zapni - faktúry dostanú DPH.</div></div>
          <label className="switch"><input type="checkbox" checked={!!c.vatPayer} onChange={e => setC({ ...c, vatPayer: e.target.checked })} /><span className="slider"></span></label>
        </div>
        <div className="row">
          <Field label="Predvolená splatnosť (dní)" hint="Nová faktúra ju dostane automaticky."><DecimalInput value={s.defaultDueDays} onCommit={v => setS({ ...s, defaultDueDays: Math.max(0, Math.round(v)) })} /></Field>
        </div>
        <div style={{display:'flex', justifyContent:'flex-end'}}><button className="btn btn-brand" onClick={save}><Icon name="check" /> Uložiť</button></div>
      </div>
    </div>
  );
}

function SeriesTab({ setToast }) {
  const [rows, setRows] = React.useState(() => uctStore.series.list().map(s => ({ ...s })));
  const [error, setError] = React.useState(null);
  const update = (i, k, v) => setRows(rows.map((r, j) => j === i ? { ...r, [k]: v } : r));
  const save = async (r) => {
    setError(null);
    try { await uctStore.series.update(r); setToast('Číselný rad uložený.'); }
    catch (e) { setError(e.message); }
  };
  return (
    <div className="card" style={{maxWidth:860}}>
      <div className="card-h"><div><h3>Číselné rady</h3><div className="desc">Tvar čísla: {'{NNNN}'} je poradie, {'{RRRR}'} rok. Variabilný symbol = predpona + poradie + rok (napr. 1 + 0025 + 2026 = 100252026).</div></div></div>
      <div className="card-b">
        <ErrorNote error={error} onClose={() => setError(null)} />
        <table className="tbl">
          <thead><tr><th>Rad</th><th>Rok</th><th>Tvar čísla</th><th>Predpona VS</th><th style={{width:120}}>Ďalšie číslo</th><th></th></tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={r.id}>
                <td><strong>{r.code}</strong><div style={{fontSize:12, color:'var(--ink-3)'}}>{r.name}</div></td>
                <td className="mono">{r.year}</td>
                <td><input className="input mono" value={r.format} onChange={e => update(i, 'format', e.target.value)} /></td>
                <td><input className="input mono" style={{width:70}} value={r.vsPrefix || ''} onChange={e => update(i, 'vsPrefix', e.target.value.replace(/\D/g, ''))} /></td>
                <td><DecimalInput value={r.next} onCommit={v => update(i, 'next', Math.max(1, Math.round(v)))} /></td>
                <td><button className="btn btn-sm" onClick={() => save(r)}>Uložiť</button></td>
              </tr>
            ))}
            {rows.length === 0 && <tr><td colSpan="6" className="muted">Rady vzniknú pri prvom doklade.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function BackupTab({ setToast }) {
  const [error, setError] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  const fileRef = React.useRef(null);
  const restore = async (e) => {
    const f = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!f) return;
    let obj;
    try { obj = JSON.parse(await f.text()); } catch { setError('Súbor nie je záloha Účtovníčka (nedá sa prečítať).'); return; }
    const n = (obj.invoices || []).length, p = (obj.partners || []).length;
    if (!await askConfirm({ title: 'Obnoviť zo zálohy?', message: `Záloha z ${obj.exported ? fmt.date(obj.exported) : '?'} obsahuje ${n} ${plural(n, 'faktúru', 'faktúry', 'faktúr')} a ${p} ${plural(p, 'partnera', 'partnerov', 'partnerov')}.\n\nVšetko, čo je v appke teraz, sa nahradí obsahom zálohy.`, confirmLabel: 'Obnoviť', danger: true })) return;
    try { await uctStore.backup.importJSON(obj); setToast('Záloha obnovená.'); setError(null); }
    catch (err) { setError(err.message); }
  };
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))', gap:18, maxWidth:900}}>
      <div className="card">
        <div className="card-h"><div><h3>Stiahnuť zálohu</h3><div className="desc">Jeden súbor so všetkým: firma, partneri, osnova, faktúry, doklady, denník, číselné rady.</div></div></div>
        <div className="card-b">
          <p style={{fontSize:13, color:'var(--ink-2)', marginTop:0}}>Ulož si ho napríklad na USB kľúč. Dá sa z neho vrátiť všetko presne tak, ako to bolo.</p>
          <button className="btn btn-brand" onClick={async () => {
            try {
              const res = await fetch(uctStore.backup.exportUrl(), { headers: { 'X-Firma': uctStore.ctx.firma() }, credentials: 'same-origin' });
              const blob = await res.blob();
              const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `uctovnicek-${uctStore.ctx.firma()}-${uctStore.util.today()}.json`; a.click();
            } catch (e) { setError(e.message); }
          }}><Icon name="download" /> Stiahnuť zálohu</button>
        </div>
      </div>
      <div className="card">
        <div className="card-h"><div><h3>Obnoviť zo zálohy</h3><div className="desc">Vyber súbor uctovnicek-RRRR-MM-DD.json</div></div></div>
        <div className="card-b">
          <ErrorNote error={error} onClose={() => setError(null)} />
          <p style={{fontSize:13, color:'var(--ink-2)', marginTop:0}}>Pred obnovou sa appka opýta. Obnova nahradí všetko naraz - buď celá prejde, alebo sa nezmení nič.</p>
          <input ref={fileRef} type="file" accept="application/json,.json" style={{display:'none'}} onChange={restore} />
          <button className="btn" onClick={() => fileRef.current && fileRef.current.click()}><Icon name="upload" /> Vybrať súbor zálohy</button>
        </div>
      </div>
      <div className="card" style={{gridColumn:'1 / -1'}}>
        <div className="card-b" style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.7}}>
          <strong>Automaticky:</strong> pri každom spustení si Účtovníček odloží kópiu databázy každej firmy do priečinka <span className="mono">~/.local/share/uctovnicek/zalohy</span> (raz denne, drží 14 posledných). Aktualizácia appky dáta nikdy neprepíše - databázy sú mimo programu. Záloha je za firmu, ktorú máš práve vybranú.
        </div>
      </div>
      {ConfirmUI}
    </div>
  );
}

function ImportTab({ setToast }) {
  const s = uctStore.settings.get();
  const [agenda, setAgenda] = React.useState(null);
  const [osnova, setOsnova] = React.useState(null);
  const [replace, setReplace] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [result, setResult] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  const run = async () => {
    if (!agenda) { setError('Vyber súbor Export agendy (xlsx) z Profit365.'); return; }
    if (!await askConfirm({ title: 'Načítať dáta z Profit365?', message: `Súbor ${agenda.name}${osnova ? ' + osnova ' + osnova.name : ''}.\n\nPred importom sa odloží záloha databázy. Import prejde celý, alebo sa nezmení nič.${replace ? '\n\nPredchádzajúci import z Profit365 sa nahradí.' : ''}`, confirmLabel: 'Načítať' })) return;
    setBusy(true); setError(null); setResult(null);
    try { const r = await uctStore.profit365.run({ agenda, osnova }, replace); setResult(r); setToast('Dáta z Profit365 načítané.'); }
    catch (e) { setError(e.message); }
    setBusy(false);
  };
  const pick = (setter) => (e) => { setter(e.target.files && e.target.files[0] || null); };
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(340px, 1fr))', gap:18, maxWidth:1000}}>
      <div className="card">
        <div className="card-h"><div><h3>Import z Profit365</h3><div className="desc">{s.lastImport ? `Naposledy načítané ${fmt.date(s.lastImport)}` : 'Zatiaľ nič nenačítané'}</div></div></div>
        <div className="card-b" style={{display:'flex', flexDirection:'column', gap:14}}>
          <ErrorNote error={error} onClose={() => setError(null)} />
          <ol style={{margin:0, paddingLeft:18, fontSize:13, color:'var(--ink-2)', lineHeight:1.7}}>
            <li>V Profit365 otvor <strong>Nástroje → Export agendy</strong>, nechaj rok bez výberu a klikni <strong>Exportovať</strong>. Po chvíli príde odkaz na súbor .xlsx.</li>
            <li>Súbor vyber tu a klikni Načítať. Prenesú sa partneri, faktúry, bankové výpisy, pokladňa, interné doklady a celý denník.</li>
          </ol>
          <Field label="Export agendy (xlsx)"><input className="input" type="file" accept=".xlsx" onChange={pick(setAgenda)} /></Field>
          <Field label="Účtová osnova (json, nepovinné)" hint="Zoznam účtov z Profit365, ak ho máš. Účty použité v denníku sa doplnia aj bez neho."><input className="input" type="file" accept=".json" onChange={pick(setOsnova)} /></Field>
          <label style={{fontSize:13, color:'var(--ink-2)', display:'flex', gap:8, alignItems:'center'}}><input type="checkbox" checked={replace} onChange={e => setReplace(e.target.checked)} /> nahradiť predchádzajúci import z Profit365 (vlastné doklady ostanú)</label>
          <div><button className="btn btn-brand" disabled={busy} onClick={run}><Icon name="upload" /> {busy ? 'Načítavam…' : 'Načítať z Profit365'}</button></div>
        </div>
      </div>
      {result && (
        <div className="card">
          <div className="card-h"><div><h3>Výsledok importu</h3><div className="desc">záloha pred importom: <span className="mono">{result.backupFile || '—'}</span></div></div></div>
          <div className="card-b import-result">
            <div><span className="chip">partneri {result.partners}</span><span className="chip">účty {result.accounts}</span><span className="chip">vystavené {result.sales}</span><span className="chip">prijaté {result.purchase}</span><span className="chip">výpisy {result.bank}</span><span className="chip">pokladňa {result.cash}</span><span className="chip">interné {result.internal}</span><span className="chip">zápisy denníka {result.journal}</span></div>
            {result.adjusted > 0 && <p>{result.adjusted} {plural(result.adjusted, 'faktúra dorovnaná', 'faktúry dorovnané', 'faktúr dorovnaných')} ručnou úhradou podľa saldokonta Profit365 (platba v banke nemala správny VS).</p>}
            <p style={{marginBottom:4}}><strong>Hlavná kniha oproti Profit365:</strong> {result.mismatches.length === 0 ? 'všetky účty sedia na cent.' : `${result.mismatches.length} ${plural(result.mismatches.length, 'rozdiel', 'rozdiely', 'rozdielov')}:`}</p>
            {result.mismatches.length > 0 && <ul>{result.mismatches.map((m, i) => <li key={i} className="mono" style={{fontSize:12}}>{m}</li>)}</ul>}
            {result.warnings.length > 0 && <><p style={{marginBottom:4}}><strong>Upozornenia ({result.warnings.length}):</strong></p><ul>{result.warnings.map((m, i) => <li key={i} style={{fontSize:12}}>{m}</li>)}</ul></>}
          </div>
        </div>
      )}
      {ConfirmUI}
    </div>
  );
}

function DemoTab({ setToast }) {
  const s = uctStore.settings.get();
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  const run = async (fn, msg) => {
    setBusy(true); setError(null);
    try { await fn(); setToast(msg); } catch (e) { setError(e.message); }
    setBusy(false);
  };
  const remove = async () => {
    if (!await askConfirm({ title: 'Vymazať ukážkové dáta?', message: 'Vymažú sa len záznamy označené ako ukážka. Tvoje vlastné ostanú.', confirmLabel: 'Vymazať', danger: true })) return;
    run(uctStore.demo.remove, 'Ukážkové dáta vymazané.');
  };
  return (
    <div className="card" style={{maxWidth:640}}>
      <div className="card-h"><div><h3>Ukážkové dáta</h3><div className="desc">Vymyslení partneri a faktúry, nech je vidno, ako appka vyzerá</div></div></div>
      <div className="card-b">
        <ErrorNote error={error} onClose={() => setError(null)} />
        <p style={{fontSize:13, color:'var(--ink-2)', marginTop:0}}>
          {s.demoDataPresent ? 'Ukážkové dáta sú vložené. Keď začneš účtovať naozaj, vymaž ich - číselný rad sa potom nastav v záložke Číselné rady.' : 'Ukážkové dáta nie sú vložené.'}
        </p>
        {s.demoDataPresent
          ? <button className="btn btn-danger" disabled={busy} onClick={remove}><Icon name="trash" /> Vymazať ukážkové dáta</button>
          : <button className="btn" disabled={busy} onClick={() => run(uctStore.demo.insert, 'Ukážkové dáta vložené.')}><Icon name="plus" /> Vložiť ukážkové dáta</button>}
      </div>
      {ConfirmUI}
    </div>
  );
}

function AboutTab() {
  const a = uctStore.about();
  return (
    <div className="card" style={{maxWidth:560}}>
      <div className="card-b" style={{display:'flex', gap:18, alignItems:'flex-start'}}>
        <img className="about-logo" src="assets/logo.svg" alt="" />
        <div style={{fontSize:13, lineHeight:1.7, color:'var(--ink-2)'}}>
          <div style={{fontFamily:'var(--font-display)', fontSize:22, color:'var(--ink)'}}>Účtovníček</div>
          <div>Verzia {a.version} · podvojné účtovníctvo, fakturácia a daňová evidencia</div>
          <div>Rovnaký základ ako Mzdárik, aby sa neskôr dali prepojiť (zaúčtovanie miezd).</div>
          <div style={{color:'var(--ink-3)'}}>Dáta: <span className="mono">~/.local/share/uctovnicek/</span> (jedna databáza na firmu, účty v ucty.db)</div>
        </div>
      </div>
    </div>
  );
}