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>
  );
}

// ===== số liệu THẬT khi LIVE (rep), else MOCK demo =====
  const liveData = live && rep;
  const k = liveData ? rep.kpi : { data: 320 * days, replied: Math.round(320 * days * 0.92), replyRate: 92, avgFrtMin: 4.2, unanswered: 0 };
  const srcRows = liveData
    ? (rep.bySource || []).map(s => ({ page: s.account || chMeta(s.channel).label, ch: s.channel, sync: true, data: s.data, replied: s.replied, frtMin: s.frtMin, rate: Math.round(s.replyRate) }))
    : [{ page: 'Fanpage F&B Academy', ch: 'fb', sync: true, data: 96 * days, replied: 92 * days, frtMin: 3.1 }, { page: 'Zalo OA Học viện', ch: 'zalo', sync: true, data: 86 * days, replied: 82 * days, frtMin: 2.8 }].map(s => ({ ...s, rate: Math.round(s.replied / s.data * 100) }));
  const chanRows = liveData
    ? (rep.byChannel || []).map(c => ({ l: chMeta(c.channel).label, v: c.count, color: chMeta(c.channel).color }))
    : [{ l: 'FB', v: 142 * days, color: '#0084ff' }, { l: 'Zalo', v: 86 * days, color: '#0068ff' }];
  const totalChan = chanRows.reduce((a, b) => a + b.v, 0);
  const hourly = liveData
    ? (rep.byHour || []).filter(h => h.hour >= 6 && h.hour <= 22).map(h => ({ l: h.hour + 'h', v: h.count }))
    : ['8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h'].map((l, i) => ({ l, v: [12, 28, 34, 30, 18, 14, 26, 38, 42, 36, 22, 16][i] * days }));
  // heatmap: fold [7][24] → [7][6] band 8-20
  const heatGrid = liveData && rep.heat ? rep.heat.map(row => [0, 1, 2, 3, 4, 5].map(b => (row[8 + b * 2] || 0) + (row[9 + b * 2] || 0))) : null;
  const lb = liveData
    ? (rep.leaderboard || []).map(r => ({ id: r.sales, name: userName(r.sales), color: userColor(r.sales), convos: r.convos, respond: Math.round(r.replyRate), frtMin: r.frtMin, closes: r.won }))
    : [{ name: 'Phạm Tuấn', color: '#0a9e6e', convos: 64 * days, respond: 95, frtMin: 2.6, closes: 3 * days }];
  const fn = liveData ? rep.funnel : { data: 320 * days, leads: 198 * days, twoWay: 142 * days, won: 6 * days };
  const funnelSteps = [
    { l: 'Data về', v: fn.data, color: '#8a8a8a' },
    { l: 'Thành Lead', v: fn.leads, color: '#3b82f6' },
    { l: 'Chat 2 chiều', v: fn.twoWay, color: '#0a9e6e' },
    { l: 'Won', v: fn.won, color: '#7c3aed' },
  ];
  const unanswered = liveData ? (rep.unansweredList || []) : [];

