// customers.jsx — CUSTOMERS master-data module + CustomerStore + widget.
const CUST_APP = APPS.find(a => a.id === 'customers');

function deburr(s){ return (s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/đ/g, 'd').replace(/Đ/g, 'D'); }
const CODE_STOPWORDS = new Set(['cong','ty','tnhh','co','ltd','jsc','corp','corporation','company','jv','group','technology','tech','digital','solution','solutions','vietnam','viet','nam','vn','gmbh','inc','nghe','the','and']);
function genCustomerCode(name) {
  const words = deburr(name).split(/[^A-Za-z0-9]+/).filter(Boolean);
  const meaningful = words.filter(w => !CODE_STOPWORDS.has(w.toLowerCase()));
  const base = (meaningful.length ? meaningful : words).join('').toUpperCase();
  return base.slice(0, 10) || 'KH';
}
function flagBadge(cc){ return <span className="flag mono" style={{ fontWeight:600 }}>{cc}</span>; }

function CustomerModule() {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const customers = p.customers;
  const sub = p.route.sub || 'overview';
  const items = [
    { id:'overview', icon:'bi-pie-chart', label:t('c.overview') },
    { id:'list', icon:'bi-list-ul', label:t('c.list'), count:customers.length },
    { id:'report', icon:'bi-bar-chart', label:t('c.report') },
    { id:'settings', icon:'bi-gear', label:t('c.settings') },
  ];
  const go = (id, extra) => p.navigate({ name:'module', module:'customers', sub:id, ...extra });

  return (<>
    <ModuleSidebar app={CUST_APP} items={items} active={sub === 'detail' ? 'list' : sub} onNavigate={go} />
    <main className="main">
      {sub === 'overview' && <CustOverview go={go} />}
      {sub === 'list' && <CustList go={go} />}
      {sub === 'detail' && <CustDetail code={p.route.id} go={go} />}
      {sub === 'report' && <CustReport />}
      {sub === 'settings' && <CustSettings />}
    </main>
  </>);
}

function countBy(arr, key) {
  const m = {}; arr.forEach(x => { const k = typeof key === 'function' ? key(x) : x[key]; m[k] = (m[k] || 0) + 1; }); return m;
}

function CustOverview({ go }) {
  const p = usePortal();
  const { t, lang } = useLang();
  const cs = p.customers;
  const byInd = countBy(cs, 'industry');
  const byCountry = countBy(cs, 'country');
  const colors = ['var(--primary)','var(--accent)','#7A5AF8','var(--warning)','var(--success)','#D14343','var(--gray-400)'];
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('cust.title')}</h1><div className="sub">{lang === 'vi' ? 'Tổng quan dữ liệu chủ khách hàng.' : 'Customer master-data overview.'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('customers')}><i className="bi bi-plus-lg"></i>{t('cust.new')}</button></div>
      <div className="kpi-strip">
        <Kpi label={t('cust.title')} value={cs.length} icon="bi-building" />
        <Kpi label={t('st.active')} value={cs.filter(c => c.status === 'active').length} icon="bi-check-circle" delta="+3" deltaDir="up" />
        <Kpi label={t('st.prospect')} value={cs.filter(c => c.status === 'prospect').length} icon="bi-hourglass-split" />
        <Kpi label={lang === 'vi' ? 'Quốc gia' : 'Countries'} value={Object.keys(byCountry).length} icon="bi-globe2" />
      </div>
      <div className="dash-grid">
        <div className="card span2"><div className="card-head"><h3>{lang === 'vi' ? 'Phân bố theo ngành' : 'By industry'}</h3></div><div className="card-body">
          <DistribBars rows={Object.entries(byInd).sort((a, b) => b[1] - a[1]).map(([label, value], i) => ({ label, value, color:colors[i % colors.length] }))} />
        </div></div>
        <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Theo quốc gia' : 'By country'}</h3></div><div className="card-body">
          <DistribBars rows={Object.entries(byCountry).sort((a, b) => b[1] - a[1]).map(([label, value], i) => ({ label:COUNTRIES[label] || label, value, color:colors[i % colors.length] }))} />
        </div></div>
      </div>
    </div>
  );
}

