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

function StoresScreen({ onOpenCustomer }) {
  const [activeStore, setActiveStore] = useState('S-Q1');

  // Per-store mocked metrics
  const storeMetrics = {
    'S-Q1': { revenue: 18420000, target: 30000000, orders: 24, members: 6, followups: 5, staff: 6, manager: 'Trần Quốc Bảo' },
    'S-Q3': { revenue: 24800000, target: 32000000, orders: 31, members: 9, followups: 3, staff: 5, manager: 'Nguyễn Hoài Phương' },
    'S-HN': { revenue: 31200000, target: 35000000, orders: 38, members: 12, followups: 7, staff: 7, manager: 'Đỗ Quang Minh' },
  };

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

  // Staff leaderboard across all stores
  const staffLeaderboard = [
    { name: 'Trần Quốc Bảo',    store: 'TVS Q.1',       members: 8, orders: 14, revenue: 9800000, badge: '🥇' },
    { name: 'Đỗ Quang Minh',     store: 'TVS Hà Nội',    members: 7, orders: 12, revenue: 8200000, badge: '🥈' },
    { name: 'Nguyễn Hoài Phương',store: 'TVS Q.3',       members: 6, orders: 11, revenue: 7400000, badge: '🥉' },
    { name: 'Lê Hồng Vy',        store: 'TVS Q.1',       members: 4, orders: 8,  revenue: 5100000, badge: '' },
    { name: 'Phan Thị Hằng',     store: 'TVS Q.3',       members: 4, orders: 7,  revenue: 4800000, badge: '' },
    { name: 'Vũ Minh Tâm',       store: 'TVS Hà Nội',    members: 3, orders: 6,  revenue: 3900000, badge: '' },
  ];

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Cửa hàng</h1>
          <div className="sub">3 cửa hàng · 18 nhân viên · {totalMembers} thành viên đăng ký mới hôm nay</div>
        </div>
        <div className="row gap-2">
          <Segmented value="today" options={[{value:'today',label:'Hôm nay'},{value:'7d',label:'7 ngày'},{value:'30d',label:'30 ngày'}]} onChange={()=>{}}/>
          <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 hôm nay" value={fmt.vndFull(totalRevenue)}
          delta="+14% vs hôm qua" progress={(totalRevenue/totalTarget)*100}
          progressLabel={{left: fmt.vndFull(totalRevenue), right: 'Mục tiêu ' + fmt.vndFull(totalTarget)}}/>
        <KPI label="Tổng giao dịch" value={totalOrders} delta="+12 đơn"/>
        <KPI label="Thành viên mới" value={totalMembers} delta="+8% tuần này"/>
        <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];
          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 hôm nay</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="Tuần này — số thành viên đăng ký mới + đơn ghi nhận"
            actions={<Segmented value="week" options={[{value:'week',label:'Tuần'},{value:'month',label:'Tháng'}]} onChange={()=>{}}/>}/>
          <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.replace('TVS ','')}`}/>
          <div style={{padding:'var(--space-3) var(--space-5)'}}>
            {[
              {ico:'receipt', t:'Bảo ghi nhận đơn 2.4tr — Đặng Hoàng Mai', m:'5 phút trước', color:'success'},
              {ico:'user',    t:'Đăng ký thành viên mới — Trần Văn Hoàng', m:'12 phút trước'},
              {ico:'phone',   t:'Follow-up gọi cho Lý Tuấn Khang', m:'24 phút trước'},
              {ico:'receipt', t:'Vy ghi nhận đơn 890K — Mai Quỳnh Anh', m:'38 phút trước', color:'success'},
              {ico:'note',    t:'Ghi chú: Khách hỏi vị mới Whey', m:'52 phút trước'},
              {ico:'gift',    t:'Đổi 1.500 điểm — Vũ Thanh Hà', m:'1 giờ trước'},
              {ico:'user',    t:'Tra cứu khách: Bùi Khánh Linh', m:'1 giờ trước'},
            ].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}`}
          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">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;