// Stock movement screen + standalone Movement modal
const { useState: mvState, useMemo: mvMemo } = React;

function MovementModal({ initialType, initialProduct, t, lang, onClose }) {
  const { state, dispatch } = useStore();
  const toast = useToast();
  const [type, setType] = mvState(initialType || 'in');
  const [product, setProduct] = mvState(initialProduct || null);
  const [search, setSearch] = mvState('');
  const [qty, setQty] = mvState(1);
  const [reason, setReason] = mvState('');
  const [reference, setReference] = mvState('');
  const [errors, setErrors] = mvState({});

  const candidates = mvMemo(() => {
    if (!search.trim()) return [];
    const q = search.toLowerCase();
    return state.products.filter(p =>
      p.sku.toLowerCase().includes(q) ||
      (p.nameEn||'').toLowerCase().includes(q) ||
      (p.nameTh||'').includes(q)
    ).slice(0, 8);
  }, [search, state.products]);

  const reasonsByType = {
    in: lang === 'th' ? ['ซื้อเข้า', 'รับคืนจากลูกค้า', 'โอนระหว่างคลัง', 'อื่นๆ'] : ['Purchase received', 'Customer return', 'Internal transfer', 'Other'],
    out: lang === 'th' ? ['ขาย', 'ตัวอย่าง / Sample', 'ของเสีย', 'โอนระหว่างคลัง'] : ['Sale', 'Sample', 'Damaged/Waste', 'Internal transfer'],
    adjust: lang === 'th' ? ['ตรวจนับประจำเดือน', 'พบสต๊อกเพิ่ม', 'พบสต๊อกขาด', 'อื่นๆ'] : ['Monthly count', 'Found extra', 'Found missing', 'Other']
  };

  function submit() {
    const e = {};
    if (!product) e.product = t.required;
    if (qty <= 0 && type !== 'adjust') e.qty = t.required;
    if (type === 'adjust' && qty < 0) e.qty = t.required;
    if (!reason.trim()) e.reason = t.required;
    setErrors(e);
    if (Object.keys(e).length) return;
    dispatch({ type: 'RECORD_MOVEMENT', movement: {
      id: 'mv-' + Date.now(),
      date: new Date().toISOString().slice(0, 10),
      type,
      sku: product.sku,
      name: (lang === 'th' ? product.nameTh : product.nameEn) || product.nameEn,
      qty: Number(qty),
      unit: product.unit,
      reason,
      reference,
      actor: 'You'
    }});
    toast(t.toast_moved);
    onClose();
  }

  let after = product ? product.onHand : 0;
  if (product) {
    if (type === 'in') after = product.onHand + Number(qty);
    else if (type === 'out') after = product.onHand - Number(qty);
    else after = Number(qty);
  }

  const typeOptions = [
    { key: 'in', label: t.move_type_in, icon: <Icon.Receive className="icon icon-sm" />, color: 'var(--ok)', bg: 'var(--ok-soft)' },
    { key: 'out', label: t.move_type_out, icon: <Icon.Issue className="icon icon-sm" />, color: 'var(--info)', bg: 'var(--info-soft)' },
    { key: 'adjust', label: t.move_type_adjust, icon: <Icon.Adjust className="icon icon-sm" />, color: 'var(--warn)', bg: 'var(--warn-soft)' }
  ];

  return (
    <>
      <div className="modal-backdrop" onClick={onClose}></div>
      <div className="modal" style={{ width: 600 }}>
        <div className="modal-header">
          <Icon.Move className="icon" style={{ color: 'var(--accent)' }} />
          <h2>{t.move_title}</h2>
          <span className="spacer"></span>
          <button className="btn-icon btn-ghost" onClick={onClose}><Icon.X className="icon" /></button>
        </div>
        <div className="modal-body" style={{ display: 'grid', gap: 16 }}>
          {/* Type selector */}
          <div>
            <div className="field" style={{ marginBottom: 8 }}><label>{t.move_type}</label></div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {typeOptions.map(o => (
                <button
                  key={o.key}
                  onClick={() => setType(o.key)}
                  className="btn btn-lg"
                  style={{
                    flexDirection: 'column',
                    gap: 6,
                    padding: '16px 12px',
                    background: type === o.key ? o.bg : 'var(--surface)',
                    color: type === o.key ? o.color : 'var(--ink-2)',
                    borderColor: type === o.key ? o.color : 'var(--border)',
                    borderWidth: 2,
                    fontWeight: 700
                  }}
                >
                  {o.icon}
                  <span>{o.label}</span>
                </button>
              ))}
            </div>
          </div>

          {/* Product selector */}
          <div className="field">
            <label>{t.move_select_item}</label>
            {product ? (
              <div className="card" style={{ padding: 12, display: 'flex', gap: 10, alignItems: 'center' }}>
                <ABCBadge abc={product.abc} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600 }}>{(lang === 'th' ? product.nameTh : product.nameEn) || product.nameEn || product.sku}</div>
                  <div className="t-muted mono" style={{ fontSize: 12 }}>{product.sku} · {t.move_current}: {fmtThousands(product.onHand)} {product.unit}</div>
                </div>
                <button className="btn btn-ghost" onClick={() => { setProduct(null); setSearch(''); }}><Icon.X className="icon icon-sm" /></button>
              </div>
            ) : (
              <div style={{ position: 'relative' }}>
                <div className="search" style={{ width: 'auto' }}>
                  <Icon.Search className="icon icon-sm" />
                  <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t.search_placeholder} autoFocus />
                </div>
                {candidates.length > 0 && (
                  <div className="menu" style={{ position: 'absolute', top: 48, left: 0, right: 0, maxHeight: 280, overflowY: 'auto' }}>
                    {candidates.map(p => (
                      <button key={p.sku} onClick={() => { setProduct(p); setSearch(''); }} style={{ alignItems: 'flex-start' }}>
                        <div style={{ flex: 1, textAlign: 'left' }}>
                          <div style={{ fontWeight: 600 }}>{(lang === 'th' ? p.nameTh : p.nameEn) || p.nameEn || p.sku}</div>
                          <div className="t-muted mono" style={{ fontSize: 11 }}>{p.sku} · {fmtThousands(p.onHand)} {p.unit} {lang === 'th' ? 'คงเหลือ' : 'on hand'}</div>
                        </div>
                      </button>
                    ))}
                  </div>
                )}
                {errors.product && <div className="field-error">{errors.product}</div>}
              </div>
            )}
          </div>

          {/* Qty */}
          {product && (
            <div className="field">
              <label>{type === 'adjust' ? (lang === 'th' ? 'จำนวนใหม่หลังตรวจนับ' : 'New on-hand quantity') : t.move_qty}</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div className="qty">
                  <button onClick={() => setQty(Math.max(0, Number(qty) - 1))}><Icon.Minus className="icon icon-sm" /></button>
                  <input type="number" value={qty} onChange={e => setQty(e.target.value)} />
                  <button onClick={() => setQty(Number(qty) + 1)}><Icon.Plus className="icon icon-sm" /></button>
                </div>
                <span className="t-muted">{product.unit}</span>
                <div className="spacer"></div>
                <div style={{ textAlign: 'right' }}>
                  <div className="t-muted" style={{ fontSize: 12 }}>{t.move_after}</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: after < 0 ? 'var(--bad)' : 'var(--accent)' }}>
                    {fmtThousands(after)} {product.unit}
                  </div>
                </div>
              </div>
              {after < 0 && <div className="field-error">{lang === 'th' ? 'จำนวนหลังทำรายการต้องไม่น้อยกว่า 0' : 'Resulting quantity cannot be negative'}</div>}
              {errors.qty && <div className="field-error">{errors.qty}</div>}
            </div>
          )}

          {/* Reason */}
          {product && (
            <div className="field">
              <label>{t.move_reason}</label>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 8 }}>
                {reasonsByType[type].map(r => (
                  <button key={r} className="chip" onClick={() => setReason(r)} style={{ cursor: 'pointer', background: reason === r ? 'var(--accent-soft)' : 'var(--gray-soft)', color: reason === r ? 'var(--accent-strong)' : 'var(--ink-2)' }}>{r}</button>
                ))}
              </div>
              <input className={"input " + (errors.reason ? 'input-err' : '')} value={reason} onChange={e => setReason(e.target.value)} placeholder={lang === 'th' ? 'พิมพ์เหตุผล...' : 'Type a reason...'} />
              {errors.reason && <div className="field-error">{errors.reason}</div>}
            </div>
          )}

          {/* Reference */}
          {product && (
            <div className="field">
              <label>{t.move_reference} ({lang === 'th' ? 'ไม่บังคับ' : 'optional'})</label>
              <input className="input" value={reference} onChange={e => setReference(e.target.value)} placeholder="PO / SO / IV" />
            </div>
          )}
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>{t.cancel}</button>
          <button className="btn btn-primary" onClick={submit} disabled={!product || after < 0}>
            <Icon.Check className="icon icon-sm" /> {t.move_confirm}
          </button>
        </div>
      </div>
    </>
  );
}

