// Suggested actions screen
const { useState: suState, useMemo: suMemo } = React;

function SuggestedActions({ t, lang, role, onOpenDetail, onMovement }) {
  const { state, dispatch } = useStore();
  const toast = useToast();
  const [tab, setTab] = suState('reorder');

  const reorder = suMemo(() => {
    return state.products
      .filter(p => (p.status === 'low' || p.status === 'out') && p.monthlyDemand > 0)
      .filter(p => !state.dismissedSuggestions.has('reorder:' + p.sku))
      .sort((a,b) => b.monthlyRevenue - a.monthlyRevenue);
  }, [state.products, state.dismissedSuggestions]);

  const dead = suMemo(() => {
    return state.products
      .filter(p => p.status === 'dead' && p.onHand > 0)
      .filter(p => !state.dismissedSuggestions.has('dead:' + p.sku))
      .sort((a,b) => (b.onHand * b.unitCost) - (a.onHand * a.unitCost));
  }, [state.products, state.dismissedSuggestions]);

  const crosssell = suMemo(() => {
    // Pair top sellers with similar category items that have stock
    const topSellers = [...state.products].sort((a,b) => b.monthlyRevenue - a.monthlyRevenue).slice(0, 8);
    const pairs = [];
    for (const top of topSellers) {
      const pair = state.products.find(p =>
        p.sku !== top.sku &&
        p.category === top.category &&
        p.onHand > p.reorderPoint &&
        p.status !== 'dead' &&
        !state.dismissedSuggestions.has('xsell:' + top.sku + '+' + p.sku)
      );
      if (pair) pairs.push({ top, pair });
    }
    return pairs;
  }, [state.products, state.dismissedSuggestions]);

  const audit = suMemo(() => {
    return state.anomalies.filter(a => !state.dismissedSuggestions.has('audit:' + a.invoice));
  }, [state.anomalies, state.dismissedSuggestions]);

  const tabs = [
    { key: 'reorder', label: t.sug_reorder, icon: Icon.Receive, count: reorder.length, color: 'var(--warn)', bg: 'var(--warn-soft)' },
    { key: 'dead', label: t.sug_dead, icon: Icon.Clock, count: dead.length, color: 'var(--ink-3)', bg: 'var(--gray-soft)' },
    { key: 'crosssell', label: t.sug_crosssell, icon: Icon.Sparkle, count: crosssell.length, color: 'var(--purple)', bg: 'var(--purple-soft)' },
    { key: 'audit', label: t.sug_audit, icon: Icon.AlertCircle, count: audit.length, color: 'var(--bad)', bg: 'var(--bad-soft)' }
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>{t.sug_title}</h1>
          <div className="page-sub">{t.sug_sub}</div>
        </div>
      </div>

      {/* Tab cards */}
      <div className="grid grid-4" style={{ marginBottom: 20 }}>
        {tabs.map(tb => (
          <button
            key={tb.key}
            onClick={() => setTab(tb.key)}
            className="kpi"
            style={{ textAlign: 'left', cursor: 'pointer', borderColor: tab === tb.key ? tb.color : 'var(--border)', borderWidth: 2, transform: tab === tb.key ? 'translateY(-2px)' : 'none' }}
          >
            <div className="kpi-label">{tb.label}</div>
            <div className="kpi-value">{tb.count}</div>
            <div className="kpi-sub">{tb.count > 0 ? (lang === 'th' ? 'รายการที่ควรพิจารณา' : 'items to review') : (lang === 'th' ? 'ไม่มีรายการ' : 'nothing to do')}</div>
            <div className="kpi-icon" style={{ background: tb.bg, color: tb.color }}>
              <tb.icon className="icon icon-sm" />
            </div>
          </button>
        ))}
      </div>

      {tab === 'reorder' && <ReorderList items={reorder} t={t} lang={lang} role={role} onOpenDetail={onOpenDetail} onMovement={onMovement} onDismiss={(p) => { dispatch({ type: 'DISMISS_SUGGESTION', key: 'reorder:' + p.sku }); toast(lang==='th'?'ซ่อนแล้ว':'Dismissed'); }} />}
      {tab === 'dead' && <DeadList items={dead} t={t} lang={lang} onOpenDetail={onOpenDetail} onDismiss={(p) => { dispatch({ type: 'DISMISS_SUGGESTION', key: 'dead:' + p.sku }); toast(lang==='th'?'ซ่อนแล้ว':'Dismissed'); }} />}
      {tab === 'crosssell' && <CrosssellList items={crosssell} t={t} lang={lang} onOpenDetail={onOpenDetail} onDismiss={(c) => { dispatch({ type: 'DISMISS_SUGGESTION', key: 'xsell:' + c.top.sku + '+' + c.pair.sku }); toast(lang==='th'?'ซ่อนแล้ว':'Dismissed'); }} />}
      {tab === 'audit' && <AuditList items={audit} t={t} lang={lang} onDismiss={(a) => { dispatch({ type: 'DISMISS_SUGGESTION', key: 'audit:' + a.invoice }); toast(lang==='th'?'ซ่อนแล้ว':'Dismissed'); }} />}
    </div>
  );
}

