/* Účtovníček — Nástenka (podľa „Rýchly prehľad" v Profit365) */

function PageDashboard({ go, mode }) {
  if (mode === 'danova') return <PageDashboardTax go={go} />;
  const d = uctStore.dashboard.get();
  const company = uctStore.company.get();
  const sales = uctStore.invoices.list('sales');
  const podvojne = mode === 'podvojne';
  const recent = sales.slice(0, 7);
  const overdue = sales.filter(uctStore.invoices.isOverdue).sort((a, b) => a.dueDate.localeCompare(b.dueDate));
  const year = new Date().getFullYear();

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Nástenka</h1>
          <div className="sub">{company.name || 'Doplň názov firmy v Nastaveniach'} · stav k {fmt.date(uctStore.util.today())}</div>
        </div>
        <div style={{display:'flex', gap:10}}>
          <button className="btn" onClick={() => go('partners')}><Icon name="users" /> Partneri</button>
          <button className="btn btn-brand" onClick={() => go('invoices:new')}><Icon name="plus" /> Nová faktúra</button>
        </div>
      </div>

      <div className="stats">
        {podvojne ? <>
          <Stat label="Pokladňa" value={fmt.eur(d.cash)} delta="zostatok účtov 211" />
          <Stat label="Banka" value={fmt.eur(d.bank)} delta="zostatok účtov 221" />
        </> : <>
          <Stat label={`Vystavené ${year}`} value={fmt.eur(d.issuedThisYear)} delta={`${d.invoicesThisYear} ${plural(d.invoicesThisYear, 'faktúra', 'faktúry', 'faktúr')}`} />
          <Stat label="Zálohové faktúry" value={fmt.eur(d.proformaOpen)} delta="neuhradené zálohové" />
        </>}
        <Stat label="Pohľadávky" value={fmt.eur(d.receivables)} delta={d.overdue ? `${d.overdue} ${plural(d.overdue, 'faktúra po splatnosti', 'faktúry po splatnosti', 'faktúr po splatnosti')}` : 'nič po splatnosti'} dir={d.overdue ? 'down' : 'up'} />
        <Stat label="Záväzky" value={fmt.eur(d.liabilities)} delta={podvojne ? `neuhradené prijaté faktúry · ${d.journalEntries} zápisov v denníku` : 'neuhradené prijaté faktúry'} />
      </div>

      <div className="dash-grid">
        <div className="card">
          <div className="card-h">
            <div>
              <h3>Posledné vystavené faktúry</h3>
              <div className="desc">{d.invoicesThisYear} {plural(d.invoicesThisYear, 'faktúra', 'faktúry', 'faktúr')} v roku {year} · spolu {fmt.eur(d.issuedThisYear)}</div>
            </div>
            <button className="btn btn-sm" onClick={() => go('invoices')}>Všetky</button>
          </div>
          <table className="tbl">
            <thead><tr><th>Číslo</th><th>Odberateľ</th><th>Splatnosť</th><th>Stav</th><th className="num">Suma</th></tr></thead>
            <tbody>
              {recent.map(inv => (
                <tr key={inv.id} className="clickable" onClick={() => go('invoices:open:' + inv.id)}>
                  <td className="mono">{inv.number}</td>
                  <td>{inv.partnerName}</td>
                  <td>{fmt.date(inv.dueDate)}</td>
                  <td><StatusBadge inv={inv} /></td>
                  <td className="num">{fmt.eur(inv.total)}</td>
                </tr>
              ))}
              {recent.length === 0 && <tr><td colSpan="5"><div className="empty"><Icon name="file" size={36} /><h4>Zatiaľ žiadne faktúry</h4><div>Vystav prvú tlačidlom Nová faktúra.</div></div></td></tr>}
            </tbody>
          </table>
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:18}}>
          <div className="card">
            <div className="card-h"><div><h3>Po splatnosti</h3><div className="desc">Komu treba pripomenúť platbu</div></div></div>
            <div className="card-b">
              {overdue.length === 0 && <div style={{fontSize:13, color:'var(--ink-3)'}}>Všetky faktúry sú v splatnosti alebo uhradené.</div>}
              <ul className="list-plain">
                {overdue.slice(0, 6).map(inv => (
                  <li key={inv.id} style={{cursor:'pointer'}} onClick={() => go('invoices:open:' + inv.id)}>
                    <div><span>{inv.partnerName}</span><small>{inv.number} · splatná {fmt.date(inv.dueDate)}</small></div>
                    <strong className="mono">{fmt.eur(uctStore.invoices.rest(inv))}</strong>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          {podvojne ? (
            <div className="card">
              <div className="card-h"><div><h3>Čo je v tejto verzii</h3></div></div>
              <div className="card-b" style={{fontSize:13, lineHeight:1.7, color:'var(--ink-2)'}}>
                <div><Icon name="check" size={13} /> Vystavené, zálohové a prijaté faktúry, úhrady párované z banky podľa VS</div>
                <div><Icon name="check" size={13} /> Banka, pokladňa, interné doklady - každý doklad sa sám zaúčtuje</div>
                <div><Icon name="check" size={13} /> Účtová osnova, denník, hlavná kniha, saldokonto</div>
                <div><Icon name="check" size={13} /> Import z Profit365 a z Flexi, záloha a obnova</div>
                <div style={{color:'var(--ink-3)'}}><Icon name="clock" size={13} /> Ďalej: výkazy (súvaha, výsledovka), závierka, daňové priznanie, e-faktúra</div>
              </div>
            </div>
          ) : (
            <div className="card">
              <div className="card-h"><div><h3>Fakturácia</h3></div></div>
              <div className="card-b" style={{fontSize:13, lineHeight:1.7, color:'var(--ink-2)'}}>
                <div><Icon name="check" size={13} /> Riadne faktúry VF1, zálohové VF2, prijaté faktúry</div>
                <div><Icon name="check" size={13} /> Tlač alebo PDF, úhrady, stav po splatnosti</div>
                <div><Icon name="check" size={13} /> Faktúry prenesené z Flexi vrátane položiek</div>
                <div style={{color:'var(--ink-3)'}}><Icon name="clock" size={13} /> Ďalej: DPH pre platiteľa, dobropisy, e-faktúra (2027)</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}


/* Nástenka daňovej evidencie: príjmy roka, obrat, neuhradené pohľadávky. */
function PageDashboardTax({ go }) {
  const company = uctStore.company.get();
  const [sum, setSum] = React.useState(null);
  const [recs, setRecs] = React.useState([]);
  const year = new Date().getFullYear();
  React.useEffect(() => {
    uctStore.tax.summary(year).then(setSum).catch(() => setSum({ error: true }));
    uctStore.tax.receivables(0).then(list => setRecs(list.filter(r => r.status !== 'storno' && r.paidStatus !== 'A'))).catch(() => {});
  }, []);
  const d = uctStore.dashboard.get();
  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Nástenka</h1><div className="sub">{company.name} · daňová evidencia · stav k {fmt.date(uctStore.util.today())}</div></div>
        <div style={{display:'flex', gap:10}}>
          <button className="btn" onClick={() => go('incomes')}><Icon name="coins" /> Nový príjem</button>
          <button className="btn btn-brand" onClick={() => go('invoices:new')}><Icon name="plus" /> Nová faktúra</button>
        </div>
      </div>
      {!sum ? <Loading /> : sum.error ? <ErrorNote error="Výpočet sa nepodarilo načítať." /> : (
        <div className="stats">
          <Stat label={`Príjmy ${year} (POZD)`} value={fmt.eur(sum.pozd)} delta={`${sum.incomes} ${plural(sum.incomes, 'úhrada', 'úhrady', 'úhrad')} · PNZD ${fmt.num(sum.pnzd)}`} />
          <Stat label="Odhad dane" value={fmt.eur(sum.dan)} delta={`základ dane ${fmt.num(sum.zd)} · ${sum.flatRate ? '15 %' : 'pásma'}`} />
          <Stat label="Obrat 12 mesiacov" value={fmt.eur(sum.turnover12)} delta="sledovanie hranice DPH" />
          <Stat label="Neuhradené pohľadávky" value={fmt.eur(d.receivables)} delta={d.overdue ? `${d.overdue} po splatnosti` : 'nič po splatnosti'} dir={d.overdue ? 'down' : 'up'} />
        </div>
      )}
      <div className="dash-grid">
        <div className="card">
          <div className="card-h"><div><h3>Neuhradené pohľadávky</h3><div className="desc">faktúry, ku ktorým ešte nie je zapísaný príjem</div></div><button className="btn btn-sm" onClick={() => go('receivables')}>Všetky</button></div>
          <table className="tbl">
            <thead><tr><th>Číslo</th><th>Odberateľ</th><th>Splatnosť</th><th>Stav</th><th className="num">Na účet</th></tr></thead>
            <tbody>
              {recs.slice(0, 8).map(r => <tr key={r.invoiceId} className="clickable" onClick={() => go('invoices:open:' + r.invoiceId)}><td className="mono">{r.number}</td><td>{r.partnerName}</td><td style={r.dueDate < uctStore.util.today() ? {color:'var(--danger)'} : undefined}>{fmt.date(r.dueDate)}</td><td><PaidBadge s={r.paidStatus} /></td><td className="num">{fmt.eur(r.naUcet - r.paidSum)}</td></tr>)}
              {recs.length === 0 && <tr><td colSpan="5"><div className="empty"><Icon name="check" size={36} /><h4>Všetko uhradené</h4></div></td></tr>}
            </tbody>
          </table>
        </div>
        <div className="card">
          <div className="card-h"><div><h3>Daňová evidencia</h3></div></div>
          <div className="card-b" style={{fontSize:13, lineHeight:1.7, color:'var(--ink-2)'}}>
            <div><Icon name="check" size={13} /> Pohľadávky s rozdelením príjmu (autorský zákon, živnosť, § 8, § 7a)</div>
            <div><Icon name="check" size={13} /> Príjmy podľa dátumu úhrady, POZD a PNZD, stav A / Č / N</div>
            <div><Icon name="check" size={13} /> Výpočet dane s paušálnymi výdavkami a konštantami roka</div>
            <div><Icon name="check" size={13} /> Klzavý obrat 12 mesiacov pre hranicu DPH, naprieč rokmi</div>
            <div style={{marginTop:8}}><button className="btn btn-sm" onClick={() => go('taxcalc')}><Icon name="scale" size={14} /> Výpočet dane {year}</button></div>
          </div>
        </div>
      </div>
    </div>
  );
}