// Create-group flow modal
const { useState: useState_cg, useMemo: useMemo_cg } = React;

function CreateGroupModal({ store, onClose, onCreated }) {
  const { visiblePlayers: players, addGroup, systemConfig } = store;
  const gStep = gapStep(systemConfig);
  const [step, setStep] = useState_cg(1);
  const [name, setName] = useState_cg("");
  const [venue, setVenue] = useState_cg("");
  const [mode, setMode] = useState_cg("double");
  const [balanceMode, setBalanceMode] = useState_cg("total");  // default Mode B
  const [skillGap, setSkillGap] = useState_cg(snapGap(2.0, systemConfig));
  const [genderMode, setGenderMode] = useState_cg("any");
  const [courtCount, setCourtCount] = useState_cg(2);
  const [courtNaming, setCourtNaming] = useState_cg("number");
  const [color, setColor] = useState_cg("#0a84ff");
  const [selected, setSelected] = useState_cg(new Set());
  const [search, setSearch] = useState_cg("");
  const toast = useToast();

  const filtered = useMemo_cg(
    () => players.filter(p => p.name.toLowerCase().includes(search.toLowerCase())),
    [players, search]
  );

  const colors = ["#0a84ff","#30d158","#ff9f0a","#bf5af2","#ff375f","#64d2ff","#5e5ce6"];

  const submit = () => {
    if (!name.trim()) { toast("กรุณาใส่ชื่อก๊วน"); setStep(1); return; }
    if (!selected.size) { toast("เลือกผู้เล่นอย่างน้อย 1 คน"); setStep(3); return; }
    const courts = Array.from({ length: courtCount }).map((_, i) => ({
      name: courtNaming === "number" ? String(i + 1) : String.fromCharCode(65 + i),
    }));
    const id = addGroup({ name: name.trim(), venue: venue.trim(), mode, courts, color,
      playerIds: Array.from(selected),
      settings: { balanceMode, skillGap, rotation: "fair", genderMode } });
    toast("สร้างก๊วนเรียบร้อย");
    onCreated && onCreated(id);
  };

  return (
    <Modal open title="สร้างก๊วนใหม่" size="large" onClose={onClose}
      footer={<>
        {step > 1 ? <button className="btn" onClick={() => setStep(step - 1)}>← ย้อนกลับ</button> : <span />}
        {step < 3
          ? <button className="btn primary" onClick={() => setStep(step + 1)}>ถัดไป →</button>
          : <button className="btn primary" onClick={submit}>สร้างก๊วน</button>}
      </>}>
      <div className="row gap-2 small mb-2">
        {[1,2,3].map(s => (
          <div key={s} className="row gap-2" style={{flex:1, opacity: step >= s ? 1 : 0.4}}>
            <div style={{
              width:24, height:24, borderRadius:999,
              background: step >= s ? "var(--tint)" : "var(--bg-inset)",
              color: step >= s ? "white" : "var(--text-3)",
              display:"grid", placeItems:"center", fontWeight:600, fontSize:12
            }}>{s}</div>
            <div style={{fontWeight: step===s ? 600 : 500}}>
              {s === 1 ? "ข้อมูลก๊วน" : s === 2 ? "ตั้งค่าสนาม" : "เลือกผู้เล่น"}
            </div>
          </div>
        ))}
      </div>

      {step === 1 && <>
        <div className="field">
          <label>ชื่อก๊วน <span style={{color:"var(--red)"}}>*</span></label>
          <input value={name} onChange={e => setName(e.target.value)} placeholder="เช่น ก๊วนเย็นวันพุธ" autoFocus />
        </div>
        <div className="field">
          <label>สถานที่เล่น</label>
          <input value={venue} onChange={e => setVenue(e.target.value)} placeholder="ชื่อสนามหรือสถานที่" />
        </div>
        <div className="field">
          <label>ประเภทการเล่น</label>
          <div className="mode-pick">
            <button className={`mode-card ${mode==="single" ? "active" : ""}`} onClick={() => setMode("single")}>
              <div className="mc-title">🏸 เดี่ยว (Single)</div>
              <div className="mc-sub">1 v 1 ต่อสนาม</div>
            </button>
            <button className={`mode-card ${mode==="double" ? "active" : ""}`} onClick={() => setMode("double")}>
              <div className="mc-title">🏸🏸 คู่ (Double)</div>
              <div className="mc-sub">2 v 2 ต่อสนาม — คละระดับให้ใกล้เคียง</div>
            </button>
          </div>
        </div>
        <div className="field">
          <label>สีประจำก๊วน</label>
          <div className="row gap-2">
            {colors.map(c => (
              <button key={c} onClick={() => setColor(c)} style={{
                width: 30, height: 30, borderRadius: 999, background: c,
                border: color === c ? "3px solid white" : "1px solid var(--sep)",
                boxShadow: color === c ? `0 0 0 2px ${c}` : "none",
                cursor:"pointer"
              }} />
            ))}
          </div>
        </div>

        <div className="field">
          <label>
            <InfoTip text="รูปแบบจับคู่ — Mode A จะจับผู้เล่นระดับใกล้เคียงกัน (เช่น Lv 4 กับ Lv 5) — เหมาะกับระดับกลางๆ. Mode B รวมระดับของ 2 ทีมให้เท่ากัน (เช่น 7+3 สู้ 5+5) — เหมาะกับผู้เล่นหลายระดับ.">
              รูปแบบการจับคู่ (Matching Mode)
            </InfoTip>
          </label>
          <div className="mode-pick">
            <button className={`mode-card ${balanceMode==="similar" ? "active" : ""}`} onClick={() => setBalanceMode("similar")}>
              <div className="mc-title">Mode A · Similar Skill</div>
              <div className="mc-sub">ผู้เล่นระดับใกล้เคียงจับคู่กัน — เช่น Lv 4 คู่ Lv 5</div>
            </button>
            <button className={`mode-card ${balanceMode==="total" ? "active" : ""}`} onClick={() => setBalanceMode("total")}>
              <div className="mc-title">Mode B · Total Team Balance <span className="chip blue" style={{fontSize:10, marginLeft:4}}>Default</span></div>
              <div className="mc-sub">รวมระดับทีมใกล้เคียงกัน — เช่น 7+3 vs 5+5</div>
            </button>
          </div>
        </div>

        <div className="field">
          <label>
            <InfoTip text="ช่องว่างระดับสูงสุดที่ยอมให้ห่างกันได้ต่อสนาม — ตั้งไว้เข้มจะได้แมตช์สมดุล, ตั้งหลวมจะรับคนหลายระดับได้มากขึ้น">
              ช่องว่างระดับสูงสุดต่อสนาม (Skill Gap)
            </InfoTip>:
            <b style={{color:"var(--tint)"}}> ± {formatLevel(skillGap, systemConfig)}</b>
          </label>
          <input type="range" min="0.5" max="5" step={gStep} value={skillGap} onChange={e => setSkillGap(Number(e.target.value))}
            style={{padding:0, background:"transparent", border:"none", accentColor:"var(--tint)"}} />
          <div className="row spread small muted"><span>±{formatLevel(0.5, systemConfig)} เข้มมาก</span><span>±{formatLevel(2.5, systemConfig)} ปกติ</span><span>±{formatLevel(5, systemConfig)} หลวม</span></div>
          <div className="hint">ระบบจะเตือนถ้ามีสนามไหนเกินช่องนี้</div>
        </div>

        <div className="field">
          <label>
            <InfoTip text="กำหนดเพศของผู้เล่นในการจับคู่ — ไม่สนเพศ: คละได้หมด, ชายล้วน/หญิงล้วน: เฉพาะเพศนั้น, คู่ผสม: แต่ละทีมมีชาย+หญิง. ถ้าผู้เล่นไม่พอ ระบบจะจัดแมตช์ที่ใกล้เคียงที่สุดให้ — ไม่บล็อกการจัดคู่">
              โหมดการจับคู่ตามเพศ (Gender Mode)
            </InfoTip>
          </label>
          <Segmented value={genderMode} onChange={setGenderMode}
            options={[
              {value:"any", label:"ทุกเพศ"},
              {value:"male", label:"ชายล้วน"},
              {value:"female", label:"หญิงล้วน"},
              {value:"mixed", label:"คู่ผสม"},
            ]} />
          <div className="hint">ถ้าผู้เล่นไม่พอตามเงื่อนไข ระบบจะหาแมตช์ที่ใกล้เคียงที่สุดให้แทน (ไม่บล็อกการเล่น)</div>
        </div>
      </>}

      {step === 2 && <>
        <div className="field">
          <label>จำนวนสนาม: <b style={{color:"var(--tint)"}}>{courtCount}</b></label>
          <input type="range" min="1" max="8" value={courtCount} onChange={e => setCourtCount(Number(e.target.value))}
            style={{padding:0, background:"transparent", border:"none", accentColor:"var(--tint)"}} />
          <div className="row spread small muted"><span>1</span><span>4</span><span>8</span></div>
        </div>
        <div className="field">
          <label>ตั้งชื่อสนาม</label>
          <Segmented value={courtNaming} onChange={setCourtNaming}
            options={[{value:"number", label:"เลข 1, 2, 3…"}, {value:"letter", label:"ตัวอักษร A, B, C…"}]} />
        </div>
        <div className="card-pad" style={{background:"var(--bg-elev-2)", borderRadius:12}}>
          <div className="small muted mb-1">พรีวิว</div>
          <div className="row gap-2" style={{flexWrap:"wrap"}}>
            {Array.from({length: courtCount}).map((_, i) => (
              <div key={i} className="court-num" style={{width: 40, height: 40, fontSize: 16}}>
                {courtNaming === "number" ? i + 1 : String.fromCharCode(65 + i)}
              </div>
            ))}
          </div>
        </div>
        <div className="hint mt-2">
          ต้องการผู้เล่นอย่างน้อย <b>{courtCount * (mode === "double" ? 4 : 2)} คน</b> ในก๊วนเพื่อจัดให้ครบทุกสนามพร้อมกัน
        </div>
      </>}

      {step === 3 && <>
        <div className="row spread mb-2">
          <div>เลือก <b>{selected.size}</b> จาก {players.length} คน</div>
          <button className="btn ghost sm" onClick={() => setSelected(new Set(players.map(p => p.id)))}>เลือกทั้งหมด</button>
        </div>
        <div style={{position:"relative", marginBottom:10}}>
          <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>
        <div className="card" style={{maxHeight: 320, overflow:"auto"}}>
          {filtered.map(p => (
            <PlayerRow key={p.id} player={p} selected={selected.has(p.id)}
              onToggle={() => setSelected(prev => {
                const next = new Set(prev);
                next.has(p.id) ? next.delete(p.id) : next.add(p.id);
                return next;
              })} />
          ))}
        </div>
      </>}
    </Modal>
  );
}

Object.assign(window, { CreateGroupModal });