/* ============================================================
   StaffPage (AI 员工市场) + DetailPage (数字员工详情)
   ============================================================ */

function RarityBadge({ r }) {
  const { RARITY } = window.DATA;
  const info = RARITY[r];
  return (
    <span className="rarity" style={{ background: info.color, "--rg": info.glow }}>{info.label}</span>
  );
}

function IdCard({ s, hired, onHire, onOpen }) {
  const isHR = s.role === "人事";
  return (
    <div className="idcard" style={{ "--bg": s.bg }} onClick={() => onOpen(s.id)}>
      <span className="clip"></span>
      <RarityBadge r={s.rarity} />
      <div className="avatar" style={{ background: s.bg }}>
        <img src={s.img} alt={s.name} draggable="false"
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
      <div className="nm">{s.name}</div>
      <div className="rl">{s.title}</div>
      <div><span className="role-pill">{s.role}</span></div>
      <p className="desc">{s.persona}</p>
      <div className="stat-row">
        <div className="st"><div className="sv">{s.hire}</div><div className="sl">HIRE</div></div>
        <div className="st"><div className="sv">{s.dismiss}</div><div className="sl">DISMISS</div></div>
        <div className="st"><div className="sv">{s.score}</div><div className="sl">SCORE</div></div>
      </div>
      {isHR ? (
        <button className="hire-btn" onClick={(e) => { e.stopPropagation(); window.goPricing(); }}>立即雇用 →</button>
      ) : (
        <button className="hire-btn soon" onClick={(e) => { e.stopPropagation(); window.openQR(); }}>预约中</button>
      )}
    </div>
  );
}

