// System Config — Super User only
const { useState: useState_sc, useRef: useRef_sc } = React;

function SystemConfigScreen({ store }) {
  const { systemConfig, setSystemConfig, can } = store;
  const toast = useToast();

  if (!can.configRules) {
    return (
      <div className="page">
        <div className="empty"><div className="em">🔒</div><div>เฉพาะ Super User เท่านั้น</div></div>
      </div>
    );
  }

  const setPrecision = (mode) => {
    setSystemConfig(prev => ({ ...prev, precisionMode: mode }));
    toast(`เปลี่ยนระบบระดับฝีมือเป็น ${mode === "integer" ? "จำนวนเต็ม" : "ทศนิยม"} แล้ว`);
  };

  const setMatchPriority = (mode) => {
    setSystemConfig(prev => ({ ...prev, matchPriority: mode }));
    toast(`เปลี่ยนแนวทางการจับคู่เป็น ${mode === "diversity" ? "เน้นความหลากหลาย" : "เน้นความสมดุล"} แล้ว`);
  };

  const warnMin = systemConfig.matchWarnMinutes ?? 60;
  const autoMin = systemConfig.matchAutoEndMinutes ?? 120;
  const clearHr = systemConfig.sessionClearHours ?? 4;

  const setWarnMinutes = (val) => {
    const n = Math.max(5, Math.min(480, parseInt(val) || 60));
    setSystemConfig(prev => ({ ...prev, matchWarnMinutes: n }));
    toast(`ตั้งเวลาแจ้งเตือนแมตช์นานเกินเป็น ${n} นาที แล้ว`);
  };
  const setAutoEndMinutes = (val) => {
    const n = Math.max(10, Math.min(720, parseInt(val) || 120));
    setSystemConfig(prev => ({ ...prev, matchAutoEndMinutes: n }));
    toast(`ตั้งเวลา Auto-End แมตช์เป็น ${n} นาที แล้ว`);
  };
  const setSessionClearHours = (val) => {
    const n = Math.max(1, Math.min(48, parseInt(val) || 4));
    setSystemConfig(prev => ({ ...prev, sessionClearHours: n }));
    toast(`ตั้งเวลาเคลียก๊วนอัตโนมัติเป็น ${n} ชั่วโมง แล้ว`);
  };

  return (
    <div className="page" data-screen-label="System Config">
      <div className="sec-head">
        <div>
          <h2 className="sec-title">การตั้งค่าระบบ</h2>
          <div className="sec-sub">ค่าทั่วทั้งระบบ — มีผลกับทุกผู้ใช้ทันที</div>
        </div>
        <span className="chip purple"><Icon name="shield" size={12} stroke={2} /> Super Only</span>
      </div>

      <section>
        <div className="card card-pad">
          <div className="row gap-2 mb-1">
            <div style={{fontWeight: 600, fontSize: 16}}>ระบบระดับฝีมือ (Skill Precision)</div>
            <InfoTip text="ระดับฝีมือผู้เล่นจะใช้ค่าอะไรในการระบุและคำนวณการจับคู่ — แบบจำนวนเต็มเข้าใจง่าย แบบทศนิยมแม่นยำกว่า" />
          </div>
          <div className="small muted mb-2">
            ระบบนี้กระทบ matchmaking, skill gap, recommendation, สถิติ และรายงานทั้งหมด
          </div>

          <div className="mode-pick">
            <button className={`mode-card ${systemConfig.precisionMode === "integer" ? "active" : ""}`}
                    onClick={() => setPrecision("integer")}>
              <div className="mc-title">Integer · จำนวนเต็ม</div>
              <div className="mc-sub">ระดับ 1–10 · step 1<br/>เช่น 1, 2, 3, 4, 5</div>
            </button>
            <button className={`mode-card ${systemConfig.precisionMode === "decimal" ? "active" : ""}`}
                    onClick={() => setPrecision("decimal")}>
              <div className="mc-title">Decimal · ทศนิยม</div>
              <div className="mc-sub">ระดับ 1.0–10.0 · step 0.5<br/>เช่น 1.0, 1.5, 2.0, 2.5</div>
            </button>
          </div>

          <div className="card-pad mt-2" style={{background: "var(--bg-elev-2)", borderRadius: 12}}>
            <div className="small muted mb-1">ตัวอย่างที่จะแสดง</div>
            <div className="row gap-2" style={{flexWrap:"wrap"}}>
              {[1, 2.5, 4, 4.5, 5, 7.5, 8, 10].map((lv, i) => {
                const shown = systemConfig.precisionMode === "integer" ? Math.round(lv) : lv;
                if (systemConfig.precisionMode === "integer" && i > 0 && Math.round(lv) === Math.round([1,2.5,4,4.5,5,7.5,8,10][i-1])) return null;
                return <LevelPill key={i} level={shown} cfg={systemConfig} />;
              })}
            </div>
          </div>

          <div className="hint mt-2" style={{display:"flex", gap: 8, alignItems:"flex-start"}}>
            <span style={{color:"var(--orange)", fontSize: 16}}>⚠</span>
            <div>
              <b>เปลี่ยนแบบไหนกระทบยังไง:</b><br/>
              • <b>Integer</b>: ระดับทศนิยมที่มีอยู่จะปัดเป็นจำนวนเต็มเมื่อแสดงผล — ไม่ลบข้อมูลเดิม<br/>
              • <b>Decimal</b>: ผู้ใช้สามารถใส่ค่า 0.5 ได้ทุกที่
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="card card-pad">
          <div className="row gap-2 mb-1">
            <div style={{fontWeight: 600, fontSize: 16}}>แนวทางการจับคู่ (Matchmaking Priority)</div>
            <InfoTip text="เลือกว่าระบบจะให้ความสำคัญกับความสมดุลของทีมมากที่สุด หรือยอมลดความสมดุลลงเล็กน้อยเพื่อให้ได้คู่ที่หลากหลายขึ้น" />
          </div>
          <div className="small muted mb-2">
            มีผลกับการสุ่มจับคู่และการสร้างคิวทุกก๊วน
          </div>

          <div className="mode-pick">
            <button className={`mode-card ${(systemConfig.matchPriority || "balance") === "balance" ? "active" : ""}`}
                    onClick={() => setMatchPriority("balance")}>
              <div className="mc-title">⚖️ เน้นสมดุล (Balance)</div>
              <div className="mc-sub">จัดทีมให้สูสีที่สุดเสมอ<br/>คู่อาจซ้ำแบบเดิมบ้างเมื่อคนน้อย</div>
            </button>
            <button className={`mode-card ${systemConfig.matchPriority === "diversity" ? "active" : ""}`}
                    onClick={() => setMatchPriority("diversity")}>
              <div className="mc-title">🔀 เน้นหลากหลาย (Diversity)</div>
              <div className="mc-sub">ยืดหยุ่น — ยอมลดสมดุลเล็กน้อย<br/>เพื่อให้ได้เล่นกับคู่ที่หลากหลายขึ้น</div>
            </button>
          </div>

          <div className="hint mt-2" style={{display:"flex", gap: 8, alignItems:"flex-start"}}>
            <span style={{color:"var(--tint)", fontSize: 16}}>ℹ️</span>
            <div>
              <b>เลือกแบบไหนดี:</b><br/>
              • <b>เน้นสมดุล</b>: เหมาะกับก๊วนแข่งขัน อยากให้ทุกแมตช์สูสี<br/>
              • <b>เน้นหลากหลาย</b>: เหมาะกับก๊วนสังสรรค์ อยากให้ทุกคนได้เล่นกับเพื่อนหลายคน — โดยเฉพาะเมื่อมีผู้เล่นน้อย
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="card card-pad">
          <div className="row gap-2 mb-1">
            <div style={{fontWeight: 600, fontSize: 16}}>เวลาแมตช์ (Match Timer)</div>
            <InfoTip text="ระบบตรวจสนามที่กำลังเล่นทุก 60 วินาที — แจ้งเตือนเมื่อนานเกินกำหนด และจบอัตโนมัติเมื่อเกินขีดสุด" />
          </div>
          <div className="small muted mb-3">
            มีผลกับทุกก๊วนในระบบ — ค่าต้องรัน session ใหม่ถึงจะมีผล
          </div>

          <div className="col gap-3">
            <div>
              <div style={{fontWeight:500, marginBottom:6}}>
                ⏰ เวลาแจ้งเตือน (Warning)
                <span className="chip orange" style={{fontSize:10, marginLeft:8, padding:"1px 8px"}}>ปัจจุบัน {warnMin} นาที</span>
              </div>
              <div className="small muted mb-2">แสดง badge สีส้มบนสนามเมื่อเล่นนานเกินนี้</div>
              <div className="row gap-2" style={{flexWrap:"wrap"}}>
                {[30, 45, 60, 90].map(n => (
                  <button key={n}
                    className={`btn sm ${warnMin === n ? "primary" : ""}`}
                    onClick={() => setWarnMinutes(n)}>
                    {n} นาที
                  </button>
                ))}
                <div className="row gap-1" style={{alignItems:"center"}}>
                  <input
                    type="number" min={5} max={480} step={5}
                    value={warnMin}
                    onChange={e => setSystemConfig(prev => ({ ...prev, matchWarnMinutes: Math.max(5, Math.min(480, parseInt(e.target.value) || 60)) }))}
                    onBlur={e => setWarnMinutes(e.target.value)}
                    style={{width:72, textAlign:"center"}}
                  />
                  <span className="small muted">นาที (กำหนดเอง)</span>
                </div>
              </div>
            </div>

            <div style={{borderTop:"0.5px solid var(--sep-soft)", paddingTop:16}}>
              <div style={{fontWeight:500, marginBottom:6}}>
                🔴 เวลา Auto-End
                <span className="chip" style={{fontSize:10, marginLeft:8, padding:"1px 8px", background:"var(--red-soft)", color:"var(--red)"}}>ปัจจุบัน {autoMin} นาที</span>
              </div>
              <div className="small muted mb-2">จบแมตช์อัตโนมัติ (ไม่บันทึกผู้ชนะ) เมื่อเล่นนานเกินนี้</div>
              <div className="row gap-2" style={{flexWrap:"wrap"}}>
                {[60, 90, 120, 180].map(n => (
                  <button key={n}
                    className={`btn sm ${autoMin === n ? "primary" : ""}`}
                    onClick={() => setAutoEndMinutes(n)}>
                    {n} นาที
                  </button>
                ))}
                <div className="row gap-1" style={{alignItems:"center"}}>
                  <input
                    type="number" min={10} max={720} step={5}
                    value={autoMin}
                    onChange={e => setSystemConfig(prev => ({ ...prev, matchAutoEndMinutes: Math.max(10, Math.min(720, parseInt(e.target.value) || 120)) }))}
                    onBlur={e => setAutoEndMinutes(e.target.value)}
                    style={{width:72, textAlign:"center"}}
                  />
                  <span className="small muted">นาที (กำหนดเอง)</span>
                </div>
              </div>
              <div className="hint mt-2" style={{display:"flex", gap:8, alignItems:"flex-start"}}>
                <span style={{color:"var(--orange)", fontSize:16}}>⚠</span>
                <div>ค่า Auto-End ต้องมากกว่าค่า Warning เสมอ — แนะนำให้ห่างกันอย่างน้อย 30 นาที</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="card card-pad">
          <div className="row gap-2 mb-1">
            <div style={{fontWeight: 600, fontSize: 16}}>เคลียก๊วนอัตโนมัติ (Session Auto-Clear)</div>
            <InfoTip text="เมื่อไม่มีการเคลื่อนไหวในก๊วน (จบแมตช์, ลงสนาม, วางแผนคิว, เช็คอินผู้เล่น) นานเกินกำหนด ระบบจะล้างแมตช์, คิว, ผู้เล่น และรอบเล่นทั้งหมดโดยอัตโนมัติ" />
          </div>
          <div className="small muted mb-3">ตรวจสอบทุก 5 นาทีขณะเปิดหน้าก๊วน — มีผลทุกก๊วนในระบบ</div>

          <div style={{fontWeight:500, marginBottom:6}}>
            ⏱ เวลาไม่มีการเคลื่อนไหวก่อนเคลีย
            <span className="chip" style={{fontSize:10, marginLeft:8, padding:"1px 8px", background:"var(--red-soft)", color:"var(--red)"}}>ปัจจุบัน {clearHr} ชั่วโมง</span>
          </div>
          <div className="row gap-2" style={{flexWrap:"wrap"}}>
            {[2, 4, 6, 12].map(n => (
              <button key={n}
                className={`btn sm ${clearHr === n ? "primary" : ""}`}
                onClick={() => setSessionClearHours(n)}>
                {n} ชม.
              </button>
            ))}
            <div className="row gap-1" style={{alignItems:"center"}}>
              <input
                type="number" min={1} max={48} step={1}
                value={clearHr}
                onChange={e => setSystemConfig(prev => ({ ...prev, sessionClearHours: Math.max(1, Math.min(48, parseInt(e.target.value) || 4)) }))}
                onBlur={e => setSessionClearHours(e.target.value)}
                style={{width:60, textAlign:"center"}}
              />
              <span className="small muted">ชม. (กำหนดเอง)</span>
            </div>
          </div>
          <div className="hint mt-3" style={{display:"flex", gap:8, alignItems:"flex-start"}}>
            <span style={{color:"var(--orange)", fontSize:16}}>⚠</span>
            <div>
              การเคลียจะ<b>ล้างรอบเล่น</b>ด้วย — แนะนำตั้งให้มากกว่า Match Auto-End อย่างน้อย 1 ชั่วโมง<br/>
              ก๊วนที่ไม่มี <code>lastActivityAt</code> (ก่อน migration) จะไม่ถูก auto-clear จนกว่าจะมีการเคลื่อนไหวครั้งแรก
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="card card-pad">
          <div className="row gap-2 mb-1">
            <div style={{fontWeight: 600, fontSize: 16}}>คำศัพท์บทบาท (Role Naming)</div>
          </div>
          <div className="small muted mb-2">ระบบใช้คำที่เข้าใจง่ายสำหรับผู้ใช้ทั่วไป</div>
          <div className="card">
            <div className="card-row">
              <span className="role-badge role-super" style={{marginRight: 10}}>{roleLabel("super")}</span>
              <div className="grow"><div style={{fontWeight: 500}}>Super User</div>
                <div className="small muted">เข้าถึงทุกอย่าง — จัดการบัญชี, ตั้งค่าระบบ</div>
              </div>
            </div>
            <div className="card-row">
              <span className="role-badge role-admin" style={{marginRight: 10}}>{roleLabel("admin")}</span>
              <div className="grow"><div style={{fontWeight: 500}}>Group Owner</div>
                <div className="small muted">จัดการก๊วน, ผู้เล่น, สนาม, จับคู่ — เฉพาะของตน</div>
              </div>
            </div>
            <div className="card-row" style={{opacity: 0.6}}>
              <span className="chip" style={{marginRight: 10}}>ไม่มี Login</span>
              <div className="grow"><div style={{fontWeight: 500}}>Viewer (ผู้ชม)</div>
                <div className="small muted">เข้าผ่าน share URL/QR Code เท่านั้น</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SystemConfigScreen });