// Dashboard — real WooCommerce data via /api/dashboard/summary.

function BarChart({ values = [42,58,49,71,66,82,75,94,88,103,96,118,110,128] }) {
  const data = values;
  const max = Math.max(...data, 1);
  return (
    <svg width="100%" height="180" viewBox="0 0 560 180" preserveAspectRatio="none" style={{overflow:'visible'}}>
      {[0,1,2,3].map(i => (
        <line key={i} x1="0" x2="560" y1={30 + i*40} y2={30 + i*40} stroke="#e2e8f0" strokeDasharray="3 3"/>
      ))}
      {data.map((v, i) => {
        const h = (v / max) * 140;
        const x = 12 + i * (536 / Math.max(data.length - 1, 1));
        const w = Math.max(14, (536 / data.length) - 6);
        return <rect key={i} x={x} y={170 - h} width={w} height={h} rx="3" fill="url(#barGrad)"/>;
      })}
      <defs>
        <linearGradient id="barGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#3a6da0"/>
          <stop offset="1" stopColor="#133258"/>
        </linearGradient>
      </defs>
    </svg>
  );
}

function NotConnected({ integration = 'WooCommerce', slug = 'woocommerce', message }) {
  return (
    <div className="card" style={{padding:24, textAlign:'center', maxWidth:500, margin:'30px auto'}}>
      <div style={{fontSize:42, marginBottom:8}}>🔌</div>
      <h3 style={{margin:'4px 0'}}>{integration} nie je pripojené</h3>
      <p className="muted" style={{margin:'4px 0 16px'}}>
        {message || `Pre načítanie dát pripojte ${integration} v Integráciách.`}
      </p>
      <a href="#/integrations" className="btn btn-primary">Otvoriť Integrácie</a>
    </div>
  );
}

function formatCurrency(n, cur = 'EUR') {
  try {
    return new Intl.NumberFormat('sk-SK', { style: 'currency', currency: cur, maximumFractionDigits: 0 }).format(n || 0);
  } catch { return (n || 0) + ' €'; }
}

