// ===========================================================
// Manager view: "Cửa hàng" — overview across all stores
// ===========================================================

function StoresScreen({ onOpenCustomer }) {
  const [activeStore, setActiveStore] = useState('S-Q1');
  const [period, setPeriod] = useState('today'); // today | 7d | 30d
  const [lbPeriod, setLbPeriod] = useState('week'); // week | month

  // Per-store mocked metrics (số liệu "hôm nay"; kỳ dài hơn nhân theo hệ số)
  const BASE_METRICS = {}; // Số liệu cửa hàng thật lấy từ backend
  const MULT = { today: 1, '7d': 6.5, '30d': 27 };
  const PERIOD_LABEL = { today: 'hôm nay', '7d': '7 ngày qua', '30d': '30 ngày qua' };
  const scale = (m) => ({
    ...m,
    revenue: Math.round(m.revenue * MULT[period]),
    target: Math.round(m.target * MULT[period]),
    orders: Math.round(m.orders * MULT[period]),
    members: Math.round(m.members * MULT[period]),
  });
  const storeMetrics = Object.fromEntries(Object.entries(BASE_METRICS).map(([k, m]) => [k, scale(m)]));

  const totalRevenue = Object.values(storeMetrics).reduce((s, m) => s + m.revenue, 0);
  const totalTarget  = Object.values(storeMetrics).reduce((s, m) => s + m.target, 0);
  const totalOrders  = Object.values(storeMetrics).reduce((s, m) => s + m.orders, 0);
  const totalMembers = Object.values(storeMetrics).reduce((s, m) => s + m.members, 0);
  const totalStaff   = D.stores.reduce((s, x) => s + x.staff, 0);

  // Staff leaderboard — con số trong giới hạn tổng của từng cửa hàng
  const LB_MULT = lbPeriod === 'month' ? 4.3 : 1;
  const staffLeaderboard = []; // Bảng xếp hạng thật do backend tổng hợp

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Cửa hàng</h1>
          <div className="sub">{D.stores.length} cửa hàng · {totalStaff} nhân viên · {totalMembers} thành viên đăng ký mới {PERIOD_LABEL[period]}</div>
        </div>
        <div className="row gap-2">
          <Segmented value={period} options={[{value:'today',label:'Hôm nay'},{value:'7d',label:'7 ngày'},{value:'30d',label:'30 ngày'}]} onChange={setPeriod}/>
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Xuất báo cáo cửa hàng')}><Icon name="download" size={14}/>Xuất báo cáo</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI feature label={'Doanh thu ' + PERIOD_LABEL[period]} value={fmt.vndFull(totalRevenue)}
          progress={totalTarget > 0 ? (totalRevenue/totalTarget)*100 : 0}
          progressLabel={{left: fmt.vndFull(totalRevenue), right: 'Mục tiêu ' + fmt.vndFull(totalTarget)}}/>
        <KPI label="Tổng giao dịch" value={totalOrders}/>
        <KPI label="Thành viên mới" value={totalMembers}/>
        <KPI label="Follow-up cần xử lý" value={Object.values(storeMetrics).reduce((s,m)=>s+m.followups,0)} sub="Trên toàn hệ thống"/>
      </div>

      {/* 3 store cards */}
      <div className="grid mb-5" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:'var(--space-4)'}}>
        {D.stores.map(s => {
          const m = storeMetrics[s.id];
          if (!m) return null; // cửa hàng mới chưa có số liệu demo
          const pct = (m.revenue / m.target) * 100;
          const isActive = activeStore === s.id;
          return (
            <div key={s.id}
              className="card"
              onClick={() => setActiveStore(s.id)}
              style={{
                cursor:'pointer',
                padding:0,
                border: isActive ? '2px solid var(--vs-light-blue)' : '1px solid var(--border-1)',
                boxShadow: isActive ? 'var(--shadow-3)' : 'var(--shadow-1)',
                transition: 'all var(--dur-fast)',
                overflow: 'hidden',
              }}>
              <div style={{padding:'var(--space-4) var(--space-5)',background: isActive ? 'var(--vs-dark-blue)' : 'var(--bg-soft)', color: isActive ? '#fff' : 'var(--fg-1)'}}>
                <div className="row" style={{alignItems:'flex-start'}}>
                  <div style={{flex:1}}>
                    <div style={{fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase',fontWeight:700,color: isActive ? 'var(--vs-light-blue)' : 'var(--fg-muted)',marginBottom:4}}>
                      {s.id}
                    </div>
                    <h3 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color: isActive ? '#fff' : 'var(--fg-1)'}}>{s.name}</h3>
                    <div style={{fontSize:12,marginTop:4,color: isActive ? 'rgba(255,255,255,0.7)' : 'var(--fg-muted)'}}>{s.address}</div>
                  </div>
                  <span className="status-dot green" style={{marginTop:8}}/>
                </div>
              </div>
              <div className="card-pad">
                <div className="row mb-3">
                  <div style={{flex:1}}>
                    <div className="text-xs fg-muted">Doanh thu {PERIOD_LABEL[period]}</div>
                    <div className="tnum bold" style={{fontSize:22,color:'var(--vs-dark-blue)',fontFamily:'var(--font-display)'}}>{fmt.vndFull(m.revenue)}</div>
                  </div>
                  <Tag variant={pct >= 80 ? 'success' : pct >= 50 ? 'warning' : 'danger'} dot>{pct.toFixed(0)}% mục tiêu</Tag>
                </div>
                <div style={{height:6,background:'var(--bg-soft)',borderRadius:3,overflow:'hidden'}}>
                  <div style={{width: Math.min(100, pct) + '%', height:'100%', background: pct >= 80 ? 'var(--status-success)' : pct >= 50 ? 'var(--status-warning)' : 'var(--status-sale)'}}/>
                </div>
                <div className="row mt-3 mb-3" style={{justifyContent:'space-between'}}>
                  <span className="text-xs fg-muted">Còn {fmt.vndFull(m.target - m.revenue)}</span>
                  <span className="text-xs fg-muted">{m.orders} đơn · {fmt.vndFull(Math.round(m.revenue/m.orders))}/đơn</span>
                </div>
                <div className="divider"/>
                <div className="row mt-3">
                  <div style={{flex:1}}>
                    <div className="text-xs fg-muted">Quản lý ca</div>
                    <div className="row gap-2 mt-1">
                      <Avatar name={m.manager} size="sm"/>
                      <span className="text-sm strong fg-1">{m.manager}</span>
                    </div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div className="text-xs fg-muted">Nhân viên</div>
                    <div className="text-sm strong fg-1 mt-1">{m.staff} người</div>
                  </div>
                </div>
                <div className="row mt-3 gap-2">
                  <div style={{flex:1,padding:'8px 10px',background:'var(--bg-soft)',borderRadius:'var(--radius-sm)'}}>
                    <div className="text-xs fg-muted">TV mới</div>
                    <div className="strong tnum fg-1">+{m.members}</div>
                  </div>
                  <div style={{flex:1,padding:'8px 10px',background: m.followups > 5 ? 'rgba(191,9,35,0.06)' : 'var(--bg-soft)',borderRadius:'var(--radius-sm)'}}>
                    <div className="text-xs fg-muted">Follow-up</div>
                    <div className="strong tnum" style={{color: m.followups > 5 ? 'var(--status-sale)' : 'var(--fg-1)'}}>{m.followups}</div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="grid grid-7-5">
        <Card pad={false}>
          <CardHeader title="Bảng xếp hạng nhân viên cửa hàng" sub={(lbPeriod === 'week' ? 'Tuần này' : 'Tháng này') + ' — số thành viên đăng ký mới + đơn ghi nhận'}
            actions={<Segmented value={lbPeriod} options={[{value:'week',label:'Tuần'},{value:'month',label:'Tháng'}]} onChange={setLbPeriod}/>}/>
          <div className="table-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{width:48}}>Hạng</th>
                  <th>Nhân viên</th>
                  <th>Cửa hàng</th>
                  <th className="num">TV mới</th>
                  <th className="num">Đơn ghi nhận</th>
                  <th className="num">Doanh số</th>
                </tr>
              </thead>
              <tbody>
                {staffLeaderboard.map((s, i) => (
                  <tr key={s.name}>
                    <td>
                      <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color: i < 3 ? 'var(--vs-dark-blue)' : 'var(--fg-muted)'}}>{s.badge || `#${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.store}</Tag></td>
                    <td className="num tnum">{s.members}</td>
                    <td className="num tnum">{s.orders}</td>
                    <td className="num strong">{fmt.vndFull(s.revenue)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>

        <Card pad={false}>
          <CardHeader title="Hoạt động gần đây" sub={`Cửa hàng ${(D.stores.find(s=>s.id===activeStore) || {name:'—'}).name.replace('TVS ','')}`}/>
          <div style={{padding:'var(--space-3) var(--space-5)'}}>
            {[].map((a, i) => (
              <div key={i} className="activity">
                <div className="ico" style={{color: a.color === 'success' ? 'var(--status-success)' : 'var(--vs-light-blue)'}}>
                  <Icon name={a.ico} size={14}/>
                </div>
                <div className="body">
                  <div className="title text-sm">{a.t}</div>
                  <div className="meta">{a.m}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card pad={false} className="mt-4">
        <CardHeader title={`Khách đang tương tác — ${(D.stores.find(s => s.id === activeStore) || {name:'—'}).name}`}
          sub="Khách nhân viên vừa tra cứu / ghi đơn hôm nay"
          actions={<button className="btn btn-ghost btn-sm" onClick={() => window.tvsDemo('Danh sách khách tương tác đầy đủ')}>Xem tất cả →</button>}/>
        <div style={{padding:'var(--space-3) var(--space-5)'}}>
          {D.customers.slice(0,4).map((c, i) => (
            <div key={c.id} className="activity" style={{cursor:'pointer'}} onClick={() => onOpenCustomer(c)}>
              <Avatar name={c.name} tier={tierVariant(c.tier)}/>
              <div className="body">
                <div className="row gap-2">
                  <div className="title">{c.name}</div>
                  <Tag variant={tierVariant(c.tier)}>{c.tier}</Tag>
                </div>
                <div className="meta">Tra cứu {15 + i*8} phút trước · LTV {fmt.vndFull(c.ltv)} · NV phụ trách: Bảo</div>
              </div>
              <Tag variant="info" dot>Tại quầy</Tag>
            </div>
          ))}
        </div>
      </Card>
    </>
  );
}

window.StoresScreen = StoresScreen;