// 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'   },
};

// ─────────────────────────────────────────────
// Dashboard widgets — each is self-contained so users can toggle on/off + reorder.
// Layout is persisted to localStorage per user.
// ─────────────────────────────────────────────

const WIDGETS = [
  { id: 'kpi_revenue',    title: 'KPI — Obrat',               desc: 'Obrat za vybrané obdobie',            size: 'sm' },
  { id: 'kpi_pending',    title: 'KPI — Čaká na úhradu',      desc: 'Počet neuhradených objednávok',        size: 'sm' },
  { id: 'kpi_processing', title: 'KPI — V spracovaní',        desc: 'Počet objednávok v spracovaní',        size: 'sm' },
  { id: 'kpi_avg_order',  title: 'KPI — Priem. hodnota obj.', desc: 'Priemer za obdobie',                   size: 'sm' },
  { id: 'kpi_out_stock',  title: 'KPI — Vypredané produkty',  desc: 'Koľko produktov má stav outofstock',   size: 'sm' },
  { id: 'alerts',         title: 'Pozor na',                  desc: 'Vypredané produkty, čaká na úhradu',  size: 'md' },
  { id: 'recent_orders',  title: 'Posledné objednávky',       desc: '10 najnovších z WooCommerce',          size: 'lg' },
  { id: 'revenue_chart',  title: 'Obrat — graf (posledné dni)', desc: 'Stĺpcový graf',                      size: 'md' },
];

function defaultLayout() {
  return {
    visible: ['kpi_revenue', 'kpi_pending', 'kpi_processing', 'kpi_avg_order', 'revenue_chart', 'alerts', 'recent_orders'],
    period: '7d',
  };
}

function loadLayout(userId) {
  try {
    const raw = localStorage.getItem('dd_dash_layout_' + userId);
    if (!raw) return defaultLayout();
    const parsed = JSON.parse(raw);
    if (!parsed.visible || !Array.isArray(parsed.visible)) return defaultLayout();
    return { ...defaultLayout(), ...parsed };
  } catch { return defaultLayout(); }
}

function saveLayout(userId, layout) {
  try { localStorage.setItem('dd_dash_layout_' + userId, JSON.stringify(layout)); } catch {}
}

// ── individual widgets ──

function WKpi({ label, value, delta, accent, deltaColor = 'var(--ink-500)' }) {
  return (
    <div className={`kpi${accent ? ' accent' : ''}`}>
      <div className="label">{label}</div>
      <div className="value">{value}</div>
      {delta && <div className="delta" style={{color: deltaColor}}>{delta}</div>}
    </div>
  );
}

function WAlerts({ k }) {
  return (
    <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>
  );
}