function formatDate(iso) {
  if (!iso) return '';
  try { return new Intl.DateTimeFormat('sk-SK', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(new Date(iso)); }
  catch { return iso.slice(0, 10); }
}

// WooCommerce status mapping. Note: 'on-hold' in WC is the state most customers sit in
// while waiting for bank-transfer payment ("Platba na účet"). For DD Energy workflow that's
// the main "čaká na úhradu" state — NOT "pozastavené".
const STATUS_MAP = {
  pending:    { label: 'Nespracovaná',    cls: 'gray'  },   // gateway pending (zriedkavé)
  'on-hold':  { label: 'Čaká na úhradu',  cls: 'amber' },   // bank transfer pending — typický stav
  processing: { label: 'Spracúva sa',     cls: 'navy'  },   // zaplatené, pripravuje sa
  completed:  { label: 'Dokončená',       cls: 'green' },
  cancelled:  { label: 'Zrušená',         cls: 'red'   },
  refunded:   { label: 'Refundovaná',     cls: 'gray'  },
  failed:     { label: 'Zlyhala',         cls: 'red'   },
};

function Dashboard() {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [period, setPeriod] = React.useState('7d');

  React.useEffect(() => {
    let alive = true;
    (async () => {
      const r = await API.dashboardSummary();
      if (!alive) return;
      setData(r.body);
      setLoading(false);
    })();
    return () => { alive = false; };
  }, []);

  const user = (window.currentSession && window.currentSession.user) || {};
  const greeting = user.name ? `Dobrý deň, ${user.name.split(' ')[0]} 👋` : 'Dobrý deň 👋';
  const todayStr = new Intl.DateTimeFormat('sk-SK', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(new Date());

  if (loading) {
    return <AppShell active="dashboard" crumbs={['Domov', 'Prehľad']}><div className="muted" style={{padding:20}}>Načítavam…</div></AppShell>;
  }

  if (data && !data.ok && data.error === 'woocommerce_not_configured') {
    return (
      <AppShell active="dashboard" crumbs={['Domov', 'Prehľad']}>
        <div className="page-head">
          <div><h1>{greeting}</h1><p>{todayStr}</p></div>
        </div>
        <NotConnected/>
      </AppShell>
    );
  }

  const k = (data && data.kpis) || {};
  const currency = data?.currency || 'EUR';
  const recentOrders = (data && data.recent_orders) || [];

  const revenue    = period === '7d' ? k.total_sales_7d : k.total_sales_30d;
  const orderCount = period === '7d' ? k.orders_7d      : k.orders_30d;
  const avgOrder   = orderCount ? revenue / orderCount : 0;

  return (
    <AppShell active="dashboard" crumbs={['Domov', 'Prehľad']}>
      <div className="page-head">
        <div>
          <h1>{greeting}</h1>
          <p>{todayStr} — máte <b>{k.processing_count || 0}</b> objednávok v spracovaní, <b>{k.pending_count || 0}</b> čaká na úhradu.</p>
        </div>
        <div className="page-head-actions">
          <div className="seg">
            <button className={period === '7d'  ? 'active' : ''} onClick={() => setPeriod('7d')}>7 dní</button>
            <button className={period === '30d' ? 'active' : ''} onClick={() => setPeriod('30d')}>30 dní</button>
          </div>
        </div>
      </div>

      <div className="kpi-grid">
        <div className="kpi accent">
          <div className="label">Obrat ({period})</div>
          <div className="value">{formatCurrency(revenue, currency)}</div>
          <div className="delta up" style={{color:'#7ed9a5'}}>{orderCount} objednávok</div>
        </div>
        <div className="kpi">
          <div className="label">Čaká na úhradu</div>
          <div className="value">{k.pending_count || 0}</div>
          <div className="delta" style={{color:'var(--amber-500)'}}>● on-hold + pending</div>
        </div>
        <div className="kpi">
          <div className="label">V spracovaní</div>
          <div className="value">{k.processing_count || 0}</div>
          <div className="delta" style={{color:'var(--navy-700)'}}>● vyžaduje akciu</div>
        </div>
        <div className="kpi">
          <div className="label">Priem. hodnota obj.</div>
          <div className="value">{formatCurrency(avgOrder, currency)}</div>
          <div className="delta muted">za {period}</div>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:14, marginBottom:14}}>
        <div className="card">
          <div className="card-head">
            <h3>Obrat (posledné dni)</h3>
            <div className="hstack small muted">
              <span><span style={{width:8, height:8, background:'var(--navy-800)', borderRadius:2, display:'inline-block', marginRight:4}}></span>objednávky</span>
            </div>
          </div>
          <div className="card-body">
            <BarChart/>
            <div className="small muted" style={{marginTop:6, textAlign:'center'}}>
              Graf používa zástupné hodnoty. Pre denný breakdown pridáme endpoint <code>/api/dashboard/sales-by-day</code> keď budete chcieť.
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Pozor na</h3></div>
          <div className="card-body vstack" style={{gap:10}}>
            <div className="hstack">
              <span className="chip red dot">{k.out_of_stock || 0}</span>
              <div style={{flex:1}}>
                <div style={{fontSize:12.5, fontWeight:500}}>Produkty bez skladu</div>
                <div className="small muted">stav <code>outofstock</code> vo WooCommerce</div>
              </div>
              <a className="btn btn-xs" href="#/products">Otvoriť</a>
            </div>
            <div className="hstack">
              <span className="chip amber dot">{k.pending_count || 0}</span>
              <div style={{flex:1}}>
                <div style={{fontSize:12.5, fontWeight:500}}>Čaká na úhradu</div>
                <div className="small muted">bankový prevod nie je zaúčtovaný</div>
              </div>
              <a className="btn btn-xs" href="#/orders?status=on-hold">Otvoriť</a>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Posledné objednávky</h3>
          <a href="#/orders" className="small" style={{color:'var(--navy-700)', fontWeight:500}}>Zobraziť všetky →</a>
        </div>
        <div style={{overflow:'auto'}}>
          <table className="tbl">
            <thead>
              <tr>
                <th>Objednávka</th><th>Zákazník</th><th>Suma</th><th>Stav</th><th></th>
              </tr>
            </thead>
            <tbody>
              {recentOrders.length === 0 && (
                <tr><td colSpan={5} style={{textAlign:'center', padding:30, color:'var(--ink-500)'}}>Zatiaľ žiadne objednávky.</td></tr>
              )}
              {recentOrders.map(o => {
                const s = STATUS_MAP[o.status] || { label: o.status, cls: 'gray' };
                return (
                  <tr key={o.id}>
                    <td>
                      <span className="mono" style={{color:'var(--navy-700)', fontWeight:600}}>#{o.number}</span>
                      <div className="small muted">{formatDate(o.date)}</div>
                    </td>
                    <td>{(o.customer || '').trim() || '—'}<div className="small muted">{o.email}</div></td>
                    <td style={{fontWeight:600}}>{formatCurrency(parseFloat(o.total || 0), o.currency || currency)}</td>
                    <td><span className={`chip dot ${s.cls}`}>{s.label}</span></td>
                    <td><a href={`#/order?id=${o.id}`} className="btn btn-xs">Otvoriť</a></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </AppShell>
  );
}

Object.assign(window, { Dashboard, NotConnected, STATUS_MAP, formatCurrency, formatDate });