GỬI NHẬN XÉT CHO {(open.agentName || '').toUpperCase()}

setCoach(e.target.value)} placeholder="Nhận xét điểm cần cải thiện, ví dụ: chưa chốt lịch hẹn rõ ràng…" style={{ resize: 'none' }} />
                  <div className="row jcsb aic mt8"><span className="t11 subtle">Agent sẽ nhận thông báo & xác nhận đã đọc.</span><Button size="sm" variant="primary" icon="send" onClick={() => setCoachSent(true)} disabled={!coach.trim() && !coachSent}>{coachSent ? 'Đã gửi' : 'Gửi nhận xét'}</Button></div>
                </div>
                <div>
                  <div className="t12 fw7 subtle mb8">LỊCH SỬ COACHING</div>
                  <div className="col g10">
                    {coachSent && <CoachItem who="Bạn" at="vừa xong" text={coach || '(nhận xét mới)'} ack={false} />}
                    <CoachItem who="Trần Quản Lý" at="2 ngày trước" text="Cần xác nhận ngân sách trước khi báo giá — lần này báo giá hơi sớm." ack={true} />
                    <CoachItem who="Trần Quản Lý" at="1 tuần trước" text="Mở đầu chuyên nghiệp, giữ nhịp này nhé." ack={true} />
                  </div>
                </div>
              </div>
            )}
          </div>
        </Drawer>
      )}
    </div>
  );
}

const [range, setRange] = useState('1d');
  const [custom, setCustom] = useState({ from: '19/05/2026', to: '02/06/2026' });
  const [cmp, setCmp] = useState('prev');
  const days = rangeDays(range, custom);
  const prof = CMP_PROFILE[cmp];
  const cmpOn = !!prof;
  const fmtN = n => Math.round(n).toLocaleString('vi-VN');
  const data = 320 * days, replied = Math.round(data * 0.92);
  const respondRate = 92, frtMin = '4,2', qc = '7,8';
  const dData = cmpOn ? deltaPct(data, 320 * days * prof.f) : null;
  const dResp = cmpOn ? respondRate - prof.respond : null;
  const dFrt = cmpOn ? deltaPct(4.2, prof.frt) : null;
  const dQc = cmpOn ? deltaPct(7.8, prof.qc) : null;
  const periodLabel = range === 'custom' ? custom.from + ' – ' + custom.to : spanForDays(days).label;
  const cmpLabel = cmpOn ? compareSpan(days, cmp).label : '';
  const srcRows = bySource.map(s => ({ ...s, data: s.data * days, replied: s.replied * days }));
  const chanRows = byChannel.map(d => ({ ...d, v: d.v * days }));
  const totalChan = chanRows.reduce((a, b) => a + b.v, 0);
  const lb = leaderboard.map(r => ({ ...r, convos: r.convos * days, closes: r.closes * days }));
  const funnelSteps = [{ l: 'Tổng data', v: 320, color: '#8a8a8a' }, { l: 'Bỏ rác', v: 58, color: '#c4320a' }, { l: 'Lead mới', v: 198, color: '#3b82f6' }, { l: 'Đang chat', v: 142, color: '#0a9e6e' }].map(s => ({ ...s, v: s.v * days }));