function CustList({ go }) {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const [q, setQ] = React.useState('');
  const [status, setStatus] = React.useState('all');
  const list = p.customers.filter(c =>
    (status === 'all' || c.status === status) &&
    (!q || (c.name + c.code + c.shortName).toLowerCase().includes(q.toLowerCase())));
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.list')}</h1><div className="sub">{list.length} {lang === 'vi' ? 'khách hàng' : 'customers'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('customers')}><i className="bi bi-plus-lg"></i>{t('cust.new')}</button></div>
      <div className="toolbar">
        <div className="topsearch" style={{ width:240, background:'var(--bg)', border:'1px solid var(--border-strong)' }}><i className="bi bi-search"></i>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder={t('c.search')} style={{ border:'none', outline:'none', background:'transparent', flex:1 }} /></div>
        <div className="seg">
          {['all','active','prospect','inactive'].map(s => <button key={s} className={status === s ? 'is-active' : ''} onClick={() => setStatus(s)}>{s === 'all' ? t('c.all') : t('st.' + s)}</button>)}
        </div>
      </div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><th>{t('cust.code')}</th><th>{t('cust.name')}</th><th>{t('cust.industry')}</th><th>{t('cust.country')}</th><th>{t('cust.mst')}</th><th>{t('c.owner')}</th><th>{t('c.status')}</th></tr></thead>
          <tbody>
            {list.map(c => (
              <tr key={c.code} onClick={() => go('detail', { id:c.code })}>
                <td><span className="mono" style={{ fontWeight:600, color:'var(--primary)' }}>{c.code}</span></td>
                <td><span style={{ fontWeight:500 }}>{c.name}</span> <span className="subtle">· {c.shortName}</span></td>
                <td className="muted">{c.industry}</td>
                <td>{flagBadge(c.country)} <span className="muted">{COUNTRIES[c.country]}</span></td>
                <td className="mono" style={{ fontSize:'var(--fs-base)' }}>{c.mst}</td>
                <td>{c.owner}</td>
                <td><StatusBadge status={c.status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
        {list.length === 0 && <EmptyState text={t('c.empty')} />}
      </div></div>
    </div>
  );
}

function CustDetail({ code, go }) {
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const [editing, setEditing] = React.useState(false);
  const c = p.customers.find(x => x.code === code);
  if (!c) return <div className="page"><EmptyState text={t('c.empty')} /></div>;
  const remove = () => {
    if (!window.confirm((lang === 'vi' ? 'Xóa khách hàng ' : 'Delete customer ') + c.name + '?')) return;
    p.deleteCustomer(c.code);
    toast((lang === 'vi' ? 'Đã xóa ' : 'Deleted ') + c.code, 'success');
    go('list');
  };
  const linkedContacts = p.contacts.filter(ct => ct.customer === c.code);
  return (
    <div className="page pagefade">
      <div className="page-head">
        <div className="flex g12 items-center">
          <button className="btn btn-ghost btn-icon" onClick={() => go('list')}><i className="bi bi-arrow-left"></i></button>
          <Avatar name={c.shortName} size={40} square color="var(--primary)" />
          <div><h1 style={{ fontSize:'var(--fs-2xl)' }}>{c.name}</h1><div className="sub flex g8 items-center"><span className="mono" style={{ color:'var(--primary)', fontWeight:600 }}>{c.code}</span> · {c.shortName} · <StatusBadge status={c.status} /></div></div>
        </div>
        <div className="flex g8">
          <button className="btn" onClick={() => setEditing(true)}><i className="bi bi-pencil"></i>{t('c.edit')}</button>
          <button className="btn btn-icon" title={t('c.delete')} onClick={remove}><i className="bi bi-trash"></i></button>
        </div>
      </div>
      {editing && <NewCustomerModal editing={c} onClose={() => setEditing(false)} />}
      <div className="split">
        <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Thông tin chi tiết' : 'Details'}</h3></div><div className="card-body">
          <div className="det-row"><span className="dk">{t('cust.name')}</span><span className="dv">{c.name}</span></div>
          <div className="det-row"><span className="dk">{t('cust.short')}</span><span className="dv">{c.shortName}</span></div>
          <div className="det-row"><span className="dk">{t('cust.mst')}</span><span className="dv mono">{c.mst}</span></div>
          <div className="det-row"><span className="dk">{t('cust.industry')}</span><span className="dv">{c.industry}</span></div>
          <div className="det-row"><span className="dk">{t('cust.country')}</span><span className="dv">{flagBadge(c.country)} {COUNTRIES[c.country]}</span></div>
          <div className="det-row"><span className="dk">{t('cust.lang')}</span><span className="dv">{LANGS[c.lang]}</span></div>
          <div className="det-row"><span className="dk">{t('c.owner')}</span><span className="dv">{c.owner}</span></div>
        </div></div>
        <div className="col g12">
          <div className="card"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{t('cust.links')}</h3></div><div className="card-body col g8">
            <div className="flex g8 wrap">
              <span className="linkcount"><i className="bi bi-person-vcard"></i><b>{linkedContacts.length}</b> {lang === 'vi' ? 'liên hệ' : 'contacts'}</span>
              <span className="linkcount"><i className="bi bi-graph-up-arrow"></i><b>2</b> {lang === 'vi' ? 'cơ hội' : 'deals'}</span>
              <span className="linkcount"><i className="bi bi-receipt"></i><b>3</b> {lang === 'vi' ? 'báo giá' : 'quotes'}</span>
              <span className="linkcount"><i className="bi bi-envelope"></i><b>{p.sentEmails.filter(e => linkedContacts.some(lc => e.to.includes(lc.email))).length}</b> email</span>
            </div>
          </div></div>
          {linkedContacts.length > 0 && (
            <div className="card"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{lang === 'vi' ? 'Liên hệ liên quan' : 'Linked contacts'}</h3></div><div className="card-body">
              {linkedContacts.map(lc => (
                <div key={lc.code} className="list-row" style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'contacts', sub:'detail', id:lc.code })}>
                  <Avatar name={lc.name} size={24} color="var(--gray-400)" /><span className="grow" style={{ fontWeight:500 }}>{lc.name}</span><span className="subtle">{lc.title}</span>
                </div>
              ))}
            </div></div>
          )}
        </div>
      </div>
    </div>
  );
}