function WRecentOrders({ recentOrders, currency }) {
  // Small helper: pick a chip colour based on shipping method keywords.
  function shippingChip(m) {
    if (!m || m === '—') return null;
    const s = m.toLowerCase();
    const cls = /osobn|pickup|odber/.test(s) ? 'amber'
              : /dopo[čc][íi]tan/.test(s)     ? 'red'
              : /kuri[eé]r|posta|packet|zás/.test(s) ? 'navy'
              : 'gray';
    return <span className={`chip ${cls}`} style={{padding:'1px 6px', fontSize:10}}>{m}</span>;
  }
  return (
    <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>Doprava</th><th>Suma</th><th>Stav</th><th></th>
          </tr></thead>
          <tbody>
            {recentOrders.length === 0 && (
              <tr><td colSpan={6} 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>
                    {shippingChip(o.shipping_method) || <span className="small muted">—</span>}
                    {o.payment_method && <div className="small muted" style={{marginTop:2}}>{o.payment_method}</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>
  );
}

function WRevenueChart() {
  return (
    <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 neskôr.
        </div>
      </div>
    </div>
  );
}

// ── Edit mode: visible + order + which widgets to show ──
function DashboardEditor({ layout, onChange, onClose }) {
  const [local, setLocal] = React.useState(layout);

  function toggle(id) {
    setLocal(l => ({
      ...l,
      visible: l.visible.includes(id) ? l.visible.filter(x => x !== id) : [...l.visible, id],
    }));
  }
  function move(id, dir) {
    setLocal(l => {
      const arr = [...l.visible];
      const idx = arr.indexOf(id);
      if (idx === -1) return l;
      const t = idx + dir;
      if (t < 0 || t >= arr.length) return l;
      [arr[idx], arr[t]] = [arr[t], arr[idx]];
      return { ...l, visible: arr };
    });
  }

  function save() { onChange(local); onClose(); }
  function reset() { setLocal(defaultLayout()); }

  // Sorted so visible first (in their order), then hidden
  const visibleIds = local.visible;
  const hiddenIds = WIDGETS.map(w => w.id).filter(id => !visibleIds.includes(id));

  return (
    <Modal
      title="Prispôsobiť prehľad"
      width={540}
      onClose={onClose}
      footer={
        <>
          <button className="btn" onClick={reset}>Obnoviť predvolené</button>
          <button className="btn" onClick={onClose}>Zrušiť</button>
          <button className="btn btn-primary" onClick={save}>Uložiť</button>
        </>
      }
    >
      <div className="small muted" style={{marginBottom:10}}>
        Zaškrtnuté widgety sa zobrazia v zadanom poradí. Šípky ↑↓ posúvajú poradie.
      </div>

      <div className="small muted" style={{textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600, marginBottom:4}}>
        Zobrazené ({visibleIds.length})
      </div>
      <div className="vstack" style={{gap:4, marginBottom:14}}>
        {visibleIds.map((id, i) => {
          const w = WIDGETS.find(x => x.id === id);
          if (!w) return null;
          return (
            <div key={id} className="hstack" style={{padding:'6px 10px', background:'var(--blue-50)', borderRadius:6, border:'1px solid var(--border)'}}>
              <input type="checkbox" checked onChange={() => toggle(id)}/>
              <div style={{flex:1}}>
                <div style={{fontWeight:500, fontSize:12.5}}>{w.title}</div>
                <div className="small muted">{w.desc}</div>
              </div>
              <button className="btn btn-xs" onClick={() => move(id, -1)} disabled={i === 0}>↑</button>
              <button className="btn btn-xs" onClick={() => move(id, 1)} disabled={i === visibleIds.length - 1}>↓</button>
            </div>
          );
        })}
      </div>

      {hiddenIds.length > 0 && (
        <>
          <div className="small muted" style={{textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600, marginBottom:4}}>
            Skryté ({hiddenIds.length})
          </div>
          <div className="vstack" style={{gap:4}}>
            {hiddenIds.map(id => {
              const w = WIDGETS.find(x => x.id === id);
              if (!w) return null;
              return (
                <div key={id} className="hstack" style={{padding:'6px 10px', borderRadius:6, border:'1px dashed var(--border-strong)', opacity:0.7}}>
                  <input type="checkbox" onChange={() => toggle(id)}/>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:500, fontSize:12.5}}>{w.title}</div>
                    <div className="small muted">{w.desc}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      )}
    </Modal>
  );
}

function Dashboard() {
  const user = (window.currentSession && window.currentSession.user) || {};
  const userKey = user.id || user.email || 'anonymous';

  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [layout, setLayout] = React.useState(() => loadLayout(userKey));
  const [editing, setEditing] = React.useState(false);

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

  function applyLayout(next) {
    setLayout(next);
    saveLayout(userKey, next);
  }

  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 period = layout.period || '7d';
  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;

  function widgetEl(id) {
    switch (id) {
      case 'kpi_revenue':    return <WKpi key={id} accent label={`Obrat (${period})`} value={formatCurrency(revenue, currency)} delta={`${orderCount} objednávok`} deltaColor="#7ed9a5"/>;
      case 'kpi_pending':    return <WKpi key={id} label="Čaká na úhradu" value={k.pending_count || 0} delta="● on-hold + pending" deltaColor="var(--amber-500)"/>;
      case 'kpi_processing': return <WKpi key={id} label="V spracovaní" value={k.processing_count || 0} delta="● vyžaduje akciu" deltaColor="var(--navy-700)"/>;
      case 'kpi_avg_order':  return <WKpi key={id} label="Priem. hodnota obj." value={formatCurrency(avgOrder, currency)} delta={`za ${period}`}/>;
      case 'kpi_out_stock':  return <WKpi key={id} label="Vypredané produkty" value={k.out_of_stock || 0} delta="● outofstock" deltaColor="var(--red-500)"/>;
      case 'alerts':         return <WAlerts key={id} k={k}/>;
      case 'recent_orders':  return <WRecentOrders key={id} recentOrders={recentOrders} currency={currency}/>;
      case 'revenue_chart':  return <WRevenueChart key={id}/>;
      default: return null;
    }
  }

  const visibleWidgets = layout.visible.map(id => ({ id, w: WIDGETS.find(x => x.id === id) })).filter(x => x.w);
  const kpiIds = new Set(['kpi_revenue','kpi_pending','kpi_processing','kpi_avg_order','kpi_out_stock']);

  // Group consecutive KPIs into a .kpi-grid so they stay in one row.
  const blocks = [];
  let kpiBuffer = [];
  for (const { id } of visibleWidgets) {
    if (kpiIds.has(id)) {
      kpiBuffer.push(id);
    } else {
      if (kpiBuffer.length) { blocks.push({ type: 'kpis', ids: kpiBuffer }); kpiBuffer = []; }
      blocks.push({ type: 'single', id });
    }
  }
  if (kpiBuffer.length) blocks.push({ type: 'kpis', ids: kpiBuffer });

  return (
    <AppShell active="dashboard" crumbs={['Domov', 'Prehľad']}>
      {editing && <DashboardEditor layout={layout} onChange={applyLayout} onClose={() => setEditing(false)}/>}

      <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={() => applyLayout({ ...layout, period: '7d' })}>7 dní</button>
            <button className={period === '30d' ? 'active' : ''} onClick={() => applyLayout({ ...layout, period: '30d' })}>30 dní</button>
          </div>
          <button className="btn" onClick={() => setEditing(true)}>
            <Ico.settings style={{width:12, height:12}}/>
            Prispôsobiť
          </button>
        </div>
      </div>

      <div className="vstack" style={{gap:14}}>
        {blocks.map((b, i) => {
          if (b.type === 'kpis') {
            return (
              <div key={`kpis-${i}`} className="kpi-grid" style={{ gridTemplateColumns: `repeat(${Math.min(b.ids.length, 4)}, 1fr)` }}>
                {b.ids.map(id => widgetEl(id))}
              </div>
            );
          }
          return <div key={`block-${i}-${b.id}`}>{widgetEl(b.id)}</div>;
        })}

        {visibleWidgets.length === 0 && (
          <div className="card" style={{padding:30, textAlign:'center', color:'var(--ink-500)'}}>
            Všetky widgety sú skryté. Otvorte <b>Prispôsobiť</b> a vyberte čo chcete vidieť.
          </div>
        )}
      </div>
    </AppShell>
  );
}

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