/* Účtovníček — kostra appky: prihlásenie, výber režimu a firmy, bočné menu
 * podľa režimu, obsah vpravo. Adresa: #rezim/firma/stranka[:akcia:id]. */

function parseHash() {
  const h = (location.hash || '').slice(1);
  const parts = h.split('/');
  if (parts.length >= 3) return { mode: parts[0], firma: parts[1], route: parts.slice(2).join('/') || 'dashboard' };
  return { mode: '', firma: '', route: h || 'dashboard' }; // stará adresa bez režimu
}

function App({ onLogout }) {
  const [, setTick] = React.useState(0);
  const rerender = () => setTick(v => v + 1);
  const [route, setRoute] = React.useState(() => parseHash().route);
  const [busy, setBusy] = React.useState(false);
  const [setToast, Toast] = useToast();

  React.useEffect(() => {
    const onHash = async () => {
      const p = parseHash();
      if (p.mode && uctStore.ctx.resolve(p.mode, p.firma)) {
        setBusy(true);
        try { await uctStore.__hydrate(); } catch (e) { if (!(e instanceof AuthError)) setToast(e.message); }
        setBusy(false);
      }
      setRoute(p.route);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  React.useEffect(() => {
    window.addEventListener('uct:changed', rerender);
    return () => window.removeEventListener('uct:changed', rerender);
  }, []);

  const mode = uctStore.ctx.mode();
  const firma = uctStore.ctx.firma();
  const go = (r) => {
    const h = '#' + mode + '/' + firma + '/' + r;
    if (location.hash !== h) history.replaceState(null, '', h);
    setRoute(r);
  };
  const switchTo = async (m, f) => {
    setBusy(true);
    try {
      await uctStore.ctx.set(m, f);
      const r = 'dashboard';
      history.replaceState(null, '', '#' + uctStore.ctx.mode() + '/' + uctStore.ctx.firma() + '/' + r);
      setRoute(r);
    } catch (e) { if (!(e instanceof AuthError)) setToast(e.message); }
    setBusy(false);
  };
  const top = route.split(':')[0];
  const company = uctStore.company.get();
  const settings = uctStore.settings.get();
  const unpaid = (kind) => uctStore.invoices.list(kind).filter(i => i.status === 'vystavena' || i.status === 'ciastocne').length;
  const modes = uctStore.ctx.modes();
  const firms = uctStore.ctx.companiesFor(mode);
  const user = uctStore.auth.user();
  const modeLabel = (uctStore.MODES[mode] || {}).label || '';

  const logout = async () => { await uctStore.auth.logout(); onLogout(); };

  return (
    <div className="app">
      <aside className="sidebar">
        <a className="sidebar-brand" href="/" onClick={e => { if (e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey) { e.preventDefault(); go('dashboard'); } }}>
          <img src="assets/logo.svg" alt="" />
          <div className="wm">Účtov<em>níček</em></div>
        </a>
        <div className="modes">
          {modes.map(m => (
            <button key={m} className={`mode ${mode === m ? 'active' : ''}`} onClick={() => switchTo(m, '')} title={uctStore.MODES[m].label}>
              <span>{uctStore.MODES[m].label}</span>
            </button>
          ))}
        </div>
        {firms.length > 1
          ? <div className="firma-switch"><select className="select" value={firma} onChange={e => switchTo(mode, e.target.value)}>{firms.map(f => <option key={f.code} value={f.code}>{f.name}</option>)}</select></div>
          : <div className="firma-tag">{(firms[0] || {}).name || ''}</div>}

        {mode === 'podvojne' && <>
          <div className="sidebar-section">Prehľady</div>
          <nav><NavBtn icon="dashboard" label="Nástenka" active={top === 'dashboard'} onClick={() => go('dashboard')} /></nav>
          <div className="sidebar-section">Predaj</div>
          <nav>
            <NavBtn icon="file" label="Vystavené faktúry" active={top === 'invoices'} onClick={() => go('invoices')} count={unpaid('sales') || null} />
            <NavBtn icon="file" label="Zálohové faktúry" active={top === 'proforma'} onClick={() => go('proforma')} count={unpaid('proforma') || null} />
          </nav>
          <div className="sidebar-section">Nákup</div>
          <nav><NavBtn icon="fileIn" label="Prijaté faktúry" active={top === 'purchase'} onClick={() => go('purchase')} count={unpaid('purchase') || null} /></nav>
          <div className="sidebar-section">Financie</div>
          <nav>
            <NavBtn icon="bank" label="Banka" active={top === 'bank'} onClick={() => go('bank')} />
            <NavBtn icon="wallet" label="Pokladňa" active={top === 'cash'} onClick={() => go('cash')} />
          </nav>
          <div className="sidebar-section">Účtovníctvo</div>
          <nav>
            <NavBtn icon="book" label="Interné doklady" active={top === 'internal'} onClick={() => go('internal')} />
            <NavBtn icon="list" label="Účtovný denník" active={top === 'journal'} onClick={() => go('journal')} />
            <NavBtn icon="ledger" label="Hlavná kniha" active={top === 'ledger'} onClick={() => go('ledger')} />
            <NavBtn icon="scale" label="Saldokonto" active={top === 'saldo'} onClick={() => go('saldo')} />
            <NavBtn icon="grid" label="Účtová osnova" active={top === 'accounts'} onClick={() => go('accounts')} />
          </nav>
        </>}
        {mode === 'fakturacia' && <>
          <div className="sidebar-section">Prehľady</div>
          <nav><NavBtn icon="dashboard" label="Nástenka" active={top === 'dashboard'} onClick={() => go('dashboard')} /></nav>
          <div className="sidebar-section">Predaj</div>
          <nav>
            <NavBtn icon="file" label="Vystavené faktúry" active={top === 'invoices'} onClick={() => go('invoices')} count={unpaid('sales') || null} />
            <NavBtn icon="file" label="Zálohové faktúry" active={top === 'proforma'} onClick={() => go('proforma')} count={unpaid('proforma') || null} />
          </nav>
          <div className="sidebar-section">Nákup</div>
          <nav><NavBtn icon="fileIn" label="Prijaté faktúry" active={top === 'purchase'} onClick={() => go('purchase')} count={unpaid('purchase') || null} /></nav>
        </>}
        {mode === 'danova' && <>
          <div className="sidebar-section">Prehľady</div>
          <nav><NavBtn icon="dashboard" label="Nástenka" active={top === 'dashboard'} onClick={() => go('dashboard')} /></nav>
          <div className="sidebar-section">Daňová evidencia</div>
          <nav>
            <NavBtn icon="file" label="Pohľadávky" active={top === 'receivables'} onClick={() => go('receivables')} />
            <NavBtn icon="coins" label="Príjmy" active={top === 'incomes'} onClick={() => go('incomes')} />
            <NavBtn icon="scale" label="Výpočet dane" active={top === 'taxcalc'} onClick={() => go('taxcalc')} />
          </nav>
        </>}
        <div className="sidebar-section">Adresár</div>
        <nav><NavBtn icon="users" label="Partneri" active={top === 'partners'} onClick={() => go('partners')} count={uctStore.partners.list().length || null} /></nav>
        <div className="sidebar-section" style={{marginTop:6}}>Konfigurácia</div>
        <nav><NavBtn icon="settings" label="Nastavenia" active={top === 'settings'} onClick={() => go('settings')} /></nav>
        <div className="sidebar-foot">
          <strong>{company.name || 'Firma bez názvu'}</strong>
          <div style={{marginTop:4}}>Účtovníček {uctStore.about().version}</div>
        </div>
      </aside>

      <main className="main">
        <div className="topbar">
          <div className="crumbs">
            <span>{modeLabel}</span>
            <span className="sep">›</span>
            <span>{company.name || firma}</span>
            <span className="sep">›</span>
            <span className="cur">{labelFor(top)}</span>
          </div>
          <div className="tools">
            <div className="user">
              <span>{fmt.dateLong(new Date())}</span>
              <span>·</span>
              <span>{user ? (user.name || user.login) : ''}</span>
              <button className="btn btn-sm btn-ghost" title="Odhlásiť sa" onClick={logout}><Icon name="x" size={13} /> Odhlásiť</button>
            </div>
          </div>
        </div>

        {busy && <div className="demo-banner"><Icon name="clock" size={16} /><span>Načítavam dáta firmy…</span></div>}
        {settings.demoDataPresent && (
          <div className="demo-banner">
            <Icon name="info" size={16} />
            <span>V appke sú <strong>ukážkové (vymyslené) dáta</strong>, aby bolo vidno, ako vyzerá. Keď začneš účtovať naozaj, vymaž ich.</span>
            <button className="btn btn-sm" onClick={() => go('settings:demo')}>Vymazať v Nastaveniach</button>
          </div>
        )}

        {top === 'dashboard' && <PageDashboard go={go} mode={mode} />}
        {top === 'invoices' && <PageInvoices key={'sales' + firma} kind="sales" go={go} route={route} />}
        {top === 'proforma' && <PageInvoices key={'proforma' + firma} kind="proforma" go={go} route={route} />}
        {top === 'purchase' && <PageInvoices key={'purchase' + firma} kind="purchase" go={go} route={route} />}
        {top === 'bank' && <PageDocuments key="bank" kind="bank" go={go} route={route} />}
        {top === 'cash' && <PageDocuments key="cash" kind="cash" go={go} route={route} />}
        {top === 'internal' && <PageDocuments key="internal" kind="internal" go={go} route={route} />}
        {top === 'journal' && <PageJournal go={go} route={route} />}
        {top === 'ledger' && <PageLedger go={go} route={route} />}
        {top === 'saldo' && <PageSaldo go={go} />}
        {top === 'accounts' && <PageAccounts go={go} />}
        {top === 'receivables' && <PageTaxReceivables key={'rec' + firma} go={go} route={route} />}
        {top === 'incomes' && <PageTaxIncomes key={'inc' + firma} go={go} route={route} />}
        {top === 'taxcalc' && <PageTaxCalc key={'calc' + firma} go={go} route={route} />}
        {top === 'partners' && <PagePartners go={go} />}
        {top === 'settings' && <PageSettings route={route} setToast={setToast} mode={mode} />}
      </main>
      {Toast}
    </div>
  );
}

function NavBtn({ icon, label, active, onClick, count, soon }) {
  return (
    <button className={`nav-item ${active ? 'active' : ''} ${soon ? 'soon' : ''}`} onClick={onClick}>
      <Icon name={icon} />
      <span>{label}</span>
      {count != null && <span className="count">{count}</span>}
      {soon && <span className="soon-tag">neskôr</span>}
    </button>
  );
}

function labelFor(top) {
  return ({
    dashboard: 'Nástenka', invoices: 'Vystavené faktúry', proforma: 'Zálohové faktúry', purchase: 'Prijaté faktúry', bank: 'Banka',
    cash: 'Pokladňa', internal: 'Interné doklady', journal: 'Účtovný denník', ledger: 'Hlavná kniha', saldo: 'Saldokonto',
    accounts: 'Účtová osnova', partners: 'Partneri', settings: 'Nastavenia', receivables: 'Pohľadávky', incomes: 'Príjmy', taxcalc: 'Výpočet dane',
  })[top] || top;
}

/* --- Prihlásenie / prvé nastavenie účtu --- */

function LoginScreen({ state, onDone }) {
  const setupNeeded = !!state.setupNeeded;
  const [login, setLogin] = React.useState('');
  const [name, setName] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [pw2, setPw2] = React.useState('');
  const [err, setErr] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    setErr(null);
    if (setupNeeded && pw !== pw2) { setErr('Heslá sa nezhodujú.'); return; }
    setBusy(true);
    try {
      if (setupNeeded) await uctStore.auth.setup(login, name, pw);
      else await uctStore.auth.login(login, pw);
      onDone();
    } catch (e2) { setErr(e2.message); }
    setBusy(false);
  };
  const provider = state.provider || 'Authentik';
  return (
    <div className="login-wrap">
      <div className="login-card">
        <img src="assets/logo.svg" alt="" style={{width:44, height:44}} />
        <div className="wm">Účtov<em>níček</em></div>
        {state.oidc ? (
          <>
            <div className="sub">Prihlás sa <strong>firemným účtom</strong> cez {provider}. Dáta sú na serveri Účtovníčka, rovnaké v PC aj v telefóne.</div>
            <a className="btn btn-brand" href={state.loginUrl || '/api/auth/login'} style={{justifyContent:'center', padding:'11px', textDecoration:'none'}}>Prihlásiť sa cez {provider}</a>
          </>
        ) : (
          <>
            <div className="sub">{setupNeeded ? 'Prvé spustenie bez servera: vytvor si miestny účet.' : 'Skúšobný režim bez Authentiku: miestny účet a heslo.'}</div>
            <form onSubmit={submit}>
              {err && <div className="login-err">{err}</div>}
              <Field label="Prihlasovacie meno"><input className="input" autoFocus autoComplete="username" value={login} onChange={e => setLogin(e.target.value)} placeholder="mirka" /></Field>
              {setupNeeded && <Field label="Celé meno (nepovinné)"><input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="Mirka" /></Field>}
              <Field label="Heslo"><input className="input" type="password" autoComplete={setupNeeded ? 'new-password' : 'current-password'} value={pw} onChange={e => setPw(e.target.value)} /></Field>
              {setupNeeded && <Field label="Heslo ešte raz"><input className="input" type="password" autoComplete="new-password" value={pw2} onChange={e => setPw2(e.target.value)} /></Field>}
              <button className="btn btn-brand" type="submit" disabled={busy} style={{justifyContent:'center', padding:'11px'}}>{busy ? 'Chvíľu…' : (setupNeeded ? 'Vytvoriť účet a vstúpiť' : 'Prihlásiť sa')}</button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

/* --- Štart: stav prihlásenia -> login alebo appka --- */

function Root() {
  const [phase, setPhase] = React.useState('loading'); // loading | login | app | error
  const [authState, setAuthState] = React.useState({});
  const [error, setError] = React.useState('');
  const start = async () => {
    try {
      const st = await uctStore.auth.load();
      if (!st.user) { setAuthState(st); setPhase('login'); return; }
      const p = parseHash();
      uctStore.ctx.resolve(p.mode, p.firma);
      if (!uctStore.ctx.mode()) { setError('Používateľ nemá priradenú žiadnu firmu.'); setPhase('error'); return; }
      const r = p.mode ? p.route : 'dashboard';
      history.replaceState(null, '', '#' + uctStore.ctx.mode() + '/' + uctStore.ctx.firma() + '/' + r);
      await uctStore.__hydrate();
      setPhase('app');
    } catch (e) {
      if (e instanceof AuthError) { setAuthState(uctStore.auth.state() || {}); setPhase('login'); return; }
      setError(e.message || String(e)); setPhase('error');
    }
  };
  React.useEffect(() => { start(); }, []);
  React.useEffect(() => {
    const onLogout = () => setPhase('login');
    window.addEventListener('uct:logout', onLogout);
    return () => window.removeEventListener('uct:logout', onLogout);
  }, []);
  if (phase === 'loading') return <div style={{display:'flex', alignItems:'center', justifyContent:'center', height:'100vh', color:'#5b6372'}}>Načítavam dáta…</div>;
  if (phase === 'error') return <div style={{padding:40, textAlign:'center'}}><h2>Účtovníček sa nepodarilo načítať</h2><p style={{color:'#c0392b'}}>{error}</p><p>Skús okno zavrieť a Účtovníček spustiť znova.</p></div>;
  if (phase === 'login') return <LoginScreen state={authState} onDone={() => { setPhase('loading'); start(); }} />;
  return <App onLogout={() => setPhase('login')} />;
}

const __root = document.getElementById('root');
ReactDOM.createRoot(__root).render(<Root />);