// ===========================================================
// Dashboard — MỘT layout duy nhất cho mọi vai trò (chốt 20/07/2026)
// Bố cục không đổi; DỮ LIỆU scope theo vai trò: telesale thấy số của mình,
// cửa hàng thấy số cửa hàng, B2B thấy pipeline đối tác, quản lý thấy toàn hệ thống.
// ===========================================================
const D = window.TVS_DATA; // LƯU Ý: đây là định nghĩa global D cho toàn app (các file sau dùng chung)

function Dashboard({ role, onNavigate, onOpenCustomer, onLogOrder, onRegister, onLogOutcome }) {
  const roleId = role ? role.id : 'telesale';
  const firstName = role ? role.person.split(' ').slice(-1)[0] : 'bạn';
  const k = D.kpis.telesale;
  const me = k.person;

  // Khách của tôi có lịch follow-up (dữ liệu thật, cập nhật theo session)
  const myFollowUps = D.customers
    .filter(c => (roleId === 'manager' || ownerOf(c) === role.person) && effFollowUp(c))
    .map(c => ({ c, f: effFollowUp(c) }))
    .sort((a, b) => a.f.due < b.f.due ? -1 : 1);

  // Đối tác có hành động đến hạn (cho vai trò B2B)
  const partnerActions = D.partners
    .filter(p => p.nextAction)
    .sort((a, b) => a.nextAction.due < b.nextAction.due ? -1 : 1);

  // ===== KPI row theo vai trò =====
  const kpiRow = (() => {
    if (roleId === 'instore') {
      const s = D.kpis.instore;
      return (
        <div className="kpi-grid">
          <KPI feature label="Doanh số cửa hàng hôm nay" value={fmt.vndFull(s.todayRevenue)}
            progress={(s.todayRevenue / s.target) * 100}
            progressLabel={{ left: fmt.vndFull(s.todayRevenue), right: 'Mục tiêu ' + fmt.vndFull(s.target) }}/>
          <KPI label="Giao dịch hôm nay" value={s.transactions} sub={`Giỏ TB ${fmt.vndFull(s.avgBasket)}`}/>
          <KPI label="Thành viên mới" value={s.newMembers}/>
          <KPI label="Khách quay lại" value={s.returningRate} unit="%"/>
        </div>
      );
    }
    if (roleId === 'b2b') {
      const s = D.kpis.b2b;
      const pipeTotal = Object.values(s.pipeline).reduce((a, b) => a + b, 0);
      return (
        <div className="kpi-grid">
          <KPI feature label="GMV đối tác 30 ngày" value={fmt.vnd(s.gmv30d)}
            progress={(s.gmv30d / s.gmvTarget) * 100}
            progressLabel={{ left: fmt.vnd(s.gmv30d), right: 'Mục tiêu ' + fmt.vnd(s.gmvTarget) }}/>
          <KPI label="Đối tác active" value={s.activePartners}/>
          <KPI label="Pipeline" value={pipeTotal} sub={`${s.pipeline.prospect} prospect · ${s.pipeline.proposal} proposal`}/>
          <KPI label="Hành động đến hạn" value={partnerActions.filter(p => D.parseISO(p.nextAction.due) <= D.today).length} sub="đối tác cần xử lý"/>
        </div>
      );
    }
    if (roleId === 'director') {
      // Giám đốc = người chăm khách: số của CHÍNH MÌNH, không phải toàn hệ thống
      const s = D.kpis.director;
      const mine = D.customers.filter(c => ownerOf(c) === role.person);
      const dueToday = myFollowUps.filter(x => D.parseISO(x.f.due) <= D.today).length;
      return (
        <div className="kpi-grid">
          <KPI feature label="Doanh số hôm nay" value={fmt.vndFull(s.sales)}
            progress={(s.sales / s.salesTarget) * 100}
            progressLabel={{ left: fmt.vndFull(s.sales), right: 'Mục tiêu ' + fmt.vndFull(s.salesTarget) }}/>
          <KPI label="Khách đang phụ trách" value={mine.length} sub={role.team}/>
          <KPI label="Cần follow-up hôm nay" value={dueToday} delta={dueToday > 0 ? `${dueToday} đến hạn` : 'Không có'} deltaDir={dueToday > 0 ? 'up' : 'flat'}/>
          <KPI label="Tỷ lệ chốt" value={s.conversion} unit="%"/>
        </div>
      );
    }
    if (roleId === 'manager') {
      const s = D.kpis.manager;
      return (
        <div className="kpi-grid">
          <KPI feature label="Doanh số toàn hệ thống hôm nay" value={fmt.vndFull(s.revenueToday)}
            progress={(s.revenueToday / s.revenueTarget) * 100}
            progressLabel={{ left: fmt.vndFull(s.revenueToday), right: 'Mục tiêu ' + fmt.vndFull(s.revenueTarget) }}/>
          <KPI label="Đơn hôm nay" value={s.ordersToday} sub={`AOV ${fmt.vndFull(s.aov)}`}/>
          <KPI label="Khách mới hôm nay" value={s.newCustomers}/>
          <KPI label="Tỷ lệ mua lại" value={s.repeatRate} unit="%"/>
        </div>
      );
    }
    // telesale (mặc định)
    return (
      <div className="kpi-grid">
        <KPI feature label="Doanh số hôm nay"
          value={fmt.vndFull(me.sales)}
          progress={(me.sales / me.salesTarget) * 100}
          progressLabel={{ left: fmt.vndFull(me.sales), right: 'Mục tiêu ' + fmt.vndFull(me.salesTarget) }}/>
        <KPI label="Khách đã liên hệ" value={me.calls} unit={`/ ${me.target}`}
          progress={(me.calls / me.target) * 100}/>
        <KPI label="Tỷ lệ chốt" value={me.conversion} unit="%"/>
        <KPI label="Xếp hạng team" value={`#${me.rank}`} sub={`trên ${k.team.length} nhân viên`}/>
      </div>
    );
  })();

  // ===== Câu chào theo vai trò =====
  const subLine = (() => {
    if (roleId === 'instore') return <>Cửa hàng <b>{D.kpis.instore.store}</b> · {myFollowUps.length > 0 ? <>bạn có <b style={{color:'var(--vs-dark-blue)'}}>{myFollowUps.length} khách</b> cần chăm sóc</> : 'chưa có khách cần chăm sóc hôm nay'}.</>;
    if (roleId === 'b2b') return <>Bạn quản lý <b style={{color:'var(--vs-dark-blue)'}}>{D.partners.length} đối tác</b> · {partnerActions.filter(p => D.parseISO(p.nextAction.due) <= D.today).length} hành động đến hạn hôm nay.</>;
    if (roleId === 'director') return <>Bạn đang phụ trách <b style={{color:'var(--vs-dark-blue)'}}>{D.customers.filter(c => ownerOf(c) === role.person).length} khách</b> · {myFollowUps.filter(x => D.parseISO(x.f.due) <= D.today).length} cần liên hệ hôm nay.</>;
    if (roleId === 'manager') return <>Phạm vi: <b>toàn hệ thống</b> · {D.customers.length} khách hàng · {D.partners.length} đối tác B2B.</>;
    return <>Hôm nay bạn cần liên hệ <b style={{color:'var(--vs-dark-blue)'}}>{D.callQueue.length} khách</b>. Mục tiêu doanh số: <b>{fmt.vndFull(me.salesTarget)}</b>.</>;
  })();

  // ===== Card trái: danh sách việc hôm nay theo vai trò =====
  const leftCard = (() => {
    if (roleId === 'b2b') {
      return (
        <Card pad={false}>
          <CardHeader title="Đối tác cần hành động" sub={`${partnerActions.length} đối tác xếp theo hạn`}
            actions={<button className="btn btn-ghost btn-sm" onClick={() => onNavigate('customers')}>Xem danh sách →</button>}/>
          <div className="table-wrap">
            <table className="tbl sheet">
              <thead>
                <tr><th>Hạn</th><th>Đối tác</th><th>Hành động</th><th>GMV 30 ngày</th><th></th></tr>
              </thead>
              <tbody>
                {partnerActions.slice(0, 6).map(p => {
                  const overdue = D.parseISO(p.nextAction.due) <= D.today;
                  return (
                    <tr key={p.id}>
                      <td><Tag variant={overdue ? 'danger' : 'warning'}>{fmt.rel(p.nextAction.due)}</Tag></td>
                      <td>
                        <div className="strong">{p.name}</div>
                        <div className="text-xs fg-muted">{p.type} · {p.contact}</div>
                      </td>
                      <td className="text-sm">{p.nextAction.type}</td>
                      <td className="num strong tnum">{fmt.vnd(p.gmv30d)}</td>
                      <td>
                        <button className="btn btn-icon btn-sm btn-secondary" title="Ghi nhận đơn sỉ"
                          onClick={(e) => { e.stopPropagation(); onLogOrder && onLogOrder(p); }}>
                          <Icon name="receipt" size={13}/>
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
      );
    }
    if (roleId === 'instore' || roleId === 'director' || roleId === 'manager') {
      return (
        <Card pad={false}>
          <CardHeader title={roleId === 'manager' ? 'Follow-up toàn team hôm nay' : 'Khách cần chăm sóc'}
            sub={`${myFollowUps.length} khách xếp theo hạn`}
            actions={<button className="btn btn-ghost btn-sm" onClick={() => onNavigate('customers')}>Xem lịch follow-up →</button>}/>
          {myFollowUps.length > 0 ? (
            <div className="table-wrap">
              <table className="tbl sheet">
                <thead>
                  <tr><th>Hạn</th><th>Khách hàng</th><th>Lý do</th><th></th></tr>
                </thead>
                <tbody>
                  {myFollowUps.slice(0, 6).map(({ c, f }) => (
                    <tr key={c.id} onClick={() => onOpenCustomer(c)}>
                      <td><Tag variant={D.parseISO(f.due) <= D.today ? 'danger' : 'warning'}>{fmt.rel(f.due)}</Tag></td>
                      <td>
                        <div className="row gap-2">
                          <span className={`tier-dot ${tierVariant(c.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">{f.reason}</td>
                      <td>
                        <button className="btn btn-icon btn-sm btn-cta" title="Ghi kết quả liên hệ"
                          onClick={(e) => { e.stopPropagation(); (onLogOutcome || onOpenCustomer)(c); }}>
                          <Icon name="phone" size={13}/>
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <div className="card-pad">
              <EmptyState icon="check" title="Không có follow-up chờ xử lý" desc="Lịch chăm sóc khách sẽ hiện ở đây."/>
            </div>
          )}
        </Card>
      );
    }
    // telesale: hàng đợi cuộc gọi
    return (
      <Card pad={false}>
        <CardHeader title="Khách cần liên hệ hôm nay" sub={`${D.callQueue.length} khách được xếp theo độ ưu tiên`}
          actions={<button className="btn btn-ghost btn-sm" onClick={() => onNavigate('customers')}>Xem lịch follow-up →</button>}/>
        <div className="table-wrap">
          <table className="tbl sheet">
            <thead>
              <tr><th>Giờ</th><th>Khách hàng</th><th>Lý do liên hệ</th><th>Ư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">
                        <span className={`tier-dot ${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-cta" title="Ghi kết quả liên hệ"
                        onClick={(e) => { e.stopPropagation(); cust && (onLogOutcome || onOpenCustomer)(cust); }}>
                        <Icon name="phone" size={13}/>
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
    );
  })();

  // ===== Card phải theo vai trò =====
  const rightCard = (() => {
    if (roleId === 'b2b') {
      const top = [...D.partners].sort((a, b) => b.gmv30d - a.gmv30d).slice(0, 5);
      return (
        <Card pad={false}>
          <CardHeader title="Top đối tác 30 ngày" sub="Theo GMV"/>
          <div style={{padding:'var(--space-3) var(--space-5)'}}>
            {top.map((p, i) => (
              <div key={p.id} className="leader-row">
                <span className="rank">{['🥇','🥈','🥉'][i] || `#${i+1}`}</span>
                <div>
                  <div className="strong" style={{color:'var(--fg-1)',fontSize:14}}>{p.name}</div>
                  <div className="text-xs fg-muted">{p.type} · HH {p.commission}%</div>
                </div>
                <div className="tnum strong" style={{fontSize:14}}>{fmt.vnd(p.gmv30d)}</div>
              </div>
            ))}
          </div>
        </Card>
      );
    }
    if (roleId === 'instore') {
      const s = D.kpis.instore;
      const store = D.stores.find(x => x.name === s.store) || D.stores[0] || { name: 'Chưa có dữ liệu cửa hàng', address: '—', staff: 0 };
      return (
        <Card pad={false}>
          <CardHeader title="Cửa hàng của tôi" sub={store.name}/>
          <div className="card-pad col gap-3">
            <div className="row"><span className="text-sm fg-2" style={{flex:1}}>Địa chỉ</span><span className="text-sm strong" style={{textAlign:'right'}}>{store.address}</span></div>
            <div className="row"><span className="text-sm fg-2" style={{flex:1}}>Nhân viên ca hôm nay</span><span className="text-sm strong">{store.staff} người</span></div>
            <div className="row"><span className="text-sm fg-2" style={{flex:1}}>Giao dịch</span><span className="text-sm strong">{s.transactions} đơn</span></div>
            <div className="row"><span className="text-sm fg-2" style={{flex:1}}>Giỏ hàng TB</span><span className="text-sm strong">{fmt.vndFull(s.avgBasket)}</span></div>
            <div className="divider"/>
            <button className="btn btn-secondary" onClick={onRegister}><Icon name="plus" size={14}/>Đăng ký thành viên mới</button>
          </div>
        </Card>
      );
    }
    // telesale + manager: bảng xếp hạng team
    return (
      <Card pad={false}>
        <CardHeader title="Bảng xếp hạng team" sub="Tuần này"/>
        <div style={{padding:'var(--space-3) var(--space-5)'}}>
          {k.team.map((m, i) => (
            <div key={m.name} className={`leader-row ${m.self && roleId === 'telesale' ? 'self' : ''}`}>
              <span className="rank">{m.badge || `#${i+1}`}</span>
              <div>
                <div className="strong" style={{color:'var(--fg-1)',fontSize:14}}>{m.name}{m.self && roleId === 'telesale' && <span style={{marginLeft:6,fontSize:11,color:'var(--vs-light-blue)'}}>(Bạn)</span>}</div>
                <div className="text-xs fg-muted">{m.calls} lượt · CR {m.conv}%</div>
              </div>
              <div className="tnum strong" style={{fontSize:14}}>{fmt.vnd(m.sales)}</div>
            </div>
          ))}
        </div>
      </Card>
    );
  })();

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Chào {firstName} 👋</h1>
          <div className="sub">{subLine}</div>
        </div>
        <button className="btn btn-cta" onClick={() => onNavigate('customers')}>
          <Icon name="users" size={14}/>Mở danh sách khách
        </button>
      </div>

      {kpiRow}

      <div className="grid grid-12-8">
        {leftCard}
        {rightCard}
      </div>

      <div className="grid grid-2 mt-4">
        <Card pad={false}>
          <CardHeader title={roleId === 'b2b' ? 'GMV 14 ngày qua' : 'Doanh số 14 ngày qua'} sub="Triệu đồng"/>
          <div className="card-pad">
            <BarChart data={k.trend} highlight={k.trend.length - 1} height={140}/>
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Liên hệ gần đây" sub={`${D.callLog.length} lượt hôm nay`}/>
          <div className="card-pad">
            {D.callLog.length === 0 && <EmptyState icon="phone" title="Chưa có lượt liên hệ" desc="Nhật ký liên hệ sẽ hiện ở đây khi kết nối backend."/>}
            {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>
    </>
  );
}

window.Dashboard = Dashboard;