function CustReport() {
  const p = usePortal();
  const { t, lang } = useLang();
  const cs = p.customers;
  const byOwner = countBy(cs, 'owner');
  const byStatus = countBy(cs, 'status');
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.report')}</h1><div className="sub">{lang === 'vi' ? 'Thống kê danh mục khách hàng.' : 'Customer portfolio statistics.'}</div></div>
        <button className="btn"><i className="bi bi-download"></i>{lang === 'vi' ? 'Xuất Excel' : 'Export'}</button></div>
      <div className="dash-grid">
        <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Theo trạng thái' : 'By status'}</h3></div><div className="card-body">
          <DistribBars rows={['active','prospect','inactive'].map(s => ({ label:t('st.' + s), value:byStatus[s] || 0, color:s === 'active' ? 'var(--success)' : s === 'prospect' ? 'var(--warning)' : 'var(--gray-400)' }))} />
        </div></div>
        <div className="card span2"><div className="card-head"><h3>{lang === 'vi' ? 'Theo người phụ trách' : 'By owner'}</h3></div><div style={{ overflow:'auto' }}>
          <table className="tbl"><thead><tr><th>{t('c.owner')}</th><th className="num">{lang === 'vi' ? 'Số KH' : 'Customers'}</th><th className="num">{lang === 'vi' ? 'Tỷ lệ' : 'Share'}</th></tr></thead>
            <tbody>{Object.entries(byOwner).sort((a, b) => b[1] - a[1]).map(([o, n]) => (
              <tr key={o} style={{ cursor:'default' }}><td><span className="flex g8 items-center"><Avatar name={o} size={22} />{o}</span></td><td className="num">{n}</td><td className="num muted">{Math.round(n / cs.length * 100)}%</td></tr>
            ))}</tbody></table>
        </div></div>
      </div>
    </div>
  );
}

