// ===========================================================
// Settings — Cài đặt (Users, Roles, Integrations, Pricelist, Segments, Notifications)
// ===========================================================

function SettingsScreen({ role }) {
  const isUserAdmin = role ? role.role === 'admin' : (window.TVS_DATA?.roles?.[0]?.role === 'admin');
  if (!isUserAdmin) {
    return (
      <Card style={{padding:'var(--space-6)',textAlign:'center',marginTop:'var(--space-6)'}}>
        <Icon name="warning" size={32} style={{color:'var(--status-sale)'}}/>
        <h2 className="mt-3" style={{fontFamily:'var(--font-display)',fontWeight:700}}>Không đủ quyền truy cập</h2>
        <div className="fg-muted text-sm mt-1">Trang cài đặt hệ thống chỉ dành cho Giám đốc / Admin.</div>
      </Card>
    );
  }
  const [tab, setTab] = useState('users');

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Cài đặt hệ thống</h1>
          <div className="sub">Quản lý người dùng, phân quyền, tích hợp & cấu hình toàn hệ thống</div>
        </div>
      </div>

      <div className="grid" style={{gridTemplateColumns:'240px 1fr',gap:'var(--space-4)',alignItems:'flex-start'}}>
        {/* Settings nav */}
        <Card pad={false} style={{position:'sticky',top:0}}>
          <div style={{padding:'var(--space-3)',display:'flex',flexDirection:'column',gap:2}}>
            {[
              ['users','Người dùng','users'],
              ['roles','Vai trò & Phân quyền','crown'],
              ['integrations','Tích hợp','layers'],
              ['sapo','Đồng bộ Sapo','refresh'],
              ['pricelist','Bảng giá','receipt'],
              ['segments','Phân khúc khách','target'],
              ['scripts','Thư viện script','fileText'],
              ['notifications','Thông báo','bell'],
              ['data','Dữ liệu & Backup','package'],
            ].map(([k,l,ic]) => (
              <button key={k}
                onClick={() => setTab(k)}
                className={`sidebar-item ${tab===k?'active':''}`}
                style={{margin:0,width:'100%',color: tab===k ? 'var(--vs-dark-blue)' : 'var(--fg-2)', background: tab===k ? 'rgba(65,182,230,0.10)' : 'transparent'}}>
                <Icon name={ic} size={16}/>
                <span className="label">{l}</span>
              </button>
            ))}
          </div>
        </Card>

        {/* Settings content */}
        <div>
          {tab === 'users' && <UsersTab/>}
          {tab === 'roles' && <RolesTab/>}
          {tab === 'integrations' && <IntegrationsTab/>}
          {tab === 'sapo' && <SapoSyncTab/>}
          {tab === 'pricelist' && <PricelistTab/>}
          {tab === 'segments' && <SegmentsTab/>}
          {tab === 'scripts' && <ScriptsTab/>}
          {tab === 'notifications' && <NotificationsTab/>}
          {tab === 'data' && <DataTab/>}
        </div>
      </div>
    </>
  );
}

// ===== Users tab — chỉ 2 role: admin (toàn quyền) | staff (nhân viên kinh doanh) =====
const ROLE_LABELS = { admin:'Giám đốc / Admin', staff:'Nhân viên kinh doanh' };
const ROLE_OPTS = ['staff','admin'];

function UserEditModal({ user, onClose, onSaved }) {
  const isNew = !user.id;
  const [f, setF] = useState({ name: user.name||'', email: user.email||'', role: user.role||'staff', storeId: user.storeId||'', active: user.active!==false, password: '' });
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const upd = (k,v) => setF(s=>({...s,[k]:v}));
  const save = async () => {
    setBusy(true); setErr(null);
    try {
      if (isNew) {
        await window.TVS_API.api('/api/users', { method:'POST', body: JSON.stringify({ name:f.name, email:f.email, role:f.role, storeId:f.storeId||null, password:f.password||undefined }) });
      } else {
        const body = { name:f.name, role:f.role, storeId:f.storeId||null, active:f.active };
        if (f.password) body.password = f.password;
        await window.TVS_API.api('/api/users/'+user.id, { method:'PATCH', body: JSON.stringify(body) });
      }
      onSaved(); onClose();
    } catch (e) { setErr(e.message); setBusy(false); }
  };
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(1,20,60,0.45)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
      <div className="card" style={{width:440,maxWidth:'92vw',padding:'var(--space-5)'}} onClick={e=>e.stopPropagation()}>
        <h3 style={{margin:'0 0 var(--space-4)',fontSize:'var(--t-lg)'}}>{isNew?'Thêm người dùng':'Sửa người dùng'}</h3>
        <div className="field-label">Họ tên</div>
        <input className="input mb-2" value={f.name} onChange={e=>upd('name',e.target.value)}/>
        <div className="field-label">Email</div>
        <input className="input mb-2" type="email" value={f.email} disabled={!isNew} onChange={e=>upd('email',e.target.value)} style={!isNew?{opacity:0.6}:undefined}/>
        <div className="field-label">Vai trò</div>
        <select className="select mb-2" value={f.role} onChange={e=>upd('role',e.target.value)}>
          {ROLE_OPTS.map(r=><option key={r} value={r}>{ROLE_LABELS[r]}</option>)}
        </select>
        <div className="text-xs fg-muted mb-2">{f.role==='admin' ? 'Toàn quyền — thấy & thao tác trên mọi khách hàng.' : 'Chỉ thấy khách hàng được giao (assign), tự nhập tay, hoặc import Excel.'}</div>
        <div className="field-label">Cửa hàng gắn liền (tuỳ chọn — chỉ để tham chiếu)</div>
        <select className="select mb-2" value={f.storeId} onChange={e=>upd('storeId',e.target.value)}>
          <option value="">— Không gắn cửa hàng —</option>
          {(D.stores||[]).map(s=><option key={s.id} value={s.id}>{s.name}</option>)}
        </select>
        <div className="field-label">{isNew?'Mật khẩu (bỏ trống = mặc định TVS@2026)':'Đặt lại mật khẩu (bỏ trống nếu giữ nguyên)'}</div>
        <input className="input mb-2" type="password" value={f.password} onChange={e=>upd('password',e.target.value)} placeholder="••••••••"/>
        {!isNew && (
          <label className="row mb-2" style={{cursor:'pointer',gap:8}}>
            <input type="checkbox" checked={f.active} onChange={e=>upd('active',e.target.checked)}/>
            <span className="text-sm fg-2">Tài khoản đang hoạt động</span>
          </label>
        )}
        {err && <div className="banner danger mb-2" style={{padding:'8px 10px'}}><span className="text-sm">{err}</span></div>}
        <div className="row gap-2 mt-3" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Hủy</button>
          <button className="btn btn-cta btn-sm" onClick={save} disabled={busy || !f.name || (isNew && !f.email)}>{busy?'Đang lưu…':'Lưu'}</button>
        </div>
      </div>
    </div>
  );
}

