// Group Settings — edit balance mode, skill gap, rotation, etc.
const { useState: useState_gs } = React;

function GroupSettingsModal({ group, onClose, updateGroup, deleteGroup, onDeleted, onShare, systemConfig, canCustomizeViewer }) {
  const gStep = gapStep(systemConfig);
  const [name, setName]       = useState_gs(group.name);
  const [venue, setVenue]     = useState_gs(group.venue);
  const [color, setColor]     = useState_gs(group.color);
  const [mode, setMode]       = useState_gs(group.mode);
  const [balanceMode, setBalanceMode] = useState_gs(group.settings?.balanceMode || "total");
  const [skillGap, setSkillGap] = useState_gs(snapGap(group.settings?.skillGap ?? 2, systemConfig));
  const [rotation, setRotation] = useState_gs(group.settings?.rotation || "fair");
  const [genderMode, setGenderMode] = useState_gs(group.settings?.genderMode || "any");
  const [showLeaderboard, setShowLeaderboard] = useState_gs(group.settings?.viewerShowLeaderboard === true);
  const [showHistory, setShowHistory] = useState_gs(group.settings?.viewerShowHistory === true);
  const toast = useToast();
  const colors = ["#0a84ff","#30d158","#ff9f0a","#bf5af2","#ff375f","#64d2ff","#5e5ce6"];

  const save = () => {
    updateGroup(group.id, {
      name: name.trim() || group.name, venue, color, mode,
      settings: {
        balanceMode, skillGap, rotation, genderMode,
        // Only persist viewer-display prefs if this owner is permitted to set them;
        // otherwise force them off (privacy-first).
        viewerShowLeaderboard: canCustomizeViewer ? showLeaderboard : false,
        viewerShowHistory: canCustomizeViewer ? showHistory : false,
      },
    });
    toast("บันทึกการตั้งค่าแล้ว");
    onClose();
  };

  const remove = () => {
    if (!confirm(`ลบก๊วน "${group.name}" และข้อมูลทั้งหมด?`)) return;
    deleteGroup(group.id);
    toast("ลบก๊วนแล้ว");
    onDeleted && onDeleted();
  };

  return (
    <Modal open title="ตั้งค่าก๊วน" size="large" onClose={onClose}
      footer={<>
        <button className="btn danger" onClick={remove}>
          <Icon name="trash" size={13} /> ลบก๊วน
        </button>
        <div className="grow" />
        <button className="btn" onClick={onClose}>ยกเลิก</button>
        <button className="btn primary" onClick={save}>บันทึก</button>
      </>}>

      <div className="row gap-3" style={{flexWrap:"wrap"}}>
        <div className="field grow" style={{minWidth: 220}}>
          <label>ชื่อก๊วน</label>
          <input value={name} onChange={e => setName(e.target.value)} />
        </div>
        <div className="field grow" style={{minWidth: 220}}>
          <label>สถานที่</label>
          <input value={venue} onChange={e => setVenue(e.target.value)} />
        </div>
      </div>

      <div className="row gap-3" style={{flexWrap:"wrap"}}>
        <div className="field grow">
          <label>ประเภท</label>
          <Segmented value={mode} onChange={setMode}
            options={[{value:"single", label:"เดี่ยว (1v1)"}, {value:"double", label:"คู่ (2v2)"}]} />
        </div>
        <div className="field grow">
          <label>สีก๊วน</label>
          <div className="row gap-2">
            {colors.map(c => (
              <button key={c} onClick={() => setColor(c)} style={{
                width: 28, height: 28, 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>

      <hr style={{border:"none", borderTop:"0.5px solid var(--sep)", margin:"18px 0"}} />

      <div className="field">
        <label>
          <InfoTip text="รูปแบบการจับคู่ — Mode A จับผู้เล่นระดับใกล้กัน, Mode B รวมระดับ 2 ทีมให้เท่ากัน">
            รูปแบบการจับคู่ (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</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>

      <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>

      <div className="field">
        <label>
          <InfoTip text="วิธีจัดลำดับให้ผู้เล่นได้ลงสนาม — Fair: ใครลงน้อยที่สุดก่อน, Random: สุ่มเลือก, Competitive: ใครชนะบ่อยได้ลงบ่อยขึ้น">
            การหมุนเวียน (Queue Behavior)
          </InfoTip>
        </label>
        <Segmented value={rotation} onChange={setRotation}
          options={[
            {value:"fair", label:"เน้นความเท่าเทียม"},
            {value:"random", label:"สุ่มล้วน"},
            {value:"competitive", label:"แข่งขัน"},
          ]} />
        <div className="hint">
          {rotation === "fair" && "เลือกคนที่ลงน้อยที่สุดก่อน (default)"}
          {rotation === "random" && "สุ่มเรียงเลย ไม่สนจำนวนเกม"}
          {rotation === "competitive" && "ให้คนที่ชนะมากกว่าได้เล่นบ่อยขึ้น"}
        </div>
      </div>

      <hr style={{border:"none", borderTop:"0.5px solid var(--sep)", margin:"18px 0"}} />

      <div className="field">
        <label>
          <InfoTip text="เลือกข้อมูลที่จะให้ผู้ชม (Viewer) เห็นบนหน้าดูสด — ระดับฝีมือผู้เล่นจะถูกซ่อนเสมอเพื่อความเป็นส่วนตัว">
            การแสดงผลหน้าผู้ชม (Viewer Display)
          </InfoTip>
        </label>
        {canCustomizeViewer ? (
          <div className="card-pad" style={{background:"var(--bg-elev-2)", borderRadius:12}}>
            <div className="share-toggle-row">
              <div className="grow">
                <div style={{fontWeight: 600}}>แสดง Leaderboard</div>
                <div className="small muted">อันดับผู้เล่นจากสถิติชนะ/แพ้วันนี้</div>
              </div>
              <Toggle on={showLeaderboard} onChange={setShowLeaderboard} />
            </div>
            <div className="share-toggle-row" style={{borderTop:"0.5px solid var(--sep-soft)"}}>
              <div className="grow">
                <div style={{fontWeight: 600}}>แสดงประวัติแมตช์</div>
                <div className="small muted">รายการแมตช์ที่จบไปแล้ววันนี้</div>
              </div>
              <Toggle on={showHistory} onChange={setShowHistory} />
            </div>
            <div className="hint" style={{marginTop: 8}}>
              🔒 ระดับฝีมือ (Level) ของผู้เล่นจะไม่แสดงให้ผู้ชมเห็นเสมอ
            </div>
          </div>
        ) : (
          <div className="card-pad" style={{background:"var(--bg-elev-2)", borderRadius:12, color:"var(--text-3)"}}>
            <div className="row gap-2">
              <Icon name="shield" size={16} />
              <span className="small">
                การปรับแต่งหน้าผู้ชมถูกล็อก — ต้องให้ <b>Super User</b> เปิดสิทธิ์ให้บัญชีนี้ก่อน
                จึงจะเลือกแสดง Leaderboard / ประวัติแมตช์ได้
              </span>
            </div>
            <div className="hint" style={{marginTop: 8}}>
              ขณะนี้ผู้ชมจะเห็นเฉพาะสนามสด คิวรอ และผู้เล่นที่พักรอ (ไม่เห็นระดับฝีมือ)
            </div>
          </div>
        )}
      </div>

      <hr style={{border:"none", borderTop:"0.5px solid var(--sep)", margin:"18px 0"}} />

      <div className="card-pad" style={{background:"var(--bg-elev-2)", borderRadius:12}}>
        <div className="spread">
          <div>
            <div style={{fontWeight: 600}}>แชร์หน้าดูสด</div>
            <div className="small muted">สร้างลิงก์สาธารณะให้ผู้เล่นดูสด/QR Code</div>
          </div>
          <button className="btn" onClick={() => { onClose(); onShare && onShare(); }}>
            <Icon name="eye" size={14} /> เปิดหน้าแชร์
          </button>
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { GroupSettingsModal });