function CustSettings() {
  const { t, lang } = useLang();
  const toast = useToast();
  const [inds, setInds] = React.useState(INDUSTRIES);
  const [draft, setDraft] = React.useState('');
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.settings')}</h1><div className="sub">{lang === 'vi' ? 'Danh mục & quy tắc dữ liệu.' : 'Categories & data rules.'}</div></div></div>
      <div className="card" style={{ maxWidth:560 }}>
        <div className="card-head"><h3>{lang === 'vi' ? 'Danh mục ngành' : 'Industry categories'}</h3></div>
        <div className="card-body col g12">
          <div className="flex g8 wrap">{inds.map(i => <span key={i} className="badge badge-neutral" style={{ height:24, fontSize:'var(--fs-base)' }}>{i}<button onClick={() => setInds(s => s.filter(x => x !== i))} style={{ border:'none', background:'none', marginLeft:4 }}><i className="bi bi-x"></i></button></span>)}</div>
          <div className="flex g8"><input className="input" value={draft} onChange={e => setDraft(e.target.value)} placeholder={lang === 'vi' ? 'Thêm ngành mới…' : 'Add industry…'} />
            <button className="btn btn-primary" onClick={() => { if (draft.trim()) { setInds(s => [...s, draft.trim()]); setDraft(''); toast(lang === 'vi' ? 'Đã thêm' : 'Added'); } }}>{t('c.create')}</button></div>
        </div>
      </div>
    </div>
  );
}

