// ===========================================================
// Dashboard — role-specific
// ===========================================================
const D = window.TVS_DATA;

function Dashboard({ refreshKey, role, onNavigate, onOpenCustomer, onOpenPartner, onLogOrder, onRegister }) {
  if (role.kind === 'staff') return <StaffDashboard refreshKey={refreshKey} role={role} onNavigate={onNavigate} onOpenCustomer={onOpenCustomer} onOpenPartner={onOpenPartner} onLogOrder={onLogOrder} onRegister={onRegister}/>;
  return <ManagerDashboard refreshKey={refreshKey} onNavigate={onNavigate}/>;
}

// ===========================================================
// TELESALE DASHBOARD
// ===========================================================
function TelesaleDashboard({ onNavigate, onOpenCustomer }) {
  const k = D.kpis.telesale;
  const me = k.person;
  const todayCalls = D.callQueue.length;
  return (
    <>
      <div className="page-header">
        <div>
          <h1>Chào Mỹ Linh 👋</h1>
          <div className="sub">Hôm nay bạn còn <b style={{color:'var(--vs-dark-blue)'}}>{todayCalls} cuộc gọi</b> trong queue. Mục tiêu: <b>{fmt.vndFull(me.salesTarget)}</b>.</div>
        </div>
        <div className="row gap-2">
          <button className="btn btn-secondary"><Icon name="calendar" size={14}/>Lịch hôm nay</button>
          <button className="btn btn-cta" onClick={() => onNavigate('telesale')}><Icon name="phone" size={14}/>Bắt đầu gọi</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI feature label="Doanh số hôm nay"
          value={fmt.vndFull(me.sales)} delta="+18% so với hôm qua"
          progress={(me.sales/me.salesTarget)*100}
          progressLabel={{left: fmt.vndFull(me.sales), right: 'Mục tiêu ' + fmt.vndFull(me.salesTarget)}}
        />
        <KPI label="Cuộc gọi" value={me.calls} unit={`/ ${me.target}`} delta="+6 vs hôm qua"
          progress={(me.calls/me.target)*100}/>
        <KPI label="Tỷ lệ chốt" value={me.conversion} unit="%" delta="+2.1%"/>
        <KPI label="Xếp hạng team" value={`#${me.rank}`} sub="trên 5 nhân viên" delta="+1 hạng" deltaDir="up"/>
      </div>

      <div className="grid grid-12-8">
        <Card pad={false}>
          <CardHeader title="Call queue hôm nay" sub="5 cuộc gọi được phân theo độ ưu tiên"
            actions={<button className="btn btn-ghost btn-sm" onClick={()=>onNavigate('telesale')}>Mở console gọi →</button>}/>
          <div className="table-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Giờ</th><th>Khách hàng</th><th>Lý do gọi</th><th>Mức ưu tiên</th><th></th>
                </tr>
              </thead>
              <tbody>
                {D.callQueue.map(c => {
                  const cust = D.customers.find(x => x.id === c.customer);
                  return (
                    <tr key={c.id} onClick={() => cust && onOpenCustomer(cust)}>
                      <td className="tnum strong">{c.scheduled}</td>
                      <td>
                        <div className="row gap-2">
                          <Avatar name={c.name} size="sm" tier={cust && tierVariant(cust.tier)}/>
                          <div>
                            <div className="strong">{c.name}</div>
                            <div className="text-xs fg-muted tnum">{c.phone}</div>
                          </div>
                        </div>
                      </td>
                      <td className="text-sm">{c.reason}</td>
                      <td>
                        <Tag variant={c.priority === 'Cao' ? 'danger' : c.priority === 'Trung bình' ? 'warning' : 'outline'}>{c.priority}</Tag>
                      </td>
                      <td><button className="btn btn-icon btn-sm btn-ghost"><Icon name="phone" size={14}/></button></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Bảng xếp hạng team"
            sub="Tuần này — TP.HCM"/>
          <div style={{padding:'var(--space-3) var(--space-5)'}}>
            {k.team.map((m, i) => (
              <div key={m.name} className={`leader-row ${m.self ? 'self' : ''}`}>
                <span className="rank">{m.badge || `#${i+1}`}</span>
                <div>
                  <div className="strong" style={{color:'var(--fg-1)',fontSize:14}}>{m.name}{m.self && <span style={{marginLeft:6,fontSize:11,color:'var(--vs-light-blue)'}}>(Bạn)</span>}</div>
                  <div className="text-xs fg-muted">{m.calls} cuộc · CR {m.conv}%</div>
                </div>
                <div className="tnum strong" style={{fontSize:14}}>{fmt.vnd(m.sales)}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div className="grid grid-2 mt-4">
        <Card pad={false}>
          <CardHeader title="Doanh số 14 ngày qua" sub="Triệu đồng"
            actions={<Segmented value="14d" options={[{value:'7d',label:'7N'},{value:'14d',label:'14N'},{value:'30d',label:'30N'}]} onChange={()=>{}}/>}/>
          <div className="card-pad">
            <BarChart data={k.trend} highlight={k.trend.length - 1} height={140}/>
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Lịch sử gọi hôm nay" sub={`${D.callLog.length} cuộc — agent: Mỹ Linh`}/>
          <div className="card-pad">
            {D.callLog.map(l => (
              <div key={l.id} className="activity">
                <div className="ico"><Icon name={l.outcome === 'Bán thành công' ? 'check' : l.outcome === 'Đặt lịch lại' ? 'clock' : 'phone'} size={14}/></div>
                <div className="body">
                  <div className="title">{l.customer} <span className="fg-muted">— {l.outcome}</span></div>
                  <div className="meta">{l.time} · {l.duration} · {l.amount > 0 && <span className="strong" style={{color:'var(--vs-dark-blue)'}}>{fmt.vndFull(l.amount)}</span>}{l.note && <> · {l.note}</>}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </>
  );
}

// ===========================================================
// IN-STORE DASHBOARD — customer-focused, NOT POS
// Staff use external POS for orders; CRM only manages customer info + logs purchase history
// ===========================================================
function InstoreDashboard({ onNavigate, onOpenCustomer, onLogOrder, onRegister }) {
  const s = D.kpis.instore;
  const recentVisitors = D.customers.slice(0, 5);
  const followUpsForStore = D.followUps.slice(0, 4);
  const [quickSearch, setQuickSearch] = useState('');

  return (
    <>
      <div className="page-header">
        <div>
          <div className="eyebrow">{s.store}</div>
          <h1>Chào Bảo 👋</h1>
          <div className="sub">Thứ tư, 13/05/2026 · Ca 09:00 — 17:00 · {recentVisitors.length} khách tương tác từ sáng</div>
        </div>
        <div className="row gap-2">
          <button className="btn btn-secondary" onClick={onRegister}><Icon name="plus" size={14}/>Đăng ký khách mới</button>
          <button className="btn btn-cta" onClick={() => onNavigate('customers')}><Icon name="users" size={14}/>Mở danh sách khách</button>
        </div>
      </div>

      {/* Hero — quick search */}
      <Card className="mb-5" style={{background:'linear-gradient(135deg, var(--vs-dark-blue) 0%, #01337f 100%)',color:'#fff',border:'none',position:'relative',overflow:'hidden'}}>
        <div style={{position:'absolute',right:-40,top:-40,width:240,height:240,background:'radial-gradient(circle,rgba(65,182,230,0.30) 0%,transparent 60%)',borderRadius:'50%'}}/>
        <div style={{position:'relative',zIndex:1}}>
          <div className="eyebrow" style={{color:'var(--vs-light-blue)',marginBottom:8}}>Tra cứu khách hàng</div>
          <h2 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:24,margin:'0 0 12px',color:'#fff'}}>Nhập số điện thoại khách hàng</h2>
          <div className="row gap-3">
            <div className="topbar-search" style={{flex:1,background:'rgba(255,255,255,0.94)',padding:'14px 18px',fontSize:'var(--t-md)'}}>
              <Icon name="search" size={20} style={{color:'var(--vs-dark-blue)'}}/>
              <input placeholder="VD: 0903 821 447 hoặc tên khách hàng"
                value={quickSearch} onChange={(e)=>setQuickSearch(e.target.value)}
                style={{fontSize:'var(--t-md)',fontWeight:600}}
                onKeyDown={(e) => { if (e.key === 'Enter' && quickSearch) onOpenCustomer(D.customers[0]); }}/>
              <kbd>Enter</kbd>
            </div>
          </div>
          {quickSearch.length >= 2 && (
            <div className="card" style={{marginTop:12,padding:0,background:'#fff'}}>
              {D.customers.filter(c => c.name.toLowerCase().includes(quickSearch.toLowerCase()) || c.phone.includes(quickSearch) || c.id.toLowerCase().includes(quickSearch.toLowerCase())).slice(0,3).map(c => (
                <div key={c.id} onClick={() => { onOpenCustomer(c); setQuickSearch(''); }}
                  style={{padding:'12px 16px',borderBottom:'1px solid var(--border-1)',display:'flex',gap:12,alignItems:'center',cursor:'pointer'}}>
                  <Avatar name={c.name} tier={tierVariant(c.tier)}/>
                  <div style={{flex:1}}>
                    <div className="strong fg-1">{c.name}</div>
                    <div className="text-xs fg-muted tnum">{c.phone} · {c.id}</div>
                  </div>
                  <Tag variant={tierVariant(c.tier)}>{c.tier}</Tag>
                </div>
              ))}
            </div>
          )}
        </div>
      </Card>

      <div className="kpi-grid">
        <KPI label="Khách tương tác hôm nay" value="24" delta="+4 vs hôm qua"/>
        <KPI label="Đăng ký thành viên mới" value="6" delta="+2 mới" deltaDir="up"/>
        <KPI label="Đơn đã ghi nhận" value="18" sub="Từ POS bên ngoài"/>
        <KPI label="Cần follow-up" value={followUpsForStore.length} sub="Trong tuần" delta={`${followUpsForStore.length} hôm nay`} deltaDir="up"/>
      </div>

      {/* Personal sales — staff want to see their own numbers */}
      <Card pad={false} className="mb-5" style={{background:'linear-gradient(135deg, #013189 0%, #00347a 100%)',border:'none',color:'#fff'}}>
        <div style={{padding:'var(--space-5) var(--space-6)',display:'flex',gap:'var(--space-6)',alignItems:'center',flexWrap:'wrap'}}>
          <div>
            <div className="eyebrow" style={{color:'var(--vs-light-blue)'}}>Doanh số của tôi · Tháng 6</div>
            <div className="row gap-3 mt-2" style={{alignItems:'baseline'}}>
              <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:40,color:'#fff',lineHeight:1}}>128.4tr</span>
              <span style={{color:'rgba(255,255,255,0.7)',fontSize:14}}>/ 115tr mục tiêu</span>
              <span style={{background:'rgba(65,182,230,0.22)',color:'var(--vs-light-blue)',fontWeight:700,fontSize:12,padding:'3px 10px',borderRadius:999}}>112% ✓ Đạt</span>
            </div>
          </div>
          <div style={{display:'flex',gap:'var(--space-6)',marginLeft:'auto',flexWrap:'wrap'}}>
            {[
              {l:'Đơn ghi nhận',  v:'42'},
              {l:'TV mới đăng ký', v:'8'},
              {l:'Xếp hạng cửa hàng', v:'#1'},
              {l:'Hoa hồng tháng', v:'8.5tr'},
            ].map(s => (
              <div key={s.l}>
                <div style={{color:'rgba(255,255,255,0.6)',fontSize:11,letterSpacing:'0.06em',textTransform:'uppercase',fontWeight:700,marginBottom:4}}>{s.l}</div>
                <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:24,color:'#fff'}}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{padding:'0 var(--space-6) var(--space-5)'}}>
          <div style={{height:8,background:'rgba(255,255,255,0.14)',borderRadius:4,overflow:'hidden'}}>
            <div style={{width:'100%',height:'100%',background:'var(--vs-light-blue)',borderRadius:4}}/>
          </div>
          <div className="row mt-2" style={{justifyContent:'space-between',color:'rgba(255,255,255,0.6)',fontSize:12}}>
            <span>Đã vượt mục tiêu — còn 17 ngày trong tháng</span>
            <span>Cùng kỳ tháng trước: 98tr</span>
          </div>
        </div>
      </Card>

      <div className="grid grid-7-5">
        <Card pad={false}>
          <CardHeader title="Khách vừa tương tác hôm nay" sub="Khách nhân viên vừa tra cứu / ghi nhận đơn · click để xem hồ sơ 360°"
            actions={<button className="btn btn-ghost btn-sm" onClick={() => onNavigate('customers')}>Tất cả khách →</button>}/>
          <div style={{padding:'var(--space-3) var(--space-5)'}}>
            {recentVisitors.slice(0,5).map((c, i) => (
              <div key={c.id} className="activity" style={{cursor:'pointer'}} onClick={() => onOpenCustomer(c)}>
                <Avatar name={c.name} tier={tierVariant(c.tier)}/>
                <div className="body">
                  <div className="row gap-2">
                    <div className="title">{c.name}</div>
                    <Tag variant={tierVariant(c.tier)}>{c.tier}</Tag>
                  </div>
                  <div className="meta">Tra cứu {15 + i*8} phút trước · Sản phẩm hay mua: {c.tags.slice(0,2).join(' · ')}</div>
                </div>
                <div className="row gap-1" onClick={(e) => e.stopPropagation()}>
                  <button className="btn btn-secondary btn-sm" onClick={() => onOpenCustomer(c)}>
                    <Icon name="eye" size={13}/>Hồ sơ
                  </button>
                  <button className="btn btn-cta btn-sm" onClick={() => onLogOrder(c)}>
                    <Icon name="receipt" size={13}/>Ghi nhận đơn
                  </button>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Follow-up hôm nay" sub={`${followUpsForStore.length} khách cần liên hệ`}/>
          <div style={{padding:'var(--space-3) var(--space-5)'}}>
            {followUpsForStore.map(f => (
              <div key={f.customer.id} className="activity" style={{cursor:'pointer'}} onClick={() => onOpenCustomer(f.customer)}>
                <Avatar name={f.customer.name} size="sm" tier={tierVariant(f.customer.tier)}/>
                <div className="body">
                  <div className="title">{f.customer.name}</div>
                  <div className="meta">{f.reason}</div>
                </div>
                <Tag variant={new Date(f.due) <= D.today ? 'danger' : 'warning'}>{fmt.rel(f.due)}</Tag>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card pad={false} className="mt-4">
        <CardHeader title="Sản phẩm bán chạy hôm nay" sub="Để gợi ý cho khách khi tư vấn — số liệu từ POS"
          actions={<button className="btn btn-ghost btn-sm" onClick={() => onNavigate('inventory')}>Tra cứu tồn kho →</button>}/>
        <div className="card-pad">
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(220px,1fr))',gap:12}}>
            {D.products.slice(0,6).map((p, i) => {
              const sold = [12, 9, 7, 6, 5, 4][i];
              return (
                <div key={p.sku} className="prod-tile">
                  <div className="ph"><Icon name="pill" size={28}/></div>
                  <div className="name">{p.name}</div>
                  <div className="row">
                    <div style={{flex:1,minWidth:0}}>
                      <div className="text-xs fg-muted">{sold} đơn hôm nay</div>
                      <div className="text-xs" style={{color: p.stock < 60 ? 'var(--status-sale)' : p.stock < 100 ? 'var(--status-warning)' : 'var(--fg-muted)'}}>
                        Còn {p.stock} kho
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Card>
    </>
  );
}

// ===========================================================
// B2B DASHBOARD
// ===========================================================
function B2BDashboard({ onNavigate }) {
  const b = D.kpis.b2b;
  return (
    <>
      <div className="page-header">
        <div>
          <h1>Đối tác B2B</h1>
          <div className="sub">Tổng quan {b.activePartners} đối tác đang hoạt động · {b.newPartners} đối tác mới tháng này</div>
        </div>
        <div className="row gap-2">
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Xuất báo cáo')}><Icon name="download" size={14}/>Xuất báo cáo</button>
          <button className="btn btn-cta" onClick={() => onNavigate('customers')}><Icon name="plus" size={14}/>Thêm đối tác</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI feature label="GMV 30 ngày qua"
          value={fmt.vndFull(b.gmv30d)} delta="+24% MoM"
          progress={(b.gmv30d/b.gmvTarget)*100}
          progressLabel={{left:'30N',right:'Mục tiêu '+fmt.vndFull(b.gmvTarget)}}/>
        <KPI label="Đối tác active" value={b.activePartners} delta="+3 đối tác"/>
        <KPI label="Đối tác mới" value={b.newPartners} unit="/tháng"/>
        <KPI label="Pipeline mở" value={b.pipeline.prospect + b.pipeline.qualified + b.pipeline.proposal + b.pipeline.onboarding} sub="prospect đến onboarding"/>
      </div>

      <Card pad={false} className="mb-5">
        <CardHeader title="Pipeline ký hợp đồng" sub="Kéo thả thẻ để cập nhật trạng thái"
          actions={<button className="btn btn-ghost btn-sm">Xem chi tiết →</button>}/>
        <div className="card-pad">
          <div className="pipeline">
            {[
              {key:'Prospect', count: b.pipeline.prospect, partners: D.partners.filter(p => p.stage === 'Prospect')},
              {key:'Qualified', count: b.pipeline.qualified, partners: []},
              {key:'Đề xuất', count: b.pipeline.proposal, partners: []},
              {key:'Onboarding', count: b.pipeline.onboarding, partners: D.partners.filter(p => p.stage === 'Onboarding')},
            ].map((col, idx) => (
              <div key={col.key} className="pipeline-col">
                <h4>{col.key} <span className="count">{col.count}</span></h4>
                {col.partners.map(p => (
                  <div key={p.id} className="pipeline-card" onClick={()=>onNavigate('customers')}>
                    <div className="name">{p.name}</div>
                    <div className="meta">{p.type} · {p.city}</div>
                    <div className="value">{p.gmv30d > 0 ? fmt.vndFull(p.gmv30d) : 'Chưa có doanh số'}</div>
                  </div>
                ))}
                {col.partners.length === 0 && idx === 1 && (
                  <>
                    <div className="pipeline-card">
                      <div className="name">Spa Eden Garden</div>
                      <div className="meta">Spa · TP.HCM</div>
                      <div className="value">Dự kiến 40tr/tháng</div>
                    </div>
                    <div className="pipeline-card">
                      <div className="name">PT Coach Nam</div>
                      <div className="meta">PT · 56K followers</div>
                      <div className="value">Dự kiến 25tr/tháng</div>
                    </div>
                  </>
                )}
                {col.partners.length === 0 && idx === 2 && (
                  <div className="pipeline-card">
                    <div className="name">Pharmacy 247 — chuỗi</div>
                    <div className="meta">Nhà thuốc · 12 chi nhánh</div>
                    <div className="value">Đề xuất 220tr/tháng</div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </Card>

      <div className="grid grid-7-5">
        <Card pad={false}>
          <CardHeader title="Top đối tác theo GMV 30 ngày" actions={<button className="btn btn-ghost btn-sm" onClick={()=>onNavigate('customers')}>Xem tất cả →</button>}/>
          <div className="table-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Đối tác</th><th>Loại</th><th className="num">GMV 30N</th><th className="num">Hoa hồng</th><th>Hành động kế tiếp</th>
                </tr>
              </thead>
              <tbody>
                {[...D.partners].sort((a,b)=>b.gmv30d-a.gmv30d).slice(0,5).map(p => (
                  <tr key={p.id}>
                    <td>
                      <div className="row gap-2">
                        <Avatar name={p.name} size="sm" tier={tierVariant(p.tier)}/>
                        <div>
                          <div className="strong">{p.name}</div>
                          <div className="text-xs fg-muted">{p.contact}</div>
                        </div>
                      </div>
                    </td>
                    <td className="text-sm">{p.type}</td>
                    <td className="num strong">{fmt.vndFull(p.gmv30d)}</td>
                    <td className="num">{fmt.vndFull(p.commissionEarned)}</td>
                    <td>
                      <div className="text-xs">{p.nextAction.type}</div>
                      <div className="text-xs fg-muted">{fmt.rel(p.nextAction.due)}</div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Phân bổ theo loại đối tác" sub="GMV 30 ngày — 9 đối tác"/>
          <div className="card-pad">
            {[
              {label:'Nhà thuốc',          val: 502100000, color:'#012169'},
              {label:'TikTok Affiliate',   val: 142800000, color:'#41B6E6'},
              {label:'Doanh nghiệp / B2B', val: 285000000, color:'#06A77D'},
              {label:'Đại lý phân phối',   val: 187600000, color:'#ECA72C'},
              {label:'Phòng gym / PT',     val: 135300000, color:'#533A71'},
              {label:'Spa & Clinic',       val: 34200000,  color:'#EE3969'},
            ].map(row => {
              const total = 502100000+142800000+285000000+187600000+135300000+34200000;
              const pct = (row.val/total)*100;
              return (
                <div key={row.label} style={{marginBottom:14}}>
                  <div className="row" style={{marginBottom:6}}>
                    <span style={{flex:1,color:'var(--fg-1)',fontSize:13,fontWeight:600}}>{row.label}</span>
                    <span className="tnum text-sm fg-muted">{fmt.vndFull(row.val)}</span>
                  </div>
                  <div style={{height:8,background:'var(--bg-soft)',borderRadius:4,overflow:'hidden'}}>
                    <div style={{width:pct+'%',height:'100%',background:row.color,borderRadius:4}}/>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </>
  );
}

// ===========================================================
// MANAGER DASHBOARD
// ===========================================================
function ManagerDashboard({ onNavigate, refreshKey }) {
  const live = window.TVS_API && window.TVS_API.isAuthed();
  // Bộ lọc ngày giống màn Báo cáo (lọc theo NGÀY HOÀN THÀNH, giờ VN). Mặc định = HÔM NAY.
  const [range, setRange] = useState(() => ({ ...computeRange('today'), preset: 'today' }));
  const [ov, setOv] = useState(null);
  useEffect(() => {
    if (live) window.TVS_API.api(`/api/reports/overview?from=${range.from}&to=${range.to}`).then(setOv).catch(() => {});
  }, [range.from, range.to, refreshKey]);
  const rangeLabel = rangeLabelOf(range);
  const revenue = ov ? ov.revenue : 0;
  const orders = ov ? ov.orders : 0;
  const aov = ov ? ov.aov : 0;
  const fmtBil = (v) => (v >= 1e9 ? (v/1e9).toFixed(2)+' tỷ' : fmt.vndFull(v));

  // Khách trùng — interactive dashboard (persist in localStorage to avoid reappearing on refresh)
  const [dupes, setDupes] = useState(() => {
    const defaultDupes = [
      { id: 'DUP-1', phone: '0903 821 447', sapo: { name: 'Đặng Hoàng Mai', code: 'SAPO-C-88102', orders: 18 }, crm: { name: 'Mai Đặng (NV tự thêm)', code: 'C-10241', orders: 2 } },
      { id: 'DUP-2', phone: '0967 113 224', sapo: { name: 'Nguyễn Quốc Đạt', code: 'SAPO-C-91250', orders: 3 }, crm: { name: 'Đạt Nguyễn Q.', code: 'C-11034', orders: 1 } },
    ];
    try {
      const mergedIds = JSON.parse(localStorage.getItem('tvs_merged_dupes') || '[]');
      return defaultDupes.filter(d => mergedIds.includes(d.id) === false);
    } catch (_) {
      return defaultDupes;
    }
  });
  const doMerge = (d) => {
    setDupes(list => list.filter(x => x.id !== d.id));
    try {
      const mergedIds = JSON.parse(localStorage.getItem('tvs_merged_dupes') || '[]');
      if (mergedIds.includes(d.id) === false) {
        mergedIds.push(d.id);
        localStorage.setItem('tvs_merged_dupes', JSON.stringify(mergedIds));
      }
    } catch (_) {}
    window.tvsToast && window.tvsToast('Đã gộp thành công khách trùng về Sapo');
  };

  const [realPendingMerges, setRealPendingMerges] = useState([]);
  const loadRealPendingMerges = () => {
    if (live) {
      window.TVS_API.api('/api/reports/pending-merges')
        .then(r => setRealPendingMerges(r.items || []))
        .catch(() => {});
    }
  };
  useEffect(() => { loadRealPendingMerges(); }, [live, refreshKey]);

  return (
    <>
      <div className="page-header">
        <div>
          <div className="eyebrow">Thrive Every Day.</div>
          <h1>Tổng quan kinh doanh</h1>
          <div className="sub">Toàn hệ thống · {(D.stores||[]).length} cửa hàng · dữ liệu doanh số trực tiếp từ Sapo (đơn đã hoàn thành)</div>
        </div>
        <div className="row gap-2" style={{alignItems:'center'}}>
          <span className="text-xs fg-muted" style={{whiteSpace:'nowrap'}}>Ghi nhận theo ngày giao hàng thành công</span>
          <DateRangePicker value={range} onChange={setRange}/>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI feature label={'Doanh thu ' + rangeLabel} value={fmtBil(revenue)} sub="Chỉ đơn đã hoàn thành"/>
        <KPI label={'Đơn hoàn thành ' + rangeLabel} value={orders.toLocaleString('vi-VN')}/>
        <KPI label="Giá trị TB / đơn" value={fmt.vndFull(aov)}/>
        <KPI label="Tổng khách hàng" value={(D.customerGroups||[]).reduce((s,g)=>s+g.count,0).toLocaleString('vi-VN')}/>
      </div>

      {(dupes.length > 0 || realPendingMerges.length > 0) && (
        <Card pad={false} className="mb-4" style={{border:'1px solid rgba(219,68,85,0.22)'}}>
          <CardHeader title="Khách trùng & Khách CRM chờ gộp Sapo (Xử lý ngay)"
            sub="Danh sách khách trùng SĐT hoặc khách tạo thủ công ở CRM đang chờ đối soát/gộp dữ liệu với Sapo."
            actions={<Tag variant="danger">{dupes.length + realPendingMerges.length} cần xử lý</Tag>}/>
          <div className="card-pad col gap-4" style={{background:'rgba(219,68,85,0.02)'}}>
            {dupes.length > 0 && (
              <div className="col gap-2">
                <div className="text-xs bold fg-muted mb-1" style={{letterSpacing:'0.05em'}}>CẶP TRÙNG SĐT PHÁT HIỆN TRÊN HỆ THỐNG</div>
                <div className="grid grid-2" style={{gap:16}}>
                  {dupes.map(d => (
                    <div key={d.id} style={{border:'1px solid var(--border-1)',borderRadius:'var(--radius-md)',padding:'var(--space-4)',background:'var(--bg-page)'}}>
                      <div className="row mb-3">
                        <Icon name="phone" size={14} style={{color:'var(--fg-muted)'}}/>
                        <span className="tnum strong fg-1" style={{marginLeft:6}}>{d.phone}</span>
                        <Tag variant="danger" style={{marginLeft:8}}>Trùng SĐT</Tag>
                      </div>
                      <div className="grid grid-2 mb-3" style={{gap:12}}>
                        <div style={{padding:'10px 12px',background:'rgba(6,167,125,0.06)',border:'1px solid rgba(6,167,125,0.25)',borderRadius:'var(--radius-sm)'}}>
                          <div className="text-xs fg-muted mb-1">NGUỒN SAPO (GIỮ GỐC)</div>
                          <div className="strong fg-1" style={{fontSize:13}}>{d.sapo.name}</div>
                          <div className="text-xs fg-muted tnum">{d.sapo.code} · {d.sapo.orders} đơn</div>
                        </div>
                        <div style={{padding:'10px 12px',background:'var(--bg-soft)',borderRadius:'var(--radius-sm)',border:'1px solid var(--border-1)'}}>
                          <div className="text-xs fg-muted mb-1">BẢN CRM (SẼ GỘP VÀO)</div>
                          <div className="strong fg-1" style={{fontSize:13}}>{d.crm.name}</div>
                          <div className="text-xs fg-muted tnum">{d.crm.code} · {d.crm.orders} đơn ghi nhận</div>
                        </div>
                      </div>
                      <div className="row gap-2">
                        <button className="btn btn-cta btn-sm" onClick={() => doMerge(d)}>
                          <Icon name="check" size={12}/>Đồng bộ giống sapo
                        </button>
                        <button className="btn btn-secondary btn-sm" onClick={() => doMerge(d)}>Tạo khách mới</button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {realPendingMerges.length > 0 && (
              <div className="col gap-2" style={{marginTop: dupes.length > 0 ? 12 : 0, borderTop: dupes.length > 0 ? '1px dashed rgba(219,68,85,0.15)' : 'none', paddingTop: dupes.length > 0 ? 16 : 0}}>
                <div className="text-xs bold fg-muted mb-2" style={{letterSpacing:'0.05em'}}>KHÁCH CRM CHỜ KHỚP/ĐỒNG BỘ SAPO</div>
                <div className="grid grid-2" style={{gap:16}}>
                  {realPendingMerges.map(pm => {
                    const c = pm.customer;
                    if (!c) return null;
                    return (
                      <div key={pm.id} style={{border:'1px solid var(--border-1)',borderRadius:'var(--radius-md)',padding:'var(--space-4)',background:'var(--bg-page)'}}>
                        <div className="row mb-3">
                          <Icon name="user" size={14} style={{color:'var(--fg-muted)'}}/>
                          <span className="strong fg-1" style={{marginLeft:6}}>{c.fullName}</span>
                          <Tag variant="warning" style={{marginLeft:8}}>CRM Chờ khớp</Tag>
                        </div>
                        <div style={{padding:'10px 12px',background:'var(--bg-soft)',borderRadius:'var(--radius-sm)',border:'1px solid var(--border-1)',marginBottom:12}}>
                          <div className="text-xs fg-muted mb-1">THÔNG TIN CRM</div>
                          <div className="text-sm fg-1 bold tnum">{c.phone}</div>
                          <div className="text-xs fg-muted tnum">{c.code || 'CRM Customer'} · {c.ordersCountCached || 0} đơn</div>
                        </div>
                        <div className="row gap-2">
                          <button className="btn btn-cta btn-sm" onClick={async () => {
                            window.tvsToast && window.tvsToast('Đang kết nối & đối soát với Sapo...');
                            try {
                              const r = await window.TVS_API.api(`/api/customers/${c.id}/resolve-merge`, { method: 'POST', body: JSON.stringify({ action: 'sapo' }) });
                              if (r.matched) {
                                window.tvsToast && window.tvsToast('Đồng bộ & Khớp Sapo thành công!');
                              } else {
                                alert(r.message || 'Không tìm thấy khách hàng trùng khớp trên Sapo.');
                              }
                              loadRealPendingMerges();
                              if (window.tvsRefreshUI) window.tvsRefreshUI();
                            } catch(e) {
                              window.tvsToast && window.tvsToast('Lỗi: ' + e.message);
                            }
                          }}>
                            <Icon name="refresh" size={12}/> Đồng bộ ngay
                          </button>
                          <button className="btn btn-secondary btn-sm" onClick={async () => {
                            window.tvsToast && window.tvsToast('Đang thiết lập khách hàng độc lập...');
                            try {
                              await window.TVS_API.api(`/api/customers/${c.id}/resolve-merge`, { method: 'POST', body: JSON.stringify({ action: 'independent' }) });
                              window.tvsToast && window.tvsToast('Đã lưu thành khách độc lập CRM!');
                              loadRealPendingMerges();
                              if (window.tvsRefreshUI) window.tvsRefreshUI();
                            } catch(e) {
                              window.tvsToast && window.tvsToast('Lỗi: ' + e.message);
                            }
                          }}>Giữ nguyên ở CRM</button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        </Card>
      )}

      <div className="grid grid-7-5">
        <Card pad={false}>
          <CardHeader title={'Doanh thu ' + rangeLabel} sub="Triệu đồng/ngày · rê chuột để xem chi tiết"/>
          <div className="card-pad">
            {ov && ov.trend.length > 0
              ? <BarChart data={ov.trend.map(t=>Math.round(t.revenue/1e6))} highlight={ov.trend.length-1} height={180} labels={ov.trend.map(t=>t.date+': '+fmt.vndFull(t.revenue)+' · '+t.orders+' đơn')}/>
              : <div className="text-sm fg-muted">Chưa có doanh số trong kỳ</div>}
            <div className="row gap-4 mt-4" style={{flexWrap:'wrap'}}>
              {ov && ov.byChannel.map(c => (
                <div key={c.channel} className="row gap-2">
                  <span className="text-xs fg-muted">{c.channel}</span>
                  <span className="text-sm bold">{fmt.vndFull(c.revenue)}</span>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Doanh thu theo cửa hàng" sub={'Kỳ: ' + rangeLabel + ' · đơn đã hoàn thành'}/>
          <div className="card-pad">
            {ov && ov.byStore.length > 0 ? (() => {
              const topRev = ov.byStore[0].revenue || 1;
              return ov.byStore.slice(0, 8).map((s, i) => {
                const pct = (s.revenue / topRev) * 100;
                return (
                  <div key={s.name+i} style={{marginBottom:16}}>
                    <div className="row" style={{marginBottom:4}}>
                      <div style={{flex:1,minWidth:0}}>
                        <div className="strong" style={{color:'var(--fg-1)',fontSize:14,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{s.name}</div>
                        <div className="text-xs fg-muted">{s.orders} đơn</div>
                      </div>
                      <div className="tnum strong" style={{color:'var(--fg-1)'}}>{fmt.vndFull(s.revenue)}</div>
                    </div>
                    <div style={{height:8,background:'var(--bg-soft)',borderRadius:4,overflow:'hidden'}}>
                      <div style={{width: Math.min(100, pct)+'%',height:'100%',background:'var(--vs-light-blue)',borderRadius:4}}/>
                    </div>
                  </div>
                );
              });
            })() : <div className="text-sm fg-muted">Chưa có doanh số trong kỳ</div>}
          </div>
        </Card>
      </div>

      <div className="grid grid-2 mt-4">
        <Card pad={false}>
          <CardHeader title="Top sản phẩm bán chạy" actions={<button className="btn btn-ghost btn-sm" onClick={() => onNavigate('inventory')}>Xem catalog →</button>}/>
          <div className="card-pad">
            {ov && ov.topProducts && ov.topProducts.length > 0 ? (
              ov.topProducts.slice(0, 5).map((p, i) => (
                <div key={p.name + i} className="leader-row">
                  <span className="rank">#{i+1}</span>
                  <div>
                    <div className="strong" style={{color:'var(--fg-1)',fontSize:13}}>{p.name}</div>
                    <div className="text-xs fg-muted">Đã bán {p.qty} đơn vị</div>
                  </div>
                  <div className="tnum text-sm fg-muted">{p.qty} bán</div>
                  <div className="tnum strong" style={{fontSize:13}}>{fmt.vnd(p.revenue)}</div>
                </div>
              ))
            ) : (
              D.products.slice(0,5).map((p, i) => {
                const sold = [342, 287, 198, 156, 134][i];
                return (
                  <div key={p.sku} className="leader-row">
                    <span className="rank">#{i+1}</span>
                    <div>
                      <div className="strong" style={{color:'var(--fg-1)',fontSize:13}}>{p.name}</div>
                      <div className="text-xs fg-muted">{p.cat} · còn {p.stock} kho</div>
                    </div>
                    <div className="tnum text-sm fg-muted">{sold} bán</div>
                    <div className="tnum strong" style={{fontSize:13}}>{fmt.vnd(sold*p.price)}</div>
                  </div>
                );
              })
            )}
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Cảnh báo cần xử lý" sub="Các vấn đề ưu tiên cao"/>
          <div className="card-pad">
            {ov && ov.alerts && ov.alerts.length > 0 ? (
              ov.alerts.map((a, i) => (
                <div key={i} className={`banner ${a.type === 'danger' ? 'danger' : a.type === 'warning' ? 'warning' : ''} mb-3`}>
                  <Icon name={a.ico} size={18}/>
                  <div style={{flex:1}}>
                    <div className="bold">{a.title}</div>
                    <div className="text-xs fg-muted">{a.desc}</div>
                  </div>
                  <button className="btn btn-sm btn-ghost" onClick={() => {
                    if (a.ico === 'flame') onNavigate('inventory');
                    else onNavigate('customers');
                  }}>Xem</button>
                </div>
              ))
            ) : (
              <>
                <div className="banner danger mb-3">
                  <Icon name="flame" size={18}/>
                  <div style={{flex:1}}>
                    <div className="bold">5 SKU sắp hết hàng tại Cửa hàng Q.1</div>
                    <div className="text-xs fg-muted">Whey Choco, Pre-Workout, BCAA, Collagen — cần điều phối kho</div>
                  </div>
                  <button className="btn btn-sm btn-ghost" onClick={() => onNavigate('inventory')}>Xem</button>
                </div>
                <div className="banner warning mb-3">
                  <Icon name="trendingDown" size={18}/>
                  <div style={{flex:1}}>
                    <div className="bold">Pharmacity giảm GMV 12% MoM</div>
                    <div className="text-xs fg-muted">Cần schedule visit & đàm phán mở rộng SKU</div>
                  </div>
                  <button className="btn btn-sm btn-ghost" onClick={() => onNavigate('customers')}>Xem</button>
                </div>
              </>
            )}
          </div>
        </Card>
      </div>
    </>
  );
}

window.Dashboard = Dashboard;