function ReorderList({ items, t, lang, role, onOpenDetail, onMovement, onDismiss }) {
  if (items.length === 0) return <EmptyState t={t} lang={lang} icon={<Icon.Check />} title={lang==='th'?'ไม่มีรายการต้องสั่งเพิ่ม':'No items need reordering'} />;
  return (
    <div className="grid grid-2">
      {items.map(p => {
        const suggestQty = Math.max(p.reorderPoint * 2 - p.onHand, p.monthlyDemand);
        return (
          <div key={p.sku} className="card">
            <div className="card-body">
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--warn-soft)', color: 'var(--warn)', display: 'grid', placeItems: 'center', flex: '0 0 44px' }}>
                  <Icon.Receive />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row" style={{ gap: 6 }}>
                    <ABCBadge abc={p.abc} />
                    <span className="mono t-muted" style={{ fontSize: 12 }}>{p.sku}</span>
                    <StatusPill status={p.status} t={t} />
                  </div>
                  <div style={{ fontWeight: 700, fontSize: 15, marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{(lang === 'th' ? p.nameTh : p.nameEn) || p.nameEn || p.sku}</div>
                  <div className="t-muted" style={{ fontSize: 12.5, marginTop: 4 }}>{t.sug_reorder_desc}</div>
                </div>
                <button className="btn-icon btn-ghost" onClick={() => onDismiss(p)} title={t.sug_dismiss}><Icon.X className="icon icon-sm" /></button>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 16, padding: 12, background: 'var(--surface-2)', borderRadius: 10 }}>
                <div>
                  <div className="kpi-label" style={{ fontSize: 11 }}>{t.col_onhand}</div>
                  <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--bad)' }}>{p.onHand}</div>
                </div>
                <div>
                  <div className="kpi-label" style={{ fontSize: 11 }}>{lang === 'th' ? 'ขาย/เดือน' : 'Demand/mo'}</div>
                  <div style={{ fontSize: 18, fontWeight: 700 }}>{p.monthlyDemand}</div>
                </div>
                <div>
                  <div className="kpi-label" style={{ fontSize: 11 }}>{lang === 'th' ? 'แนะนำสั่ง' : 'Suggested'}</div>
                  <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>{suggestQty}</div>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                <button className="btn" onClick={() => onOpenDetail(p)} style={{ flex: 1 }}>{t.action_view}</button>
                {role !== 'sales' && <button className="btn btn-primary" onClick={() => onMovement('in', p)} style={{ flex: 1 }}><Icon.Receive className="icon icon-sm" />{t.action_receive}</button>}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function DeadList({ items, t, lang, onOpenDetail, onDismiss }) {
  if (items.length === 0) return <EmptyState t={t} lang={lang} icon={<Icon.Check />} title={lang==='th'?'ไม่มีสินค้านิ่ง':'No dead stock'} />;
  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      <table className="tbl">
        <thead><tr>
          <th>{t.col_sku}</th>
          <th>{t.col_name}</th>
          <th className="num">{t.col_onhand}</th>
          <th className="num">{t.col_value}</th>
          <th>{t.col_lastsold}</th>
          <th></th>
        </tr></thead>
        <tbody>
          {items.slice(0, 40).map(p => (
            <tr key={p.sku} onClick={() => onOpenDetail(p)}>
              <td className="mono">{p.sku}</td>
              <td>{(lang === 'th' ? p.nameTh : p.nameEn) || p.nameEn}</td>
              <td className="num">{p.onHand} {p.unit}</td>
              <td className="num t-strong">{fmtCurrency(p.onHand * p.unitCost)} ฿</td>
              <td className="t-muted">{p.lastSold ? p.daysSinceSold + ' ' + t.days_ago : t.never}</td>
              <td onClick={(e) => e.stopPropagation()}>
                <button className="btn btn-ghost" onClick={() => onDismiss(p)}><Icon.X className="icon icon-sm" /> {t.sug_dismiss}</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function CrosssellList({ items, t, lang, onOpenDetail, onDismiss }) {
  if (items.length === 0) return <EmptyState t={t} lang={lang} icon={<Icon.Sparkle />} title={lang==='th'?'ยังไม่มีคำแนะนำ':'No suggestions yet'} />;
  return (
    <div className="grid grid-2">
      {items.map((c, i) => (
        <div key={i} className="card">
          <div className="card-body">
            <div className="row" style={{ marginBottom: 10 }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--purple-soft)', color: 'var(--purple)', display: 'grid', placeItems: 'center' }}>
                <Icon.Sparkle />
              </div>
              <span style={{ fontWeight: 700 }}>{t.sug_crosssell}</span>
              <span className="spacer"></span>
              <button className="btn-icon btn-ghost" onClick={() => onDismiss(c)}><Icon.X className="icon icon-sm" /></button>
            </div>
            <div className="t-muted" style={{ fontSize: 12.5, marginBottom: 14 }}>{t.sug_crosssell_desc}</div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <PairItem p={c.top} lang={lang} label={lang === 'th' ? 'ขายดี' : 'Top'} accent="ok" onClick={() => onOpenDetail(c.top)} />
              <Icon.Plus className="icon" style={{ color: 'var(--ink-4)' }} />
              <PairItem p={c.pair} lang={lang} label={lang === 'th' ? 'พ่วงขาย' : 'Pair'} accent="purple" onClick={() => onOpenDetail(c.pair)} />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function PairItem({ p, lang, label, accent, onClick }) {
  const bg = accent === 'ok' ? 'var(--ok-soft)' : 'var(--purple-soft)';
  const color = accent === 'ok' ? 'var(--ok)' : 'var(--purple)';
  return (
    <div onClick={onClick} style={{ flex: 1, padding: 10, borderRadius: 10, border: '1px solid var(--border)', cursor: 'pointer', minWidth: 0 }}>
      <div className="chip" style={{ background: bg, color, marginBottom: 6 }}>{label}</div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{p.sku}</div>
      <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>
  );
}

function AuditList({ items, t, lang, onDismiss }) {
  if (items.length === 0) return <EmptyState t={t} lang={lang} icon={<Icon.Check />} title={lang==='th'?'ไม่มีรายการต้องตรวจสอบ':'No anomalies'} />;
  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      {items.slice(0, 30).map((a, i) => (
        <div key={i} className="alert bad" style={{ borderRadius: 0, borderLeft: 0, borderRight: 0, borderTop: i === 0 ? 0 : '1px solid var(--border)', borderBottom: 0 }}>
          <div className="icon-circle"><Icon.AlertCircle className="icon icon-sm" /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="alert-title">{a.type} · <span className="mono">{a.invoice}</span></div>
            <div className="alert-body">{a.message}</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn-ghost">{t.sug_review}</button>
            <button className="btn-icon btn-ghost" onClick={() => onDismiss(a)}><Icon.X className="icon icon-sm" /></button>
          </div>
        </div>
      ))}
    </div>
  );
}

function EmptyState({ t, lang, icon, title }) {
  return (
    <div className="card">
      <div className="empty">
        <div className="empty-icon" style={{ background: 'var(--ok-soft)', color: 'var(--ok)' }}>{icon}</div>
        <h3>{title}</h3>
        <div className="t-muted">{lang === 'th' ? 'เยี่ยมมาก! ทุกอย่างอยู่ในความเรียบร้อย' : 'Nicely done — nothing to act on'}</div>
      </div>
    </div>
  );
}

window.SuggestedActions = SuggestedActions;