/* New/Edit-customer modal (quick action target; truyền `editing` để sửa) */
function NewCustomerModal({ onClose, editing }) {
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const [auto, setAuto] = React.useState(!editing);
  const [f, setF] = React.useState(editing
    ? { name:editing.name, shortName:editing.shortName, code:editing.code, lang:editing.lang, mst:editing.mst, industry:editing.industry, country:editing.country, owner:editing.owner, status:editing.status }
    : { name:'', shortName:'', code:'', lang:'vi', mst:'', industry:INDUSTRIES[0], country:'VN', owner:p.me.name, status:'prospect' });
  const code = editing ? editing.code : (auto ? genCustomerCode(f.name) : f.code.toUpperCase());
  const dup = !editing && p.customers.some(c => c.code === code) && code;
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const create = () => {
    if (!f.name.trim()) { toast(lang === 'vi' ? 'Nhập tên khách hàng' : 'Enter a name', 'error'); return; }
    const rec = { ...(editing || {}), ...f, code, shortName:f.shortName || f.name.split(' ')[0] };
    if (editing) {
      p.updateCustomer(editing.code, rec);
      toast(lang === 'vi' ? 'Đã lưu thay đổi' : 'Saved', 'success');
      onClose(); return;
    }
    if (!code || dup) { toast(t('cust.dup'), 'error'); return; }
    p.addCustomer(rec);
    toast((lang === 'vi' ? 'Đã tạo KH ' : 'Created ') + code, 'success');
    onClose();
    p.navigate({ name:'module', module:'customers', sub:'detail', id:code });
  };
  return (
    <Modal title={editing ? (lang === 'vi' ? 'Sửa khách hàng' : 'Edit customer') : t('cust.new')} width={600} onClose={onClose}
      footer={<><button className="btn" onClick={onClose}>{t('c.cancel')}</button><button className="btn btn-primary" onClick={create} disabled={!!dup}>{editing ? t('c.save') : t('c.create')}</button></>}>
      <div className="col g16">
        <Field label={t('cust.name')}><input className="input" autoFocus value={f.name} onChange={e => set('name', e.target.value)} placeholder={lang === 'vi' ? 'VD: Công ty TNHH ABC' : 'e.g. ABC Company Ltd'} /></Field>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label={t('cust.code')} hint={editing ? '' : (dup ? '' : t('cust.codeLocked'))}>
            <div className="flex g8 items-center">
              <input className={'input mono' + (dup ? ' is-error' : '')} value={code} disabled={!!editing} onChange={e => { setAuto(false); set('code', e.target.value); }} style={{ fontWeight:600, textTransform:'uppercase', background:editing ? 'var(--bg-sunken)' : undefined }} />
              {!editing && <button className={'btn btn-sm' + (auto ? ' btn-primary' : '')} title={t('cust.autocode')} onClick={() => setAuto(a => !a)}><i className="bi bi-magic"></i></button>}
            </div>
          </Field>{dup && <div style={{ color:'var(--error)', fontSize:'var(--fs-sm)', marginTop:4 }}><i className="bi bi-exclamation-circle"></i> {t('cust.dup')}</div>}</div>
          <div style={{ flex:1 }}><Field label={t('cust.short')}><input className="input" value={f.shortName} onChange={e => set('shortName', e.target.value)} placeholder={f.name.split(' ')[0]} /></Field></div>
        </div>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label={t('cust.mst')}><input className="input mono" value={f.mst} onChange={e => set('mst', e.target.value)} placeholder="0300000000" /></Field></div>
          <div style={{ flex:1 }}><Field label={t('cust.lang')}><select className="select" value={f.lang} onChange={e => set('lang', e.target.value)}>{Object.entries(LANGS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}</select></Field></div>
        </div>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label={t('cust.industry')}><select className="select" value={f.industry} onChange={e => set('industry', e.target.value)}>{INDUSTRIES.map(i => <option key={i}>{i}</option>)}</select></Field></div>
          <div style={{ flex:1 }}><Field label={t('cust.country')}><select className="select" value={f.country} onChange={e => set('country', e.target.value)}>{Object.entries(COUNTRIES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}</select></Field></div>
        </div>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label={t('c.owner')}><select className="select" value={f.owner} onChange={e => set('owner', e.target.value)}>{p.users.map(u => <option key={u.id}>{u.name}</option>)}</select></Field></div>
          <div style={{ flex:1 }}><Field label={t('c.status')}><select className="select" value={f.status} onChange={e => set('status', e.target.value)}>{['prospect','active','inactive'].map(s => <option key={s} value={s}>{t('st.' + s)}</option>)}</select></Field></div>
        </div>
      </div>
    </Modal>
  );
}

/* Dashboard widget */
function CustomerWidget() {
  const p = usePortal();
  const { t, lang } = useLang();
  const top = p.customers.slice(0, 4);
  return (
    <div className="card">
      <div className="card-head"><h3><i className="bi bi-building" style={{ color:'var(--primary)', marginRight:6 }}></i>{t('cust.title')}</h3><button className="btn btn-ghost btn-sm" onClick={() => p.openApp(CUST_APP)}>{t('c.viewAll')}</button></div>
      <div className="card-body" style={{ paddingTop:6 }}>
        <div className="flex g16" style={{ marginBottom:8 }}>
          <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700 }}>{p.customers.length}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'khách hàng' : 'customers'}</div></div>
          <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700, color:'var(--success)' }}>{p.customers.filter(c => c.status === 'active').length}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{t('st.active')}</div></div>
        </div>
        {top.map(c => (
          <div key={c.code} className="list-row" style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'customers', sub:'detail', id:c.code })}>
            <span className="mono" style={{ fontWeight:600, color:'var(--primary)', fontSize:'var(--fs-base)', width:64 }}>{c.code}</span><span className="grow truncate">{c.shortName}</span><StatusBadge status={c.status} />
          </div>
        ))}
        <button className="btn btn-subtle btn-sm" style={{ width:'100%', marginTop:8 }} onClick={() => p.quick('customers')}><i className="bi bi-plus-lg"></i>{t('cust.new')}</button>
      </div>
    </div>
  );
}

Object.assign(window, { CustomerModule, NewCustomerModal, CustomerWidget, genCustomerCode });