function StaffPage({ go, hired, onHire, initialFilter }) {
  const { STAFF, STAFF_FILTERS } = window.DATA;
  const [filter, setFilter] = useState(initialFilter || "全部");
  const [q, setQ] = useState("");

  const list = STAFF.filter((s) =>
    (filter === "全部" || s.role === filter) &&
    (q.trim() === "" || (s.name + s.title + s.role + s.persona).includes(q.trim()))
  );

  return (
    <div className="staff-page">
      <div className="wrap staff-head">
        <div className="title-row">
          <div>
            <h1 className="display">AI 员工市场</h1>
            <p className="sub">一键雇用你需要的 AI 员工 —— 超级 HR、超级销售、财务、法务、新媒体运营、品牌宣传、运营、助理、客服。</p>
          </div>
          <button className="btn create-soon" disabled>
            <span style={{ fontSize: 18, marginRight: 2 }}>＋</span> 创建专属员工
            <span className="soon-tag">待开放</span>
          </button>
        </div>

        <div className="staff-toolbar">
          <div className="chips">
            {STAFF_FILTERS.map((f) => (
              <button key={f} className={"chip" + (filter === f ? " on" : "")} onClick={() => setFilter(f)}>{f}</button>
            ))}
          </div>
          <div className="search-box">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" /></svg>
            <input placeholder="搜索 AI 员工" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
        </div>
      </div>

      <div className="wrap">
        {list.length === 0 ? (
          <div className="empty-state">
            <div className="display">没有匹配的 AI 员工</div>
            <p>换个岗位或关键词试试。</p>
          </div>
        ) : (
          <div className="badge-grid">
            {list.map((s) => (
              <IdCard key={s.id} s={s} hired={!!hired[s.id]} onHire={onHire} onOpen={go} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function DetailPage({ id, back, hired, onHire }) {
  const { STAFF } = window.DATA;
  const s = STAFF.find((x) => x.id === id) || STAFF[0];
  const [animSkills, setAnimSkills] = useState(false);
  useEffect(() => {
    window.scrollTo(0, 0);
    const t = setTimeout(() => setAnimSkills(true), 180);
    return () => clearTimeout(t);
  }, [id]);
  const isHR = s.role === "人事";

  return (
    <div className="detail-page">
      <div className="detail-back">
        <div className="wrap">
          <button onClick={back}>← 返回员工市场</button>
        </div>
      </div>

      <div className="wrap detail-hero">
        <div className="detail-grid">
          {/* big 工牌 */}
          <div className={"big-idcard" + (s.light ? " light" : "")} style={{ "--bg": s.bg }}>
            <RarityBadge r={s.rarity} />
            <div className="ava">
              <img src={s.img} alt={s.name} draggable="false"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div className="bn">{s.name}</div>
            <div className="bt">{s.title}</div>
            <div className="bstats">
              <div className="b"><div className="bv">{s.hire}</div><div className="bl">HIRE</div></div>
              <div className="b"><div className="bv">{s.dismiss}</div><div className="bl">DISMISS</div></div>
              <div className="b"><div className="bv">{s.score}</div><div className="bl">SCORE</div></div>
            </div>
          </div>

          {/* main */}
          <div className="detail-main">
            <div className="d-eyebrow">{s.role} · {window.DATA.RARITY[s.rarity].label}</div>
            <h1 className="display">{s.name}</h1>
            <p className="persona">{s.persona}</p>
            <p className="bio">{s.bio}</p>

            <div className="d-block">
              <h3>核心技能 Skills</h3>
              {s.skills.map(([name, val]) => (
                <div className="skill" key={name}>
                  <div className="sk-top"><b>{name}</b><span>{val}</span></div>
                  <div className="bar"><i style={{ width: animSkills ? val + "%" : 0 }}></i></div>
                </div>
              ))}
            </div>

            <div className="d-block">
              <h3>擅长岗位 Duties</h3>
              <div className="duties">{s.duties.map((d) => <span key={d}>{d}</span>)}</div>
            </div>

            <div className="detail-cta">
              <div className="ct-txt">
                <div className="ct-h">{isHR ? `把 ${s.name} 招进你的工作室` : `${s.name} · 预约中`}</div>
                <div className="ct-s">{isHR ? "查看价格方案，1 分钟完成雇用，7×24 小时全天候在岗。" : "该岗位 AI 员工即将开放，扫码加入预约，开放第一时间通知你。"}</div>
              </div>
              {isHR ? (
                <button className="btn btn-primary" onClick={() => window.goPricing()}>立即雇用 <span className="arrow">→</span></button>
              ) : (
                <button className="btn btn-primary" onClick={() => window.openQR()}>预约 TA 上岗 <span className="arrow">→</span></button>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StaffPage, DetailPage, HomeMarket });

function HomeMarket({ go, hired, onHire, goStaff }) {
  const { STAFF, STAFF_FILTERS } = window.DATA;
  const [filter, setFilter] = useState("全部");
  const list = STAFF.filter((s) => filter === "全部" || s.role === filter);
  return (
    <section className="section market-section" id="market">
      <div className="wrap">
        <div className="market-head reveal">
          <div>
            <span className="eyebrow">AI staff market</span>
            <h2 className="section-title display">一键雇用你需要的 AI 员工</h2>
            <p className="section-sub">超级 HR、超级销售、财务、法务、新媒体运营、品牌宣传、运营、助理、客服 —— 总有一位为你而来。</p>
          </div>
          <button className="btn btn-ghost" onClick={() => goStaff("全部")}>进入 AI 员工市场 <span className="arrow" style={{ background: "var(--paper-3)", color: "var(--ink)" }}>→</span></button>
        </div>
        <div className="chips reveal" style={{ marginBottom: 30 }}>
          {STAFF_FILTERS.map((f) => (
            <button key={f} className={"chip" + (filter === f ? " on" : "")} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
        <div className="badge-grid">
          {list.map((s) => (
            <IdCard key={s.id} s={s} hired={!!hired[s.id]} onHire={onHire} onOpen={go} />
          ))}
        </div>
      </div>
    </section>
  );
}