// KolsList — KOL marketplace & agency roster.

const KOLS = [
  { id: "liwei",   initial: "李", name: "Li Wei",       loc: "Beijing",   agency: "BTC · Beijing Talent",   tier: "top",      followers: 8400000, gmv: 1840000, ctr: 4.8, kyc: "approved",  trend: [120, 132, 140, 138, 152, 168, 180, 184] },
  { id: "wangj",   initial: "王", name: "Wang Jing",     loc: "Shanghai",  agency: "Independent",            tier: "mid",      followers: 1820000, gmv:  620000, ctr: 3.6, kyc: "approved",  trend: [40, 48, 52, 55, 60, 58, 62, 62] },
  { id: "chenm",   initial: "陈", name: "Chen Mei",      loc: "Guangzhou", agency: "BTC · Beijing Talent",   tier: "top",      followers: 5400000, gmv:  980000, ctr: 4.1, kyc: "approved",  trend: [80, 84, 86, 92, 94, 96, 100, 98] },
  { id: "zhao",    initial: "赵", name: "Zhao Tao",      loc: "Chengdu",   agency: "Sichuan Live Co",        tier: "mid",      followers: 1240000, gmv:  340000, ctr: 3.2, kyc: "in_review", trend: [30, 32, 32, 34, 33, 35, 34, 34] },
  { id: "xu",      initial: "徐", name: "Xu Yan",        loc: "Hangzhou",  agency: "Independent",            tier: "emerging", followers:  380000, gmv:   84000, ctr: 5.4, kyc: "approved",  trend: [4, 6, 8, 10, 12, 14, 15, 16] },
  { id: "lin",     initial: "林", name: "Lin Wei",       loc: "Shenzhen",  agency: "BTC · Beijing Talent",   tier: "mid",      followers: 2120000, gmv:  410000, ctr: 3.0, kyc: "rejected",  trend: [50, 48, 45, 42, 40, 38, 36, 32] },
];

const AGENCIES = [
  { name: "Beijing Talent Co",   manager: "Wang Mei",       roster: 18, gmv: 4280000 },
  { name: "Sichuan Live Co",     manager: "Liu Han",        roster: 12, gmv: 1620000 },
  { name: "Independent KOLs",    manager: "—",              roster:  9, gmv: 1840000 },
];

const TIER = {
  top:      { label: "Top tier",      tone: "primary" },
  mid:      { label: "Mid tier",      tone: "info" },
  emerging: { label: "Emerging",      tone: "warning" },
};
const KYC = {
  approved:  { label: "Approved",  tone: "success" },
  in_review: { label: "In review", tone: "warning" },
  rejected:  { label: "Rejected",  tone: "danger" },
};

function fmtBig(n) {
  if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
  if (n >= 1000) return (n / 1000).toFixed(0) + "K";
  return n.toString();
}

