// Per-court settings modal — override group defaults for a single court
const { useState: useState_cs } = React;

function CourtSettingsModal({ court, groupSettings, groupMode, systemConfig, onSave, onClose }) {
  const cs = court.settings || {};
  const gStep = gapStep(systemConfig);
  // useGroup* flags drive "use group default" vs "override"
  const [name, setName] = useState_cs(court.name);
  const [overrideMode, setOverrideMode] = useState_cs(!!cs.mode);
  const [mode, setMode] = useState_cs(cs.mode || groupMode);
  const [overrideBalance, setOverrideBalance] = useState_cs(!!cs.balanceMode);
  const [balanceMode, setBalanceMode] = useState_cs(cs.balanceMode || groupSettings?.balanceMode || "total");
  const [overrideGap, setOverrideGap] = useState_cs(cs.skillGap !== undefined);
  const [skillGap, setSkillGap] = useState_cs(cs.skillGap ?? groupSettings?.skillGap ?? 2);
  const [overrideRotation, setOverrideRotation] = useState_cs(!!cs.rotation);
  const [rotation, setRotation] = useState_cs(cs.rotation || groupSettings?.rotation || "fair");
  const [overrideGender, setOverrideGender] = useState_cs(!!cs.genderMode);
  const [genderMode, setGenderMode] = useState_cs(cs.genderMode || groupSettings?.genderMode || "any");
  const toast = useToast();

  const save = () => {
    const settings = {};
    if (overrideMode)     settings.mode = mode;
    if (overrideBalance)  settings.balanceMode = balanceMode;
    if (overrideGap)      settings.skillGap = Number(skillGap);
    if (overrideRotation) settings.rotation = rotation;
    if (overrideGender)   settings.genderMode = genderMode;
    onSave({
      name: name.trim() || court.name,
      settings: Object.keys(settings).length ? settings : undefined,
    });
    toast("บันทึกการตั้งค่าสนามแล้ว");
    onClose();
  };

  return (
    <Modal open size="large" title={`ตั้งค่าสนาม ${court.name}`} onClose={onClose}
      footer={<>
        <button className="btn" onClick={onClose}>ยกเลิก</button>
        <button className="btn primary" onClick={save}>บันทึก</button>
      </>}>
      <p className="small muted mb-2">
        ตั้งค่าเฉพาะสนามนี้ — จะ override ค่า default ของก๊วนได้ในสิ่งที่ติ๊กเปิด
      </p>

      <div className="field">
        <label>ชื่อ/หมายเลขสนาม</label>
        <input value={name} onChange={e => setName(e.target.value)} maxLength={8} />
      </div>

      <CourtSettingRow
        title="ประเภทการเล่น"
        sub={`ค่าจากก๊วน: ${groupMode === "double" ? "คู่ (2v2)" : "เดี่ยว (1v1)"}`}
        on={overrideMode} setOn={setOverrideMode}>
        <Segmented value={mode} onChange={setMode}
          options={[{value:"single", label:"เดี่ยว (1v1)"}, {value:"double", label:"คู่ (2v2)"}]} />
        <div className="hint">สนามนี้จะใช้ {mode === "double" ? "4 คน" : "2 คน"} ต่อแมตช์</div>
      </CourtSettingRow>

      <CourtSettingRow
        title={<InfoTip text="จับคู่แบบใด — Mode A: ระดับใกล้เคียงกัน. Mode B: รวมระดับทีมใกล้เคียงกัน">รูปแบบจับคู่</InfoTip>}
        sub={`ค่าจากก๊วน: Mode ${groupSettings?.balanceMode === "similar" ? "A · Similar Skill" : "B · Total Balance"}`}
        on={overrideBalance} setOn={setOverrideBalance}>
        <div className="mode-pick">
          <button className={`mode-card ${balanceMode==="similar" ? "active" : ""}`} onClick={() => setBalanceMode("similar")}>
            <div className="mc-title">A · Similar Skill</div>
            <div className="mc-sub">ผู้เล่นระดับใกล้เคียงจับคู่กัน</div>
          </button>
          <button className={`mode-card ${balanceMode==="total" ? "active" : ""}`} onClick={() => setBalanceMode("total")}>
            <div className="mc-title">B · Total Balance</div>
            <div className="mc-sub">รวมทีมระดับใกล้กัน</div>
          </button>
        </div>
      </CourtSettingRow>

      <CourtSettingRow
        title={<InfoTip text="ช่องว่างระดับสูงสุดที่ยอมให้มีได้ต่อสนามนี้ — ตั้งไว้เข้มจะได้มาตรฐานสูง">ช่องว่างระดับสูงสุด (Skill Gap)</InfoTip>}
        sub={`ค่าจากก๊วน: ± ${formatLevel(groupSettings?.skillGap ?? 2, systemConfig)}`}
        on={overrideGap} setOn={setOverrideGap}>
        <label className="small muted">ค่าปัจจุบัน: <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)", width:"100%"}} />
        <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">
          {skillGap <= 1   && "เข้มมาก — สนามนี้จะคัดเฉพาะคนระดับใกล้กัน"}
          {skillGap > 1 && skillGap <= 2.5 && "ปกติ — สมดุลระหว่างความหลากหลายและความใกล้เคียง"}
          {skillGap > 2.5 && "หลวม — รับคนหลายระดับเข้ามาเล่นสนุก"}
        </div>
      </CourtSettingRow>

      <CourtSettingRow
        title={<InfoTip text="ลำดับคิวรอบนสนาม — Fair: ใครลงน้อยได้ลงก่อน, Random: สุ่มล้วน, Competitive: คนชนะบ่อยได้ลงบ่อย">พฤติกรรมคิว (Queue Behavior)</InfoTip>}
        sub={`ค่าจากก๊วน: ${rotLabel(groupSettings?.rotation)}`}
        on={overrideRotation} setOn={setOverrideRotation}>
        <Segmented value={rotation} onChange={setRotation}
          options={[
            {value:"fair", label:"เน้นเท่าเทียม"},
            {value:"random", label:"สุ่มล้วน"},
            {value:"competitive", label:"แข่งขัน"},
          ]} />
      </CourtSettingRow>

      <CourtSettingRow
        title={<InfoTip text="กำหนดเพศเฉพาะสนามนี้ — ไม่สนเพศ/ชายล้วน/หญิงล้วน/คู่ผสม. ถ้าผู้เล่นไม่พอ ระบบจะจัดแมตช์ที่ใกล้เคียงที่สุด—ไม่บล็อกการจัดคู่">โหมดเพศ (Gender Mode)</InfoTip>}
        sub={`ค่าจากก๊วน: ${genderModeLabel(groupSettings?.genderMode || "any")}`}
        on={overrideGender} setOn={setOverrideGender}>
        <Segmented value={genderMode} onChange={setGenderMode}
          options={[
            {value:"any", label:"ทุกเพศ"},
            {value:"male", label:"ชายล้วน"},
            {value:"female", label:"หญิงล้วน"},
            {value:"mixed", label:"คู่ผสม"},
          ]} />
      </CourtSettingRow>
    </Modal>
  );
}

function CourtSettingRow({ title, sub, on, setOn, children }) {
  return (
    <div className="court-setting-row">
      <div className="court-setting-head">
        <div className="grow">
          <div style={{fontWeight: 600}}>{title}</div>
          <div className="small muted">{sub}</div>
        </div>
        <Toggle on={on} onChange={setOn} />
      </div>
      <div className={`court-setting-body ${on ? "" : "is-disabled"}`}>
        {children}
      </div>
    </div>
  );
}

function rotLabel(r) {
  if (r === "random") return "Random";
  if (r === "competitive") return "Competitive";
  return "Fair";
}

Object.assign(window, { CourtSettingsModal });