function UsersTab() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const canManage = live && D.roles[0] && D.roles[0].role === 'admin';
  const [users, setUsers] = useState([]);
  const [q, setQ] = useState('');
  const [editing, setEditing] = useState(null);
  const load = () => { if (live) window.TVS_API.api('/api/users').then(r=>setUsers(r.users||[])).catch(()=>{}); };
  useEffect(() => { load(); }, []);
  const filtered = users.filter(u => !q || (u.name+' '+u.email+' '+(u.storeName||'')).toLowerCase().includes(q.toLowerCase()));

  return (
    <>
      <Card pad={false}>
        <div style={{padding:'var(--space-4) var(--space-5)',borderBottom:'1px solid var(--border-1)',display:'flex',gap:'var(--space-3)',alignItems:'center'}}>
          <div>
            <h3 style={{margin:0,fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Người dùng hệ thống</h3>
            <div className="text-xs fg-muted mt-1">{users.length} tài khoản · {users.filter(u=>u.active).length} đang hoạt động</div>
          </div>
          <div className="topbar-search" style={{flex:'0 1 280px',marginLeft:'auto'}}>
            <Icon name="search" size={14} style={{color:'var(--fg-muted)'}}/>
            <input placeholder="Tìm tên, email, cửa hàng..." value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
          {canManage && <button className="btn btn-cta" onClick={() => setEditing({})}><Icon name="plus" size={14}/>Thêm người dùng</button>}
        </div>
        {!canManage && <div className="banner" style={{margin:'var(--space-3) var(--space-5)'}}><Icon name="crown" size={14}/><span className="text-sm">Chỉ tài khoản Giám đốc/Admin mới tạo & phân quyền người dùng.</span></div>}
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr><th>Người dùng</th><th>Vai trò</th><th>Cửa hàng</th><th>Trạng thái</th><th></th></tr>
            </thead>
            <tbody>
              {filtered.map(u => (
                <tr key={u.id}>
                  <td>
                    <div className="row gap-3">
                      <Avatar name={u.name} size="sm"/>
                      <div><div className="strong">{u.name}</div><div className="text-xs fg-muted">{u.email}</div></div>
                    </div>
                  </td>
                  <td><Tag variant={u.role === 'admin'?'platinum':'outline'}>{ROLE_LABELS[u.role]||u.role}</Tag></td>
                  <td className="text-sm">{u.storeName || '—'}</td>
                  <td><Tag variant={u.active?'success':'outline'} dot>{u.active?'Hoạt động':'Tạm khoá'}</Tag></td>
                  <td>{canManage && <button className="btn btn-icon btn-sm btn-ghost" title="Sửa" onClick={()=>setEditing(u)}><Icon name="moreV" size={14}/></button>}</td>
                </tr>
              ))}
              {filtered.length===0 && <tr><td colSpan={5}><div className="text-sm fg-muted" style={{padding:'var(--space-4)'}}>Không có người dùng</div></td></tr>}
            </tbody>
          </table>
        </div>
      </Card>
      {editing && <UserEditModal user={editing} onClose={()=>setEditing(null)} onSaved={load}/>}
    </>
  );
}

// ===== Roles & Permissions =====
function RolesTab() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const canManage = live && D.roles[0] && D.roles[0].role === 'admin';
  const [mx, setMx] = useState(null);
  const [draft, setDraft] = useState(null); // Set<permKey> cho cột staff khi đang sửa
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState(null);

  const load = () => {
    if (live) {
      window.TVS_API.api('/api/users/permissions-matrix')
        .then(m => {
          setMx(m);
          setDraft(null);
        })
        .catch(() => {});
    }
  };

  useEffect(() => { load(); }, []);

  if (!mx) return <Card><div className="text-sm fg-muted">Đang tải ma trận quyền…</div></Card>;

  const staffCol = mx.roles.find(r => r.role === 'staff');
  const editing = draft !== null;

  const toggle = (key) => {
    if (!canManage) return;
    setDraft(s => {
      const current = s || new Set(mx.perms.filter((p,i) => staffCol.granted[i]).map(p => p.key));
      const n = new Set(current);
      if (n.has(key)) n.delete(key);
      else n.add(key);
      return n;
    });
  };

  const save = async () => {
    setBusy(true); setMsg(null);
    try {
      await window.TVS_API.api('/api/users/permissions-matrix', { method:'PUT', body: JSON.stringify({ permissions: [...draft] }) });
      setMsg({ text:'Đã lưu quyền cho Nhân viên kinh doanh' });
      load();
    } catch (e) { setMsg({ err:true, text: e.message }); }
    setBusy(false);
  };

  return (
    <Card pad={false}>
      <CardHeader title="Vai trò & Phân quyền"
        sub="Chỉ 2 vai trò: Admin (cố định, toàn quyền) và Nhân viên kinh doanh (Admin có thể chỉnh)"
        actions={canManage && editing && (
          <div className="row gap-2">
            <button className="btn btn-ghost btn-sm" onClick={()=>setDraft(null)} disabled={busy}>Hủy</button>
            <button className="btn btn-cta btn-sm" onClick={save} disabled={busy}>{busy?'Đang lưu…':'Lưu quyền'}</button>
          </div>
        )}/>
      <div className="banner" style={{margin:'var(--space-3) var(--space-5)'}}>
        <Icon name="crown" size={14}/><span className="text-sm">Admin luôn toàn quyền (không sửa được, tránh tự khoá quyền của mình). Chọn trực tiếp các checkbox của Nhân viên kinh doanh để chỉnh sửa quyền.</span>
      </div>
      {msg && <div className={'banner mb-2 '+(msg.err?'danger':'')} style={{margin:'0 var(--space-5) var(--space-3)',padding:'8px 10px'}}><span className="text-sm">{msg.text}</span></div>}
      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Quyền</th>
              {mx.roles.map(r => <th key={r.role} className="num" style={{minWidth:130}}>{r.label}</th>)}
            </tr>
          </thead>
          <tbody>
            {mx.perms.map((p, i) => (
              <tr key={p.key}>
                <td>{p.label}</td>
                {mx.roles.map(r => {
                  const isStaff = r.role === 'staff';
                  const granted = draft !== null && isStaff ? draft.has(p.key) : r.granted[i];
                  const disabled = !isStaff || !canManage;
                  return (
                    <td key={r.role} className="num">
                      <input type="checkbox"
                        checked={granted}
                        disabled={disabled}
                        onChange={() => toggle(p.key)}
                        style={{width:18,height:18,cursor:disabled?'not-allowed':'pointer',accentColor:'var(--vs-light-blue)'}}/>
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}

// ===== Integrations tab =====
// functional=true: dịch vụ có chức năng thật chạy phía sau (Sapo đồng bộ dữ liệu thật,
// Email gửi thư thật). functional=false: mới có chỗ LƯU cấu hình, CHƯA có tích hợp
// nghiệp vụ nào dùng nó — badge sẽ nói rõ "Đã lưu cấu hình" thay vì "Đã kết nối" để không
// gây hiểu nhầm là đang hoạt động.
function IntegrationsTab() {
  const integrations = [
    { key:'sapo', name:'Sapo POS & ERP', desc:'Đồng bộ sản phẩm, tồn kho, đơn hàng B2C/B2B từ Sapo về CRM', icon:'cart', color:'#0FA958', functional:true },
    { key:'email', name:'Email (SMTP)', desc:'Gửi email cảnh báo & báo cáo qua máy chủ SMTP của bạn', icon:'mail', color:'#1A82E2', functional:true },
    { key:'zalo', name:'Zalo Official Account', desc:'Gửi tin nhắn ZNS, nhận inbox, broadcast chiến dịch', icon:'chat', color:'#0068FF', functional:false },
    { key:'sms', name:'SMS Brandname', desc:'Gửi SMS marketing & OTP', icon:'mail', color:'#FF0000', functional:false },
    { key:'shipper', name:'GHN · GHTK · VNPost', desc:'Tạo & track vận đơn B2B', icon:'truck', color:'#FF6600', functional:false },
    { key:'tiktok', name:'TikTok Shop Affiliate', desc:'Đồng bộ KOC/affiliate, tracking link, hoa hồng', icon:'sparkles', color:'#000000', functional:false },
    { key:'misa', name:'MISA Kế toán', desc:'Đẩy số liệu doanh thu sang phần mềm kế toán', icon:'fileText', color:'#E60012', functional:false },
    { key:'callcenter', name:'StringeeX Call Center', desc:'Click-to-call, ghi âm cuộc gọi, IVR', icon:'phone', color:'#7C3AED', functional:false },
  ];
  const apiLive = !!(window.TVS_API && window.TVS_API.isAuthed());
  const [cfgMap, setCfgMap] = useState({});
  const [openKey, setOpenKey] = useState(null);
  const [form, setForm] = useState({ linkUrl: '', apiKey: '' });
  const [busy, setBusy] = useState(false);
  useEffect(() => {
    if (apiLive) window.TVS_API.integrations().then(r => {
      const m = {}; (r.integrations || []).forEach(i => { m[i.key] = i; }); setCfgMap(m);
    }).catch(() => {});
  }, []);
  const openEditor = (it) => {
    if (!apiLive) { window.tvsDemo && window.tvsDemo('Cấu hình ' + it.name); return; }
    const c = cfgMap[it.key] || {};
    const ex = c.extra || {};
    setForm({ linkUrl: c.linkUrl || '', apiKey: '', host: ex.host || '', port: ex.port || '587', user: ex.user || '', from: ex.from || '', secure: !!ex.secure, active: c.active !== false });
    setOpenKey(it.key);
  };
  const saveEditor = async (it) => {
    setBusy(true);
    try {
      const body = { label: it.name };
      if (it.key === 'email') {
        body.extra = { host: form.host, port: form.port, user: form.user, from: form.from || form.user, secure: form.secure };
        body.active = form.active;
        if (form.apiKey) body.apiKey = form.apiKey;
      } else {
        body.linkUrl = form.linkUrl;
        if (form.apiKey) body.apiKey = form.apiKey;
      }
      await window.TVS_API.saveIntegration(it.key, body);
      const r = await window.TVS_API.integrations();
      const m = {}; (r.integrations || []).forEach(i => { m[i.key] = i; }); setCfgMap(m);
      window.tvsDemo && window.tvsDemo('Đã lưu cấu hình ' + it.name);
      setOpenKey(null);
    } catch (e) { window.tvsDemo && window.tvsDemo('Lỗi lưu: ' + e.message); }
    setBusy(false);
  };
  const testSapo = async () => {
    setBusy(true);
    try { const r = await window.TVS_API.testSapo(); window.tvsDemo && window.tvsDemo('Sapo OK — ' + r.locations + ' địa điểm'); }
    catch (e) { window.tvsDemo && window.tvsDemo('Sapo lỗi: ' + e.message); }
    setBusy(false);
  };
  const testEmail = async () => {
    const to = prompt('Nhập địa chỉ email nhận thư thử nghiệm:', form.user || '');
    if (!to) return;
    setBusy(true);
    try {
      const r = await window.TVS_API.api('/api/integrations/email/test', { method:'POST', body: JSON.stringify({ to }) });
      window.tvsToast && window.tvsToast('Đã gửi email thử tới ' + r.sentTo);
    }
    catch (e) {
      window.tvsToast && window.tvsToast('SMTP lỗi: ' + e.message);
    }
    setBusy(false);
  };

  const connectedCount = integrations.filter(it => cfgMap[it.key] && cfgMap[it.key].apiKeySet).length;
  return (
    <>
      <div className="banner mb-4">
        <Icon name="zap" size={16}/>
        <div className="text-sm" style={{flex:1}}>
          <b>{connectedCount}/{integrations.length} dịch vụ đã cấu hình.</b> Sapo & Email đang hoạt động thật (đồng bộ dữ liệu / gửi thư). Các dịch vụ khác mới lưu được thông tin kết nối, chưa có chức năng nghiệp vụ chạy phía sau.
        </div>
      </div>
      <div className="grid grid-2" style={{gap:'var(--space-3)'}}>
        {integrations.map(it => {
          const real = cfgMap[it.key];
          const configured = !!(real && real.apiKeySet);
          const editing = openKey === it.key;
          return (
          <Card key={it.key} className="row gap-4" style={{alignItems:'flex-start'}}>
            <div style={{width:48,height:48,borderRadius:'var(--radius-md)',background: it.color + '12',color: it.color,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <Icon name={it.icon} size={24}/>
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div className="row mb-1">
                <h4 style={{margin:0,fontSize:'var(--t-md)',color:'var(--fg-1)'}}>{it.name}</h4>
                <Tag variant={configured ? (it.functional?'success':'info') : 'outline'} dot style={{marginLeft:'auto'}}>
                  {configured ? (it.functional ? 'Đã kết nối' : 'Đã lưu cấu hình') : 'Chưa kết nối'}
                </Tag>
              </div>
              <div className="text-sm fg-2 mb-2" style={{lineHeight:1.5}}>{it.desc}</div>
              <div className="text-xs fg-muted">
                {configured ? `Link: ${real.linkUrl || '—'} · API key đã lưu` : 'Chưa cấu hình'}
                {configured && !it.functional && <span> · <i>chưa có tính năng dùng cấu hình này</i></span>}
              </div>

              {editing && it.key === 'email' && (
                <div className="mt-3" style={{padding:'var(--space-3)',background:'var(--bg-soft)',borderRadius:'var(--radius-sm)',border:'1px solid var(--border-1)'}}>
                  <div className="row gap-2">
                    <div style={{flex:2}}><div className="field-label">SMTP host</div><input className="input mb-2" value={form.host} onChange={e=>setForm(f=>({...f,host:e.target.value}))} placeholder="smtp.gmail.com"/></div>
                    <div style={{flex:1}}><div className="field-label">Port</div><input className="input mb-2 tnum" value={form.port} onChange={e=>setForm(f=>({...f,port:e.target.value}))} placeholder="587"/></div>
                  </div>
                  <div className="field-label">Tài khoản (user)</div>
                  <input className="input mb-2" value={form.user} onChange={e=>setForm(f=>({...f,user:e.target.value}))} placeholder="you@company.com"/>
                  <div className="field-label">Mật khẩu SMTP</div>
                  <input className="input mb-2" type="password" value={form.apiKey} onChange={e=>setForm(f=>({...f,apiKey:e.target.value}))} placeholder={real && real.apiKeySet ? '•••• (để trống nếu giữ nguyên)' : 'App password / mật khẩu'}/>
                  <div className="field-label">Địa chỉ gửi (from)</div>
                  <input className="input mb-2" value={form.from} onChange={e=>setForm(f=>({...f,from:e.target.value}))} placeholder="CRM TVS <noreply@company.com>"/>
                  <label className="row mb-2" style={{gap:8,cursor:'pointer'}}><input type="checkbox" checked={form.secure} onChange={e=>setForm(f=>({...f,secure:e.target.checked}))}/><span className="text-sm fg-2">SSL/TLS (port 465)</span></label>
                  <label className="row mb-2" style={{gap:8,cursor:'pointer'}}><input type="checkbox" checked={form.active} onChange={e=>setForm(f=>({...f,active:e.target.checked}))}/><span className="text-sm fg-2">Bật gửi cảnh báo tự động</span></label>
                  <div className="row gap-2 mt-2">
                    <button className="btn btn-cta btn-sm" onClick={()=>saveEditor(it)} disabled={busy}>Lưu</button>
                    <button className="btn btn-secondary btn-sm" onClick={testEmail} disabled={busy}>Gửi email thử</button>
                    <button className="btn btn-ghost btn-sm" onClick={()=>setOpenKey(null)}>Đóng</button>
                  </div>
                  <div className="text-xs fg-muted mt-2">Lưu ý: Gmail cần bật 2FA + App Password. Bấm Lưu trước rồi Gửi thử.</div>
                </div>
              )}

              {editing && it.key !== 'email' && (
                <div className="mt-3" style={{padding:'var(--space-3)',background:'var(--bg-soft)',borderRadius:'var(--radius-sm)',border:'1px solid var(--border-1)'}}>
                  <div className="field-label">Link / Endpoint URL</div>
                  <input className="input mb-2" value={form.linkUrl} onChange={e=>setForm(f=>({...f,linkUrl:e.target.value}))} placeholder="vd: vitaminshoppe.mysapogo.com"/>
                  <div className="field-label">API key / Access token</div>
                  <input className="input mb-2" type="password" value={form.apiKey} onChange={e=>setForm(f=>({...f,apiKey:e.target.value}))} placeholder={real && real.apiKeySet ? '•••• (để trống nếu giữ nguyên)' : 'Nhập API key'}/>
                  <div className="row gap-2 mt-2">
                    <button className="btn btn-cta btn-sm" onClick={()=>saveEditor(it)} disabled={busy}>Lưu</button>
                    {it.key==='sapo' && <button className="btn btn-secondary btn-sm" onClick={testSapo} disabled={busy}>Kiểm tra kết nối</button>}
                    <button className="btn btn-ghost btn-sm" onClick={()=>setOpenKey(null)}>Đóng</button>
                  </div>
                </div>
              )}

              <div className="row mt-3" style={{justifyContent:'flex-end'}}>
                <button className={configured ? 'btn btn-ghost btn-sm' : 'btn btn-cta btn-sm'} onClick={() => openEditor(it)}>
                  {configured ? 'Sửa cấu hình' : 'Kết nối'}
                </button>
              </div>
            </div>
          </Card>
          );
        })}
      </div>
    </>
  );
}

// ===== Pricelist tab (THẬT — bảng giá + giá tính từ sản phẩm) =====
function NewPricelistModal({ onClose, onSaved }) {
  const [f, setF] = useState({ name:'', type:'b2b', discountPercent:'10', minQtyDefault:'20', note:'' });
  const [busy, setBusy] = useState(false); const [err, setErr] = useState(null);
  const save = async () => {
    setBusy(true); setErr(null);
    try { const r = await window.TVS_API.api('/api/pricelists',{method:'POST',body:JSON.stringify(f)}); onSaved(r.id); onClose(); }
    catch (e) { setErr(e.message); setBusy(false); }
  };
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(1,20,60,0.45)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
      <div className="card" style={{width:440,maxWidth:'92vw',padding:'var(--space-5)'}} onClick={e=>e.stopPropagation()}>
        <h3 style={{margin:'0 0 var(--space-4)',fontSize:'var(--t-lg)'}}>Tạo bảng giá mới</h3>
        <div className="field-label">Tên bảng giá</div>
        <input className="input mb-2" value={f.name} onChange={e=>setF(s=>({...s,name:e.target.value}))} placeholder="vd: Đối tác Gym & PT"/>
        <div className="field-label">Loại</div>
        <select className="select mb-2" value={f.type} onChange={e=>setF(s=>({...s,type:e.target.value}))}>
          <option value="b2c">B2C</option><option value="b2b">B2B</option><option value="wholesale">Wholesale</option><option value="affiliate">Affiliate</option>
        </select>
        <div className="row gap-2">
          <div style={{flex:1}}><div className="field-label">Chiết khấu mặc định (%)</div><input className="input mb-2 tnum" type="number" value={f.discountPercent} onChange={e=>setF(s=>({...s,discountPercent:e.target.value}))}/></div>
          <div style={{flex:1}}><div className="field-label">SL tối thiểu</div><input className="input mb-2 tnum" type="number" value={f.minQtyDefault} onChange={e=>setF(s=>({...s,minQtyDefault:e.target.value}))}/></div>
        </div>
        {err && <div className="banner danger mb-2" style={{padding:'8px 10px'}}><span className="text-sm">{err}</span></div>}
        <div className="row gap-2 mt-2" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Hủy</button>
          <button className="btn btn-cta btn-sm" onClick={save} disabled={busy || !f.name}>{busy?'Đang lưu…':'Tạo'}</button>
        </div>
      </div>
    </div>
  );
}

function PricelistTab() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const canManage = live && D.roles[0] && D.roles[0].role === 'admin';
  const [lists, setLists] = useState(null);
  const [activeId, setActiveId] = useState(null);
  const [data, setData] = useState(null); // { list, items, total, page, pages }
  const [q, setQ] = useState('');
  const [page, setPage] = useState(1);
  const [creating, setCreating] = useState(false);
  const loadLists = (selId) => window.TVS_API.api('/api/pricelists').then(r=>{ setLists(r.pricelists||[]); if (selId) setActiveId(selId); else if (!activeId && r.pricelists && r.pricelists[0]) setActiveId(r.pricelists[0].id); });
  const loadItems = () => { if (activeId) window.TVS_API.api(`/api/pricelists/${activeId}/items?page=${page}&pageSize=50&q=${encodeURIComponent(q)}`).then(setData).catch(()=>{}); };
  useEffect(() => { if (live) loadLists(); }, []);
  useEffect(() => { setPage(1); }, [activeId, q]);
  useEffect(() => { loadItems(); }, [activeId, page, q]);

  const active = lists && lists.find(l => l.id === activeId);
  const editPrice = async (it) => {
    const cur = it.listPrice;
    const val = prompt(`Giá "${it.name}" trong bảng "${active.name}" (đ):`, String(cur));
    if (val == null) return;
    const price = Math.round(Number(val.replace(/[^0-9]/g,'')) || 0);
    await window.TVS_API.api(`/api/pricelists/${activeId}/items/${it.productId}`, { method:'PUT', body: JSON.stringify({ price, minQty: it.minQty }) });
    loadItems(); loadLists(activeId);
  };
  const resetPrice = async (it) => { await window.TVS_API.api(`/api/pricelists/${activeId}/items/${it.productId}`, { method:'DELETE' }); loadItems(); loadLists(activeId); };
  const delList = async () => { if (!confirm(`Xóa bảng giá "${active.name}"?`)) return; try { await window.TVS_API.api('/api/pricelists/'+activeId,{method:'DELETE'}); setActiveId(null); loadLists(); } catch (e) { alert(e.message); } };
  const exportCsv = () => window.TVS_API.downloadFile(`/api/pricelists/${activeId}/items?page=1&pageSize=10000`, `bang-gia-${active?active.name:'export'}.csv`).catch(e=>alert(e.message));

  if (!lists) return <Card><div className="text-sm fg-muted">Đang tải bảng giá…</div></Card>;
  return (
    <>
      <div className="row gap-2 mb-4" style={{flexWrap:'wrap'}}>
        {lists.map(l => (
          <button key={l.id} className={l.id===activeId ? 'btn btn-cta' : 'btn btn-secondary'} onClick={() => setActiveId(l.id)}>
            {l.name}{l.discountPercent>0 && <span style={{opacity:0.7,marginLeft:4}}>-{l.discountPercent}%</span>}
          </button>
        ))}
        {canManage && <button className="btn btn-ghost" onClick={()=>setCreating(true)}><Icon name="plus" size={14}/>Tạo bảng giá mới</button>}
      </div>
      {active && (
      <Card pad={false}>
        <CardHeader title={`Bảng giá: ${active.name}`}
          sub={active.note || (active.isDefault ? 'Giá lẻ áp dụng cho khách cá nhân' : `Chiết khấu mặc định ${active.discountPercent}% so với giá lẻ · ${active.itemCount} SP đặt giá riêng`)}
          actions={
            <div className="row gap-2">
              <div className="topbar-search" style={{flex:'0 1 220px'}}>
                <Icon name="search" size={14} style={{color:'var(--fg-muted)'}}/>
                <input placeholder="Tìm SP / SKU..." value={q} onChange={e=>setQ(e.target.value)}/>
              </div>
              <button className="btn btn-secondary btn-sm" onClick={exportCsv}><Icon name="download" size={12}/>Xuất CSV</button>
              {canManage && !active.isDefault && <button className="btn btn-ghost btn-sm" onClick={delList}><Icon name="close" size={12}/>Xóa bảng</button>}
            </div>
          }/>
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr><th>SKU</th><th>Sản phẩm</th><th>Danh mục</th><th className="num">Giá lẻ</th><th className="num">Giá {active.type.toUpperCase()}</th><th className="num">Chiết khấu</th><th className="num">SL tối thiểu</th>{canManage && <th></th>}</tr>
            </thead>
            <tbody>
              {data && data.items.map(it => (
                <tr key={it.productId}>
                  <td className="tnum text-xs fg-muted">{it.sku}</td>
                  <td className="strong">{it.name}</td>
                  <td><Tag variant="outline">{it.category}</Tag></td>
                  <td className="num tnum">{fmt.vndFull(it.retailPrice)}</td>
                  <td className="num strong">{fmt.vndFull(it.listPrice)}{it.overridden && <Tag variant="info" style={{marginLeft:6}}>riêng</Tag>}</td>
                  <td className="num">{it.discount > 0 ? <Tag variant="success">-{it.discount}%</Tag> : <span className="text-xs fg-muted">—</span>}</td>
                  <td className="num tnum">{it.minQty}</td>
                  {canManage && <td><div className="row gap-1">
                    <button className="btn btn-icon btn-sm btn-ghost" title="Đặt giá riêng" onClick={()=>editPrice(it)}><Icon name="note" size={14}/></button>
                    {it.overridden && <button className="btn btn-icon btn-sm btn-ghost" title="Bỏ giá riêng" onClick={()=>resetPrice(it)}><Icon name="refresh" size={14}/></button>}
                  </div></td>}
                </tr>
              ))}
              {data && data.items.length===0 && <tr><td colSpan={canManage?8:7}><div className="text-sm fg-muted" style={{padding:'var(--space-3)'}}>Không có sản phẩm</div></td></tr>}
            </tbody>
          </table>
        </div>
        {data && data.pages > 1 && (
          <div className="row gap-2" style={{padding:'var(--space-3) var(--space-5)',justifyContent:'flex-end',alignItems:'center'}}>
            <span className="text-xs fg-muted">Trang {data.page}/{data.pages} · {data.total.toLocaleString('vi-VN')} SP</span>
            <button className="btn btn-secondary btn-sm" disabled={page<=1} onClick={()=>setPage(p=>p-1)}>Trước</button>
            <button className="btn btn-secondary btn-sm" disabled={page>=data.pages} onClick={()=>setPage(p=>p+1)}>Sau</button>
          </div>
        )}
      </Card>
      )}
      {creating && <NewPricelistModal onClose={()=>setCreating(false)} onSaved={(id)=>loadLists(id)}/>}
    </>
  );
}

// ===== Segments tab (số liệu THẬT tính từ DB) =====
const SEG_PARAM_FIELDS = [
  ['ltvMin', 'LTV tối thiểu (đ)'],
  ['ltvMax', 'LTV tối đa (đ)'],
  ['ordersMin', 'Số đơn tối thiểu'],
  ['ordersMax', 'Số đơn tối đa'],
  ['lastOrderWithinDays', 'Đã mua trong (ngày)'],
  ['lastOrderBeforeDays', 'Không mua quá (ngày)'],
];

function SegmentEditModal({ seg, onClose, onSaved }) {
  const isNew = !seg.id;
  const [f, setF] = useState({ name: seg.name || '', description: seg.description || '', color: seg.color || '#41B6E6', params: { ...(seg.params || {}) } });
  const [busy, setBusy] = useState(false); const [err, setErr] = useState(null);
  const setParam = (k, v) => setF(s => { const p = { ...s.params }; if (v === '' || v == null) delete p[k]; else p[k] = Number(v); return { ...s, params: p }; });
  const save = async () => {
    setBusy(true); setErr(null);
    try {
      const body = { name: f.name, description: f.description, color: f.color, params: f.params };
      if (isNew) await window.TVS_API.api('/api/segments', { method: 'POST', body: JSON.stringify(body) });
      else await window.TVS_API.api('/api/segments/' + seg.id, { method: 'PATCH', body: JSON.stringify(body) });
      onSaved(); onClose();
    } catch (e) { setErr(e.message); setBusy(false); }
  };
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(1,20,60,0.45)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
      <div className="card" style={{width:480,maxWidth:'92vw',padding:'var(--space-5)'}} onClick={e=>e.stopPropagation()}>
        <h3 style={{margin:'0 0 var(--space-4)',fontSize:'var(--t-lg)'}}>{isNew?'Thêm phân khúc':'Sửa phân khúc'}</h3>
        <div className="field-label">Tên phân khúc</div>
        <input className="input mb-2" value={f.name} onChange={e=>setF(s=>({...s,name:e.target.value}))}/>
        <div className="field-label">Mô tả</div>
        <input className="input mb-2" value={f.description} onChange={e=>setF(s=>({...s,description:e.target.value}))}/>
        <div className="row gap-2 mb-2" style={{alignItems:'center'}}>
          <div className="field-label" style={{margin:0}}>Màu</div>
          <input type="color" value={f.color} onChange={e=>setF(s=>({...s,color:e.target.value}))} style={{width:40,height:28,border:'none',background:'none'}}/>
        </div>
        <div className="field-label mt-2">Điều kiện (để trống = bỏ qua, kết hợp bằng VÀ)</div>
        <div className="grid grid-2" style={{gap:'var(--space-2)'}}>
          {SEG_PARAM_FIELDS.map(([k,l]) => (
            <div key={k}><div className="text-xs fg-muted mb-1">{l}</div>
              <input className="input tnum" type="number" value={f.params[k] ?? ''} onChange={e=>setParam(k,e.target.value)}/></div>
          ))}
        </div>
        {err && <div className="banner danger mt-2" style={{padding:'8px 10px'}}><span className="text-sm">{err}</span></div>}
        <div className="row gap-2 mt-3" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Hủy</button>
          <button className="btn btn-cta btn-sm" onClick={save} disabled={busy || !f.name}>{busy?'Đang lưu…':'Lưu'}</button>
        </div>
      </div>
    </div>
  );
}

function SegmentCustomersModal({ seg, onClose }) {
  const [rows, setRows] = useState([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(true);
  useEffect(() => { window.TVS_API.api('/api/segments/'+seg.id+'/customers?pageSize=25').then(r=>{setRows(r.customers||[]);setTotal(r.total||0);setLoading(false);}).catch(()=>setLoading(false)); }, []);
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(1,20,60,0.45)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
      <div className="card" style={{width:640,maxWidth:'94vw',maxHeight:'86vh',padding:0,display:'flex',flexDirection:'column'}} onClick={e=>e.stopPropagation()}>
        <div style={{padding:'var(--space-4) var(--space-5)',borderBottom:'1px solid var(--border-1)'}}>
          <div className="row"><h3 style={{margin:0,fontSize:'var(--t-md)'}}>{seg.name}</h3>
            <Tag variant="info" style={{marginLeft:'auto'}}>{total.toLocaleString('vi-VN')} khách</Tag></div>
          <div className="text-xs fg-muted mt-1">{seg.rule}</div>
        </div>
        <div className="table-wrap" style={{overflow:'auto'}}>
          {loading ? <div className="text-sm fg-muted" style={{padding:'var(--space-4)'}}>Đang tải…</div> :
          <table className="tbl"><thead><tr><th>Khách</th><th className="num">LTV</th><th className="num">Đơn</th><th>Hạng</th></tr></thead>
            <tbody>{rows.map(c=>(
              <tr key={c.id}><td><div className="strong">{c.name}</div><div className="text-xs fg-muted">{c.phone}</div></td>
                <td className="num tnum">{fmt.vndFull(c.ltv||0)}</td><td className="num tnum">{c.orders||0}</td><td><Tag variant="outline">{c.tier}</Tag></td></tr>
            ))}{rows.length===0 && <tr><td colSpan={4}><div className="text-sm fg-muted" style={{padding:'var(--space-3)'}}>Không có khách</div></td></tr>}</tbody>
          </table>}
        </div>
        <div style={{padding:'var(--space-3) var(--space-5)',borderTop:'1px solid var(--border-1)',textAlign:'right'}}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Đóng</button>
        </div>
      </div>
    </div>
  );
}

function SegmentsTab() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const canManage = live && D.roles[0] && D.roles[0].role === 'admin';
  const [segs, setSegs] = useState(null);
  const [editing, setEditing] = useState(null);
  const [viewing, setViewing] = useState(null);
  const load = () => { if (live) window.TVS_API.api('/api/segments').then(r=>setSegs(r.segments||[])).catch(()=>setSegs([])); };
  useEffect(() => { load(); }, []);
  const del = async (s) => { if (!confirm('Xóa phân khúc "'+s.name+'"?')) return; await window.TVS_API.api('/api/segments/'+s.id,{method:'DELETE'}); load(); };
  if (!segs) return <Card><div className="text-sm fg-muted">Đang tải phân khúc…</div></Card>;
  return (
    <>
      <Card pad={false}>
        <CardHeader title="Phân khúc khách hàng tự động"
          sub="Số khách được đếm trực tiếp từ dữ liệu thật theo điều kiện"
          actions={canManage && <button className="btn btn-cta btn-sm" onClick={()=>setEditing({})}><Icon name="plus" size={12}/>Thêm phân khúc</button>}/>
        <div className="card-pad">
          {segs.map(s => (
            <div key={s.id} className="card mb-3" style={{padding:'var(--space-4)',display:'flex',gap:'var(--space-3)',alignItems:'center'}}>
              <div style={{width:8,height:48,background:s.color,borderRadius:4,flexShrink:0}}/>
              <div style={{flex:1,minWidth:0}}>
                <div className="strong fg-1 mb-1">{s.name}</div>
                <div className="text-sm fg-muted" style={{fontFamily:'var(--font-mono)',fontSize:12}}>{s.rule}</div>
              </div>
              <div style={{textAlign:'right',cursor:'pointer'}} onClick={()=>setViewing(s)} title="Xem danh sách khách">
                <div className="tnum bold fg-1" style={{fontSize:20,fontFamily:'var(--font-display)'}}>{(s.count||0).toLocaleString('vi-VN')}</div>
                <div className="text-xs fg-muted">khách</div>
              </div>
              <div className="row gap-1">
                <button className="btn btn-secondary btn-sm" onClick={()=>setViewing(s)}><Icon name="eye" size={12}/>Xem</button>
                {canManage && <><button className="btn btn-ghost btn-sm" onClick={()=>setEditing(s)}><Icon name="note" size={12}/></button>
                <button className="btn btn-icon btn-sm btn-ghost" title="Xóa" onClick={()=>del(s)}><Icon name="close" size={14}/></button></>}
              </div>
            </div>
          ))}
          {segs.length===0 && <div className="text-sm fg-muted">Chưa có phân khúc nào.</div>}
        </div>
      </Card>
      {editing && <SegmentEditModal seg={editing} onClose={()=>setEditing(null)} onSaved={load}/>}
      {viewing && <SegmentCustomersModal seg={viewing} onClose={()=>setViewing(null)}/>}
    </>
  );
}

// ===== Scripts library (THẬT) =====
function ScriptEditModal({ script, onClose, onSaved }) {
  const isNew = !script.id;
  const [f, setF] = useState({ title: script.title||'', reason: script.reason||'', tags: (script.tags||[]).join(', '), body: script.body||'' });
  const [busy, setBusy] = useState(false); const [err, setErr] = useState(null);
  const save = async () => {
    setBusy(true); setErr(null);
    try {
      const body = { title: f.title, reason: f.reason, body: f.body, tags: f.tags.split(',').map(t=>t.trim()).filter(Boolean) };
      if (isNew) await window.TVS_API.api('/api/scripts', { method:'POST', body: JSON.stringify(body) });
      else await window.TVS_API.api('/api/scripts/'+script.id, { method:'PATCH', body: JSON.stringify(body) });
      onSaved(); onClose();
    } catch (e) { setErr(e.message); setBusy(false); }
  };
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(1,20,60,0.45)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
      <div className="card" style={{width:560,maxWidth:'94vw',maxHeight:'88vh',overflow:'auto',padding:'var(--space-5)'}} onClick={e=>e.stopPropagation()}>
        <h3 style={{margin:'0 0 var(--space-4)',fontSize:'var(--t-lg)'}}>{isNew?'Tạo script':'Sửa script'}</h3>
        <div className="field-label">Tiêu đề</div>
        <input className="input mb-2" value={f.title} onChange={e=>setF(s=>({...s,title:e.target.value}))}/>
        <div className="row gap-2">
          <div style={{flex:1}}><div className="field-label">Lý do / danh mục</div><input className="input mb-2" value={f.reason} onChange={e=>setF(s=>({...s,reason:e.target.value}))} placeholder="at-risk / restock..."/></div>
          <div style={{flex:1}}><div className="field-label">Tags (phân cách ,)</div><input className="input mb-2" value={f.tags} onChange={e=>setF(s=>({...s,tags:e.target.value}))} placeholder="Combo, Win-back"/></div>
        </div>
        <div className="field-label">Nội dung script</div>
        <textarea className="input mb-2" style={{minHeight:200,fontFamily:'var(--font-mono)',fontSize:13}} value={f.body} onChange={e=>setF(s=>({...s,body:e.target.value}))}/>
        {err && <div className="banner danger mb-2" style={{padding:'8px 10px'}}><span className="text-sm">{err}</span></div>}
        <div className="row gap-2 mt-2" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Hủy</button>
          <button className="btn btn-cta btn-sm" onClick={save} disabled={busy || !f.title}>{busy?'Đang lưu…':'Lưu'}</button>
        </div>
      </div>
    </div>
  );
}

function ScriptViewModal({ script, onClose }) {
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(1,20,60,0.45)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
      <div className="card" style={{width:560,maxWidth:'94vw',maxHeight:'88vh',overflow:'auto',padding:'var(--space-5)'}} onClick={e=>e.stopPropagation()}>
        <div className="row mb-2"><h3 style={{margin:0,fontSize:'var(--t-lg)'}}>{script.title}</h3>
          <button className="btn btn-icon btn-sm btn-ghost" style={{marginLeft:'auto'}} onClick={onClose}><Icon name="close" size={16}/></button></div>
        <div className="row gap-2 mb-3" style={{flexWrap:'wrap'}}>{(script.tags||[]).map(t=><Tag key={t} variant="outline">{t}</Tag>)}
          <span className="text-xs fg-muted">đã dùng {script.useCount||0} lần</span></div>
        <div style={{whiteSpace:'pre-wrap',fontSize:14,lineHeight:1.6,color:'var(--fg-1)'}}>{script.body||'(chưa có nội dung)'}</div>
      </div>
    </div>
  );
}

function ScriptsTab() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const canManage = live && D.roles[0] && D.roles[0].role === 'admin';
  const [scripts, setScripts] = useState(null);
  const [editing, setEditing] = useState(null);
  const [viewing, setViewing] = useState(null);
  const load = () => { if (live) window.TVS_API.api('/api/scripts').then(r=>setScripts(r.scripts||[])).catch(()=>setScripts([])); };
  useEffect(() => { load(); }, []);
  const view = async (s) => { try { const r = await window.TVS_API.api('/api/scripts/'+s.id); setViewing(r.script); } catch (_) { setViewing(s); } };
  const del = async (s) => { if (!confirm('Xóa script "'+s.title+'"?')) return; await window.TVS_API.api('/api/scripts/'+s.id,{method:'DELETE'}); load(); };
  if (!scripts) return <Card><div className="text-sm fg-muted">Đang tải script…</div></Card>;
  return (
    <>
      <Card pad={false}>
        <CardHeader title="Thư viện script bán hàng"
          sub="Telesale dùng để tư vấn — gắn theo lý do gọi"
          actions={canManage && <button className="btn btn-cta btn-sm" onClick={()=>setEditing({})}><Icon name="plus" size={12}/>Tạo script</button>}/>
        <div className="card-pad">
          {scripts.map(s => (
            <div key={s.id} className="card mb-3" style={{padding:'var(--space-4)'}}>
              <div className="row gap-3">
                <div style={{width:40,height:40,background:'rgba(65,182,230,0.10)',color:'var(--vs-light-blue)',borderRadius:'var(--radius-md)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                  <Icon name="fileText" size={20}/>
                </div>
                <div style={{flex:1}}>
                  <div className="strong fg-1">{s.title}</div>
                  <div className="text-xs fg-muted mt-1">{s.reason ? s.reason+' · ' : ''}đã dùng {s.useCount||0} lần</div>
                  <div className="row gap-2 mt-2" style={{flexWrap:'wrap'}}>
                    {(s.tags||[]).map(t => <Tag key={t} variant="outline">{t}</Tag>)}
                  </div>
                </div>
                <div className="row gap-1">
                  <button className="btn btn-secondary btn-sm" onClick={()=>view(s)}><Icon name="eye" size={12}/>Xem</button>
                  {canManage && <><button className="btn btn-ghost btn-sm" onClick={()=>setEditing(s)}><Icon name="note" size={12}/>Sửa</button>
                  <button className="btn btn-icon btn-sm btn-ghost" title="Xóa" onClick={()=>del(s)}><Icon name="close" size={14}/></button></>}
                </div>
              </div>
            </div>
          ))}
          {scripts.length===0 && <div className="text-sm fg-muted">Chưa có script nào.</div>}
        </div>
      </Card>
      {editing && <ScriptEditModal script={editing} onClose={()=>setEditing(null)} onSaved={load}/>}
      {viewing && <ScriptViewModal script={viewing} onClose={()=>setViewing(null)}/>}
    </>
  );
}

// ===== Notifications (THẬT) =====
const NOTI_CHANNELS = ['Email','SMS','Zalo','Notification'];
function formatRecipients(str) {
  if (!str) return '—';
  const roles = str.split(',').map(s => s.trim()).filter(Boolean);
  const mapped = roles.map(r => {
    if (r === 'admin') return 'Giám đốc';
    if (r === 'staff') return 'Nhân viên';
    return r;
  });
  return mapped.join(' + ');
}

function NotiRuleModal({ rule, onClose, onSaved }) {
  const isNew = !rule.id;
  const parseRecipients = (str) => {
    if (!str) return [];
    return str.split(',').map(s => s.trim()).filter(Boolean);
  };
  const [f, setF] = useState({ trigger: rule.trigger||'', channels: rule.channels||['Email'] });
  const [selectedRoles, setSelectedRoles] = useState(() => parseRecipients(rule.recipients || ''));
  const [busy, setBusy] = useState(false); const [err, setErr] = useState(null);
  const toggleCh = (c) => setF(s=>({...s, channels: s.channels.includes(c) ? s.channels.filter(x=>x!==c) : [...s.channels,c]}));
  const save = async () => {
    setBusy(true); setErr(null);
    try {
      const body = { trigger: f.trigger, channels: f.channels, recipients: selectedRoles.join(', ') };
      if (isNew) await window.TVS_API.api('/api/notification-rules', { method:'POST', body: JSON.stringify(body) });
      else await window.TVS_API.api('/api/notification-rules/'+rule.id, { method:'PATCH', body: JSON.stringify(body) });
      onSaved(); onClose();
    } catch (e) { setErr(e.message); setBusy(false); }
  };
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(1,20,60,0.45)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
      <div className="card" style={{width:480,maxWidth:'92vw',padding:'var(--space-5)'}} onClick={e=>e.stopPropagation()}>
        <h3 style={{margin:'0 0 var(--space-4)',fontSize:'var(--t-lg)'}}>{isNew?'Tạo quy tắc':'Sửa quy tắc'}</h3>
        <div className="field-label">Trigger (khi nào gửi)</div>
        <input className="input mb-2" value={f.trigger} onChange={e=>setF(s=>({...s,trigger:e.target.value}))}/>
        <div className="field-label">Kênh gửi</div>
        <div className="row gap-2 mb-3" style={{flexWrap:'wrap'}}>
          {NOTI_CHANNELS.map(c => (
            <button key={c} type="button" className={f.channels.includes(c)?'btn btn-cta btn-sm':'btn btn-secondary btn-sm'} onClick={()=>toggleCh(c)}>{c}</button>
          ))}
        </div>
        <div className="field-label">Ai nhận báo cáo / thông báo</div>
        <div className="row gap-4 mb-3">
          <label className="row gap-1 style-none" style={{cursor:'pointer', display:'flex', alignItems:'center'}}>
            <input type="checkbox"
              checked={selectedRoles.includes('admin')}
              onChange={(e) => {
                if (e.target.checked) setSelectedRoles([...selectedRoles, 'admin']);
                else setSelectedRoles(selectedRoles.filter(r => r !== 'admin'));
              }}
              style={{accentColor:'var(--vs-light-blue)', width:16, height:16}}/>
            <span className="text-sm fg-1" style={{marginLeft:6}}>Giám đốc / Admin</span>
          </label>
          <label className="row gap-1 style-none" style={{cursor:'pointer', display:'flex', alignItems:'center'}}>
            <input type="checkbox"
              checked={selectedRoles.includes('staff')}
              onChange={(e) => {
                if (e.target.checked) setSelectedRoles([...selectedRoles, 'staff']);
                else setSelectedRoles(selectedRoles.filter(r => r !== 'staff'));
              }}
              style={{accentColor:'var(--vs-light-blue)', width:16, height:16}}/>
            <span className="text-sm fg-1" style={{marginLeft:6}}>Nhân viên kinh doanh</span>
          </label>
        </div>
        {err && <div className="banner danger mb-2" style={{padding:'8px 10px'}}><span className="text-sm">{err}</span></div>}
        <div className="row gap-2 mt-2" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Hủy</button>
          <button className="btn btn-cta btn-sm" onClick={save} disabled={busy || !f.trigger || !f.channels.length || !selectedRoles.length}>{busy?'Đang lưu…':'Lưu'}</button>
        </div>
      </div>
    </div>
  );
}

function NotificationsTab() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const canManage = live && D.roles[0] && D.roles[0].role === 'admin';
  const [rules, setRules] = useState(null);
  const [editing, setEditing] = useState(null);
  const load = () => { if (live) window.TVS_API.api('/api/notification-rules').then(r=>setRules(r.rules||[])).catch(()=>setRules([])); };
  useEffect(() => { load(); }, []);
  const toggle = async (r) => { await window.TVS_API.api('/api/notification-rules/'+r.id,{method:'PATCH',body:JSON.stringify({active:!r.active})}); load(); };
  const del = async (r) => { if (!confirm('Xóa quy tắc này?')) return; await window.TVS_API.api('/api/notification-rules/'+r.id,{method:'DELETE'}); load(); };
  if (!rules) return <Card><div className="text-sm fg-muted">Đang tải quy tắc…</div></Card>;
  return (
    <>
      <Card pad={false}>
        <CardHeader title="Quy tắc thông báo tự động" sub="Trigger → kênh → người nhận. Quy tắc 'Follow-up quá hạn' đã nối với job gửi email."
          actions={canManage && <button className="btn btn-cta btn-sm" onClick={()=>setEditing({})}><Icon name="plus" size={12}/>Tạo quy tắc</button>}/>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Trigger</th><th>Kênh gửi</th><th>Người nhận</th><th>Trạng thái</th><th></th></tr></thead>
            <tbody>
              {rules.map((r) => (
                <tr key={r.id}>
                  <td className="strong">{r.trigger}{r.ruleKey && <Tag variant="outline" style={{marginLeft:6}}>hệ thống</Tag>}</td>
                  <td><div className="row gap-1">{(r.channels||[]).map(c => <Tag key={c} variant="info">{c}</Tag>)}</div></td>
                  <td className="text-sm">{formatRecipients(r.recipients)}</td>
                  <td>
                    <button className="btn btn-ghost btn-sm" style={{padding:0}} disabled={!canManage} onClick={()=>toggle(r)} title={canManage?'Bật/tắt':''}>
                      <Tag variant={r.active?'success':'outline'} dot>{r.active?'Đang chạy':'Tạm dừng'}</Tag>
                    </button>
                  </td>
                  <td>{canManage && <div className="row gap-1">
                    <button className="btn btn-ghost btn-sm" onClick={()=>setEditing(r)}><Icon name="note" size={14}/></button>
                    {!r.ruleKey && <button className="btn btn-icon btn-sm btn-ghost" title="Xóa" onClick={()=>del(r)}><Icon name="close" size={14}/></button>}
                  </div>}</td>
                </tr>
              ))}
              {rules.length===0 && <tr><td colSpan={5}><div className="text-sm fg-muted" style={{padding:'var(--space-3)'}}>Chưa có quy tắc</div></td></tr>}
            </tbody>
          </table>
        </div>
      </Card>
      {editing && <NotiRuleModal rule={editing} onClose={()=>setEditing(null)} onSaved={load}/>}
    </>
  );
}

// ===== Data & Import/Export (THẬT) =====
function DataTab() {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const canManage = live && D.roles[0] && D.roles[0].role === 'admin';
  const [stats, setStats] = useState(null);
  const [msg, setMsg] = useState(null);
  const [busy, setBusy] = useState(false);
  const fileRef = useRef(null);
  const loadStats = () => { if (live) window.TVS_API.api('/api/data/stats').then(setStats).catch(()=>{}); };
  useEffect(() => { loadStats(); }, []);
  const dl = async (path, name) => { setMsg(null); try { await window.TVS_API.downloadFile(path, name); } catch (e) { setMsg({ err:true, text:e.message }); } };
  const onPickFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!file) return;
    setBusy(true); setMsg(null);
    try {
      const csv = await file.text();
      const r = await window.TVS_API.api('/api/data/import/customers', { method:'POST', body: JSON.stringify({ csv }) });
      setMsg({ text: `Đã nhập: ${r.created} khách mới · ${r.deduped} trùng (bỏ qua) · ${r.invalid} SĐT lỗi (tổng ${r.total} dòng).` });
      loadStats();
    } catch (e) { setMsg({ err:true, text: e.message }); }
    setBusy(false);
  };
  const mb = (b) => (b ? (b/1048576).toFixed(1)+' MB' : '—');
  const C = stats ? stats.counts : {};
  return (
    <>
      <div className="grid grid-2 mb-4">
        <Card>
          <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Nhập dữ liệu</h3>
          <div className="text-sm fg-2 mb-3" style={{lineHeight:1.5}}>Tải lên file CSV để import khách hàng (cột: <b>Họ tên, SĐT</b>, tùy chọn Email, Thành phố). Trùng SĐT sẽ tự bỏ qua.</div>
          <input ref={fileRef} type="file" accept=".csv,text/csv" style={{display:'none'}} onChange={onPickFile}/>
          <div className="col gap-2">
            <button className="btn btn-secondary" style={{justifyContent:'flex-start'}} disabled={!canManage || busy} onClick={()=>fileRef.current && fileRef.current.click()}>
              <Icon name="users" size={14}/>{busy?'Đang nhập…':'Import khách hàng (.csv)'}
            </button>
          </div>
          {!canManage && <div className="text-xs fg-muted mt-2">Chỉ Admin/Quản lý được import.</div>}
          {msg && <div className={'banner mt-3 '+(msg.err?'danger':'')} style={{padding:'8px 10px'}}><span className="text-sm">{msg.text}</span></div>}
        </Card>
        <Card>
          <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Xuất dữ liệu</h3>
          <div className="text-sm fg-2 mb-3" style={{lineHeight:1.5}}>Xuất CSV (mở được bằng Excel) — phục vụ phân tích hoặc backup nội bộ.</div>
          <div className="col gap-2">
            <button className="btn btn-secondary" style={{justifyContent:'flex-start'}} onClick={()=>dl('/api/data/export/customers','khach-hang.csv')}><Icon name="download" size={14}/>Export khách hàng (CSV)</button>
            {canManage && <>
            <button className="btn btn-secondary" style={{justifyContent:'flex-start'}} onClick={()=>dl('/api/data/export/orders?days=365','don-hang-12thang.csv')}><Icon name="download" size={14}/>Export đơn hàng 12 tháng</button>
            <button className="btn btn-secondary" style={{justifyContent:'flex-start'}} onClick={()=>dl('/api/data/export/revenue?days=365','doanh-thu.csv')}><Icon name="download" size={14}/>Export báo cáo doanh số</button>
            </>}
          </div>
        </Card>
      </div>

      <Card pad={false}>
        <CardHeader title="Dữ liệu hệ thống" sub="Số liệu thật trong cơ sở dữ liệu (SQLite)"/>
        <div className="card-pad">
          <div className="row mb-3">
            <div style={{width:40,height:40,background:'rgba(6,167,125,0.10)',color:'var(--status-success)',borderRadius:'var(--radius-md)',display:'flex',alignItems:'center',justifyContent:'center'}}>
              <Icon name="package" size={20}/>
            </div>
            <div style={{flex:1}}>
              <div className="strong fg-1">Cơ sở dữ liệu {stats ? mb(stats.dbBytes) : ''}</div>
              <div className="text-xs fg-muted">Đồng bộ Sapo lần cuối: {stats && stats.lastSyncAt ? new Date(stats.lastSyncAt).toLocaleString('vi-VN') : '—'} {stats && stats.lastSyncStatus ? '· '+stats.lastSyncStatus : ''}</div>
            </div>
            <Tag variant="success" dot>Đang chạy</Tag>
          </div>
          <div className="divider mb-3"/>
          <div className="grid" style={{gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-3)'}}>
            {[['Khách hàng',C.customers],['Đơn hàng',C.orders],['Sản phẩm',C.products],['Người dùng',C.users],['Đối tác',C.partners],['Follow-up',C.followups]].map(([l,v])=>(
              <div key={l}><div className="text-xs fg-muted">{l}</div><div className="tnum bold fg-1 mt-1" style={{fontSize:20,fontFamily:'var(--font-display)'}}>{v!=null?Number(v).toLocaleString('vi-VN'):'…'}</div></div>
            ))}
          </div>
          <div className="text-xs fg-muted mt-3">Backup: sao chép file <code>server/prisma/dev.db</code> qua SSH (theo yêu cầu — không dùng job backup tự động).</div>
        </div>
      </Card>
    </>
  );
}

window.SettingsScreen = SettingsScreen;