// ---------- Movement log screen ----------
function MovementsScreen({ t, lang, role, onOpenModal }) {
  const { state } = useStore();
  const [typeFilter, setTypeFilter] = mvState('all');
  const [query, setQuery] = mvState('');

  const movements = mvMemo(() => {
    return state.movements.filter(m => {
      if (typeFilter !== 'all' && m.type !== typeFilter) return false;
      const q = query.trim().toLowerCase();
      if (q && !((m.sku||'').toLowerCase().includes(q) || (m.name||'').toLowerCase().includes(q) || (m.reason||'').toLowerCase().includes(q))) return false;
      return true;
    });
  }, [state.movements, typeFilter, query]);

  // Group by date
  const grouped = mvMemo(() => {
    const map = {};
    for (const m of movements) {
      const k = m.date;
      if (!map[k]) map[k] = [];
      map[k].push(m);
    }
    return Object.entries(map).sort((a,b) => b[0].localeCompare(a[0]));
  }, [movements]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>{t.nav_movement}</h1>
          <div className="page-sub">{lang === 'th' ? 'ประวัติการรับเข้า เบิกออก และปรับปรุงสต๊อก' : 'History of receipts, issues, and adjustments'}</div>
        </div>
        <div className="page-head-actions">
          {role !== 'sales' && (
            <button className="btn btn-primary" onClick={() => onOpenModal('in')}>
              <Icon.Plus className="icon icon-sm" /> {t.move_title}
            </button>
          )}
        </div>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <div className="toolbar">
          <div className="search" style={{ width: 320 }}>
            <Icon.Search className="icon icon-sm" />
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder={lang === 'th' ? 'ค้นหารหัส, ชื่อ, เหตุผล...' : 'Search SKU, name, reason...'} />
          </div>
          <span className="spacer"></span>
          <div className="segmented">
            <button className={typeFilter === 'all' ? 'active' : ''} onClick={() => setTypeFilter('all')}>{t.filter_all}</button>
            <button className={typeFilter === 'in' ? 'active' : ''} onClick={() => setTypeFilter('in')}>{t.move_type_in}</button>
            <button className={typeFilter === 'out' ? 'active' : ''} onClick={() => setTypeFilter('out')}>{t.move_type_out}</button>
            <button className={typeFilter === 'adjust' ? 'active' : ''} onClick={() => setTypeFilter('adjust')}>{t.move_type_adjust}</button>
          </div>
        </div>

        <div style={{ maxHeight: 'calc(100vh - 300px)', overflowY: 'auto' }}>
          {grouped.length === 0 && (
            <div className="empty"><div className="empty-icon"><Icon.Move /></div><h3>{t.no_results}</h3></div>
          )}
          {grouped.map(([date, items]) => (
            <div key={date}>
              <div style={{ padding: '12px 20px', fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.5px', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                {fmtDate(date, lang)} · {items.length} {t.items}
              </div>
              {items.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={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{m.sku}</span>
                      <span style={{ fontWeight: 600 }}>{m.name || ''}</span>
                    </div>
                    <div className="t-muted" style={{ fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {m.reason} {m.reference ? '· ' + m.reference : ''} {m.actor ? '· ' + m.actor : ''}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontWeight: 700, fontSize: 15, color: m.type === 'in' ? 'var(--ok)' : (m.type === 'out' ? 'var(--info)' : 'var(--warn)') }}>
                      {m.type === 'in' ? '+' : (m.type === 'out' ? '−' : '~')}{m.qty} <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>{m.unit}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MovementModal, MovementsScreen });