/* Účtovníček — Účtová osnova: účty po triedach, hľadanie, úprava, nový účet */

const ACCOUNT_CLASSES = {
  '0': 'Dlhodobý majetok', '1': 'Zásoby', '2': 'Finančné účty', '3': 'Zúčtovacie vzťahy', '4': 'Kapitálové účty a dlhodobé záväzky',
  '5': 'Náklady', '6': 'Výnosy', '7': 'Uzávierkové účty', '8': 'Vnútroorganizačné účtovníctvo', '9': 'Podsúvahové účty',
};
const ACCOUNT_KIND = { S: 'súvahový', V: 'výsledkový', Z: 'závierkový', N: 'podsúvahový' };
const ACCOUNT_SIDE = { A: 'aktívny', P: 'pasívny', D: 'výsledkový', C: 'výsledkový', N: '—' };

function PageAccounts({ go }) {
  const [search, setSearch] = React.useState('');
  const [editing, setEditing] = React.useState(null); // null | {} (nový) | account
  const [onlyUsed, setOnlyUsed] = React.useState(false);
  const [used, setUsed] = React.useState(null);
  const [setToast, Toast] = useToast();
  const accounts = uctStore.accounts.list();

  React.useEffect(() => {
    if (!onlyUsed || used) return;
    uctStore.journal.ledger('', '').then(rows => setUsed(new Set(rows.map(r => r.account)))).catch(() => setUsed(new Set()));
  }, [onlyUsed]);

  const q = search.trim().toLowerCase();
  const list = accounts.filter(a => (!q || a.code.includes(q) || a.name.toLowerCase().includes(q)) && (!onlyUsed || !used || used.has(a.code)));
  const groups = {};
  list.forEach(a => { (groups[a.code[0]] = groups[a.code[0]] || []).push(a); });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Účtová osnova</h1>
          <div className="sub">{accounts.length} účtov · šesťmiestne čísla ako v Profit365: syntetika 311 + analytika 001</div>
        </div>
        <div style={{display:'flex', gap:10, alignItems:'center'}}>
          <label style={{fontSize:13, color:'var(--ink-2)', display:'flex', gap:6, alignItems:'center'}}><input type="checkbox" checked={onlyUsed} onChange={e => setOnlyUsed(e.target.checked)} /> len používané</label>
          <div className="search-wrap">
            <Icon name="search" size={14} className="search-ic" />
            <input className="input" placeholder="Číslo alebo názov účtu…" value={search} onChange={e => setSearch(e.target.value)} />
          </div>
          <button className="btn btn-brand" onClick={() => setEditing({})}><Icon name="plus" /> Nový účet</button>
        </div>
      </div>

      {Object.keys(groups).sort().map(cls => (
        <div key={cls}>
          <div className="acc-class">Trieda {cls} · {ACCOUNT_CLASSES[cls] || ''}</div>
          <div className="card">
            <table className="tbl dense">
              <thead><tr><th style={{width:90}}>Účet</th><th>Názov</th><th style={{width:120}}>Druh</th><th style={{width:110}}>Zostatok</th><th style={{width:90}}>Stav</th><th style={{width:40}}></th></tr></thead>
              <tbody>
                {groups[cls].map(a => (
                  <tr key={a.id} className="clickable" onClick={() => setEditing(a)} style={a.active === false ? {opacity:0.5} : undefined}>
                    <td className="mono"><strong>{a.code}</strong></td>
                    <td>{a.name}{a.source === 'profit365' && !a.code.endsWith('001') && <span className="chip" style={{marginLeft:8}}>vlastný</span>}</td>
                    <td className="muted">{ACCOUNT_KIND[a.kind] || a.kind}</td>
                    <td className="muted">{ACCOUNT_SIDE[a.side] || a.side}</td>
                    <td>{a.active === false ? <span className="badge gray">vypnutý</span> : <span className="badge green">aktívny</span>}</td>
                    <td><Icon name="chevronRight" /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}
      {list.length === 0 && <div className="card"><div className="card-b"><div className="empty"><Icon name="grid" size={36} /><h4>Nič sa nenašlo</h4><div>Skús iné číslo alebo názov.</div></div></div></div>}

      {editing && <AccountDrawer account={editing.id ? editing : null} onClose={() => setEditing(null)} onSaved={(a, msg) => { setEditing(null); setToast(msg); }} go={go} />}
      {Toast}
    </div>
  );
}

function AccountDrawer({ account, onClose, onSaved, go }) {
  const isNew = !account;
  const [a, setA] = React.useState(() => isNew ? { code: '', name: '', kind: '', side: '', active: true, note: '' } : { ...account });
  const [error, setError] = React.useState(null);
  const [askConfirm, ConfirmUI] = useConfirm();
  const set = (k) => (e) => setA({ ...a, [k]: e.target.value });
  const save = async () => {
    setError(null);
    try {
      const saved = isNew ? await uctStore.accounts.create(a) : await uctStore.accounts.update(a);
      onSaved(saved, isNew ? `Účet ${saved.code} založený.` : 'Účet uložený.');
    } catch (e) { setError(e.message); }
  };
  const remove = async () => {
    if (!await askConfirm({ title: `Vymazať účet ${a.code}?`, message: 'Účet s pohybmi v denníku sa vymazať nedá - ten sa dá len vypnúť.', confirmLabel: 'Vymazať', danger: true })) return;
    try { await uctStore.accounts.remove(a.id); onSaved(a, 'Účet vymazaný.'); } catch (e) { setError(e.message); }
  };
  return (
    <Drawer title={isNew ? 'Nový účet' : `Účet ${a.code}`} sub={isNew ? 'Analytický účet k existujúcej syntetike, napr. 311004 pre nového odberateľa' : (ACCOUNT_CLASSES[a.code[0]] || '')} onClose={onClose}
      footer={<>
        {!isNew && <button className="btn btn-ghost" style={{marginRight:'auto', color:'var(--danger)'}} onClick={remove}><Icon name="trash" /> Vymazať</button>}
        {!isNew && <button className="btn" onClick={() => go('journal:account:' + a.code)}><Icon name="list" /> Pohyby v denníku</button>}
        <button className="btn btn-ghost" onClick={onClose}>Zrušiť</button>
        <button className="btn btn-brand" onClick={save}><Icon name="check" /> {isNew ? 'Založiť účet' : 'Uložiť'}</button>
      </>}>
      <ErrorNote error={error} onClose={() => setError(null)} />
      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        <div className="row">
          <Field label="Číslo účtu" hint="Šesť číslic: syntetika + analytika"><input className="input mono" value={a.code} onChange={e => setA({ ...a, code: e.target.value.replace(/\D/g, '').slice(0, 6) })} placeholder="311004" /></Field>
          <Field label="Druh">
            <select className="select" value={a.kind} onChange={set('kind')}>
              <option value="">podľa triedy</option>
              {Object.entries(ACCOUNT_KIND).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
            </select>
          </Field>
        </div>
        <Field label="Názov"><input className="input" value={a.name} onChange={set('name')} placeholder="Odberatelia - Nová firma" /></Field>
        <div className="row">
          <Field label="Zostatok">
            <select className="select" value={a.side} onChange={set('side')}>
              <option value="">podľa druhu</option>
              <option value="A">aktívny (zostatok na MD)</option>
              <option value="P">pasívny (zostatok na DAL)</option>
              <option value="D">výsledkový</option>
            </select>
          </Field>
          <Field label="Stav">
            <select className="select" value={a.active === false ? 'off' : 'on'} onChange={e => setA({ ...a, active: e.target.value === 'on' })}>
              <option value="on">aktívny</option><option value="off">vypnutý (neponúka sa)</option>
            </select>
          </Field>
        </div>
        <Field label="Poznámka"><textarea className="textarea" rows={2} value={a.note || ''} onChange={set('note')} /></Field>
      </div>
      {ConfirmUI}
    </Drawer>
  );
}