// Skill Recommendations screen
const { useMemo: useMemo_rc, useState: useState_rc } = React;

function RecommendationsScreen({ store, embedded = false }) {
  const { visiblePlayers: players, visibleGroups: groups, recoRules, setRecoRules, can, updatePlayer,
          isSuper, scope, setScope } = store;
  const [showRules, setShowRules] = useState_rc(false);
  const [filter, setFilter] = useState_rc("all");
  const toast = useToast();

  const recos = useMemo_rc(
    () => buildRecommendations(players, groups, recoRules),
    [players, groups, recoRules]
  );

  const counts = {
    up: recos.filter(r => r.action === "up").length,
    down: recos.filter(r => r.action === "down").length,
    stable: recos.filter(r => r.action === "stable").length,
    hold: recos.filter(r => r.action === "hold").length,
  };

  const filteredRecos = filter === "all" ? recos : recos.filter(r => r.action === filter);
  // Sort: up > down > stable > hold
  const sortOrder = { up: 0, down: 1, stable: 2, hold: 3 };
  filteredRecos.sort((a, b) => {
    if (sortOrder[a.action] !== sortOrder[b.action]) return sortOrder[a.action] - sortOrder[b.action];
    return (b.winRate || 0) - (a.winRate || 0);
  });

  const applyReco = (r) => {
    const delta = r.action === "up" ? 1 : r.action === "down" ? -1 : 0;
    if (!delta) return;
    const newLvl = Math.max(1, Math.min(10, r.player.level + delta));
    updatePlayer(r.player.id, { level: newLvl });
    toast(`${r.player.name}: Lv ${r.player.level} → Lv ${newLvl}`);
  };

  return (
    <div className={embedded ? "" : "page"} data-screen-label="Recommendations">
      <div className="sec-head">
        <div>
          <h2 className="sec-title">คำแนะนำระดับฝีมือ</h2>
          <div className="sec-sub">
            ระบบวิเคราะห์สถิติเพื่อแนะนำว่าควรปรับระดับผู้เล่นคนใดบ้าง
            {isSuper && scope === "all" && " · กำลังดูข้อมูลทั้งระบบ"}
          </div>
        </div>
        <div className="row gap-2">
          {isSuper && (
            <Segmented value={scope} onChange={setScope}
              options={[{value:"mine", label:"ของฉัน"}, {value:"all", label:"ทั้งระบบ"}]} />
          )}
          {can.configRules && (
            <button className="btn" onClick={() => setShowRules(true)}>
              <Icon name="settings" size={14} /> ตั้งค่ากฎ
            </button>
          )}
        </div>
      </div>

      <section>
        <div className="tile-grid">
          <RecoTile label="ควรเพิ่มระดับ" num={counts.up} tone="up" />
          <RecoTile label="ควรลดระดับ" num={counts.down} tone="down" />
          <RecoTile label="เหมาะสมแล้ว" num={counts.stable} tone="stable" />
          <RecoTile label="ข้อมูลไม่พอ" num={counts.hold} tone="hold" />
        </div>
      </section>

      <section>
        <div className="row spread mb-2">
          <Segmented value={filter} onChange={setFilter}
            options={[
              {value:"all", label:"ทั้งหมด"},
              {value:"up", label:`เพิ่ม (${counts.up})`},
              {value:"down", label:`ลด (${counts.down})`},
              {value:"stable", label:`คงเดิม (${counts.stable})`},
              {value:"hold", label:`ยังไม่พอ (${counts.hold})`},
            ]} />
          <div className="small muted">
            กฎปัจจุบัน: ≥ <b>{recoRules.minMatches}</b> แมตช์ ·
            เพิ่มเมื่อ win-rate ≥ <b>{Math.round(recoRules.upWinRate*100)}%</b> ·
            ลดเมื่อ ≤ <b>{Math.round(recoRules.downWinRate*100)}%</b>
          </div>
        </div>

        {filteredRecos.length ? (
          <div className="card">
            {filteredRecos.map(r => (
              <RecoRow key={r.player.id} r={r} canApply={can.editPlayers} onApply={() => applyReco(r)} />
            ))}
          </div>
        ) : <div className="card empty"><div>ไม่มีรายการในกลุ่มนี้</div></div>}
      </section>

      {showRules && (
        <RecoRulesModal rules={recoRules} setRules={setRecoRules} onClose={() => setShowRules(false)} />
      )}
    </div>
  );
}