return (
    <div className="page wide">
      <PageHead title="Báo cáo Inbox" subtitle={'Số liệu THẬT từ hội thoại · ' + periodLabel + (liveData ? '' : ' · (demo — bật LIVE để xem số thật)')}
        actions={<Button icon="refresh" onClick={() => { const { from, to } = range2dates(); if (live) window.API.inboxReport({ from, to }).then(setRep); }} disabled={loading}>{loading ? 'Đang tải…' : 'Tải lại'}</Button>} />
      <DateRangeBar range={range} setRange={setRange} custom={custom} setCustom={setCustom} cmp={cmp} setCmp={setCmp} />
      {!live && <div className="row aic g8 mb16" style={{ padding: '9px 14px', borderRadius: 10, background: 'var(--p-warning-bg)' }}><Icon name="alert" size={15} color="#b06f00" /><span className="t12">Đang ở MOCK — mở app với <code>?api=…</code> để xem số liệu thật từ hội thoại.</span></div>}
      <div className="grid gc4 mb16">
        <KPI label="Data đổ về" value={fmtN(k.data)} sub={days + ' ngày · ' + chanRows.length + ' kênh'} icon="inbox" />
        <KPI label="Tỷ lệ phản hồi" value={Math.round(k.replyRate) + '%'} sub={fmtN(k.replied) + '/' + fmtN(k.data) + ' đã chat'} icon="message" />
        <KPI label="First response TB" value={fmtFrt(k.avgFrtMin)} sub="TB/hội thoại" icon="clock" />
        <KPI label="Chưa trả lời" value={fmtN(k.unanswered)} sub="khách đang chờ rep" icon="alert" />
      </div>

{unanswered.length > 0 && (
        <Card title={'🔴 Hội thoại CHƯA trả lời (' + unanswered.length + ')'} subtitle="Khách nhắn mà chưa ai phản hồi — xếp theo thời gian chờ, xử trước cái lâu nhất" className="mb16">
          <table className="src-tbl">
            <thead><tr><th style={{ textAlign: 'left' }}>Khách</th><th>Nguồn</th><th style={{ textAlign: 'left' }}>Tin cuối</th><th style={{ textAlign: 'right' }}>Chờ</th><th></th></tr></thead>
            <tbody>
              {unanswered.slice(0, 15).map((w, i) => (
                <tr key={i} className="clickable" onClick={() => navigate('/inbox')}>
                  <td className="fw6">{w.name || '(khách)'}</td>
                  <td style={{ textAlign: 'center' }}><span className="t11" style={{ color: chMeta(w.channel).color, fontWeight: 600 }}>{chMeta(w.channel).label}{w.account ? ' · ' + w.account : ''}</span></td>
                  <td className="t12 muted" style={{ maxWidth: 280, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.lastText || '—'}</td>
                  <td style={{ textAlign: 'right' }} className="fw7 tnum"><span style={{ color: w.waitMin > 60 ? '#c4320a' : w.waitMin > 15 ? '#b06f00' : '#0e7c4a' }}>{fmtFrt(w.waitMin)}</span></td>
                  <td style={{ textAlign: 'right' }}><Button size="sm" variant="plain" icon="chevronRight" /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}

<Card title="Báo cáo theo nguồn (kênh / tài khoản thật)" className="mb16"
        actions={<Button size="sm" icon="refresh" onClick={() => navigate('/system/channels')}>Quản lý kết nối</Button>}>
        {srcRows.length === 0 ? <div className="t13 muted center" style={{ padding: 20 }}>Chưa có hội thoại trong kỳ này.</div> : (
        <table className="src-tbl">
          <thead>
            <tr>
              <th style={{ textAlign: 'left' }}>Nguồn / Tài khoản</th>
              <th>Kênh</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>
            </tr>
          </thead>
          <tbody>
            {srcRows.map((s, i) => { const rate = s.rate; return (
              <tr key={i}>
                <td className="fw6">{s.page}</td>
                <td style={{ textAlign: 'center' }}><ChannelDot ch={s.ch} size={18} /></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">{fmtFrt(s.frtMin)}</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ễu: Chat → Lead → Won">
            <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 grid={heatGrid} /></Card>
      <div className="grid" style={{ gridTemplateColumns: '1fr' }}>
        <Card title="Bảng xếp hạng theo Sales" subtitle="Hiệu suất xử lý inbox trong kỳ (theo lead phụ trách)">
          {lb.length === 0 ? <div className="t13 muted center" style={{ padding: 20 }}>Chưa có dữ liệu sales trong kỳ.</div> : (
          <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' }}>Won</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">{fmtFrt(r.frtMin)}</td>
                  <td style={{ textAlign: 'right' }} className="fw7 tnum">{r.closes}</td>
                </tr>
              ))}
            </tbody>
          </table>
          )}
        </Card>
      </div>
    </div>
  );
}

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