// contacts.jsx — CONTACTS personal directory module + ContactStore + widget.
const CONTACT_APP = APPS.find(a => a.id === 'contacts');

function genContactCode(list) {
  const max = list.reduce((m, c) => { const n = parseInt((c.code || '').replace(/\D/g, ''), 10); return isNaN(n) ? m : Math.max(m, n); }, 0);
  return 'LH-' + String(max + 1).padStart(4, '0');
}

function ContactModule() {
  const p = usePortal();
  const { t } = useLang();
  const sub = p.route.sub || 'overview';
  const items = [
    { id:'overview', icon:'bi-pie-chart', label:t('c.overview') },
    { id:'dir', icon:'bi-person-lines-fill', label:t('ct.dir'), count:p.contacts.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:'contacts', sub:id, ...extra });
  return (<>
    <ModuleSidebar app={CONTACT_APP} items={items} active={sub === 'detail' ? 'dir' : sub} onNavigate={go} />
    <main className="main">
      {sub === 'overview' && <CtOverview go={go} />}
      {sub === 'dir' && <CtDirectory go={go} />}
      {sub === 'detail' && <CtDetail code={p.route.id} go={go} />}
      {sub === 'report' && <CtReport />}
      {sub === 'settings' && <CtSettings />}
    </main>
  </>);
}

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

function CtOverview({ go }) {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const cs = p.contacts;
  const byType = cBy(cs, c => c.type);
  const byNat = cBy(cs, c => c.nationality);
  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('ct.title')}</h1><div className="sub">{lang === 'vi' ? 'Danh bạ liên hệ cá nhân, đa quốc tịch.' : 'Personal multi-national contact directory.'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('contacts')}><i className="bi bi-plus-lg"></i>{t('ct.new')}</button></div>
      <div className="kpi-strip">
        <Kpi label={t('ct.title')} value={cs.length} icon="bi-person-vcard" />
        <Kpi label={t('ct.customer')} value={cs.filter(c => c.type === 'customer').length} icon="bi-building" />
        <Kpi label={lang === 'vi' ? 'Quốc tịch' : 'Nationalities'} value={Object.keys(byNat).length} icon="bi-globe2" />
        <Kpi label={t('st.active')} value={cs.filter(c => c.status === 'active').length} icon="bi-check-circle" />
      </div>
      <div className="dash-grid">
        <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Theo loại' : 'By type'}</h3></div><div className="card-body">
          <DistribBars rows={Object.entries(byType).sort((a, b) => b[1] - a[1]).map(([k, value], i) => ({ label:tt(CONTACT_TYPES[k]), value, color:colors[i % colors.length] }))} />
        </div></div>
        <div className="card span2"><div className="card-head"><h3>{lang === 'vi' ? 'Theo quốc tịch' : 'By nationality'}</h3></div><div className="card-body">
          <DistribBars rows={Object.entries(byNat).sort((a, b) => b[1] - a[1]).map(([k, value], i) => ({ label:(COUNTRIES[k] || k), value, color:colors[i % colors.length] }))} />
        </div></div>
      </div>
    </div>
  );
}

