// ===========================================================
// Reports — Báo cáo (multi-tab, role-aware)
// ===========================================================

function ReportsScreen({ role }) {
  const [tab, setTab] = useState('overview');
  // Khoảng thời gian lọc theo NGÀY HOÀN THÀNH (đơn khách đã nhận). Mặc định 30 ngày qua.
  const [range, setRange] = useState(() => ({ ...computeRange('30d'), preset: '30d' }));
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const rangeLabel = rangeLabelOf(range);
  const rangeQS = `from=${range.from}&to=${range.to}`;

  // Dữ liệu thật từ /api/reports (doanh số chỉ tính đơn ĐÃ HOÀN THÀNH).
  const [ov, setOv] = useState(null);
  const [staffRows, setStaffRows] = useState([]);
  const [custRep, setCustRep] = useState(null);
  useEffect(() => {
    if (!live) return;
    window.TVS_API.api('/api/reports/overview?' + rangeQS).then(setOv).catch(() => {});
    window.TVS_API.api('/api/reports/staff?' + rangeQS).then(r => setStaffRows(r.staff || [])).catch(() => setStaffRows([]));
    window.TVS_API.api('/api/reports/customers?' + rangeQS).then(setCustRep).catch(() => {});
  }, [range.from, range.to]);

  const CH_COLORS = {
    'Cửa hàng': '#012169',
    'Web': '#41B6E6',
    'TikTok': '#06A77D',
    'App': '#8B5CF6',
    'Shopee': '#FF5722',
    'Lazada': '#009688',
    'Bán buôn': '#ECA72C',
    'Đại lý': '#9C27B0',
    'Khác': '#795548',
    'Sapo': '#E91E63'
  };
  const COLOR_PALETTE = ['#012169', '#41B6E6', '#06A77D', '#8B5CF6', '#FF5722', '#009688', '#ECA72C', '#9C27B0', '#795548', '#E91E63', '#3F51B5', '#4CAF50'];
  const channelData = ov ? ov.byChannel.map((c, idx) => ({
    name: c.channel,
    value: c.revenue,
    pct: ov.revenue ? Math.round(c.revenue / ov.revenue * 100) : 0,
    color: CH_COLORS[c.channel] || COLOR_PALETTE[idx % COLOR_PALETTE.length],
    delta: ''
  })) : [];
  const topProducts = ov ? ov.topProducts.map(p => ({ name: p.name, cat: '', sku: p.name, sold: p.qty, revenue: p.revenue, price: p.qty ? Math.round(p.revenue / p.qty) : 0 })) : [];
  const fmtBil = (v) => (v >= 1e9 ? (v / 1e9).toFixed(2) + ' tỷ' : fmt.vndFull(v));

  const cohortData = [
    {month:'T11/25', size:128, m0:100, m1:62, m2:48, m3:41, m4:38, m5:35},
    {month:'T12/25', size:142, m0:100, m1:68, m2:54, m3:45, m4:42, m5:null},
    {month:'T1/26',  size:165, m0:100, m1:71, m2:58, m3:50, m4:null, m5:null},
    {month:'T2/26',  size:189, m0:100, m1:74, m2:62, m3:null, m4:null, m5:null},
    {month:'T3/26',  size:212, m0:100, m1:76, m2:null, m3:null, m4:null, m5:null},
    {month:'T4/26',  size:248, m0:100, m1:null, m2:null, m3:null, m4:null, m5:null},
  ];

  const [scheduledReports, setScheduledReports] = useState([]);
  const [systemUsers, setSystemUsers] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const [editingReport, setEditingReport] = useState(null);

  const loadScheduled = () => {
    if (!live) return;
    window.TVS_API.api('/api/scheduled-reports')
      .then(r => setScheduledReports(r.reports || []))
      .catch(() => setScheduledReports([]));
  };

  const loadUsers = () => {
    if (!live) return;
    window.TVS_API.api('/api/users')
      .then(r => setSystemUsers(r.users || []))
      .catch(() => setSystemUsers([]));
  };

  useEffect(() => {
    if (tab === 'scheduled') {
      loadScheduled();
      loadUsers();
    }
  }, [tab]);

  const saveReport = async (data) => {
    if (!live) return;
    const method = data.id ? 'PATCH' : 'POST';
    const url = data.id ? `/api/scheduled-reports/${data.id}` : '/api/scheduled-reports';
    await window.TVS_API.api(url, {
      method,
      body: JSON.stringify(data)
    });
    loadScheduled();
  };

  const deleteReport = async (id) => {
    if (!live) return;
    if (!confirm('Bạn có chắc muốn xóa lịch gửi báo cáo này?')) return;
    await window.TVS_API.api(`/api/scheduled-reports/${id}`, {
      method: 'DELETE'
    });
    loadScheduled();
  };

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Báo cáo & Phân tích</h1>
          <div className="sub">Dashboard tổng hợp · xuất Excel/PDF · lên lịch gửi tự động</div>
        </div>
        <div className="row gap-2" style={{alignItems:'center'}}>
          <div className="col" style={{alignItems:'flex-end', gap:2, marginRight:4}}>
            <span className="text-xs fg-muted">Ghi nhận theo ngày giao hàng thành công</span>
            <span className="text-xs fg-muted">Khoảng thời gian</span>
          </div>
          <DateRangePicker value={range} onChange={setRange}/>
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Xuất Excel')}><Icon name="download" size={14}/>Xuất Excel</button>
          <button className="btn btn-cta" onClick={() => window.tvsDemo('Lên lịch gửi báo cáo')}><Icon name="mail" size={14}/>Lên lịch gửi</button>
        </div>
      </div>

      <Card pad={false} className="mb-4">
        <div className="tabs" style={{padding:'0 var(--space-5)'}}>
          {[
            ['overview','Tổng quan','dashboard'],
            ['sales','Doanh số','trending'],
            ['products','Sản phẩm','package'],
            ['customers','Khách hàng','users'],
            role.role === 'admin' && ['staff','Nhân sự','award'],
            role.role === 'admin' && ['cohort','Cohort & Retention','activity'],
            role.role === 'admin' && ['scheduled','Lịch gửi báo cáo','calendar'],
          ].filter(Boolean).map(([k,l,ic]) => (
            <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>
              <Icon name={ic} size={14}/>{l}
            </button>
          ))}
        </div>
      </Card>

      {tab === 'overview' && (
        <>
          <div className="kpi-grid">
            <KPI feature label={`Tổng doanh thu · ${rangeLabel}`} value={ov ? fmtBil(ov.revenue) : '—'} sub="Chỉ đơn đã hoàn thành"/>
            <KPI label="Đơn hoàn thành" value={ov ? ov.orders.toLocaleString('vi-VN') : '—'}/>
            <KPI label="Giá trị TB / đơn" value={ov ? fmt.vndFull(ov.aov) : '—'}/>
            <KPI label="Tổng khách hàng" value={custRep ? custRep.total.toLocaleString('vi-VN') : '—'}/>
          </div>

          <div className="grid grid-7-5">
            <Card pad={false}>
              <CardHeader title={`Doanh thu · ${rangeLabel}`} sub="Triệu đồng — chỉ đơn đã hoàn thành"/>
              <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={220} 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>
            </Card>

            <Card pad={false}>
              <CardHeader title="Phân bổ kênh doanh thu" sub={rangeLabel}/>
              <div className="card-pad">
                <div style={{display:'flex',justifyContent:'center',marginBottom:'var(--space-4)'}}>
                  <DonutChart data={channelData} size={180}/>
                </div>
                {channelData.map(c => (
                  <div key={c.name} className="row mb-3">
                    <span style={{width:10,height:10,background:c.color,borderRadius:2}}/>
                    <span className="text-sm fg-1" style={{flex:1,marginLeft:8}}>{c.name}</span>
                    <span className="tnum strong" style={{marginRight:8}}>{fmt.vndFull(c.value)}</span>
                    <Tag variant="success">{c.delta}</Tag>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          <div className="grid grid-2 mt-4">
            <Card pad={false}>
              <CardHeader title="Top 5 sản phẩm theo doanh thu" actions={<button className="btn btn-ghost btn-sm" onClick={() => setTab('products')}>Xem tất cả →</button>}/>
              <div className="card-pad">
                {topProducts.slice(0,5).map((p, i) => (
                  <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}</div>
                    </div>
                    <div className="tnum text-sm fg-muted">{p.sold} bán</div>
                    <div className="tnum strong" style={{fontSize:13}}>{fmt.vnd(p.revenue)}</div>
                  </div>
                ))}
              </div>
            </Card>
            <Card pad={false}>
              <CardHeader title="Top nhân sự" sub="Theo doanh số khách phụ trách (đơn hoàn thành)"
                actions={<button className="btn btn-ghost btn-sm" onClick={() => setTab('staff')}>Xem tất cả →</button>}/>
              <div className="card-pad">
                {staffRows.slice(0,5).map((s, i) => (
                  <div key={s.name+i} className="leader-row">
                    <span className="rank">{['🥇','🥈','🥉'][i] || '#'+(i+1)}</span>
                    <div>
                      <div className="strong" style={{color:'var(--fg-1)',fontSize:13}}>{s.name}</div>
                      <div className="text-xs fg-muted">{s.role} · {s.orders} đơn</div>
                    </div>
                    <div></div>
                    <div className="tnum strong" style={{fontSize:13}}>{fmt.vndFull(s.revenue)}</div>
                  </div>
                ))}
                {staffRows.length === 0 && <div className="text-sm fg-muted">Chưa có dữ liệu trong kỳ</div>}
              </div>
            </Card>
          </div>
        </>
      )}

      {tab === 'sales' && (
        <>
          <div className="kpi-grid">
            <KPI feature label={`Doanh số · ${rangeLabel}`} value={ov ? fmtBil(ov.revenue) : '—'} sub="Chỉ đơn đã hoàn thành"/>
            <KPI label="Đơn hoàn thành" value={ov ? ov.orders.toLocaleString('vi-VN') : '—'}/>
            <KPI label="Giá trị TB / đơn" value={ov ? fmt.vndFull(ov.aov) : '—'}/>
            <KPI label="Số ngày có doanh số" value={ov ? String(ov.trend.length) : '—'}/>
          </div>
          <Card pad={false} className="mb-4">
            <CardHeader title={`Doanh số theo ngày · ${rangeLabel}`} sub="Ngày ghi nhận = ngày đơn hoàn thành (Sapo)"/>
            <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={200} 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>
          </Card>
          <Card pad={false}>
            <CardHeader title="Chi tiết doanh số theo ngày" sub="Đơn vị: VNĐ"/>
            <div className="table-wrap">
              <table className="tbl">
                <thead><tr><th>Ngày</th><th className="num">Số đơn hoàn thành</th><th className="num">Doanh thu</th></tr></thead>
                <tbody>
                  {ov && [...ov.trend].reverse().map(t => (
                    <tr key={t.date}><td className="tnum">{t.date}</td><td className="num tnum">{t.orders.toLocaleString('vi-VN')}</td><td className="num strong tnum">{fmt.vndFull(t.revenue)}</td></tr>
                  ))}
                  {(!ov || ov.trend.length === 0) && <tr><td colSpan={3}><div className="text-sm fg-muted" style={{padding:'var(--space-4)'}}>Chưa có dữ liệu</div></td></tr>}
                </tbody>
              </table>
            </div>
          </Card>
        </>
      )}

      {tab === 'products' && (
        <Card pad={false}>
          <CardHeader title="Báo cáo sản phẩm" sub={`${topProducts.length} SKU · sắp xếp theo doanh thu`}
            actions={<div className="row gap-2">
              <Segmented value="rev" options={[{value:'rev',label:'Theo doanh thu'},{value:'qty',label:'Theo SL'},{value:'margin',label:'Theo margin'}]} onChange={()=>{}}/>
              <button className="btn btn-secondary btn-sm"><Icon name="filter" size={12}/>Lọc danh mục</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">Bán</th>
                  <th className="num">Doanh thu</th>
                  <th className="num">% tổng</th>
                  <th className="num">Tồn kho</th>
                  <th className="num">Trend 30N</th>
                </tr>
              </thead>
              <tbody>
                {topProducts.map((p, i) => {
                  const totalRev = topProducts.reduce((s,x) => s+x.revenue, 0);
                  const pct = (p.revenue / totalRev) * 100;
                  return (
                    <tr key={p.sku}>
                      <td className="tnum text-xs fg-muted">{p.sku}</td>
                      <td className="strong">{p.name}</td>
                      <td><Tag variant="outline">{p.cat}</Tag></td>
                      <td className="num tnum">{p.sold}</td>
                      <td className="num strong">{fmt.vndFull(p.revenue)}</td>
                      <td className="num">
                        <div className="row gap-2" style={{justifyContent:'flex-end'}}>
                          <span className="tnum text-xs fg-muted">{pct.toFixed(1)}%</span>
                          <div style={{width:48,height:6,background:'var(--bg-soft)',borderRadius:3,overflow:'hidden'}}>
                            <div style={{width:pct*4 + '%',height:'100%',background:'var(--vs-light-blue)'}}/>
                          </div>
                        </div>
                      </td>
                      <td className="num tnum" style={{color: p.stock < 80 ? 'var(--status-sale)' : 'var(--fg-2)'}}>{p.stock}</td>
                      <td className="num">
                        <div style={{display:'inline-block',width:80,height:24}}>
                          <Sparkline data={Array.from({length:8}, (_, j) => 50 + Math.sin(i+j)*20 + j*2)} height={24}/>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {tab === 'customers' && (
        <>
          <div className="kpi-grid">
            <KPI feature label="Tổng khách hàng" value={custRep ? custRep.total.toLocaleString('vi-VN') : '—'} sub="Nguồn Sapo"/>
            <KPI label={`Khách mới · ${rangeLabel}`} value={custRep ? String(custRep.newByDay.reduce((s,x)=>s+x.count,0)) : '—'}/>
            <KPI label="Nhóm khách" value={(D.customerGroups||[]).length}/>
            <KPI label="Khách có đơn hoàn thành" value={ov ? ov.topCustomers.length >= 10 ? '10+' : String(ov.topCustomers.length) : '—'} sub={rangeLabel}/>
          </div>
          <div className="grid grid-2 mb-4">
            <Card pad={false}>
              <CardHeader title="Phân bổ hạng thành viên" sub="Theo LTV thật"/>
              <div className="card-pad">
                {(() => {
                  const TL = { platinum:{l:'Bạch kim',c:'#2f4666'}, gold:{l:'Vàng',c:'#e0a92c'}, silver:{l:'Bạc',c:'#98a2b3'}, bronze:{l:'Đồng',c:'#b07a48'} };
                  const tiers = custRep ? custRep.tiers : [];
                  const tot = tiers.reduce((s,t)=>s+t.count,0) || 1;
                  return ['platinum','gold','silver','bronze'].map(k => {
                    const row = tiers.find(t=>t.tier===k) || {count:0};
                    const p = Math.round(row.count/tot*100);
                    return (
                      <div key={k} className="mb-3">
                        <div className="row mb-1">
                          <span className="text-sm fg-1 bold">{TL[k].l}</span>
                          <span className="tnum text-sm fg-muted" style={{marginLeft:'auto'}}>{row.count.toLocaleString('vi-VN')} khách · {p}%</span>
                        </div>
                        <div style={{height:8,background:'var(--bg-soft)',borderRadius:4}}>
                          <div style={{height:'100%',width:p+'%',background:TL[k].c,borderRadius:4}}/>
                        </div>
                      </div>
                    );
                  });
                })()}
              </div>
            </Card>
            <Card pad={false}>
              <CardHeader title="Top khách hàng theo doanh thu" sub={`${rangeLabel} — đơn hoàn thành`}/>
              <div className="card-pad">
                {ov && ov.topCustomers.map((c, i) => (
                  <div key={c.code+i} className="leader-row">
                    <span className="rank">#{i+1}</span>
                    <div className="row gap-2" style={{minWidth:0}}>
                      <Avatar name={c.name} size="sm"/>
                      <div style={{minWidth:0}}>
                        <div className="strong fg-1 text-sm" style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{c.name}</div>
                        <div className="text-xs fg-muted">{c.orders} đơn · {c.code}</div>
                      </div>
                    </div>
                    <div></div>
                    <div className="tnum strong" style={{fontSize:13}}>{fmt.vndFull(c.revenue)}</div>
                  </div>
                ))}
                {(!ov || ov.topCustomers.length===0) && <div className="text-sm fg-muted">Chưa có dữ liệu</div>}
              </div>
            </Card>
          </div>
          <Card pad={false}>
            <CardHeader title="Phân bổ doanh thu theo phân khúc khách" sub="Pareto — 20% khách VIP chiếm 62% doanh thu"/>
            <div className="card-pad">
              <BarChart data={[62,18,12,5,2,1]} height={140}/>
              <div className="row mt-2" style={{justifyContent:'space-around',fontSize:11,color:'var(--fg-muted)'}}>
                <span>Top 20%</span><span>20-40%</span><span>40-60%</span><span>60-80%</span><span>80-95%</span><span>95-100%</span>
              </div>
            </div>
          </Card>
        </>
      )}

      {tab === 'staff' && role.role === 'admin' && (
        <Card pad={false}>
          <CardHeader title="Bảng xếp hạng nhân sự" sub={`${rangeLabel} — doanh số từ khách phụ trách (đơn hoàn thành)`}/>
          <div className="table-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{width:48}}>Hạng</th>
                  <th>Nhân viên</th>
                  <th>Bộ phận</th>
                  <th className="num">Cuộc gọi / KH</th>
                  <th className="num">Đơn ghi nhận</th>
                  <th className="num">Doanh số</th>
                  <th className="num">% mục tiêu</th>
                  <th className="num">Hoa hồng</th>
                </tr>
              </thead>
              <tbody>
                {staffRows.map((s, i) => (
                  <tr key={s.name+i}>
                    <td><span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color: i < 3 ? 'var(--vs-dark-blue)' : 'var(--fg-muted)'}}>{i < 3 ? ['🥇','🥈','🥉'][i] : '#'+(i+1)}</span></td>
                    <td>
                      <div className="row gap-2">
                        <Avatar name={s.name} size="sm"/>
                        <span className="strong">{s.name}</span>
                      </div>
                    </td>
                    <td><Tag variant="outline">{s.role}</Tag></td>
                    <td className="num tnum fg-muted">—</td>
                    <td className="num tnum">{s.orders}</td>
                    <td className="num strong">{fmt.vndFull(s.revenue)}</td>
                    <td className="num fg-muted">—</td>
                    <td className="num fg-muted">—</td>
                  </tr>
                ))}
                {staffRows.length === 0 && <tr><td colSpan={8}><div className="text-sm fg-muted" style={{padding:'var(--space-4)'}}>Chưa có dữ liệu nhân sự trong kỳ</div></td></tr>}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {tab === 'cohort' && role.role === 'admin' && (
        <Card pad={false}>
          <CardHeader title="Cohort retention — Khách mua lại theo tháng đăng ký" sub="% khách của cohort vẫn mua hàng ở tháng thứ N"/>
          <div className="card-pad">
            <div className="text-sm fg-muted mb-3">Đọc theo dòng: VD cohort T11/2025 có 128 khách → 62% vẫn mua ở tháng 2 (M1), 48% ở M2, v.v.</div>
            <div className="table-wrap">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Cohort</th>
                    <th className="num">Quy mô</th>
                    <th className="num">M0</th>
                    <th className="num">M1</th>
                    <th className="num">M2</th>
                    <th className="num">M3</th>
                    <th className="num">M4</th>
                    <th className="num">M5</th>
                  </tr>
                </thead>
                <tbody>
                  {cohortData.map(row => (
                    <tr key={row.month}>
                      <td className="strong">{row.month}</td>
                      <td className="num tnum">{row.size}</td>
                      {['m0','m1','m2','m3','m4','m5'].map(k => (
                        <td key={k} className="num" style={{padding:6}}>
                          {row[k] != null ? (
                            <div style={{
                              padding:'8px 4px',
                              background:`rgba(65,182,230,${row[k]/100})`,
                              color: row[k] > 50 ? 'white' : 'var(--fg-1)',
                              borderRadius:4,
                              fontWeight:700,
                              fontFeatureSettings:'"tnum"',
                            }}>{row[k]}%</div>
                          ) : <span className="fg-muted text-xs">—</span>}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="banner mt-4">
              <Icon name="zap" size={16}/>
              <div className="text-sm" style={{flex:1}}>
                <b>Insight:</b> Cohort tháng gần đây retention M1 đạt 74-76%, cao hơn cohort cũ (62-68%). Hiệu quả từ chiến dịch onboarding tự động.
              </div>
            </div>
          </div>
        </Card>
      )}

      {tab === 'scheduled' && role.role === 'admin' && (
        <>
          <div className="banner mb-4">
            <Icon name="mail" size={16}/>
            <div className="text-sm" style={{flex:1}}>
              Báo cáo sẽ tự gửi qua email theo lịch — nhận đúng giờ, đúng người, không cần truy cập CRM.
            </div>
            <button className="btn btn-cta btn-sm" onClick={() => { setEditingReport(null); setShowModal(true); }}><Icon name="plus" size={12}/>Tạo lịch mới</button>
          </div>
          <Card pad={false}>
            <CardHeader title="Lịch gửi báo cáo định kỳ" sub={`${scheduledReports.length} báo cáo định kỳ đang hoạt động`}/>
            <div className="table-wrap">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Tên báo cáo</th>
                    <th>Người nhận</th>
                    <th>Chu kỳ / Lịch</th>
                    <th>Gửi gần nhất</th>
                    <th>Trạng thái</th>
                    <th>Hành động</th>
                  </tr>
                </thead>
                <tbody>
                  {scheduledReports.map(r => (
                    <tr key={r.id}>
                      <td className="strong">{r.name}</td>
                      <td className="text-sm">{(r.recipients || []).join(', ') || 'Chưa chọn'}</td>
                      <td className="text-sm fg-muted">{r.cadence}</td>
                      <td className="text-sm tnum">{r.lastSent || '—'}</td>
                      <td>
                        <Tag variant={r.active ? 'success' : 'outline'} dot={r.active ? 'var(--status-success)' : 'var(--fg-muted)'}>
                          {r.active ? 'Đang chạy' : 'Tạm dừng'}
                        </Tag>
                      </td>
                      <td>
                        <div className="row gap-1">
                          <button className="btn btn-icon btn-sm btn-secondary" title="Sửa" onClick={() => { setEditingReport(r); setShowModal(true); }}>
                            <Icon name="edit" size={12}/>
                          </button>
                          <button className="btn btn-icon btn-sm btn-ghost" title="Xóa" onClick={() => deleteReport(r.id)} style={{color:'var(--status-sale)'}}>
                            <Icon name="close" size={12}/>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                  {scheduledReports.length === 0 && (
                    <tr>
                      <td colSpan={6} style={{textAlign:'center',padding:'var(--space-6)',color:'var(--fg-muted)'}}>
                        Chưa có lịch gửi báo cáo nào. Bấm "Tạo lịch mới" ở trên để thiết lập.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </Card>

          {showModal && (
            <ScheduledReportModal
              report={editingReport}
              systemUsers={systemUsers}
              onClose={() => setShowModal(false)}
              onSave={saveReport}
            />
          )}
        </>
      )}
    </>
  );
}

// ===== Mini stacked bar chart =====
function StackedBarChart({ data, colors, height = 200 }) {
  const max = Math.max(...data.map(d => d.values.reduce((s,v) => s+v, 0))) || 1;
  return (
    <div className="bar-row" style={{height, alignItems:'flex-end', gap:8}}>
      {data.map((d, i) => {
        const total = d.values.reduce((s,v) => s+v, 0);
        return (
          <div key={i} style={{flex:1, height:`${(total/max)*100}%`, display:'flex', flexDirection:'column', justifyContent:'flex-end', borderRadius:'2px 2px 0 0', overflow:'hidden', position:'relative'}}>
            {d.values.map((v, j) => (
              <div key={j} style={{height:`${(v/total)*100}%`, background: colors[j]}}/>
            ))}
            <div style={{position:'absolute',bottom:-20,left:0,right:0,textAlign:'center',fontSize:10,color:'var(--fg-muted)'}}>{d.Label}</div>
          </div>
        );
      })}
    </div>
  );
}

// ===== Mini donut chart =====
function DonutChart({ data, size = 180 }) {
  const total = data.reduce((s,d) => s+d.value, 0);
  let acc = 0;
  const radius = size/2 - 12;
  const cx = size/2; const cy = size/2;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {data.map((d, i) => {
        const start = (acc/total) * 2 * Math.PI - Math.PI/2;
        acc += d.value;
        const end = (acc/total) * 2 * Math.PI - Math.PI/2;
        const x1 = cx + radius * Math.cos(start);
        const y1 = cy + radius * Math.sin(start);
        const x2 = cx + radius * Math.cos(end);
        const y2 = cy + radius * Math.sin(end);
        const largeArc = end - start > Math.PI ? 1 : 0;
        return (
          <path key={i}
            d={`M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`}
            fill={d.color}
          />
        );
      })}
      <circle cx={cx} cy={cy} r={radius * 0.55} fill="var(--bg-page)"/>
      <text x={cx} y={cy - 4} textAnchor="middle" style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,fill:'var(--vs-dark-blue)'}}>{fmt.vnd(total)}</text>
      <text x={cx} y={cy + 12} textAnchor="middle" style={{fontSize:11,fill:'var(--fg-muted)'}}>30 ngày</text>
    </svg>
  );
}

window.ReportsScreen = ReportsScreen;

function ScheduledReportModal({ report, systemUsers, onClose, onSave }) {
  const [name, setName] = useState(report ? report.name : '');
  const [recipients, setRecipients] = useState(report ? report.recipients : []);
  const [cadence, setCadence] = useState(report ? report.cadence : 'Thứ 2 hàng tuần · 08:00');
  const [active, setActive] = useState(report ? report.active : true);
  const [saving, setSaving] = useState(false);

  const handleSave = async () => {
    if (!name.trim()) return;
    setSaving(true);
    try {
      await onSave({
        id: report?.id,
        name,
        recipients,
        cadence,
        active
      });
      onClose();
    } catch (e) {
      window.tvsToast && window.tvsToast('Lỗi: ' + e.message);
    }
    setSaving(false);
  };

  return (
    <div className="drawer-overlay" style={{justifyContent:'center',alignItems:'center',zIndex:200}} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()}
        style={{background:'var(--bg-page)',width:'min(500px, 95vw)',borderRadius:'var(--radius-lg)',overflow:'hidden',boxShadow:'var(--shadow-pop)',animation:'slidein 0.2s var(--ease-out)'}}>
        <div style={{padding:'var(--space-4) var(--space-5)',background:'var(--vs-dark-blue)',color:'#fff',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <h3 style={{margin:0,color:'#fff',fontFamily:'var(--font-display)',fontSize:18}}>{report ? 'Chỉnh sửa lịch gửi' : 'Tạo lịch gửi mới'}</h3>
          <button className="close" onClick={onClose} style={{color:'#fff',background:'none',border:'none',cursor:'pointer'}}><Icon name="close" size={16}/></button>
        </div>
        <div style={{padding:'var(--space-5)'}}>
          <div className="field-label">Tên báo cáo <span style={{color:'var(--status-sale)'}}>*</span></div>
          <input className="input mb-3" placeholder="Weekly Sales Snapshot" value={name} onChange={e=>setName(e.target.value)}/>

          <div className="field-label">Người nhận báo cáo (chọn email nhân viên)</div>
          <div className="mb-3" style={{maxHeight: 180, overflowY: 'auto', border: '1px solid var(--border-2)', borderRadius: 'var(--radius-sm)', padding: 10, background: 'var(--bg-soft)'}}>
            {systemUsers.map(u => (
              <label key={u.id} className="row gap-2 mb-2" style={{cursor:'pointer', alignItems:'center', display:'flex'}}>
                <input type="checkbox"
                  checked={recipients.includes(u.email)}
                  onChange={(e) => {
                    if (e.target.checked) setRecipients([...recipients, u.email]);
                    else setRecipients(recipients.filter(email => email !== u.email));
                  }}
                  style={{accentColor:'var(--vs-light-blue)', width:16, height:16}}/>
                <div style={{fontSize:13, marginLeft:8}}>
                  <span className="strong fg-1">{u.name}</span> <span className="fg-muted">({u.email})</span>
                </div>
              </label>
            ))}
            {systemUsers.length === 0 && <div className="text-xs fg-muted">Không tìm thấy tài khoản nhân viên nào</div>}
          </div>

          <div className="field-label">Chu kỳ / Lịch gửi</div>
          <select className="select mb-3" value={cadence} onChange={e=>setCadence(e.target.value)}>
            <option>Thứ 2 hàng tuần · 08:00</option>
            <option>Thứ 6 hàng tuần · 17:00</option>
            <option>Ngày 1 hàng tháng · 09:00</option>
            <option>Hàng ngày · 06:00</option>
            <option>Hàng ngày · 18:00</option>
          </select>

          <label className="row gap-2 style-none" style={{cursor:'pointer', display:'flex', alignItems:'center'}}>
            <input type="checkbox" checked={active} onChange={e=>setActive(e.target.checked)} style={{accentColor:'var(--vs-light-blue)', width:16, height:16}}/>
            <span className="text-sm strong fg-1" style={{marginLeft:8}}>Kích hoạt lịch gửi này</span>
          </label>
        </div>
        <div style={{padding:'var(--space-3) var(--space-5)',background:'var(--bg-soft)',borderTop:'1px solid var(--border-1)',display:'flex',justifyContent:'flex-end',gap:8}}>
          <button className="btn btn-secondary" onClick={onClose}>Hủy</button>
          <button className="btn btn-cta" onClick={handleSave} disabled={saving || !name.trim()}>Lưu lịch</button>
        </div>
      </div>
    </div>
  );
}