// Stock list — search, filter, bulk, inline edit, flag, prioritize
const { useState: sUseState, useMemo: sUseMemo, useRef: sUseRef, useEffect: sUseEffect } = React;

const CATEGORIES = ['all', 'service', 'packaging', 'parts', 'equipment', 'consumables', 'other'];
const STATUSES = ['all', 'attention', 'out', 'low', 'ok', 'overstock', 'dead', 'service'];

function StockList({ t, lang, role, density, initialFilter, focusSku, onOpenDetail, onMovement }) {
  const { state, dispatch } = useStore();
  const toast = useToast();
  const products = state.products;

  const [query, setQuery] = sUseState('');
  const [statusFilter, setStatusFilter] = sUseState(initialFilter === 'attention' ? 'attention' : (initialFilter === 'dead' ? 'dead' : 'all'));
  const [catFilter, setCatFilter] = sUseState('all');
  const [abcFilter, setAbcFilter] = sUseState('all');
  const [sortKey, setSortKey] = sUseState('monthlyRevenue');
  const [sortDir, setSortDir] = sUseState('desc');
  const [selected, setSelected] = sUseState(new Set());
  const [addOpen, setAddOpen] = sUseState(false);
  const [confirmDelete, setConfirmDelete] = sUseState(null);

  sUseEffect(() => {
    if (initialFilter === 'attention') setStatusFilter('attention');
    else if (initialFilter === 'dead') setStatusFilter('dead');
  }, [initialFilter]);

  const filtered = sUseMemo(() => {
    const q = query.trim().toLowerCase();
    let list = products.filter(p => {
      if (q && !(p.sku.toLowerCase().includes(q) || (p.nameEn||'').toLowerCase().includes(q) || (p.nameTh||'').includes(q))) return false;
      if (catFilter !== 'all' && p.category !== catFilter) return false;
      if (abcFilter !== 'all' && p.abc !== abcFilter) return false;
      if (statusFilter === 'attention') {
        if (p.status !== 'low' && p.status !== 'out') return false;
      } else if (statusFilter !== 'all' && p.status !== statusFilter) return false;
      return true;
    });
    list.sort((a, b) => {
      let av = a[sortKey], bv = b[sortKey];
      if (sortKey === 'name') { av = (lang === 'th' ? a.nameTh : a.nameEn) || a.sku; bv = (lang === 'th' ? b.nameTh : b.nameEn) || b.sku; }
      if (sortKey === 'value') { av = a.onHand * a.unitCost; bv = b.onHand * b.unitCost; }
      if (typeof av === 'string') return sortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
      return sortDir === 'asc' ? (av - bv) : (bv - av);
    });
    return list;
  }, [products, query, statusFilter, catFilter, abcFilter, sortKey, sortDir, lang]);

  // Focus row when navigated to
  sUseEffect(() => {
    if (focusSku) {
      const el = document.querySelector(`[data-sku="${focusSku}"]`);
      if (el) el.scrollIntoView({ block: 'center' });
    }
  }, [focusSku]);

  function toggleSort(key) {
    if (sortKey === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortKey(key); setSortDir('desc'); }
  }

  function toggleSelect(sku) {
    const s = new Set(selected);
    if (s.has(sku)) s.delete(sku); else s.add(sku);
    setSelected(s);
  }
  function selectAll() {
    if (selected.size === filtered.length) setSelected(new Set());
    else setSelected(new Set(filtered.map(p => p.sku)));
  }
  function clearFilters() {
    setQuery(''); setStatusFilter('all'); setCatFilter('all'); setAbcFilter('all');
  }
  function applyBulk(action) {
    const skus = [...selected];
    if (action === 'flag') {
      dispatch({ type: 'FLAG_PRODUCTS', skus, flag: 'review' });
      toast(t.toast_flagged);
    } else if (action === 'priority') {
      dispatch({ type: 'SET_PRIORITY', skus, priority: 'high' });
      toast(t.toast_saved);
    } else if (action === 'delete') {
      setConfirmDelete({ skus });
      return;
    } else if (action === 'export') {
      toast(lang === 'th' ? 'ส่งออก ' + skus.length + ' รายการแล้ว' : 'Exported ' + skus.length + ' items');
    }
    setSelected(new Set());
  }

  return (
    <div className="page" style={{ paddingTop: 20 }}>
      <div className="page-head">
        <div>
          <h1>{t.stock_title}</h1>
          <div className="page-sub">{t.stock_sub} · {fmtThousands(products.length)} {t.items}</div>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={() => toast(lang === 'th' ? 'ส่งออกแล้ว' : 'Exported')}>
            <Icon.Download className="icon icon-sm" /> {t.bulk_export}
          </button>
          <button className="btn btn-primary" onClick={() => setAddOpen(true)}>
            <Icon.Plus className="icon icon-sm" /> {t.add_item}
          </button>
        </div>
      </div>

      {/* Toolbar */}
      <div className="card" style={{ overflow: 'hidden' }}>
        <div className="toolbar">
          <div className="search" style={{ width: 280 }}>
            <Icon.Search className="icon icon-sm" />
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder={t.search_placeholder} />
            {query && <button className="btn-ghost" onClick={() => setQuery('')} style={{ padding: 0 }}><Icon.X className="icon icon-sm" /></button>}
          </div>
          <FilterChips
            options={STATUSES.map(s => ({ key: s, label: s === 'all' ? t.filter_all : (s === 'attention' ? (lang === 'th' ? 'ต้องดูแล' : 'Attention') : (t['filter_'+s] || s)) }))}
            value={statusFilter}
            onChange={setStatusFilter}
          />
          <span className="spacer"></span>
          <Dropdown
            label={catFilter === 'all' ? t.filter_category : catLabel(catFilter, t)}
            options={CATEGORIES.map(c => ({ key: c, label: c === 'all' ? t.filter_all : catLabel(c, t) }))}
            value={catFilter}
            onChange={setCatFilter}
          />
          <Dropdown
            label={abcFilter === 'all' ? t.filter_abc : 'Class ' + abcFilter}
            options={[{ key:'all', label: t.filter_all }, { key:'A', label:'Class A' }, { key:'B', label:'Class B' }, { key:'C', label:'Class C' }]}
            value={abcFilter}
            onChange={setAbcFilter}
          />
          {(query || statusFilter !== 'all' || catFilter !== 'all' || abcFilter !== 'all') && (
            <button className="btn btn-ghost" onClick={clearFilters}><Icon.X className="icon icon-sm" />{t.filter_clear}</button>
          )}
        </div>

        {selected.size > 0 && (
          <div className="bulk-bar">
            <Icon.Check className="icon icon-sm" />
            <span>{t.selected_count.replace('{n}', selected.size)}</span>
            <span className="spacer"></span>
            <button className="btn btn-ghost" onClick={() => applyBulk('flag')}><Icon.Flag className="icon icon-sm" /> {t.bulk_flag}</button>
            <button className="btn btn-ghost" onClick={() => applyBulk('priority')}><Icon.Sparkle className="icon icon-sm" /> {t.bulk_priority}</button>
            <button className="btn btn-ghost" onClick={() => applyBulk('export')}><Icon.Download className="icon icon-sm" /> {t.bulk_export_csv}</button>
            {role !== 'sales' && <button className="btn btn-ghost" onClick={() => applyBulk('delete')} style={{ color: 'var(--bad)' }}><Icon.Trash className="icon icon-sm" /> {t.bulk_delete}</button>}
            <button className="btn btn-ghost" onClick={() => setSelected(new Set())}>{t.bulk_clear}</button>
          </div>
        )}

        <div style={{ overflowX: 'auto', maxHeight: 'calc(100vh - 340px)', overflowY: 'auto' }}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 36 }}>
                  <input
                    type="checkbox"
                    className="checkbox"
                    checked={selected.size > 0 && selected.size === filtered.length}
                    ref={el => { if (el) el.indeterminate = selected.size > 0 && selected.size < filtered.length; }}
                    onChange={selectAll}
                  />
                </th>
                <SortHeader col="sku" label={t.col_sku} onSort={toggleSort} sortKey={sortKey} sortDir={sortDir} />
                <SortHeader col="name" label={t.col_name} onSort={toggleSort} sortKey={sortKey} sortDir={sortDir} />
                <th>{t.col_category}</th>
                <SortHeader col="onHand" label={t.col_onhand} onSort={toggleSort} sortKey={sortKey} sortDir={sortDir} className="num" />
                <SortHeader col="reserved" label={t.col_reserved} onSort={toggleSort} sortKey={sortKey} sortDir={sortDir} className="num" />
                <SortHeader col="value" label={t.col_value} onSort={toggleSort} sortKey={sortKey} sortDir={sortDir} className="num" />
                <th>{t.col_status}</th>
                <th>{t.col_abc}</th>
                <th style={{ width: 60 }}></th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr><td colSpan={10}>
                  <div className="empty">
                    <div className="empty-icon"><Icon.Search /></div>
                    <h3>{t.no_results}</h3>
                    <div>{t.no_results_sub}</div>
                  </div>
                </td></tr>
              )}
              {filtered.slice(0, 200).map(p => (
                <ProductRow
                  key={p.sku}
                  p={p}
                  t={t}
                  lang={lang}
                  role={role}
                  selected={selected.has(p.sku)}
                  onToggleSelect={() => toggleSelect(p.sku)}
                  onOpenDetail={() => onOpenDetail(p)}
                  onMovement={(type) => onMovement(type, p)}
                  onUpdate={(patch) => dispatch({ type: 'UPDATE_PRODUCT', sku: p.sku, patch })}
                  onDelete={() => setConfirmDelete({ skus: [p.sku] })}
                />
              ))}
              {filtered.length > 200 && (
                <tr><td colSpan={10} style={{ textAlign: 'center', color: 'var(--ink-3)' }}>
                  {lang === 'th' ? `แสดง 200 จาก ${filtered.length} รายการ — ใช้ตัวกรองเพื่อค้นหาเพิ่มเติม` : `Showing 200 of ${filtered.length} — use filters to narrow down`}
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {addOpen && <AddItemModal t={t} lang={lang} onClose={() => setAddOpen(false)} onSave={(prod) => {
        dispatch({ type: 'ADD_PRODUCT', product: prod });
        setAddOpen(false);
        toast(t.toast_saved);
      }} />}

      {confirmDelete && (
        <ConfirmModal
          t={t}
          title={t.confirm_delete_title}
          body={t.confirm_delete_body + ' (' + confirmDelete.skus.length + ' ' + t.items + ')'}
          onClose={() => setConfirmDelete(null)}
          onConfirm={() => {
            dispatch({ type: 'DELETE_PRODUCTS', skus: confirmDelete.skus });
            setSelected(new Set());
            setConfirmDelete(null);
            toast(t.toast_deleted);
          }}
        />
      )}
    </div>
  );
}