function CtDirectory({ go }) {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const [q, setQ] = React.useState('');
  const [type, setType] = React.useState('all');
  const [nat, setNat] = React.useState('all');
  const list = p.contacts.filter(c =>
    (type === 'all' || c.type === type) &&
    (nat === 'all' || c.nationality === nat) &&
    (!q || (c.name + c.code + c.email + (c.native || '')).toLowerCase().includes(q.toLowerCase())));
  const nats = Array.from(new Set(p.contacts.map(c => c.nationality)));
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('ct.dir')}</h1><div className="sub">{list.length} {lang === 'vi' ? 'liên hệ' : 'contacts'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('contacts')}><i className="bi bi-plus-lg"></i>{t('ct.new')}</button></div>
      <div className="toolbar">
        <div className="topsearch" style={{ width:230, 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">
          <button className={type === 'all' ? 'is-active' : ''} onClick={() => setType('all')}>{t('c.all')}</button>
          {Object.keys(CONTACT_TYPES).map(k => <button key={k} className={type === k ? 'is-active' : ''} onClick={() => setType(k)}>{tt(CONTACT_TYPES[k])}</button>)}
        </div>
        <select className="select" style={{ width:'auto' }} value={nat} onChange={e => setNat(e.target.value)}>
          <option value="all">{t('ct.nationality')}: {t('c.all')}</option>
          {nats.map(n => <option key={n} value={n}>{COUNTRIES[n] || n}</option>)}
        </select>
      </div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><th>{t('ct.code')}</th><th>{t('ct.name')}</th><th>{t('ct.title2')}</th><th>{t('ct.type')}</th><th>{t('ct.nationality')}</th><th>{t('ct.customer')}</th><th>{t('c.owner')}</th></tr></thead>
          <tbody>
            {list.map(c => {
              const cust = p.customers.find(x => x.code === c.customer);
              return (
                <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 className="flex g8 items-center"><Avatar name={c.name} size={24} color="var(--gray-400)" /><span><span style={{ fontWeight:500 }}>{c.name}</span>{c.native && <span className="subtle" style={{ marginLeft:6 }}>{c.native}</span>}</span></span></td>
                  <td className="muted">{c.title}</td>
                  <td><span className="badge badge-neutral">{tt(CONTACT_TYPES[c.type])}</span></td>
                  <td><span className="flag mono" style={{ fontWeight:600 }}>{c.nationality}</span> <span className="muted">{COUNTRIES[c.nationality]}</span></td>
                  <td>{cust ? <span className="mono" style={{ fontSize:'var(--fs-base)' }}>{cust.code}</span> : <span className="subtle">—</span>}</td>
                  <td>{c.owner}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {list.length === 0 && <EmptyState text={t('c.empty')} />}
      </div></div>
    </div>
  );
}

function CtDetail({ code, go }) {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const c = p.contacts.find(x => x.code === code);
  const [filter, setFilter] = React.useState('all');
  const [editing, setEditing] = React.useState(false);
  if (!c) return <div className="page"><EmptyState text={t('c.empty')} /></div>;
  const remove = () => {
    if (!window.confirm((lang === 'vi' ? 'Xóa liên hệ ' : 'Delete contact ') + c.name + '?')) return;
    p.deleteContact(c.code);
    toast((lang === 'vi' ? 'Đã xóa ' : 'Deleted ') + c.code, 'success');
    go('dir');
  };
  const cust = p.customers.find(x => x.code === c.customer);
  const txTypes = Array.from(new Set((c.tx || []).map(t => t.type)));
  const tx = (c.tx || []).filter(t => filter === 'all' || t.type === filter);
  return (
    <div className="page pagefade">
      <div className="page-head">
        <div className="flex g12 items-center">
          <button className="btn btn-ghost btn-icon" onClick={() => go('dir')}><i className="bi bi-arrow-left"></i></button>
          <Avatar name={c.name} size={40} color="var(--primary)" />
          <div><h1 style={{ fontSize:'var(--fs-2xl)' }}>{c.name} {c.native && <span className="subtle" style={{ fontSize:'var(--fs-lg)', fontWeight:400 }}>{c.native}</span>}</h1>
            <div className="sub flex g8 items-center"><span className="mono" style={{ color:'var(--primary)', fontWeight:600 }}>{c.code}</span> · {c.title} · <span className="badge badge-neutral">{tt(CONTACT_TYPES[c.type])}</span></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>
          <button className="btn btn-primary" onClick={() => p.quick('mail', { to:[c.email] })}><i className="bi bi-envelope"></i>{lang === 'vi' ? 'Gửi email' : 'Send email'}</button>
        </div>
      </div>
      {editing && <NewContactModal editing={c} onClose={() => setEditing(false)} />}
      <div className="split">
        <div className="card"><div className="card-head"><h3>{t('ct.history')}</h3>
          <div className="seg">
            <button className={filter === 'all' ? 'is-active' : ''} onClick={() => setFilter('all')}>{t('c.all')}</button>
            {txTypes.map(tp => <button key={tp} className={filter === tp ? 'is-active' : ''} onClick={() => setFilter(tp)}>{tt(TX_TYPES[tp].label)}</button>)}
          </div>
        </div><div className="card-body">
          {tx.length === 0 ? <EmptyState icon="bi-clock-history" text={t('c.empty')} /> : (
            <div className="timeline">
              {tx.map((item, i) => {
                const ty = TX_TYPES[item.type];
                return (
                  <div key={i} className="tl-item">
                    <span className="tl-dot" style={{ borderColor:ty.color }}><i className={'bi ' + ty.icon} style={{ color:ty.color, fontSize:8 }}></i></span>
                    <div className="tl-head"><span className="tl-title">{item.title}</span><span className="badge badge-neutral">{tt(ty.label)}</span><span className="tl-time">{item.date}</span></div>
                    <div className="tl-body">{item.body}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div></div>
        <div className="col g12">
          <div className="card"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{t('c.details')}</h3></div><div className="card-body">
            <div className="det-row"><span className="dk">{lang === 'vi' ? 'Email' : 'Email'}</span><span className="dv mono" style={{ fontSize:'var(--fs-base)' }}>{c.email}</span></div>
            <div className="det-row"><span className="dk">{lang === 'vi' ? 'Điện thoại' : 'Phone'}</span><span className="dv mono" style={{ fontSize:'var(--fs-base)' }}>{c.phone}</span></div>
            <div className="det-row"><span className="dk">{t('ct.nationality')}</span><span className="dv"><span className="flag mono" style={{ fontWeight:600 }}>{c.nationality}</span> {COUNTRIES[c.nationality]}</span></div>
            <div className="det-row"><span className="dk">{t('c.owner')}</span><span className="dv">{c.owner}</span></div>
            <div className="det-row"><span className="dk">{t('c.status')}</span><span className="dv"><StatusBadge status={c.status} /></span></div>
          </div></div>
          {cust && (
            <div className="card" style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'customers', sub:'detail', id:cust.code })}>
              <div className="card-body flex g12 items-center">
                <Avatar name={cust.shortName} size={34} square color="var(--primary)" />
                <div className="grow"><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{t('ct.customer')}</div><div style={{ fontWeight:600 }}>{cust.name}</div><div className="mono subtle" style={{ fontSize:'var(--fs-sm)' }}>{cust.code}</div></div>
                <i className="bi bi-chevron-right muted"></i>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function CtReport() {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const cs = p.contacts;
  const totalTx = cs.reduce((n, c) => n + (c.tx ? c.tx.length : 0), 0);
  const txByType = {};
  cs.forEach(c => (c.tx || []).forEach(t => { txByType[t.type] = (txByType[t.type] || 0) + 1; }));
  const colors = ['var(--primary)','var(--accent)','#7A5AF8','var(--warning)','var(--success)','#D14343','#0B4FBF','#16A34A','var(--gray-400)'];
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.report')}</h1><div className="sub">{lang === 'vi' ? 'Hoạt động giao dịch theo liên hệ.' : 'Engagement activity across contacts.'}</div></div></div>
      <div className="kpi-strip">
        <Kpi label={lang === 'vi' ? 'Tổng giao dịch' : 'Total interactions'} value={totalTx} icon="bi-activity" />
        <Kpi label={lang === 'vi' ? 'TB / liên hệ' : 'Avg / contact'} value={(totalTx / cs.length).toFixed(1)} icon="bi-graph-up" />
        <Kpi label={t('ct.title')} value={cs.length} icon="bi-person-vcard" />
        <Kpi label={lang === 'vi' ? 'Loại GD' : 'Interaction types'} value={Object.keys(txByType).length} icon="bi-collection" />
      </div>
      <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Giao dịch theo loại' : 'Interactions by type'}</h3></div><div className="card-body">
        <DistribBars rows={Object.entries(txByType).sort((a, b) => b[1] - a[1]).map(([k, v], i) => ({ label:tt(TX_TYPES[k].label), value:v, color:colors[i % colors.length] }))} />
      </div></div>
    </div>
  );
}

function CtSettings() {
  const { t, tt, lang } = useLang();
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.settings')}</h1><div className="sub">{lang === 'vi' ? 'Loại liên hệ & loại giao dịch.' : 'Contact & interaction types.'}</div></div></div>
      <div className="dash-grid">
        <div className="card"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{lang === 'vi' ? 'Loại liên hệ' : 'Contact types'}</h3></div><div className="card-body flex g8 wrap">
          {Object.values(CONTACT_TYPES).map((v, i) => <span key={i} className="badge badge-neutral" style={{ height:24 }}>{tt(v)}</span>)}
        </div></div>
        <div className="card span2"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{lang === 'vi' ? 'Loại giao dịch (timeline)' : 'Interaction types (timeline)'}</h3></div><div className="card-body flex g8 wrap">
          {Object.entries(TX_TYPES).map(([k, v]) => <span key={k} className="badge" style={{ height:24, background:'var(--bg-sunken)' }}><i className={'bi ' + v.icon} style={{ color:v.color }}></i> {tt(v.label)}</span>)}
        </div></div>
      </div>
    </div>
  );
}

/* New/Edit-contact modal (quick action target; truyền `editing` để sửa) */
function NewContactModal({ onClose, editing }) {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const code = editing ? editing.code : genContactCode(p.contacts);
  const [f, setF] = React.useState(editing
    ? { name:editing.name, native:editing.native || '', title:editing.title, email:editing.email, phone:editing.phone, type:editing.type, nationality:editing.nationality, customer:editing.customer || '', owner:editing.owner, status:editing.status }
    : { name:'', native:'', title:'', email:'', phone:'', type:'lead', nationality:'VN', customer:'', owner:p.me.name, status:'active' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const create = () => {
    if (!f.name.trim()) { toast(lang === 'vi' ? 'Nhập họ tên' : 'Enter a name', 'error'); return; }
    if (editing) {
      p.updateContact(editing.code, { ...editing, ...f, code:editing.code });
      toast(lang === 'vi' ? 'Đã lưu thay đổi' : 'Saved', 'success');
      onClose(); return;
    }
    p.addContact({ ...f, code, tx:[] });
    toast((lang === 'vi' ? 'Đã tạo liên hệ ' : 'Created ') + code, 'success');
    onClose();
    p.navigate({ name:'module', module:'contacts', sub:'detail', id:code });
  };
  return (
    <Modal title={editing ? (lang === 'vi' ? 'Sửa liên hệ' : 'Edit contact') : t('ct.new')} width={600} onClose={onClose}
      footer={<><button className="btn" onClick={onClose}>{t('c.cancel')}</button><button className="btn btn-primary" onClick={create}>{editing ? t('c.save') : t('c.create')}</button></>}>
      <div className="col g16">
        <div className="flex g12 items-center" style={{ padding:'2px 0' }}><span className="subtle">{t('ct.code')}:</span><span className="mono" style={{ fontWeight:600, color:'var(--primary)' }}>{code}</span>{!editing && <span className="badge badge-neutral">{lang === 'vi' ? 'tự sinh' : 'auto'}</span>}</div>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label={t('ct.name')}><input className="input" autoFocus value={f.name} onChange={e => set('name', e.target.value)} placeholder={lang === 'vi' ? 'Họ và tên' : 'Full name'} /></Field></div>
          <div style={{ flex:1 }}><Field label={lang === 'vi' ? 'Tên bản ngữ' : 'Native name'}><input className="input" value={f.native} onChange={e => set('native', e.target.value)} placeholder="田中 / 박지원 / …" /></Field></div>
        </div>
        <Field label={t('ct.title2')}><input className="input" value={f.title} onChange={e => set('title', e.target.value)} placeholder={lang === 'vi' ? 'Chức vụ' : 'Job title'} /></Field>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label="Email"><input className="input mono" value={f.email} onChange={e => set('email', e.target.value)} placeholder="name@company.com" /></Field></div>
          <div style={{ flex:1 }}><Field label={lang === 'vi' ? 'Điện thoại' : 'Phone'}><input className="input mono" value={f.phone} onChange={e => set('phone', e.target.value)} placeholder="+84 …" /></Field></div>
        </div>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label={t('ct.type')}><select className="select" value={f.type} onChange={e => set('type', e.target.value)}>{Object.entries(CONTACT_TYPES).map(([k, v]) => <option key={k} value={k}>{tt(v)}</option>)}</select></Field></div>
          <div style={{ flex:1 }}><Field label={t('ct.nationality')}><select className="select" value={f.nationality} onChange={e => set('nationality', 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('ct.customer')}><select className="select" value={f.customer} onChange={e => set('customer', e.target.value)}><option value="">—</option>{p.customers.map(c => <option key={c.code} value={c.code}>{c.code} · {c.shortName}</option>)}</select></Field></div>
          <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>
      </div>
    </Modal>
  );
}

/* Dashboard widget */
function ContactWidget() {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const recent = p.contacts.slice(0, 4);
  return (
    <div className="card">
      <div className="card-head"><h3><i className="bi bi-person-vcard" style={{ color:'#C77700', marginRight:6 }}></i>{t('ct.title')}</h3><button className="btn btn-ghost btn-sm" onClick={() => p.openApp(CONTACT_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.contacts.length}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'liên hệ' : 'contacts'}</div></div>
          <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700 }}>{Array.from(new Set(p.contacts.map(c => c.nationality))).length}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'quốc tịch' : 'nationalities'}</div></div>
        </div>
        {recent.map(c => (
          <div key={c.code} className="list-row" style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'contacts', sub:'detail', id:c.code })}>
            <Avatar name={c.name} size={22} color="var(--gray-400)" /><span className="grow truncate">{c.name}</span><span className="flag mono subtle" style={{ fontWeight:600, fontSize:'var(--fs-sm)' }}>{c.nationality}</span>
          </div>
        ))}
        <button className="btn btn-subtle btn-sm" style={{ width:'100%', marginTop:8 }} onClick={() => p.quick('contacts')}><i className="bi bi-plus-lg"></i>{t('ct.new')}</button>
      </div>
    </div>
  );
}

Object.assign(window, { ContactModule, NewContactModal, ContactWidget, genContactCode });