function RecoTile({ label, num, tone }) {
  const color = tone === "up" ? "var(--green)" : tone === "down" ? "var(--red)" : tone === "stable" ? "var(--tint)" : "var(--text-3)";
  return (
    <div className="tile">
      <div className="tile-label">{label}</div>
      <div className="tile-num" style={{color}}>{num}</div>
      <div className="tile-sub">คน</div>
    </div>
  );
}

function RecoRow({ r, canApply, onApply }) {
  const p = r.player;
  const tone = r.action === "up" ? "up" : r.action === "down" ? "down" : r.action === "stable" ? "stable" : "hold";
  const newLvl = r.action === "up" ? p.level + 1 : r.action === "down" ? p.level - 1 : p.level;
  return (
    <div className={`card-row reco-row reco-${tone}`}>
      <div className="avatar" style={{width:36, height:36, marginRight: 12, fontSize: 12}}>
        {initials(p.name)}
      </div>
      <div className="grow">
        <div style={{fontWeight: 600}}>{p.name}</div>
        <div className="small muted">{r.reason}</div>
      </div>
      <div className="row gap-2" style={{minWidth: 140, justifyContent:"flex-end"}}>
        <LevelPill level={p.level} />
        {(r.action === "up" || r.action === "down") && (
          <>
            <Icon name="chevR" size={14} />
            <LevelPill level={newLvl} />
          </>
        )}
      </div>
      {canApply && (r.action === "up" || r.action === "down") ? (
        <button className="btn sm primary" style={{marginLeft: 10}} onClick={onApply}>
          ปรับเลย
        </button>
      ) : (
        <span style={{marginLeft: 10, width: 70}} />
      )}
    </div>
  );
}

function RecoRulesModal({ rules, setRules, onClose }) {
  const [draft, setDraft] = useState_rc(rules);
  const submit = () => { setRules(draft); onClose(); };
  return (
    <Modal open title="ตั้งค่าเอนจินแนะนำระดับ" onClose={onClose}
      footer={<>
        <button className="btn" onClick={onClose}>ยกเลิก</button>
        <button className="btn primary" onClick={submit}>บันทึก</button>
      </>}>
      <p className="small muted mb-2">
        เฉพาะ Super User เท่านั้นที่ปรับค่าเหล่านี้ได้ · ผลกระทบกับการแสดงคำแนะนำทั่วทั้งระบบ
      </p>
      <div className="field">
        <label>จำนวนแมตช์ขั้นต่ำเพื่อพิจารณา: <b style={{color:"var(--tint)"}}>{draft.minMatches}</b></label>
        <input type="range" min="3" max="30" value={draft.minMatches}
          onChange={e => setDraft({...draft, minMatches: Number(e.target.value)})}
          style={{padding:0, background:"transparent", border:"none", accentColor:"var(--tint)"}} />
        <div className="hint">ผู้เล่นที่ลงสนามน้อยกว่านี้จะถูกจัดเป็น "ข้อมูลไม่พอ"</div>
      </div>
      <div className="field">
        <label>เพิ่มระดับเมื่อ Win-rate ≥ <b style={{color:"var(--green)"}}>{Math.round(draft.upWinRate*100)}%</b></label>
        <input type="range" min="50" max="95" step="5" value={Math.round(draft.upWinRate*100)}
          onChange={e => setDraft({...draft, upWinRate: Number(e.target.value)/100})}
          style={{padding:0, background:"transparent", border:"none", accentColor:"var(--green)"}} />
      </div>
      <div className="field">
        <label>ลดระดับเมื่อ Win-rate ≤ <b style={{color:"var(--red)"}}>{Math.round(draft.downWinRate*100)}%</b></label>
        <input type="range" min="5" max="50" step="5" value={Math.round(draft.downWinRate*100)}
          onChange={e => setDraft({...draft, downWinRate: Number(e.target.value)/100})}
          style={{padding:0, background:"transparent", border:"none", accentColor:"var(--red)"}} />
      </div>
    </Modal>
  );
}

Object.assign(window, { RecommendationsScreen });