function KolsList() {
  const [tier, setTier] = React.useState(null);
  const [kyc, setKyc] = React.useState(null);
  const rows = KOLS.filter(k => !tier || k.tier === tier)
                   .filter(k => !kyc || k.kyc === kyc);

  return (
    <div>
      <div className="page-head">
        <h1>KOLs &amp; agencies</h1>
        <span className="count">{KOLS.length} KOLs · {AGENCIES.length} agencies</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Export</button>
          <button className="btn secondary"><i className="ti ti-broadcast"></i>Schedule outreach</button>
          <button className="btn primary"><i className="ti ti-user-plus"></i>Add KOL</button>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        <div className="kpi">
          <div className="head"><i className="ti ti-users"></i><span className="lbl">Active KOLs</span></div>
          <div className="val">{KOLS.filter(k => k.kyc === "approved").length}</div>
          <Sparkline data={[4, 4, 4, 5, 5, 5, 5, 5]} width={240} height={28} tone="success" />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+1</span> this week</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-coin"></i><span className="lbl">KOL GMV · MTD</span></div>
          <div className="val mono">¥4.3M<span className="iso">CNY</span></div>
          <Sparkline data={[2.4, 2.6, 2.9, 3.2, 3.5, 3.8, 4.1, 4.3]} width={240} height={28} />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+22%</span> vs last month</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-shield-half"></i><span className="lbl">KYC pending</span></div>
          <div className="val">1</div>
          <Sparkline data={[3, 2, 2, 3, 2, 1, 1, 1]} width={240} height={28} tone="warning" />
          <div className="foot"><span className="down"><i className="ti ti-trending-down" style={{fontSize:13}}></i>−2</span> vs last week</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-broadcast"></i><span className="lbl">Live sessions / wk</span></div>
          <div className="val">42</div>
          <Sparkline data={[28, 30, 33, 36, 38, 40, 41, 42]} width={240} height={28} tone="success" />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+4</span> vs last week</div>
        </div>
      </div>

      <div className="dash-grid">
        <div className="dash-left">
          <div className="panel">
            <div className="panel-head">
              <h3>KOL roster</h3>
              <div className="right">
                <span className="label-caps">Tier</span>
                <span className={"chip" + (tier === null ? " active":"")} onClick={() => setTier(null)}>All</span>
                {Object.keys(TIER).map(t => (
                  <span key={t} className={"chip" + (tier === t ? " active":"")} onClick={() => setTier(t)}>{TIER[t].label}</span>
                ))}
                <span className="label-caps" style={{marginLeft: 8}}>KYC</span>
                <span className={"chip" + (kyc === null ? " active":"")} onClick={() => setKyc(null)}>All</span>
                {Object.keys(KYC).map(k => (
                  <span key={k} className={"chip" + (kyc === k ? " active":"")} onClick={() => setKyc(k)}>{KYC[k].label}</span>
                ))}
              </div>
            </div>
            <table>
              <thead>
                <tr>
                  <th>KOL</th>
                  <th style={{width:160}}>Agency</th>
                  <th style={{width:90}}>Tier</th>
                  <th style={{width:100, textAlign:"right"}}>Followers</th>
                  <th style={{width:140, textAlign:"right"}}>GMV · MTD</th>
                  <th style={{width:80, textAlign:"right"}}>CTR</th>
                  <th style={{width:110}}>KYC</th>
                  <th style={{width:36}}></th>
                </tr>
              </thead>
              <tbody>
                {rows.map(k => (
                  <tr key={k.id}>
                    <td>
                      <div className="org">
                        <div className="av" style={{borderRadius:"50%", fontFamily:"var(--font-display)"}}>{k.initial}</div>
                        <div>
                          <div className="org-name">{k.name}</div>
                          <div className="org-id" style={{fontFamily:"var(--font-sans)"}}>{k.loc}</div>
                        </div>
                      </div>
                    </td>
                    <td className="body-sm" style={{color:"var(--on-surface-variant)"}}>{k.agency}</td>
                    <td><span className={"pill " + TIER[k.tier].tone}>{TIER[k.tier].label}</span></td>
                    <td className="num">{fmtBig(k.followers)}</td>
                    <td className="num">¥{k.gmv.toLocaleString()}</td>
                    <td className="num">{k.ctr.toFixed(1)}%</td>
                    <td><span className={"pill " + KYC[k.kyc].tone}>{KYC[k.kyc].label}</span></td>
                    <td><span className="kebab"><i className="ti ti-dots-vertical"></i></span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="dash-right">
          <div className="panel">
            <div className="panel-head">
              <h3>Agencies</h3>
              <span className="label-caps">{AGENCIES.length}</span>
            </div>
            <div className="activity">
              {AGENCIES.map(a => (
                <div key={a.name} className="activity-row" style={{gridTemplateColumns:"32px 1fr auto"}}>
                  <div className="av" style={{width:32, height:32, background:"var(--surface-container)", color:"var(--on-surface)", fontSize:12}}>{a.name[0]}</div>
                  <div>
                    <div className="what" style={{fontWeight:500}}>{a.name}</div>
                    <div className="when" style={{fontFamily:"var(--font-sans)", color:"var(--on-surface-variant)", fontSize:11}}>{a.manager} · {a.roster} KOLs</div>
                  </div>
                  <div className="when" style={{fontWeight:500, color:"var(--on-surface)"}}>¥{(a.gmv/1000000).toFixed(1)}M</div>
                </div>
              ))}
            </div>
          </div>
          <div className="panel">
            <div className="panel-head">
              <h3>Outreach pipeline</h3>
              <span className="label-caps">14 prospects</span>
            </div>
            <div className="pipe-dist">
              <div className="pipe-row"><div className="pname">Contacted</div><div className="track"><div className="fill primary" style={{width:"100%"}}></div></div><div className="pval">14</div></div>
              <div className="pipe-row"><div className="pname">In conversation</div><div className="track"><div className="fill info" style={{width:"57%"}}></div></div><div className="pval">8</div></div>
              <div className="pipe-row"><div className="pname">KYC submitted</div><div className="track"><div className="fill warning" style={{width:"28%"}}></div></div><div className="pval">4</div></div>
              <div className="pipe-row"><div className="pname">Signed</div><div className="track"><div className="fill success" style={{width:"14%"}}></div></div><div className="pval">2</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.KolsList = KolsList;