// Players management screen
const { useState: useState_pl, useMemo: useMemo_pl } = React;

function PlayersScreen({ store }) {
  const { visiblePlayers: players, addPlayer, updatePlayer, deletePlayer,
          isSuper, scope, setScope, userById, systemConfig,
          groups, endActiveGroup } = store;
  const groupById = useMemo_pl(() => Object.fromEntries(groups.map(g => [g.id, g])), [groups]);
  const [search, setSearch] = useState_pl("");
  const [filter, setFilter] = useState_pl("all");
  const [editing, setEditing] = useState_pl(null);  // player or "new"
  const toast = useToast();

  const filtered = useMemo_pl(() => {
    let list = players.filter(p => p.name.toLowerCase().includes(search.toLowerCase()));
    if (filter === "low") list = list.filter(p => p.level < 5);
    if (filter === "mid") list = list.filter(p => p.level >= 5 && p.level < 8);
    if (filter === "high") list = list.filter(p => p.level >= 8);
    return list;
  }, [players, search, filter]);

  // Duplicate name detection
  const dupNames = useMemo_pl(() => {
    const counts = {};
    players.forEach(p => { counts[p.name] = (counts[p.name] || 0) + 1; });
    return new Set(Object.keys(counts).filter(n => counts[n] > 1));
  }, [players]);

  return (
    <div className="page" data-screen-label="Players">
      <div className="sec-head">
        <div>
          <h2 className="sec-title">ผู้เล่น{isSuper && scope === "all" ? "ทั้งระบบ" : "ของฉัน"}</h2>
          <div className="sec-sub">
            {players.length} คน{isSuper && scope === "all" ? "ที่มีในระบบ" : "ในบัญชีของคุณ"} · เฉลี่ย Lv {avgLevel(players)}
          </div>
        </div>
        <div className="row gap-2">
          {isSuper && (
            <Segmented value={scope} onChange={setScope}
              options={[{value:"mine", label:"ของฉัน"}, {value:"all", label:"ทั้งระบบ"}]} />
          )}
          <button className="btn primary" onClick={() => setEditing("new")}>
            <Icon name="plus" size={15} stroke={2.2} /> เพิ่มผู้เล่น
          </button>
        </div>
      </div>

      <section>
        <div className="row gap-3 mb-2" style={{flexWrap:"wrap"}}>
          <div style={{position:"relative", flex:"1 1 240px", minWidth:200}}>
            <input placeholder="ค้นหาชื่อ…" value={search} onChange={e => setSearch(e.target.value)} style={{paddingLeft: 36}} />
            <div style={{position:"absolute", left:12, top:"50%", transform:"translateY(-50%)", color:"var(--text-3)", pointerEvents:"none"}}>
              <Icon name="search" size={16} />
            </div>
          </div>
          <Segmented
            value={filter}
            onChange={setFilter}
            options={[
              { value:"all", label:"ทุกระดับ" },
              { value:"low", label:"1–4 มือใหม่" },
              { value:"mid", label:"5–7 ทั่วไป" },
              { value:"high", label:"8–10 ขั้นสูง" },
            ]}
          />
        </div>

        <div className="card">
          {filtered.length ? filtered.map(p => {
            const owner = userById?.[p.ownerId];
            return (
            <div key={p.id} className="card-row" style={{alignItems:"flex-start"}}>
              <div className="avatar" style={{width:36, height:36, marginRight:12, marginTop:2, flexShrink:0, background:`linear-gradient(135deg, ${hashColor(p.id)}, ${hashColor(p.id+"y")})`}}>
                {initials(p.name)}
              </div>
              <div className="grow" style={{minWidth:0}}>
                {/* Row 1: name + inline micro-badges (no long text) */}
                <div style={{fontWeight:600, display:"flex", gap:5, alignItems:"center", minWidth:0, overflow:"hidden"}}>
                  <span style={{whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{p.name}</span>
                  {dupNames.has(p.name) && <span className="chip orange" style={{flexShrink:0}} title="มีผู้เล่นชื่อนี้ซ้ำกัน">ซ้ำ</span>}
                  {isSuper && scope === "all" && owner && (
                    <span className="owner-tag" style={{fontSize:11, flexShrink:0}}>
                      <Icon name="user" size={10} /> {owner.name.split(" ")[0]}
                    </span>
                  )}
                </div>
                {/* Row 2: active-group chip (own row → no overflow collision) */}
                {p.activeGroupId && (() => {
                  const gName = groupById[p.activeGroupId]?.name || "ก๊วนอื่น";
                  const since = p.activeSince ? ` · เข้าร่วม ${fmtTime(p.activeSince)}` : "";
                  const full = gName + since;
                  const MAX = 22;
                  const label = full.length > MAX ? full.slice(0, MAX) + "…" : full;
                  return (
                    <div style={{marginTop:2}}>
                      <span className="chip green" title={full} style={{fontSize:11, maxWidth:"100%", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", display:"inline-flex"}}>
                        <span className="bench-dot" style={{background:"var(--green)", flexShrink:0}} />
                        {label}
                      </span>
                    </div>
                  );
                })()}
                {/* Row 3: stats — single line, truncate if too narrow */}
                <div className="small muted" style={{marginTop:1, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>
                  {p.hand === "L" ? "ซ้าย" : p.hand === "R" ? "ขวา" : "—"}
                  {` · ${genderLabel(p.gender)}`}
                  {p.age ? ` · ${p.age}ปี` : ""}
                  {` · `}<b style={{color:"var(--text-2)"}}>{p.stats?.matches || 0}</b>
                  {` · `}<span style={{color:"var(--green)"}}>{p.stats?.wins || 0}W</span>
                  <span style={{color:"var(--text-4)"}}>/</span>
                  <span style={{color:"var(--red)"}}>{p.stats?.losses || 0}L</span>
                </div>
              </div>
              <div style={{display:"flex", alignItems:"center", gap:6, flexShrink:0, marginTop:2}}>
                <LevelPill level={p.level} cfg={systemConfig} />
                {p.activeGroupId && (
                  <button className="btn icon" onClick={() => {
                    if (confirm(`จบก๊วนของ "${p.name}"?\nระบบจะล้างสถานะและนำออกจากคิว`)) {
                      endActiveGroup(p.id); toast(`${p.name} ออกจากก๊วนแล้ว`);
                    }
                  }} title="จบก๊วน — ล้างสถานะการเล่น" style={{color:"var(--red)"}}>
                    <Icon name="x" size={14} />
                  </button>
                )}
                <button className="btn icon" onClick={() => setEditing(p)}>
                  <Icon name="edit" size={14} />
                </button>
                <button className="btn icon" onClick={() => {
                  if (confirm(`ลบผู้เล่น "${p.name}" ?`)) { deletePlayer(p.id); toast("ลบผู้เล่นแล้ว"); }
                }}>
                  <Icon name="trash" size={14} />
                </button>
              </div>
            </div>
          );}) : <div className="empty"><div className="em">🔎</div><div>ไม่พบผู้เล่นตามคำค้น</div></div>}
        </div>
      </section>

      {editing && (
        <PlayerEditor
          player={editing === "new" ? null : editing}
          allPlayers={players}
          systemConfig={systemConfig}
          onClose={() => setEditing(null)}
          onSave={(data) => {
            if (editing === "new") {
              addPlayer(data);
              toast(`เพิ่ม ${data.name} แล้ว`);
            } else {
              updatePlayer(editing.id, data);
              toast("บันทึกการแก้ไขแล้ว");
            }
            setEditing(null);
          }}
        />
      )}
    </div>
  );
}

function PlayerEditor({ player, allPlayers, systemConfig, onClose, onSave }) {
  const step = levelStep(systemConfig);
  const initLvl = player?.level != null ? snapLevel(player.level, systemConfig) : (systemConfig?.precisionMode === "integer" ? 5 : 5);
  const [name, setName] = useState_pl(player?.name || "");
  const [level, setLevel] = useState_pl(initLvl);
  const [age, setAge] = useState_pl(player?.age || "");
  const [hand, setHand] = useState_pl(player?.hand || "R");
  const [gender, setGender] = useState_pl(player?.gender || "U");

  const dup = name && allPlayers.some(p => p.name === name && p.id !== player?.id);

  const submit = () => {
    if (!name.trim()) return alert("กรุณากรอกชื่อ");
    onSave({
      name: name.trim(),
      level: snapLevel(level, systemConfig),
      age: age ? Number(age) : undefined,
      hand,
      gender,
    });
  };

  return (
    <Modal open title={player ? "แก้ไขผู้เล่น" : "เพิ่มผู้เล่นใหม่"} onClose={onClose}
      footer={<>
        <button className="btn" onClick={onClose}>ยกเลิก</button>
        <button className="btn primary" onClick={submit}>{player ? "บันทึก" : "เพิ่มผู้เล่น"}</button>
      </>}>
      <div className="field">
        <label>ชื่อผู้เล่น <span style={{color:"var(--red)"}}>*</span></label>
        <input value={name} onChange={e => setName(e.target.value)} placeholder="ชื่อ-สกุล หรือ ชื่อเล่น" />
        {dup && <div className="hint" style={{color:"var(--orange)"}}>
          ⚠ มีผู้เล่นชื่อ "{name}" อยู่ในระบบแล้ว — ระบบจะแยกด้วย ID ภายใน ดังนั้นเพิ่มต่อได้
        </div>}
      </div>

      <div className="field">
        <label>
          <InfoTip text={`ระดับฝีมือ 1 = มือใหม่, 10 = ขั้นเทพ — ${systemConfig?.precisionMode === "integer" ? "ใช้จำนวนเต็ม (step 1)" : "ใช้ทศนิยม (step 0.5)"}`}>
            ระดับฝีมือ
          </InfoTip>
          <span style={{color:"var(--red)"}}> *</span>:
          {" "}<b style={{color:"var(--tint)"}}>Lv {formatLevel(level, systemConfig)}</b>
        </label>
        <input type="range" min="1" max="10" step={step} value={level} onChange={e => setLevel(Number(e.target.value))}
          style={{padding:0, background:"transparent", border:"none", accentColor:"var(--tint)"}} />
        <div className="row spread small muted">
          <span>{formatLevel(1, systemConfig)} มือใหม่</span>
          <span>{formatLevel(5, systemConfig)} ทั่วไป</span>
          <span>{formatLevel(10, systemConfig)} ขั้นเทพ</span>
        </div>
      </div>

      <div className="row gap-3">
        <div className="field grow">
          <label>อายุ (ไม่บังคับ)</label>
          <input type="number" value={age} onChange={e => setAge(e.target.value)} placeholder="เช่น 28" />
        </div>
        <div className="field grow">
          <label>มือถนัด</label>
          <div style={{padding:"4px 0"}}>
            <Segmented value={hand} onChange={setHand}
              options={[{value:"R", label:"ขวา"},{value:"L", label:"ซ้าย"}]} />
          </div>
        </div>
      </div>

      <div className="field">
        <label>
          <InfoTip text="เพศของผู้เล่น (ไม่บังคับ) — ใช้เมื่อตั้งโหมดจับคู่แบบชายล้วน/หญิงล้วน/คู่ผสม — ถ้าไม่ระบุระบบจะจัดได้ยืดหยุ่นขึ้น">
            เพศ (ไม่บังคับ)
          </InfoTip>
        </label>
        <Segmented value={gender} onChange={setGender}
          options={[{value:"M", label:"ชาย"},{value:"F", label:"หญิง"},{value:"U", label:"ไม่ระบุ"}]} />
      </div>

      {player?.stats && (
        <div className="card-pad" style={{background:"var(--bg-elev-2)", borderRadius:12, marginTop: 6}}>
          <div className="small muted mb-1">สถิติสะสม</div>
          <div className="row gap-3">
            <div><b>{player.stats.matches}</b> แมตช์</div>
            <div style={{color:"var(--green)"}}><b>{player.stats.wins}</b> ชนะ</div>
            <div style={{color:"var(--red)"}}><b>{player.stats.losses}</b> แพ้</div>
            <div className="muted">อัตราชนะ <b>{player.stats.matches ? Math.round(player.stats.wins/player.stats.matches*100) : 0}%</b></div>
          </div>
        </div>
      )}
    </Modal>
  );
}

Object.assign(window, { PlayersScreen });