// Dashboard screen
const { useMemo: dUseMemo, useState: dUseState } = React;

function Dashboard({ t, lang, onNav, role, layoutVariant }) {
  const { state } = useStore();
  const products = state.products;

  // KPIs
  const kpis = dUseMemo(() => {
    let total = products.length;
    let value = 0;
    let low = 0, out = 0, dead = 0, over = 0;
    for (const p of products) {
      value += p.onHand * p.unitCost;
      if (p.status === 'low') low++;
      else if (p.status === 'out') out++;
      else if (p.status === 'dead') dead++;
      else if (p.status === 'overstock') over++;
    }
    return { total, value, low, out, dead, over };
  }, [products]);

  // Top movers (by monthlyRevenue)
  const topMovers = dUseMemo(() => {
    return [...products].sort((a,b) => b.monthlyRevenue - a.monthlyRevenue).slice(0, 6);
  }, [products]);

  // Recent movements (from store)
  const recentMovements = state.movements.slice(0, 6);

  // Suggested actions preview (top 4)
  const suggested = dUseMemo(() => {
    const items = [];
    // Reorder candidates: low/out with monthly demand > 0
    const reorder = products.filter(p => (p.status === 'low' || p.status === 'out') && p.monthlyDemand > 0)
      .sort((a,b) => b.monthlyRevenue - a.monthlyRevenue);
    if (reorder[0]) items.push({ kind: 'reorder', product: reorder[0] });
    // Dead stock high value
    const deadHigh = products.filter(p => p.status === 'dead').sort((a,b) => b.onHand*b.unitCost - a.onHand*a.unitCost);
    if (deadHigh[0]) items.push({ kind: 'dead', product: deadHigh[0] });
    // Audit
    if (state.anomalies[0]) items.push({ kind: 'audit', anomaly: state.anomalies[0] });
    // Reorder second
    if (reorder[1]) items.push({ kind: 'reorder', product: reorder[1] });
    return items;
  }, [products, state.anomalies]);

  // ABC counts
  const abc = dUseMemo(() => {
    const c = { A: 0, B: 0, C: 0 };
    let valA = 0, valB = 0, valC = 0;
    for (const p of products) {
      c[p.abc] = (c[p.abc] || 0) + 1;
      const v = p.onHand * p.unitCost;
      if (p.abc === 'A') valA += v;
      else if (p.abc === 'B') valB += v;
      else valC += v;
    }
    const totalVal = valA + valB + valC;
    return { c, valA, valB, valC, totalVal };
  }, [products]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>{t.dash_hello}, {role === 'manager' ? (lang === 'th' ? 'คุณผู้จัดการ' : 'Manager') : (role === 'sales' ? (lang === 'th' ? 'ฝ่ายขาย' : 'Sales team') : (lang === 'th' ? 'คุณเจ้าหน้าที่' : 'Officer'))}</h1>
          <div className="page-sub">{t.dash_hello_sub} · {new Date('2026-04-01').toLocaleDateString(lang === 'th' ? 'th-TH' : 'en-US', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}</div>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={() => onNav('reports')}>
            <Icon.Chart className="icon icon-sm" /> {t.rep_title}
          </button>
          <button className="btn btn-primary" onClick={() => onNav('movement')}>
            <Icon.Move className="icon icon-sm" /> {t.nav_inout}
          </button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="grid grid-4" style={{ marginBottom: 20 }}>
        <KPI
          label={t.kpi_skus}
          value={fmtThousands(kpis.total)}
          unit={t.kpi_items}
          icon={<Icon.Box className="icon icon-sm" />}
          tone="accent"
        />
        <KPI
          label={t.kpi_value}
          value={fmtThousands(kpis.value / 1000, 0)}
          unit={'k ' + t.kpi_value_unit}
          icon={<Icon.Chart className="icon icon-sm" />}
          tone="ok"
          sub={lang === 'th' ? 'รวมมูลค่าทั้งคลัง' : 'Total inventory value'}
        />
        <KPI
          label={t.kpi_lowstock}
          value={fmtThousands(kpis.low + kpis.out)}
          unit={t.kpi_items}
          icon={<Icon.Warning className="icon icon-sm" />}
          tone="warn"
          sub={`${kpis.out} ${t.status_out.toLowerCase()} · ${kpis.low} ${t.status_low.toLowerCase()}`}
          onClick={() => onNav('stock', { filter: 'attention' })}
        />
        <KPI
          label={t.kpi_dead}
          value={fmtThousands(kpis.dead)}
          unit={t.kpi_items}
          icon={<Icon.Clock className="icon icon-sm" />}
          tone="gray"
          onClick={() => onNav('stock', { filter: 'dead' })}
        />
      </div>

      {layoutVariant === 'A' ? (
        <div className="grid grid-23" style={{ marginBottom: 20 }}>
          {/* Left col */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <SuggestedPanel t={t} lang={lang} suggested={suggested} onNav={onNav} />
            <TopMovers t={t} lang={lang} movers={topMovers} onNav={onNav} />
          </div>
          {/* Right col */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <RecentMovementsPanel t={t} lang={lang} movements={recentMovements} onNav={onNav} />
            <HealthPanel t={t} lang={lang} kpis={kpis} abc={abc} />
          </div>
        </div>
      ) : (
        <div className="grid grid-23" style={{ marginBottom: 20 }}>
          <RecentMovementsPanel t={t} lang={lang} movements={recentMovements} onNav={onNav} />
          <SuggestedPanel t={t} lang={lang} suggested={suggested} onNav={onNav} compact />
        </div>
      )}

      {layoutVariant === 'B' && (
        <div className="grid grid-2" style={{ marginBottom: 20 }}>
          <TopMovers t={t} lang={lang} movers={topMovers} onNav={onNav} />
          <HealthPanel t={t} lang={lang} kpis={kpis} abc={abc} />
        </div>
      )}
    </div>
  );
}

function KPI({ label, value, unit, icon, tone, sub, onClick }) {
  const toneMap = {
    accent: 'var(--accent-soft)',
    ok: 'var(--ok-soft)',
    warn: 'var(--warn-soft)',
    bad: 'var(--bad-soft)',
    gray: 'var(--gray-soft)'
  };
  const colorMap = {
    accent: 'var(--accent)',
    ok: 'var(--ok)',
    warn: 'var(--warn)',
    bad: 'var(--bad)',
    gray: 'var(--ink-3)'
  };
  return (
    <div className="kpi" onClick={onClick} style={{ cursor: onClick ? 'pointer' : 'default' }}>
      <div className="kpi-label">{label}</div>
      <div className="kpi-value">{value}<span className="kpi-unit"> {unit}</span></div>
      {sub && <div className="kpi-sub">{sub}</div>}
      <div className="kpi-icon" style={{ background: toneMap[tone], color: colorMap[tone] }}>{icon}</div>
    </div>
  );
}

function SuggestedPanel({ t, lang, suggested, onNav, compact }) {
  return (
    <div className="card">
      <div className="card-header">
        <h2>{t.suggested_title}</h2>
        <span className="t-muted" style={{ fontSize: 13 }}>{t.suggested_sub}</span>
        <span className="spacer"></span>
        <button className="btn btn-ghost" onClick={() => onNav('suggested')}>
          {t.movements_seeall} <Icon.ArrowRight className="icon icon-sm" />
        </button>
      </div>
      <div className="card-body" style={{ display: 'grid', gap: 10, gridTemplateColumns: compact ? '1fr' : '1fr 1fr' }}>
        {suggested.map((s, i) => <SuggestionTile key={i} s={s} t={t} lang={lang} onNav={onNav} />)}
      </div>
    </div>
  );
}

function SuggestionTile({ s, t, lang, onNav }) {
  let icon, color, bg, title, body, cta;
  if (s.kind === 'reorder') {
    icon = <Icon.Receive className="icon icon-sm" />;
    color = 'var(--warn)'; bg = 'var(--warn-soft)';
    title = t.sug_reorder + ' · ' + s.product.sku;
    body = (lang === 'th' ? s.product.nameTh : s.product.nameEn) || s.product.nameEn || s.product.sku;
    cta = (
      <>
        <span className="chip chip-warn">{lang === 'th' ? `เหลือ ${s.product.onHand}` : `${s.product.onHand} on hand`}</span>
        <span className="chip">{(lang === 'th' ? 'ขาย/เดือน ' : 'sold/mo ') + s.product.monthlyDemand}</span>
      </>
    );
  } else if (s.kind === 'dead') {
    icon = <Icon.Clock className="icon icon-sm" />;
    color = 'var(--ink-3)'; bg = 'var(--gray-soft)';
    title = t.sug_dead + ' · ' + s.product.sku;
    body = (lang === 'th' ? s.product.nameTh : s.product.nameEn) || s.product.nameEn;
    cta = (
      <>
        <span className="chip">{lang === 'th' ? `ค้าง ${s.product.onHand}` : `${s.product.onHand} stuck`}</span>
        <span className="chip">{fmtCurrency(s.product.onHand * s.product.unitCost)} ฿</span>
      </>
    );
  } else {
    icon = <Icon.AlertCircle className="icon icon-sm" />;
    color = 'var(--bad)'; bg = 'var(--bad-soft)';
    title = t.sug_audit + ' · ' + s.anomaly.invoice;
    body = s.anomaly.message;
    cta = <span className="chip chip-bad">{s.anomaly.type}</span>;
  }
  return (
    <div className="suggest-card">
      <div className="badge" style={{ background: bg, color }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 13.5 }}>{title}</div>
        <div className="t-muted" style={{ fontSize: 12.5, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{body}</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>{cta}</div>
      </div>
    </div>
  );
}

function TopMovers({ t, lang, movers, onNav }) {
  const max = Math.max(...movers.map(p => p.monthlyRevenue), 1);
  return (
    <div className="card">
      <div className="card-header">
        <h2>{t.top_movers_title}</h2>
        <span className="spacer"></span>
        <button className="btn btn-ghost" onClick={() => onNav('stock')}>{t.movements_seeall}</button>
      </div>
      <div style={{ padding: '8px 8px' }}>
        {movers.map(p => (
          <div key={p.sku} className="movement-row" style={{ cursor: 'pointer' }} onClick={() => onNav('stock', { focus: p.sku })}>
            <ABCBadge abc={p.abc} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 13.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{(lang === 'th' ? p.nameTh : p.nameEn) || p.nameEn || p.sku}</div>
              <div className="t-muted" style={{ fontSize: 12 }}>{p.sku} · {p.monthlyDemand} {p.unit}/mo</div>
            </div>
            <div style={{ width: 90 }}>
              <div className="bar"><span style={{ width: `${p.monthlyRevenue/max*100}%` }}></span></div>
              <div className="t-muted" style={{ fontSize: 11, marginTop: 3, textAlign: 'right' }}>{fmtCurrency(p.monthlyRevenue/1000)}k ฿</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function RecentMovementsPanel({ t, lang, movements, onNav }) {
  return (
    <div className="card">
      <div className="card-header">
        <h2>{t.movements_title}</h2>
        <span className="spacer"></span>
        <button className="btn btn-ghost" onClick={() => onNav('movement')}>{t.movements_seeall} <Icon.ArrowRight className="icon icon-sm" /></button>
      </div>
      <div style={{ padding: '4px 0' }}>
        {movements.length === 0 && <div className="empty"><div className="empty-icon"><Icon.Move /></div><h3>{t.no_results}</h3></div>}
        {movements.map((m, i) => (
          <div key={m.id || i} className="movement-row">
            <div className={'movement-icon mi-' + m.type}>
              {m.type === 'in' && <Icon.Receive className="icon icon-sm" />}
              {m.type === 'out' && <Icon.Issue className="icon icon-sm" />}
              {m.type === 'adjust' && <Icon.Adjust className="icon icon-sm" />}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 13.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.name || m.sku}</div>
              <div className="t-muted" style={{ fontSize: 12 }}>{m.sku} · {m.reason || (lang === 'th' ? 'ไม่มีหมายเหตุ' : 'No note')}</div>
            </div>
            <div className="t-muted num" style={{ fontSize: 12.5, textAlign: 'right' }}>
              <div style={{ fontWeight: 700, color: m.type === 'in' ? 'var(--ok)' : (m.type === 'out' ? 'var(--info)' : 'var(--warn)') }}>
                {m.type === 'in' ? '+' : (m.type === 'out' ? '−' : '~')}{m.qty}
              </div>
              <div>{fmtDate(m.date, lang)}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HealthPanel({ t, lang, kpis, abc }) {
  const total = kpis.total || 1;
  const groups = [
    { key: 'ok', count: total - kpis.low - kpis.out - kpis.dead - kpis.over, color: 'var(--ok)' },
    { key: 'low', count: kpis.low, color: 'var(--warn)' },
    { key: 'out', count: kpis.out, color: 'var(--bad)' },
    { key: 'overstock', count: kpis.over, color: 'var(--info)' },
    { key: 'dead', count: kpis.dead, color: 'var(--ink-3)' }
  ];
  return (
    <div className="card">
      <div className="card-header">
        <h2>{t.health_title}</h2>
      </div>
      <div className="card-body">
        <div style={{ display: 'flex', height: 14, borderRadius: 8, overflow: 'hidden', marginBottom: 16, border: '1px solid var(--border)' }}>
          {groups.map(g => g.count > 0 && (
            <div key={g.key} style={{ width: `${g.count/total*100}%`, background: g.color }} title={`${g.key}: ${g.count}`}></div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {groups.map(g => (
            <div key={g.key} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
              <span style={{ width: 10, height: 10, borderRadius: 3, background: g.color }}></span>
              <span style={{ flex: 1 }}>{t['status_' + g.key] || g.key}</span>
              <span className="t-strong num">{g.count}</span>
            </div>
          ))}
        </div>
        <div className="divider"></div>
        <div className="h-section">{t.abc_title}</div>
        <div style={{ display: 'grid', gap: 10 }}>
          {['A','B','C'].map(k => {
            const val = abc['val' + k] || 0;
            const pct = abc.totalVal ? val / abc.totalVal * 100 : 0;
            return (
              <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <ABCBadge abc={k} />
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, fontWeight: 600, marginBottom: 4 }}>
                    <span>{abc.c[k]} {t.items}</span>
                    <span className="num">{fmtCurrency(val/1000)}k ฿ <span className="t-muted">({pct.toFixed(0)}%)</span></span>
                  </div>
                  <div className="bar"><span style={{ width: pct + '%', background: k === 'A' ? 'var(--accent)' : (k === 'B' ? 'var(--warn)' : 'var(--ink-4)') }}></span></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;