// Product detail drawer with tabs (Overview / History / Stats / Settings)
const { useState: pdState, useMemo: pdMemo } = React;

function ProductDetail({ product, t, lang, role, onClose, onMovement, onUpdate, onDelete }) {
  const { state } = useStore();
  const [tab, setTab] = pdState('overview');
  const [edit, setEdit] = pdState(false);
  const [form, setForm] = pdState({ ...product });
  const toast = useToast();

  const p = product;
  const name = (lang === 'th' ? p.nameTh : p.nameEn) || p.nameEn || p.rawName;
  const available = Math.max(0, p.onHand - p.reserved);
  const value = p.onHand * p.unitCost;
  const monthsCover = p.monthlyDemand > 0 ? (p.onHand / p.monthlyDemand) : null;

  // Filter movements for this SKU
  const myMovements = pdMemo(() =>
    state.movements.filter(m => m.sku === p.sku),
  [state.movements, p.sku]);

  const sparkData = pdMemo(() => genSpark(p), [p.sku]);

  function save() {
    onUpdate({
      nameTh: form.nameTh,
      nameEn: form.nameEn,
      unitCost: Number(form.unitCost) || 0,
      reorderPoint: Number(form.reorderPoint) || 0,
      category: form.category,
      priority: form.priority,
      unit: form.unit
    });
    setEdit(false);
    toast(t.toast_saved);
  }

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}></div>
      <div className="drawer">
        <div className="drawer-header">
          <div className="abc abc-${p.abc}" style={{ width: 38, height: 38, fontSize: 14, borderRadius: 10 }}>{p.abc}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2 style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name || p.sku}</h2>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
              <span className="mono t-muted" style={{ fontSize: 13 }}>{p.sku}</span>
              <span className="chip">{catLabel(p.category, t)}</span>
              <StatusPill status={p.status} t={t} />
            </div>
          </div>
          <button className="btn-icon btn-ghost" onClick={onClose}><Icon.X className="icon" /></button>
        </div>
        <div className="tabs">
          <button className={tab === 'overview' ? 'active' : ''} onClick={() => setTab('overview')}>{t.detail_overview}</button>
          <button className={tab === 'history' ? 'active' : ''} onClick={() => setTab('history')}>{t.detail_history} ({myMovements.length})</button>
          <button className={tab === 'stats' ? 'active' : ''} onClick={() => setTab('stats')}>{t.detail_stats}</button>
          {role !== 'sales' && <button className={tab === 'settings' ? 'active' : ''} onClick={() => setTab('settings')}>{t.detail_settings}</button>}
        </div>

        <div className="drawer-body">
          {tab === 'overview' && (
            <div style={{ display: 'grid', gap: 16 }}>
              {/* Big number block */}
              <div className="card" style={{ padding: 20, background: 'var(--surface-2)' }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                  <StatBlock label={t.col_onhand} value={fmtThousands(p.onHand)} sub={p.unit} accent="ok" />
                  <StatBlock label={t.col_reserved} value={fmtThousands(p.reserved)} sub={p.unit} accent="warn" />
                  <StatBlock label={t.avail} value={fmtThousands(available)} sub={p.unit} accent="accent" />
                </div>
                <div style={{ marginTop: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', marginBottom: 6 }}>
                    <span>{lang === 'th' ? 'จุดสั่งซื้อ' : 'Reorder point'}</span>
                    <span>{p.reorderPoint} {p.unit}</span>
                  </div>
                  <div className="bar" style={{ height: 10 }}>
                    <span style={{ width: Math.min(100, p.onHand/Math.max(p.reorderPoint*3, 1)*100)+'%', background: p.onHand < p.reorderPoint ? 'var(--bad)' : 'var(--ok)' }}></span>
                  </div>
                </div>
              </div>

              {/* Movement quick actions */}
              {p.category !== 'service' && role !== 'sales' && (
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                  <button className="btn btn-lg" onClick={() => onMovement('in', p)} style={{ background: 'var(--ok-soft)', color: 'var(--ok)', borderColor: 'transparent', justifyContent: 'center' }}>
                    <Icon.Receive /> {t.action_receive}
                  </button>
                  <button className="btn btn-lg" onClick={() => onMovement('out', p)} style={{ background: 'var(--info-soft)', color: 'var(--info)', borderColor: 'transparent', justifyContent: 'center' }}>
                    <Icon.Issue /> {t.action_issue}
                  </button>
                  <button className="btn btn-lg" onClick={() => onMovement('adjust', p)} style={{ background: 'var(--warn-soft)', color: 'var(--warn)', borderColor: 'transparent', justifyContent: 'center' }}>
                    <Icon.Adjust /> {t.action_adjust}
                  </button>
                </div>
              )}

              {/* Value & info card */}
              <div className="card">
                <div className="card-body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  <InfoRow label={t.col_unitcost} value={fmtCurrency(p.unitCost) + ' THB'} />
                  <InfoRow label={t.col_value} value={fmtCurrency(value) + ' THB'} strong />
                  <InfoRow label={t.col_abc} value={<ABCBadge abc={p.abc} />} />
                  <InfoRow label={t.form_priority} value={
                    <span className={"chip " + (p.priority === 'high' ? 'chip-bad' : (p.priority === 'low' ? '' : 'chip-info'))}>
                      {t['priority_'+p.priority] || p.priority}
                    </span>
                  } />
                  <InfoRow label={t.col_lastsold} value={p.lastSold ? fmtDate(p.lastSold, lang) + ' (' + p.daysSinceSold + ' ' + t.days_ago + ')' : t.never} />
                  <InfoRow label={t.months_cover} value={monthsCover != null ? monthsCover.toFixed(1) : '∞'} />
                </div>
              </div>

              {/* Flags */}
              {p.flags && p.flags.length > 0 && (
                <div className="card">
                  <div className="card-body" style={{ display: 'flex', gap: 8 }}>
                    <Icon.Flag className="icon" style={{ color: 'var(--warn)' }} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 600, marginBottom: 4 }}>{lang === 'th' ? 'ธงที่ติดไว้' : 'Flags'}</div>
                      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                        {p.flags.map(f => <span key={f} className="chip chip-warn">{t['flag_'+f] || f}</span>)}
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {tab === 'history' && (
            <div className="card" style={{ overflow: 'hidden' }}>
              {myMovements.length === 0 ? (
                <div className="empty"><div className="empty-icon"><Icon.Clock /></div><h3>{t.no_results}</h3><div>{lang === 'th' ? 'ยังไม่มีการเคลื่อนไหวของสินค้านี้' : 'No movements yet for this item'}</div></div>
              ) : (
                <div>
                  {myMovements.slice(0, 30).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 }}>{m.reason || (m.type === 'in' ? t.action_receive : m.type === 'out' ? t.action_issue : t.action_adjust)}</div>
                        <div className="t-muted" style={{ fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.reference || m.customer || ''}</div>
                      </div>
                      <div style={{ 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} {m.unit}
                        </div>
                        <div className="t-muted" style={{ fontSize: 11 }}>{fmtDate(m.date, lang)}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {tab === 'stats' && (
            <div style={{ display: 'grid', gap: 16 }}>
              <div className="card">
                <div className="card-header"><h2>{lang === 'th' ? 'ยอดขาย (เดือนนี้)' : 'Sales this month'}</h2></div>
                <div className="card-body">
                  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
                    <div>
                      <div className="kpi-label">{lang === 'th' ? 'ยอดขาย (บาท)' : 'Revenue'}</div>
                      <div className="kpi-value">{fmtCurrency(p.monthlyRevenue)} <span className="kpi-unit">฿</span></div>
                    </div>
                    <div className="spacer"></div>
                    <Sparkline data={sparkData} />
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12, marginTop: 16 }}>
                    <InfoRow label={lang === 'th' ? 'จำนวนที่ขายได้' : 'Qty sold'} value={fmtThousands(p.monthlyDemand) + ' ' + p.unit} />
                    <InfoRow label={lang === 'th' ? 'จำนวนใบกำกับ' : 'Invoices'} value={fmtThousands(p.monthlyLineCount)} />
                    <InfoRow label={lang === 'th' ? 'ลูกค้า' : 'Customers'} value={fmtThousands(p.customerCount)} />
                  </div>
                </div>
              </div>
            </div>
          )}

          {tab === 'settings' && (
            <div style={{ display: 'grid', gap: 14 }}>
              <div className="field">
                <label>{t.form_name_th}</label>
                <input className="input" value={form.nameTh || ''} onChange={e => { setForm({ ...form, nameTh: e.target.value }); setEdit(true); }} />
              </div>
              <div className="field">
                <label>{t.form_name_en}</label>
                <input className="input" value={form.nameEn || ''} onChange={e => { setForm({ ...form, nameEn: e.target.value }); setEdit(true); }} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '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 }); setEdit(true); }}>
                    {['service','packaging','parts','equipment','consumables','other'].map(c => <option key={c} value={c}>{catLabel(c, t)}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>{t.form_unit}</label>
                  <input className="input" value={form.unit} onChange={e => { setForm({ ...form, unit: e.target.value }); setEdit(true); }} />
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <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 }); setEdit(true); }} />
                </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 }); setEdit(true); }} />
                </div>
              </div>
              <div className="field">
                <label>{t.form_priority}</label>
                <div className="segmented" style={{ width: 'fit-content' }}>
                  {['low','normal','high'].map(pr => (
                    <button key={pr} className={form.priority === pr ? 'active' : ''} onClick={() => { setForm({ ...form, priority: pr }); setEdit(true); }}>{t['priority_'+pr]}</button>
                  ))}
                </div>
              </div>
              {role !== 'sales' && (
                <div style={{ marginTop: 12 }}>
                  <button className="btn btn-danger" onClick={onDelete}><Icon.Trash className="icon icon-sm" /> {t.action_delete}</button>
                </div>
              )}
            </div>
          )}
        </div>

        <div className="drawer-foot">
          {tab === 'settings' && edit ? (
            <>
              <button className="btn" onClick={() => { setForm({ ...product }); setEdit(false); }}>{t.cancel}</button>
              <button className="btn btn-primary" onClick={save}>{t.save}</button>
            </>
          ) : (
            <button className="btn" onClick={onClose}>{t.close}</button>
          )}
        </div>
      </div>
    </>
  );
}

function StatBlock({ label, value, sub, accent }) {
  const colors = { ok: 'var(--ok)', warn: 'var(--warn)', accent: 'var(--accent)', bad: 'var(--bad)' };
  return (
    <div>
      <div className="kpi-label">{label}</div>
      <div style={{ fontSize: 26, fontWeight: 700, color: colors[accent] }}>{value}</div>
      <div className="t-muted" style={{ fontSize: 12 }}>{sub}</div>
    </div>
  );
}

function InfoRow({ label, value, strong }) {
  return (
    <div>
      <div className="kpi-label" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 14.5, fontWeight: strong ? 700 : 500, color: 'var(--ink)' }}>{value}</div>
    </div>
  );
}

window.ProductDetail = ProductDetail;