return (
    <div className="page wide">
      <PageHead title="Báo cáo Inbox" subtitle="Hiệu suất tiếp nhận & phản hồi hội thoại theo mốc thời gian"
        actions={<Button icon="download">Xuất báo cáo</Button>} />
      <DateRangeBar range={range} setRange={setRange} custom={custom} setCustom={setCustom} cmp={cmp} setCmp={setCmp} />
      {cmpOn && (
        <div className="row aic g8" style={{ padding: '9px 14px', borderRadius: 10, background: 'var(--p-info-bg)', color: 'var(--p-info-text)', marginBottom: 16, fontSize: 12.5 }}>
          <Icon name="chart" size={15} />Đang so sánh <b>{periodLabel}</b> với <b>{cmpLabel}</b> ({prof.label}). Δ bên dưới là thay đổi so với kỳ đối chiếu.
        </div>
      )}
      <div className="grid gc4 mb16">
        <KPI label="Data đổ về" value={fmtN(data)} delta={cmpOn ? dData : null} sub={cmpOn ? 'so ' + prof.label : days + ' ngày · 4 kênh'} icon="inbox" />
        <KPI label="Tỷ lệ phản hồi" value="92%" delta={cmpOn ? dResp : null} sub={fmtN(replied) + '/' + fmtN(data) + ' đã chat'} icon="message" />
        <KPI label="First response TB" value="4,2 phút" delta={cmpOn ? Math.abs(dFrt) : null} deltaDir={cmpOn ? (dFrt <= 0 ? 'up' : 'down') : undefined} sub={cmpOn ? (dFrt <= 0 ? 'Nhanh hơn' : 'Chậm hơn') : 'TB/hội thoại'} icon="clock" />
        <KPI label="Điểm QC chat TB" value="7,8" delta={cmpOn ? dQc : null} sub={cmpOn ? 'so ' + prof.label : 'thang 10'} icon="checkCircle" />
      </div>
      <Card title="Báo cáo theo nguồn (kênh đã kết nối)" className="mb16"
        actions={<Button size="sm" icon="refresh" onClick={() => navigate('/settings/ai-chat')}>Quản lý kết nối</Button>}>
        <table className="src-tbl">
          <thead>
            <tr>
              <th style={{ textAlign: 'left' }}>Nguồn / Trang</th>
              <th>Kênh</th>
              <th>Trạng thái sync</th>
              <th style={{ textAlign: 'right' }}>Data về</th>
              <th style={{ textAlign: 'right' }}>Đã phản hồi</th>
              <th style={{ textAlign: 'right' }}>Tỉ lệ respond</th>
              <th style={{ textAlign: 'right' }}>First response</th>
              <th style={{ textAlign: 'right' }}>QC chat</th>
            </tr>
          </thead>
          <tbody>
            {srcRows.map((s, i) => { const rate = Math.round((s.replied / s.data) * 100); return (
              <tr key={i}>
                <td className="fw6">{s.page}</td>
                <td style={{ textAlign: 'center' }}><ChannelDot ch={s.ch} size={18} /></td>
                <td style={{ textAlign: 'center' }}>{s.sync ? <Badge tone="success" dot>Đang sync</Badge> : <Badge tone="warning" dot>Tạm ngắt</Badge>}</td>
                <td style={{ textAlign: 'right' }} className="tnum">{fmtN(s.data)}</td>
                <td style={{ textAlign: 'right' }} className="tnum">{fmtN(s.replied)}</td>
                <td style={{ textAlign: 'right' }}>
                  <span className="row aic g8" style={{ justifyContent: 'flex-end' }}>
                    <span style={{ width: 54 }}><Progress value={rate} color={rate >= 90 ? '#0e7c4a' : rate >= 80 ? '#b06f00' : '#c4320a'} /></span>
                    <span className="fw7 tnum" style={{ minWidth: 34, color: rate >= 90 ? '#0e7c4a' : rate >= 80 ? '#b06f00' : '#c4320a' }}>{rate}%</span>
                  </span>
                </td>
                <td style={{ textAlign: 'right' }} className="tnum">{s.frt}</td>
                <td style={{ textAlign: 'right', color: s.qc >= 8 ? '#0e7c4a' : '#b06f00' }} className="fw7 tnum">{s.qc}</td>
              </tr>
            ); })}
          </tbody>
        </table>
      </Card>
      <div className="grid mb16" style={{ gridTemplateColumns: '1fr 1fr' }}>
        <Card title="Data về theo giờ"><BarChart data={hourly} color="#7c3aed" height={240} /></Card>
        <div className="col g12">
          <Card title="Data theo kênh"><div className="row aic g16"><Donut data={chanRows} center={{ v: fmtN(totalChan), l: 'hội thoại' }} /><div className="col g8">{chanRows.map(d => <div key={d.l} className="row jcsb aic" style={{ minWidth: 140 }}><span className="row aic g6 t12"><span style={{ width: 9, height: 9, borderRadius: 2, background: d.color }} />{d.l}</span><span className="fw6 tnum">{fmtN(d.v)}</span></div>)}</div></div></Card>
          <Card title="Phân loại lead trong ngày">
            <Funnel steps={funnelSteps} />
          </Card>
        </div>
      </div>
      <Card title="Heatmap data về (giờ × ngày trong tuần)" subtitle="Xác định khung giờ cao điểm để xếp ca trực inbox" className="mb16"><InboxHeatmap /></Card>
      <div className="grid" style={{ gridTemplateColumns: '1.5fr 1fr' }}>
        <Card title="Bảng xếp hạng theo Sales" subtitle="Hiệu suất xử lý inbox hôm nay">
          <table className="src-tbl">
            <thead>
              <tr>
                <th style={{ textAlign: 'left' }}>Sales</th>
                <th style={{ textAlign: 'right' }}>Hội thoại</th>
                <th style={{ textAlign: 'right' }}>Tỉ lệ respond</th>
                <th style={{ textAlign: 'right' }}>First response</th>
                <th style={{ textAlign: 'right' }}>QC chat</th>
                <th style={{ textAlign: 'right' }}>Chốt</th>
              </tr>
            </thead>
            <tbody>
              {lb.map((r, i) => (
                <tr key={i}>
                  <td><span className="row aic g8"><span className="t12 fw7 subtle" style={{ width: 16 }}>{i + 1}</span><Avatar name={r.name} color={r.color} size={26} /><span className="fw6">{r.name}</span></span></td>
                  <td style={{ textAlign: 'right' }} className="tnum">{fmtN(r.convos)}</td>
                  <td style={{ textAlign: 'right', color: r.respond >= 90 ? '#0e7c4a' : '#b06f00' }} className="fw7 tnum">{r.respond}%</td>
                  <td style={{ textAlign: 'right' }} className="tnum">{r.frt}</td>
                  <td style={{ textAlign: 'right', color: r.qc >= 8 ? '#0e7c4a' : '#b06f00' }} className="fw7 tnum">{r.qc}</td>
                  <td style={{ textAlign: 'right' }} className="fw7 tnum">{r.closes}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
        <Card title="Lý do mất lead (tháng này)" subtitle="Phân tích lost reasons để tối ưu kịch bản">
          <div className="col g12" style={{ paddingTop: 4 }}>
            {lostReasons.map(r => { const pct = Math.round((r.v / lostTotal) * 100); return (
              <div key={r.l}>
                <div className="row jcsb t12 mb4"><span className="fw5">{r.l}</span><span className="subtle tnum">{r.v} · {pct}%</span></div>
                <Progress value={pct} color={r.color} />
              </div>
            ); })}
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { CallLogQC, InboxDailyReport, DataExplorer });