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

function ReportsScreen({ role }) {
  const [tab, setTab] = useState('overview');
  const [dateRange, setDateRange] = useState('30d');
  const [salesChartType, setSalesChartType] = useState('bar');
  const [productSort, setProductSort] = useState('rev');
  const [productCat, setProductCat] = useState('all');

  // Doanh thu theo kênh — backend cung cấp; để 0 chờ tích hợp
  const channelData = [
    {name:'Cửa hàng', value:0, pct:0, color:'#012169', delta:''},
    {name:'Web/App',  value:0, pct:0, color:'#41B6E6', delta:''},
    {name:'Telesale', value:0, pct:0, color:'#06A77D', delta:''},
    {name:'B2B',      value:0, pct:0, color:'#ECA72C', delta:''},
  ];

  // Số bán sinh xác định từ SKU cho ĐỦ mọi sản phẩm (không còn NaN),
  // sắp theo tiêu chí đang chọn
  const topProducts = useMemo(() => {
    const arr = D.products.map(p => {
      const sold = 0; // Số bán thật lấy từ backend
      return { ...p, sold, revenue: sold * p.price, marginVal: sold * Math.max(0, p.price - p.b2bPrice) };
    });
    const key = productSort === 'qty' ? 'sold' : productSort === 'margin' ? 'marginVal' : 'revenue';
    return arr.sort((a, b) => b[key] - a[key]);
  }, [productSort]);
  const productCats = ['all', ...new Set(D.products.map(p => p.cat))];
  const productRows = productCat === 'all' ? topProducts : topProducts.filter(p => p.cat === productCat);

  // Khách mới 30 ngày — cùng một nguồn với báo cáo nhân sự
  const newCust30 = (typeof STAFF_REPORT !== 'undefined' ? STAFF_REPORT : []).reduce((s, x) => s + x.newCustomers, 0);

  // Cohort 6 tháng gần nhất, nhãn tháng tính từ hôm nay
  const cohortMonths = Array.from({length: 6}, (_, i) => {
    const d = new Date(D.today.getFullYear(), D.today.getMonth() - (6 - i), 1);
    return `T${d.getMonth() + 1}/${String(d.getFullYear()).slice(2)}`;
  });
  // Cohort retention — backend tính; để trống chờ tích hợp
  const cohortData = cohortMonths.map(m => ({month:m, size:0, m0:null, m1:null, m2:null, m3:null, m4:null, m5:null}));

  const scheduledReports = []; // Lịch gửi báo cáo — backend quản lý

  // Nhãn khoảng ngày trên nút lịch — theo lựa chọn 7N/30N/90N/YTD
  const RANGE_DAYS = { '7d': 7, '30d': 30, '90d': 90 };
  const rangeLabel = dateRange === 'ytd'
    ? `01/01 — ${fmt.date(D.iso(0)).slice(0,5)}`
    : dateRange === 'custom' ? 'Chọn khoảng ngày'
    : `${fmt.date(D.iso(-(RANGE_DAYS[dateRange] || 30))).slice(0,5)} — ${fmt.date(D.iso(0)).slice(0,5)}`;

  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">
          <Segmented value={dateRange} options={[
            {value:'7d',label:'7N'},
            {value:'30d',label:'30N'},
            {value:'90d',label:'90N'},
            {value:'ytd',label:'YTD'},
            {value:'custom',label:'Tuỳ chọn'},
          ]} onChange={setDateRange}/>
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Chọn khoảng ngày tuỳ chỉnh')}><Icon name="calendar" size={14}/>{rangeLabel}</button>
          <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'],
            ['staff','Nhân sự','award'],
            ['cohort','Cohort & Retention','activity'],
            ['scheduled','Lịch gửi báo cáo','calendar'],
          ].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 (30N)" value={fmt.vndFull(0)}/>
            <KPI label="Đơn hàng" value="0"/>
            <KPI label="Giá trị TB / đơn" value={fmt.vndFull(0)}/>
            <KPI label="Khách hàng active" value="0"/>
          </div>

          <div className="grid grid-7-5">
            <Card pad={false}>
              <CardHeader title="Doanh thu 30 ngày qua — phân theo kênh"
                actions={<div className="row gap-2">{channelData.map(c => (<div key={c.name} className="row gap-1"><span style={{width:8,height:8,background:c.color,borderRadius:2}}/><span className="text-xs">{c.name}</span></div>))}</div>}/>
              <div className="card-pad">
                {/* Trung bình ~161tr/ngày — khớp tổng 4.83 tỷ/30 ngày; tỷ trọng theo donut 38/27/18/17 */}
                <StackedBarChart data={['01','05','10','15','20','25','30'].map(l => ({Label:l, values:[0,0,0,0]}))} colors={channelData.map(c => c.color)} height={220}/>
              </div>
            </Card>

            <Card pad={false}>
              <CardHeader title="Phân bổ kênh doanh thu" sub="30 ngày qua"/>
              <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>
                    {c.delta ? <Tag variant="success">{c.delta}</Tag> : null}
                  </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 5 nhân sự" sub="Theo doanh số ghi nhận"
                actions={<button className="btn btn-ghost btn-sm" onClick={() => setTab('staff')}>Xem tất cả →</button>}/>
              <div className="card-pad">
                {/* Cùng nguồn dữ liệu với tab Nhân sự — không lệch xếp hạng */}
                {[...(typeof STAFF_REPORT !== 'undefined' ? STAFF_REPORT : [])].sort((a, b) => b.revenue - a.revenue).slice(0, 5).map((s, i) => (
                  <div key={s.name} 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.team}</div>
                    </div>
                    <div></div>
                    <div className="tnum strong" style={{fontSize:13}}>{fmt.vndFull(s.revenue)}</div>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </>
      )}

      {tab === 'sales' && (
        <>
          <div className="kpi-grid">
            <KPI feature label="Doanh số ròng" value={fmt.vndFull(0)}/>
            <KPI label="Giảm giá đã áp" value={fmt.vndFull(0)}/>
            <KPI label="Tỷ lệ trả hàng" value="0%"/>
            <KPI label="Lợi nhuận gộp" value={fmt.vndFull(0)}/>
          </div>
          <Card pad={false}>
            <CardHeader title="Doanh số theo ngày · 30 ngày qua (triệu đồng)"
              actions={<Segmented value={salesChartType} options={[{value:'line',label:'Đường'},{value:'bar',label:'Cột'}]} onChange={setSalesChartType}/>}/>
            <div className="card-pad">
              {/* Trung bình ~161tr/ngày → tổng ≈ 4.83 tỷ, khớp KPI */}
              {(() => {
                const daily = Array.from({length: 31}, () => 0);
                return salesChartType === 'bar'
                  ? <BarChart data={daily} highlight={daily.length - 1} height={220}/>
                  : <Sparkline data={daily} height={220} fill="var(--vs-light-blue)"/>;
              })()}
            </div>
          </Card>
        </>
      )}

      {tab === 'products' && (
        <Card pad={false}>
          <CardHeader title="Báo cáo sản phẩm" sub={`${productRows.length} SKU · sắp xếp ${productSort === 'qty' ? 'theo số lượng bán' : productSort === 'margin' ? 'theo margin' : 'theo doanh thu'}`}
            actions={<div className="row gap-2">
              <Segmented value={productSort} options={[{value:'rev',label:'Theo doanh thu'},{value:'qty',label:'Theo SL'},{value:'margin',label:'Theo margin'}]} onChange={setProductSort}/>
              <select className="select" style={{width:180}} value={productCat} onChange={(e) => setProductCat(e.target.value)}>
                {productCats.map(c => <option key={c} value={c}>{c === 'all' ? 'Tất cả danh mục' : c}</option>)}
              </select>
            </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>
                {productRows.map((p, i) => {
                  const totalRev = topProducts.reduce((s,x) => s+x.revenue, 0);
                  const pct = totalRev > 0 ? (p.revenue / totalRev) * 100 : 0;
                  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:Math.min(100, pct*12) + '%',height:'100%',background:'var(--vs-light-blue)'}}/>
                          </div>
                        </div>
                      </td>
                      <td className="num tnum" style={{color: p.stock < 40 ? '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}, () => 0)} height={24}/>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {tab === 'customers' && (
        <>
          <div className="kpi-grid">
            <KPI label="Khách mới (30N)" value={newCust30}/>
            <KPI label="Khách quay lại" value="0%"/>
            <KPI label="Tỷ lệ rời bỏ" value="0%"/>
            <KPI label="LTV trung bình" value={fmt.vndFull(0)}/>
          </div>
          <div className="grid grid-2 mb-4">
            <Card pad={false}>
              <CardHeader title="Phân khúc hạng thành viên"/>
              <div className="card-pad">
                {[
                  {l:'Kim cương', v:0, p:0, c:'#0b7fa8'},
                  {l:'Vàng', v:0, p:0, c:'#e0a92c'},
                  {l:'Bạc', v:0, p:0, c:'#98a2b3'},
                  {l:'Đồng', v:0, p:0, c:'#b07a48'},
                ].map(r => (
                  <div key={r.l} className="mb-3">
                    <div className="row mb-1">
                      <span className="text-sm fg-1 bold">{r.l}</span>
                      <span className="tnum text-sm fg-muted" style={{marginLeft:'auto'}}>{r.v} khách · {r.p}%</span>
                    </div>
                    <div style={{height:8,background:'var(--bg-soft)',borderRadius:4}}>
                      <div style={{height:'100%',width:r.p*2.5+'%',background:r.c,borderRadius:4}}/>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
            <Card pad={false}>
              <CardHeader title="Top 5 khách hàng theo LTV"/>
              <div className="card-pad">
                {[...D.customers].sort((a,b) => b.ltv - a.ltv).slice(0,5).map((c, i) => (
                  <div key={c.id} className="leader-row">
                    <span className="rank">#{i+1}</span>
                    <div className="row gap-2" style={{minWidth:0}}>
                      <Avatar name={c.name} size="sm" tier={tierVariant(c.tier)}/>
                      <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.city}</div>
                      </div>
                    </div>
                    <div></div>
                    <div className="tnum strong" style={{fontSize:13}}>{fmt.vndFull(c.ltv)}</div>
                  </div>
                ))}
              </div>
            </Card>
          </div>
          <Card pad={false}>
            <CardHeader title="Phân bổ doanh thu theo phân khúc khách" sub="Pareto theo nhóm khách"/>
            <div className="card-pad">
              <BarChart data={[0,0,0,0,0,0]} 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' && <StaffReport/>}

      {tab === 'cohort' && (
        <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: mỗi cohort là nhóm khách đăng ký cùng tháng; cột M-N là % còn mua ở tháng thứ N.</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>
        </Card>
      )}

      {tab === 'scheduled' && (
        <>
          <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={() => window.tvsDemo('Tạo lịch gửi báo cáo')}><Icon name="plus" size={12}/>Tạo lịch mới</button>
          </div>
          <Card pad={false}>
            <CardHeader title="Lịch gửi đang chạy" sub={`${scheduledReports.length} báo cáo định kỳ`}/>
            <div className="table-wrap">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Tên báo cáo</th>
                    <th>Người nhận</th>
                    <th>Lịch</th>
                    <th>Gửi gần nhất</th>
                    <th>Trạng thái</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {scheduledReports.map(r => (
                    <tr key={r.name}>
                      <td className="strong">{r.name}</td>
                      <td className="text-sm">{r.recipients}</td>
                      <td className="text-sm fg-muted">{r.cadence}</td>
                      <td className="text-sm tnum">{r.last}</td>
                      <td><Tag variant="success" dot>Đang chạy</Tag></td>
                      <td><button className="btn btn-icon btn-sm btn-ghost" onClick={() => window.tvsDemo('Sửa / tạm dừng lịch gửi')}><Icon name="moreV" size={14}/></button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>
        </>
      )}
    </>
  );
}

// ===== 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)), 0) || 1;
  return (
    <div style={{display:'flex', gap:8, height: height + 22, alignItems:'flex-end'}}>
      {data.map((d, i) => {
        const total = d.values.reduce((s,v) => s+v, 0) || 1;
        return (
          <div key={i} style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'flex-end', height:'100%'}}>
            <div style={{height:`${(total/max)*(height/(height+22))*100}%`, display:'flex', flexDirection:'column', justifyContent:'flex-end', borderRadius:'2px 2px 0 0', overflow:'hidden'}}>
              {d.values.map((v, j) => (
                <div key={j} style={{height:`${(v/total)*100}%`, background: colors[j]}}/>
              ))}
            </div>
            {/* Nhãn ngày nằm dưới cột — không còn bị overflow:hidden cắt mất */}
            <div style={{height:22,display:'flex',alignItems:'flex-end',justifyContent:'center',fontSize:10,color:'var(--fg-muted)'}}>{d.Label}</div>
          </div>
        );
      })}
    </div>
  );
}

// ===== Mini donut chart =====
function DonutChart({ data, size = 180 }) {
  const sum = data.reduce((s,d) => s+d.value, 0);
  const total = sum || 1;
  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(sum)}</text>
      <text x={cx} y={cy + 12} textAnchor="middle" style={{fontSize:11,fill:'var(--fg-muted)'}}>30 ngày</text>
    </svg>
  );
}

window.ReportsScreen = ReportsScreen;