function SortHeader({ col, label, onSort, sortKey, sortDir, className }) {
  return (
    <th className={className} onClick={() => onSort(col)} style={{ cursor: 'pointer', userSelect: 'none' }}>
      <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
        {label}
        {sortKey === col && (sortDir === 'asc' ? <Icon.ArrowUp className="icon icon-sm" /> : <Icon.ArrowDown className="icon icon-sm" />)}
      </span>
    </th>
  );
}

function FilterChips({ options, value, onChange }) {
  return (
    <div className="segmented">
      {options.map(o => (
        <button key={o.key} className={value === o.key ? 'active' : ''} onClick={() => onChange(o.key)}>{o.label}</button>
      ))}
    </div>
  );
}

function Dropdown({ label, options, value, onChange }) {
  const [open, setOpen] = sUseState(false);
  const ref = sUseRef();
  useOutsideClick(ref, () => setOpen(false));
  return (
    <div style={{ position: 'relative' }} ref={ref}>
      <button className="btn" onClick={() => setOpen(o => !o)}>
        {label} <Icon.ArrowDown className="icon icon-sm" />
      </button>
      {open && (
        <div className="menu" style={{ top: 44, right: 0 }}>
          {options.map(o => (
            <button key={o.key} onClick={() => { onChange(o.key); setOpen(false); }}>
              {value === o.key && <Icon.Check className="icon icon-sm" />}
              <span style={{ marginLeft: value === o.key ? 0 : 26 }}>{o.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function ProductRow({ p, t, lang, role, selected, onToggleSelect, onOpenDetail, onMovement, onUpdate, onDelete }) {
  const [menuOpen, setMenuOpen] = sUseState(false);
  const [editingCost, setEditingCost] = sUseState(false);
  const menuRef = sUseRef();
  useOutsideClick(menuRef, () => setMenuOpen(false));
  const available = Math.max(0, p.onHand - p.reserved);
  const value = p.onHand * p.unitCost;
  const flashed = p._flashed && (Date.now() - p._flashed < 1500);
  return (
    <tr className={selected ? 'selected' : ''} data-sku={p.sku}>
      <td onClick={(e) => e.stopPropagation()}>
        <input type="checkbox" className="checkbox" checked={selected} onChange={onToggleSelect} />
      </td>
      <td className="mono" onClick={onOpenDetail}>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          {p.sku}
          {p.flags && p.flags.includes('review') && <Icon.Flag className="icon icon-sm" style={{ color: 'var(--warn)' }} />}
          {p.priority === 'high' && <span title="High priority" style={{ color: 'var(--bad)', fontWeight: 700 }}>★</span>}
        </div>
      </td>
      <td onClick={onOpenDetail} style={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        <div style={{ fontWeight: 600 }}>{(lang === 'th' ? p.nameTh : p.nameEn) || p.nameEn || p.rawName || '—'}</div>
        {(lang === 'th' && p.nameEn) && <div className="t-muted" style={{ fontSize: 11.5 }}>{p.nameEn}</div>}
      </td>
      <td onClick={onOpenDetail}><span className="chip">{catLabel(p.category, t)}</span></td>
      <td className={"num " + (flashed ? 'flash' : '')} onClick={onOpenDetail}>
        <div style={{ fontWeight: 700 }}>{fmtThousands(p.onHand)}</div>
        <div className="t-muted" style={{ fontSize: 11 }}>{p.unit}</div>
      </td>
      <td className="num t-muted" onClick={onOpenDetail}>{fmtThousands(p.reserved)}</td>
      <td className="num" onClick={(e) => { if (role !== 'sales') { e.stopPropagation(); setEditingCost(true); } else onOpenDetail(); }}>
        {editingCost ? (
          <input
            className="input"
            type="number"
            defaultValue={p.unitCost}
            autoFocus
            onBlur={(e) => { onUpdate({ unitCost: Number(e.target.value)||0 }); setEditingCost(false); }}
            onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') setEditingCost(false); }}
            style={{ width: 90, textAlign: 'right' }}
          />
        ) : (
          <>
            <div style={{ fontWeight: 600 }}>{fmtCurrency(value)}</div>
            <div className="t-muted" style={{ fontSize: 11 }}>{fmtCurrency(p.unitCost)} {lang === 'th' ? '/หน่วย' : '/unit'}</div>
          </>
        )}
      </td>
      <td onClick={onOpenDetail}><StatusPill status={p.status} t={t} /></td>
      <td onClick={onOpenDetail}><ABCBadge abc={p.abc} /></td>
      <td onClick={(e) => e.stopPropagation()} style={{ position: 'relative' }}>
        <div ref={menuRef}>
          <button className="btn-icon btn-ghost" onClick={() => setMenuOpen(o => !o)}>
            <Icon.More className="icon icon-sm" />
          </button>
          {menuOpen && (
            <div className="menu" style={{ right: 8, top: 40 }}>
              <button onClick={() => { onOpenDetail(); setMenuOpen(false); }}><Icon.Box className="icon icon-sm" />{t.action_view}</button>
              {p.category !== 'service' && (
                <>
                  <button onClick={() => { onMovement('in'); setMenuOpen(false); }}><Icon.Receive className="icon icon-sm" />{t.action_receive}</button>
                  <button onClick={() => { onMovement('out'); setMenuOpen(false); }}><Icon.Issue className="icon icon-sm" />{t.action_issue}</button>
                  <button onClick={() => { onMovement('adjust'); setMenuOpen(false); }}><Icon.Adjust className="icon icon-sm" />{t.action_adjust}</button>
                  <div className="sep"></div>
                </>
              )}
              <button onClick={() => { onUpdate({ flags: p.flags && p.flags.includes('review') ? p.flags.filter(f=>f!=='review') : [...(p.flags||[]),'review'] }); setMenuOpen(false); }}><Icon.Flag className="icon icon-sm" />{t.action_flag}</button>
              <button onClick={() => { onUpdate({ priority: p.priority === 'high' ? 'normal' : 'high' }); setMenuOpen(false); }}><Icon.Sparkle className="icon icon-sm" />{t.action_priority}</button>
              {role !== 'sales' && (
                <>
                  <div className="sep"></div>
                  <button onClick={() => { onDelete(); setMenuOpen(false); }} style={{ color: 'var(--bad)' }}><Icon.Trash className="icon icon-sm" />{t.action_delete}</button>
                </>
              )}
            </div>
          )}
        </div>
      </td>
    </tr>
  );
}

// ---- Modals (Add / Confirm) ----
function AddItemModal({ t, lang, onClose, onSave }) {
  const [form, setForm] = sUseState({ sku: '', nameTh: '', nameEn: '', unit: 'PIECE', category: 'other', onHand: 0, unitCost: 0, reorderPoint: 0 });
  const [errors, setErrors] = sUseState({});

  function submit() {
    const e = {};
    if (!form.sku.trim()) e.sku = t.required;
    if (!form.nameTh.trim() && !form.nameEn.trim()) e.nameEn = t.required;
    setErrors(e);
    if (Object.keys(e).length) return;
    onSave({
      ...form,
      onHand: Number(form.onHand) || 0,
      reserved: 0,
      unitCost: Number(form.unitCost) || 0,
      avgPrice: Number(form.unitCost) || 0,
      reorderPoint: Number(form.reorderPoint) || 0,
      monthlyDemand: 0,
      monthlyRevenue: 0,
      monthlyLineCount: 0,
      customerCount: 0,
      daysSinceSold: 999,
      lastSold: null,
      abc: 'C',
      priority: 'normal',
      flags: [],
      status: form.category === 'service' ? 'service' : (Number(form.onHand) === 0 ? 'out' : 'ok')
    });
  }

  return (
    <>
      <div className="modal-backdrop" onClick={onClose}></div>
      <div className="modal">
        <div className="modal-header">
          <Icon.Plus className="icon" style={{ color: 'var(--accent)' }} />
          <h2>{t.add_item}</h2>
          <span className="spacer"></span>
          <button className="btn-icon btn-ghost" onClick={onClose}><Icon.X className="icon" /></button>
        </div>
        <div className="modal-body">
          <div style={{ display: 'grid', gap: 14 }}>
            <div className="field">
              <label>{t.form_sku}</label>
              <input className={"input " + (errors.sku ? 'input-err' : '')} value={form.sku} onChange={e => setForm({ ...form, sku: e.target.value })} placeholder="e.g. PC-XX-001" />
              {errors.sku && <div className="field-error">{errors.sku}</div>}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div className="field">
                <label>{t.form_name_th}</label>
                <input className="input" value={form.nameTh} onChange={e => setForm({ ...form, nameTh: e.target.value })} />
              </div>
              <div className="field">
                <label>{t.form_name_en}</label>
                <input className={"input " + (errors.nameEn ? 'input-err' : '')} value={form.nameEn} onChange={e => setForm({ ...form, nameEn: e.target.value })} />
                {errors.nameEn && <div className="field-error">{errors.nameEn}</div>}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              <div className="field">
                <label>{t.form_category}</label>
                <select className="select" value={form.category} onChange={e => setForm({ ...form, category: e.target.value })}>
                  {CATEGORIES.filter(c => c !== 'all').map(c => <option key={c} value={c}>{catLabel(c, t)}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t.form_unit}</label>
                <select className="select" value={form.unit} onChange={e => setForm({ ...form, unit: e.target.value })}>
                  {['PIECE','PACK','UNIT','ROLL','BOX','KG','SET'].map(u => <option key={u} value={u}>{u}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t.form_priority}</label>
                <select className="select" defaultValue="normal">
                  <option value="high">{t.priority_high}</option>
                  <option value="normal">{t.priority_normal}</option>
                  <option value="low">{t.priority_low}</option>
                </select>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              <div className="field">
                <label>{t.form_onhand}</label>
                <input className="input" type="number" value={form.onHand} onChange={e => setForm({ ...form, onHand: e.target.value })} />
              </div>
              <div className="field">
                <label>{t.form_unitcost} (THB)</label>
                <input className="input" type="number" value={form.unitCost} onChange={e => setForm({ ...form, unitCost: e.target.value })} />
              </div>
              <div className="field">
                <label>{t.form_reorder}</label>
                <input className="input" type="number" value={form.reorderPoint} onChange={e => setForm({ ...form, reorderPoint: e.target.value })} />
              </div>
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>{t.cancel}</button>
          <button className="btn btn-primary" onClick={submit}>{t.save}</button>
        </div>
      </div>
    </>
  );
}

function ConfirmModal({ t, title, body, onClose, onConfirm }) {
  return (
    <>
      <div className="modal-backdrop" onClick={onClose}></div>
      <div className="modal" style={{ width: 420 }}>
        <div className="modal-header">
          <Icon.Warning className="icon" style={{ color: 'var(--bad)' }} />
          <h2>{title}</h2>
        </div>
        <div className="modal-body">{body}</div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>{t.cancel}</button>
          <button className="btn btn-danger" onClick={onConfirm}>{t.confirm}</button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { StockList, ConfirmModal });