/* ==========================================================================
 * ADMIN NEXT — page-settings.jsx  (ตั้งค่าเว็บไซต์)
 * ========================================================================== */
function SettingsPage({ toast }) {
  const [loading,setLoading]=useState(true),[err,setErr]=useState(null),[saving,setSaving]=useState(false);
  const [tab,setTab]=useState("main");
  const [f,setF]=useState({});
  const [uploading,setUploading]=useState("");
  const tabs=[["main","ตั้งค่าเว็บไซต์"],["theme","แบรนด์ / สี"],["media","รูปภาพ"],["seo","SEO"],["money","ระบบเงิน"],["turnover","เคลียร์เทิร์น"]];
  const set=(k,v)=>setF(o=>({...o,[k]:v}));
  const load=useCallback(async()=>{ setLoading(true); setErr(null);
    try{ const d=await api("/settings"); setF(d||{}); }
    catch(e){ if(e.status===401||e.status===403){window.__nxAuthFail&&window.__nxAuthFail();} setErr(e.status===403?"ไม่มีสิทธิ์ดูการตั้งค่า":(e.message||"โหลดไม่สำเร็จ")); }
    finally{ setLoading(false); } },[]);
  useEffect(()=>{ load(); },[load]);
  const save=async()=>{ setSaving(true);
    try{ await api("/settings",{method:"POST",body:f}); toast("บันทึกแล้ว"); }
    catch(e){ toast(e.message||"บันทึกไม่สำเร็จ"); }finally{ setSaving(false); } };

  const inp="h-9 w-full rounded-lg border border-line bg-sunken px-3 text-sm text-fg focus:border-accent focus:bg-surface focus:outline-none";
  const lbl="block text-xs font-semibold text-muted mb-1";
  const card="rounded-xl border border-line bg-surface p-4 shadow-sm space-y-4";
  const hint="text-[11px] text-muted mt-1";
  /* ค่าในระบบเก็บเป็น "1"/"0" — ช่องเหล่านี้หลังบ้านถือว่าปิดจนกว่าจะเป็น "1" ที่เหลือเปิดจนกว่าจะเป็น "0" */
  const OFF_BY_DEFAULT=["abd_enabled","tmnone_withdraw_enabled"];
  const isOn=(field)=>{ const v=String(f[field]??""); return OFF_BY_DEFAULT.includes(field)?v==="1":v!=="0"; };
  const Toggle=({label,field,sub})=>{ const on=isOn(field); return (<label className="flex items-center justify-between gap-3 rounded-lg border border-line bg-sunken/40 px-3 py-2.5 cursor-pointer hover:bg-sunken/60"><div><span className="text-sm font-medium text-fg">{label}</span>{sub&&<div className="text-[11px] text-muted">{sub}</div>}</div><button type="button" role="switch" aria-checked={on} onClick={()=>set(field,on?"0":"1")} className={"relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors "+(on?"bg-accent":"bg-line")}><span className={"inline-block h-5 w-5 rounded-full bg-white shadow transition-transform "+(on?"translate-x-5":"translate-x-0.5")}/></button></label>); };
  const ColorField=({label,field})=>(<div><span className={lbl}>{label}</span><div className="flex items-center gap-2"><input type="color" value={f[field]||"#000000"} onChange={e=>set(field,e.target.value)} className="h-9 w-10 cursor-pointer rounded border border-line bg-sunken p-0.5"/><input type="text" value={f[field]||""} onChange={e=>set(field,e.target.value)} placeholder="#000000" className={inp+" !w-32 font-mono"}/></div></div>);
  const UrlField=({label,field,placeholder,hintText})=>(<div><span className={lbl}>{label}</span><input type="text" value={f[field]||""} onChange={e=>set(field,e.target.value)} placeholder={placeholder||"https://..."} className={inp}/>{hintText&&<div className={hint}>{hintText}</div>}</div>);
  const NumField=({label,field,placeholder,min,max,step,hintText})=>(<div><span className={lbl}>{label}</span><input type="number" min={min??0} max={max} step={step||1} value={f[field]??""} onChange={e=>set(field,e.target.value)} placeholder={placeholder||""} className={inp+" tnum"}/>{hintText&&<div className={hint}>{hintText}</div>}</div>);
  // อัปโหลดรูป → คืน URL (ไม่บันทึกทันที รอกด "บันทึกทั้งหมด")
  const uploadImg=(file,kind)=>new Promise((resolve,reject)=>{
    if(!file){reject();return;}
    if(file.size>10*1024*1024){toast("ไฟล์ใหญ่เกิน 10 MB");reject();return;}
    const reader=new FileReader();
    reader.onload=async()=>{ try{ const r=await api("/branding/upload",{method:"POST",body:{kind,fileName:file.name,mimeType:file.type,dataUrl:reader.result,noSave:true}}); resolve(r.url); }catch(e){ toast(e.message||"อัปโหลดไม่สำเร็จ"); reject(e);} };
    reader.onerror=()=>{toast("อ่านไฟล์ไม่สำเร็จ");reject();};
    reader.readAsDataURL(file);
  });
  const ImgField=({label,field,kind,hintText,square})=>{ const val=f[field]||""; const busy=uploading===field;
    return (<div><span className={lbl}>{label}</span>
      <div className="flex items-center gap-3">
        <div className={"grid shrink-0 place-items-center overflow-hidden rounded-lg border border-line bg-sunken "+(square?"h-16 w-16":"h-12 w-20")}>
          {val?<img src={val} alt="" className="h-full w-full object-contain" onError={e=>{e.target.style.display="none";}}/>:<Ic d={I.image||I.plus} size={18} cls="text-faint"/>}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <label className={"inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs font-medium hover:bg-sunken "+(busy?"opacity-60 pointer-events-none":"cursor-pointer text-fg-2")}>
            <Ic d={I.upload||I.plus} size={14}/> {busy?"กำลังอัปโหลด…":(val?"เปลี่ยนรูป":"อัปโหลดรูป")}
            <input type="file" accept="image/*" className="hidden" onChange={async e=>{const file=e.target.files&&e.target.files[0]; e.target.value=""; if(!file)return; setUploading(field); try{const url=await uploadImg(file,kind); set(field,url);}catch{} setUploading("");}}/>
          </label>
          {val&&<button type="button" onClick={()=>set(field,"")} className="text-xs text-danger hover:underline">ลบรูป</button>}
        </div>
      </div>
      {hintText&&<div className={hint}>{hintText}</div>}
    </div>);
  };

  // Hero banners helpers
  const heroBanners=useMemo(()=>{try{return JSON.parse(f.theme_hero_banners_json||"[]");}catch{return [];}},[f.theme_hero_banners_json]);
  const setHeroBanners=(arr)=>set("theme_hero_banners_json",JSON.stringify(arr));
  const t2Banners=useMemo(()=>{try{return JSON.parse(f.theme_t2_banners_json||"[]");}catch{return [];}},[f.theme_t2_banners_json]);
  const setT2Banners=(arr)=>set("theme_t2_banners_json",JSON.stringify(arr));

  if(err) return <HistErr msg={err} onRetry={load}/>;
  if(loading) return (<div className="space-y-3"><div className="skel h-12 w-full"/><div className="skel h-64 w-full"/></div>);
  return (<div className="space-y-4">
    {/* Tab bar */}
    <div className="flex flex-wrap gap-1.5 rounded-xl border border-line bg-sunken/60 p-1.5">
      {tabs.map(([k,l])=>(<button key={k} onClick={()=>setTab(k)} className={"rounded-lg px-3 py-1.5 text-sm font-medium transition-colors "+(tab===k?"bg-accent text-accent-fg shadow-sm":"text-muted hover:text-fg hover:bg-surface")}>{l}</button>))}
    </div>

    {/* ═══════ Tab: main ═══════ */}
    {tab==="main"&&<div className={card}>
      <h3 className="text-sm font-bold text-fg">ตั้งค่าเว็บไซต์</h3>
      <div className="grid gap-4 sm:grid-cols-2">
        <div><span className={lbl}>ชื่อเว็บไซต์</span><input type="text" value={f.site_name||""} onChange={e=>set("site_name",e.target.value)} className={inp}/></div>
        {can("settings_username_prefix")&&<div><span className={lbl}>Prefix Username</span><input type="text" value={f.username_prefix||""} onChange={e=>set("username_prefix",e.target.value)} placeholder="ome" className={inp}/></div>}
        <div className="sm:col-span-2"><span className={lbl}>ข้อความประกาศ</span><textarea value={f.theme_notice||""} onChange={e=>set("theme_notice",e.target.value)} rows={3} className={inp+" h-auto py-2"}/></div>
        <div className="sm:col-span-2">{Toggle({label:"ช่องสมัครผ่านทรูวอเล็ท (หน้าสมัคร)",field:"register_truewallet_enabled",sub:"เปิดเฉพาะเว็บที่เปิดใช้งานทรูแล้ว · ปิดอยู่ = ซ่อนตัวเลือกวอเลท ลูกค้าสมัครได้เฉพาะบัญชีธนาคาร"})}</div>
      </div>
    </div>}

    {/* ═══════ Tab: theme ═══════ */}
    {tab==="theme"&&<div className={card}>
      <h3 className="text-sm font-bold text-fg">แบรนด์ / สี</h3>
      <div className="grid gap-4 sm:grid-cols-2">
        <div><span className={lbl}>เทมเพลต</span>
          <select value={f.theme_template||"1"} onChange={e=>set("theme_template",e.target.value)} className={inp+" w-48"}>
            <option value="1">แบบ 1 — ดีไซน์เดิม</option><option value="2">แบบ 2 — สไตล์ UFA</option>
          </select>
          {f.theme_template==="2"&&<div className={hint}>แบบ 2 จะใช้สีหลัก/สีรอง/สีพื้นหลังด้านล่างอัตโนมัติ</div>}
        </div>
        <div><span className={lbl}>ชื่อเว็บ / โลโก้ตัวอักษร</span><input type="text" value={f.theme_logo_text||""} onChange={e=>set("theme_logo_text",e.target.value)} placeholder="GameHub" className={inp}/></div>
      </div>
      <h4 className="text-xs font-bold text-muted pt-2">สีหลัก</h4>
      <div className="grid gap-4 sm:grid-cols-3">
        {ColorField({label:"สีหลัก",field:"theme_primary_color"})}
        {ColorField({label:"สีรอง",field:"theme_accent_color"})}
        {ColorField({label:"สีพื้นหลัง",field:"theme_background_color"})}
      </div>
      <h4 className="text-xs font-bold text-muted pt-2">สีปุ่มและอื่นๆ</h4>
      <div className="grid gap-4 sm:grid-cols-3">
        {ColorField({label:"ปุ่มเมนู Navbar",field:"theme_navbar_btn_color"})}
        {ColorField({label:"ปุ่มออกจากระบบ",field:"theme_logout_btn_color"})}
        {ColorField({label:"สี Leaderboard Rank",field:"theme_lb_rank_color"})}
      </div>
      {ImgField({label:"รูปพื้นหลัง",field:"theme_background_url",kind:"background",hintText:"ขนาดแนะนำ 1920×1080px หรือ 2560×1440px"})}
    </div>}

    {/* ═══════ Tab: media ═══════ */}
    {tab==="media"&&<div className="space-y-4">
      {/* Logos */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">โลโก้เว็บไซต์</h3>
        <div className="grid gap-4 sm:grid-cols-2">
          {ImgField({label:"โลโก้ Desktop (แนวนอน)",field:"theme_logo_url",kind:"logo",hintText:"แนะนำ 300×80px, PNG/WebP พื้นโปร่งใส"})}
          {ImgField({label:"โลโก้ Mobile (สี่เหลี่ยม)",field:"theme_logo_mobile_url",kind:"logo_mobile",square:true,hintText:"แนะนำ 96×96px ถึง 180×180px"})}
          {NumField({label:"กว้าง Desktop (px)",field:"theme_logo_width",placeholder:"อัตโนมัติ"})}
          {NumField({label:"สูง Desktop (px)",field:"theme_logo_height",placeholder:"เช่น 42"})}
          {NumField({label:"กว้าง Mobile (px)",field:"theme_logo_mobile_width",placeholder:"ใช้ค่าคอม"})}
          {NumField({label:"สูง Mobile (px)",field:"theme_logo_mobile_height",placeholder:"เช่น 36"})}
        </div>
      </div>

      {/* Hero banners */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">รูป Hero หน้าแรก (สไลด์)</h3>
        <div className="rounded-lg border border-accent/20 bg-accent/5 p-3 text-xs text-muted leading-relaxed">
          <b className="text-accent">ขนาดแนะนำ</b> 1600×640px (2.5:1) — ทุกรูปในชุดต้องใช้สัดส่วนเดียวกัน · ไฟล์ไม่เกิน 10 MB
        </div>
        {NumField({label:"จำนวนสไลด์ที่แสดง",field:"theme_hero_slide_count",placeholder:"เว้นว่าง = แสดงทุกรูป"})}
        {heroBanners.map((url,i)=>(<div key={i} className="flex items-center gap-3 rounded-lg border border-line bg-sunken/40 p-2">
          <div className="grid h-12 w-24 shrink-0 place-items-center overflow-hidden rounded border border-line bg-sunken">
            {url?<img src={url} alt="" className="h-full w-full object-cover" onError={e=>{e.target.style.display="none";}}/>:<Ic d={I.image||I.plus} size={16} cls="text-faint"/>}
          </div>
          <label className={"inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs font-medium hover:bg-sunken "+(uploading==="hero_"+i?"opacity-60 pointer-events-none":"cursor-pointer text-fg-2")}>
            <Ic d={I.upload||I.plus} size={14}/> {uploading==="hero_"+i?"กำลังอัปโหลด…":(url?"เปลี่ยนรูป":"อัปโหลดรูป")}
            <input type="file" accept="image/*" className="hidden" onChange={async e=>{const file=e.target.files&&e.target.files[0]; e.target.value=""; if(!file)return; setUploading("hero_"+i); try{const u=await uploadImg(file,"hero_banner"); const a=[...heroBanners];a[i]=u;setHeroBanners(a);}catch{} setUploading("");}}/>
          </label>
          <button onClick={()=>{const a=[...heroBanners];a.splice(i,1);setHeroBanners(a);}} className="ml-auto text-danger hover:underline text-xs shrink-0">ลบสไลด์</button>
        </div>))}
        <button onClick={()=>setHeroBanners([...heroBanners,""])} className="flex h-8 items-center gap-1 rounded-lg border border-line bg-sunken px-3 text-xs font-medium text-fg-2 hover:bg-surface"><Ic d={I.plus} size={14}/> เพิ่มรูปสไลด์</button>
      </div>

      {/* T2 banners */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">รูปสไลด์ Template 2</h3>
        <div className="rounded-lg border border-accent/20 bg-accent/5 p-3 text-xs text-muted leading-relaxed">
          <b className="text-accent">ขนาดแนะนำ</b> 1500×500px (3:1 เท่านั้น) — ธีม 2 ล็อกกรอบ 3:1
        </div>
        {t2Banners.map((url,i)=>(<div key={i} className="flex items-center gap-3 rounded-lg border border-line bg-sunken/40 p-2">
          <div className="grid h-12 w-24 shrink-0 place-items-center overflow-hidden rounded border border-line bg-sunken">
            {url?<img src={url} alt="" className="h-full w-full object-cover" onError={e=>{e.target.style.display="none";}}/>:<Ic d={I.image||I.plus} size={16} cls="text-faint"/>}
          </div>
          <label className={"inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs font-medium hover:bg-sunken "+(uploading==="t2_"+i?"opacity-60 pointer-events-none":"cursor-pointer text-fg-2")}>
            <Ic d={I.upload||I.plus} size={14}/> {uploading==="t2_"+i?"กำลังอัปโหลด…":(url?"เปลี่ยนรูป":"อัปโหลดรูป")}
            <input type="file" accept="image/*" className="hidden" onChange={async e=>{const file=e.target.files&&e.target.files[0]; e.target.value=""; if(!file)return; setUploading("t2_"+i); try{const u=await uploadImg(file,"t2_banner"); const a=[...t2Banners];a[i]=u;setT2Banners(a);}catch{} setUploading("");}}/>
          </label>
          <button onClick={()=>{const a=[...t2Banners];a.splice(i,1);setT2Banners(a);}} className="ml-auto text-danger hover:underline text-xs shrink-0">ลบสไลด์</button>
        </div>))}
        <button onClick={()=>setT2Banners([...t2Banners,""])} className="flex h-8 items-center gap-1 rounded-lg border border-line bg-sunken px-3 text-xs font-medium text-fg-2 hover:bg-surface"><Ic d={I.plus} size={14}/> เพิ่มรูปสไลด์</button>
      </div>

      {/* Other images */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">รูปภาพอื่นๆ</h3>
        <div className="grid gap-4 sm:grid-cols-2">
          {ImgField({label:"รูปพื้นหลัง",field:"theme_background_url",kind:"background",hintText:"แนะนำ 1920×1080px, WebP/JPG"})}
          {ImgField({label:"รูปหน้า Login/Register",field:"auth_modal_image",kind:"auth_modal",hintText:"แนะนำ 460×640px อัตราส่วน 9:12"})}
          {ImgField({label:"โลโก้หน้า Loading",field:"theme_loading_logo_url",kind:"loading_logo",square:true,hintText:"แนะนำ 240×240px ถึง 400×400px, เว้นว่าง = ใช้โลโก้เว็บ"})}
        </div>
        {Toggle({label:"เปิดหน้า Loading",field:"theme_loading_enabled",sub:"ปิดแล้วลูกค้าจะเข้าเว็บทันที"})}
      </div>

      {/* Bottom Nav */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">Bottom Navigation (มือถือ)</h3>
        {UrlField({label:"พื้นหลัง Bottom Nav (URL รูปหรือสี)",field:"theme_bottom_nav_bg",placeholder:"https://... หรือ #1a1a2e"})}
        <p className="text-[11px] text-muted">แนะนำ PNG พื้นใส ขนาด 64×64px สำหรับแต่ละเมนู</p>
        <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-5">
          {ImgField({label:"หน้าหลัก",field:"theme_bottom_nav_home_icon",kind:"bottom_nav_home",square:true})}
          {ImgField({label:"ฝากเงิน",field:"theme_bottom_nav_deposit_icon",kind:"bottom_nav_deposit",square:true})}
          {ImgField({label:"เล่นเกม (กลาง)",field:"theme_bottom_nav_games_icon",kind:"bottom_nav_games",square:true})}
          {ImgField({label:"ถอนเงิน",field:"theme_bottom_nav_withdraw_icon",kind:"bottom_nav_withdraw",square:true})}
          {ImgField({label:"ประวัติ",field:"theme_bottom_nav_history_icon",kind:"bottom_nav_history",square:true})}
        </div>
      </div>
    </div>}

    {/* ═══════ Tab: seo ═══════ */}
    {tab==="seo"&&<div className={card}>
      <h3 className="text-sm font-bold text-fg">SEO</h3>
      <div className="grid gap-4 sm:grid-cols-2">
        <div><span className={lbl}>SEO Title</span><input type="text" value={f.seo_title||""} onChange={e=>set("seo_title",e.target.value)} className={inp} placeholder="ชื่อที่แสดงบน Google / browser title"/></div>
        <div><span className={lbl}>SEO Keywords</span><input type="text" value={f.seo_keywords||""} onChange={e=>set("seo_keywords",e.target.value)} className={inp} placeholder="keyword1, keyword2, keyword3"/></div>
        <div className="sm:col-span-2"><span className={lbl}>SEO Description</span><textarea value={f.seo_description||""} onChange={e=>set("seo_description",e.target.value)} rows={3} className={inp+" h-auto py-2"} placeholder="เช่น เครดิตออโต้ ฝากถอนรวดเร็ว..."/></div>
        {ImgField({label:"รูปแชร์ SEO / Open Graph",field:"seo_image",kind:"seo_image",hintText:"แนะนำ 1200×630px, อัตราส่วน 1.91:1"})}
        {ImgField({label:"Favicon",field:"seo_favicon",kind:"seo_favicon",square:true,hintText:"แนะนำ PNG 32×32 หรือ 64×64px"})}
      </div>
    </div>}

    {/* ═══════ Tab: money ═══════ */}
    {tab==="money"&&<div className="space-y-4">
      {/* Auto-withdraw channels */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">ช่องทางถอนเงินอัตโนมัติ</h3>
        <p className="text-xs text-muted">เปิด/ปิดส่งคำสั่งจ่ายเงินอัตโนมัติ — เมื่อปิด รายการถอนจะรอจ่ายมือ</p>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {Toggle({label:"ระบบถอน",field:"system_withdraw_enabled",sub:"เปิด/ปิดถอนทั้งหมด"})}
          {Toggle({label:"ADB (gatepaycheck)",field:"abd_enabled",sub:"จ่ายอัตโนมัติเมื่ออนุมัติ"})}
          {Toggle({label:"TrueWallet (TMNOne)",field:"tmnone_withdraw_enabled",sub:"ถอนเข้า TrueWallet ผ่าน P2P"})}
          {Toggle({label:"Autopeer",field:"autopeer_withdraw_enabled",sub:"ส่งถอนอัตโนมัติ (ปลายทางธนาคาร)"})}
        </div>
      </div>

      {/* Min/Max */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">วงเงินฝาก-ถอน</h3>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {NumField({label:"ฝากขั้นต่ำ (บาท)",field:"deposit_min_baht",placeholder:"10"})}
          {NumField({label:"ฝากสูงสุด (บาท)",field:"deposit_max_baht",placeholder:"0",hintText:"0 = ไม่จำกัด"})}
          {NumField({label:"ถอนขั้นต่ำ (บาท)",field:"min_withdraw_baht",placeholder:"100"})}
          {NumField({label:"ถอนสูงสุด (บาท)",field:"max_withdraw_baht",placeholder:"0",hintText:"0 = ไม่จำกัด"})}
          {NumField({label:"ตัวคูณเทิร์นฝากไม่รับโปร",field:"no_promo_deposit_turnover_multiplier",placeholder:"เช่น 1",step:0.01,hintText:"1 = ฝาก 100 ต้องเล่น 100 ก่อนถอน"})}
          {NumField({label:"ถอนสูงสุดจากโปร/คูปอง (บาท)",field:"default_promo_max_withdraw_baht",placeholder:"0",hintText:"0 = ไม่จำกัด, ค่า fallback สำหรับโปรที่ไม่ได้ระบุ"})}
        </div>
      </div>

      {/* Slip rules */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">กติกาสลิป / รายการรอตรวจ</h3>
        <p className="text-xs text-muted">กันสลิปเก่า และกันยอดใหญ่ไม่ให้เข้าเครดิตอัตโนมัติ</p>
        <div className="grid gap-4 sm:grid-cols-2">
          {NumField({label:"อายุสลิปสูงสุด (นาที)",field:"slip_max_age_minutes",placeholder:"เช่น 30",hintText:"0 = ไม่จำกัด, สลิปเกินนี้ลูกค้าอัปไม่ได้"})}
          {NumField({label:"ยอดสลิปที่ต้องรอตรวจ (บาท)",field:"slip_review_over_baht",placeholder:"เช่น 50000",hintText:"0 = ไม่จำกัด, เกินนี้จะค้างรอแอดมินยืนยัน"})}
          {NumField({label:"ยอด AutoPeer ที่ต้องรอตรวจ (บาท)",field:"autopeer_review_over_baht",placeholder:"เช่น 50000",hintText:"0 = ไม่จำกัด"})}
          {NumField({label:"อายุรายการ AutoPeer สูงสุด (นาที)",field:"autopeer_max_age_minutes",placeholder:"เช่น 30",hintText:"0 = ไม่จำกัด"})}
        </div>
        <p className="text-xs text-warn">ฝั่ง AutoPeer ลูกค้าอัปสลิปที่หน้าของ AutoPeer เราจึงบล็อกตอนอัปไม่ได้ แต่คุมจังหวะปล่อยเครดิตได้ — เกินกติกาจะค้างไว้ให้ตรวจเหมือนกัน</p>
      </div>

      {/* Deposit hold */}
      <div className={card}>
        <h3 className="text-sm font-bold text-fg">กันเงินเข้าช่วงปิดรอบยอด</h3>
        <p className="text-xs text-muted">ในช่วงเวลานี้ ทุกช่องทางฝากจะไม่เข้าเครดิตอัตโนมัติ ไปรอที่หน้าตกค้างแทน</p>
        {Toggle({label:"เปิดกันเงินช่วงปิดรอบ",field:"deposit_hold_enabled"})}
        <div className="grid gap-4 sm:grid-cols-2">
          <div><span className={lbl}>กันตั้งแต่เวลา (ไทย)</span><input type="time" value={f.deposit_hold_from||"23:45"} onChange={e=>set("deposit_hold_from",e.target.value)} className={inp}/></div>
          <div><span className={lbl}>ถึงเวลา (ข้ามเที่ยงคืนได้)</span><input type="time" value={f.deposit_hold_to||"00:15"} onChange={e=>set("deposit_hold_to",e.target.value)} className={inp}/></div>
        </div>
      </div>
    </div>}

    {/* ═══════ Tab: turnover ═══════ */}
    {tab==="turnover"&&<SettingsTurnoverPane toast={toast} card={card} lbl={lbl} inp={inp}/>}

    {/* Save button */}
    {tab!=="turnover"&&<div className="flex justify-end">
      <button disabled={saving} onClick={save} className="flex h-10 items-center gap-1.5 rounded-lg bg-accent px-5 text-sm font-semibold text-accent-fg shadow-sm hover:bg-accent-h disabled:opacity-50">
        <Ic d={I.check} size={16} sw={2.5}/> {saving?"กำลังบันทึก…":"บันทึก"}
      </button>
    </div>}
  </div>);
}

const TURNOVER_CLEAR_MODE_TH = {
  convert: "แปลงโบนัสเป็นเงินสด",
  forfeit: "ตัดโบนัสทิ้ง (ยอดต่ำกว่าขั้นต่ำ)",
  fixed_withdraw_cap: "จำกัดถอนสูงสุดตามโปร",
  turnover_withdraw_cap: "อิงเทิร์นและมีเพดานถอน",
  turnover_balance: "อิงเครดิตคงเหลือ",
};

function turnoverClearErrorText(e) {
  if (e && e.status === 403) return "ไม่มีสิทธิ์ \"เคลียร์เทิร์น\" — ให้เจ้าของเว็บเปิดสิทธิ์นี้ในหน้าจัดการแอดมิน";
  if (e && e.message === "no_active_turnover") return "สมาชิกนี้ไม่มีเทิร์นค้างแล้ว";
  if (e && e.message === "user_not_found") return "ไม่พบสมาชิก";
  return (e && e.message) || "ไม่สำเร็จ";
}

function SettingsTurnoverPane({ toast, card, lbl, inp }) {
  const [q,setQ]=useState(""),[rows,setRows]=useState([]),[loading,setLoading]=useState(false),[err,setErr]=useState(null);
  const [minBal,setMinBal]=useState(""),[savingCfg,setSavingCfg]=useState(false),[busyId,setBusyId]=useState(null);
  const allowed=can("tool_clear_turnover");

  /* ค่าเดียวกับเกณฑ์ "เทิร์นแตก" อัตโนมัติ (turnover_clear_min_balance เก็บเป็นสตางค์) */
  const search=useCallback(async(term)=>{ setLoading(true); setErr(null);
    try{
      const d=await api("/turnover/list?q="+encodeURIComponent((term||"").trim()));
      setRows(Array.isArray(d&&d.rows)?d.rows:[]);
      if(d&&d.minBalance!=null) setMinBal(m=>m===""?String(Number(d.minBalance)/100):m);
    }
    catch(e){ setRows([]); setErr(turnoverClearErrorText(e)); } finally{ setLoading(false); } },[]);
  useEffect(()=>{ if(allowed) search(""); },[allowed,search]);

  const saveCfg=async()=>{ setSavingCfg(true);
    try{ await api("/turnover/config",{method:"POST",body:{minBalance:Number(minBal)||0}}); toast("บันทึกแล้ว"); }
    catch(e){ toast(turnoverClearErrorText(e)); } finally{ setSavingCfg(false); } };

  const clearTurnover=async(r)=>{
    if(!window.confirm("ล้างเทิร์นของ "+(r.username||"สมาชิก")+"? (โบนัสอาจถูกตัดหรือแปลงเป็นเงินสดตามเงื่อนไข)"))return;
    const note=window.prompt("เหตุผลการล้างเทิร์น:","admin clear turnover"); if(note===null)return;
    setBusyId(r.id);
    try{ const d=await api("/turnover/clear/"+r.id,{method:"POST",body:{note:note||"admin clear turnover"}}); toast("เคลียร์เทิร์น "+(r.username||"")+" แล้ว — "+(TURNOVER_CLEAR_MODE_TH[d&&d.mode]||(d&&d.mode)||"")); search(q); }
    catch(e){ toast(turnoverClearErrorText(e)); } finally{ setBusyId(null); } };

  if(!allowed) return (<div className={card}><div className="py-10 text-center text-sm text-fg-2">ไม่มีสิทธิ์ "เคลียร์เทิร์น" — ให้เจ้าของเว็บเปิดสิทธิ์นี้ในหน้าจัดการแอดมิน</div></div>);

  return (<div className="space-y-4">
    <div className={card}>
      <h3 className="text-sm font-bold text-fg">ตั้งค่าเคลียร์เทิร์น</h3>
      <div className="flex flex-wrap items-end gap-3">
        <div><span className={lbl}>ยอดขั้นต่ำสำหรับแปลงโบนัส (บาท)</span><input type="number" min="0" step="0.01" value={minBal} onChange={e=>setMinBal(e.target.value)} placeholder="0 = ไม่กำหนด" className={inp+" w-48"}/></div>
        <button disabled={savingCfg} onClick={saveCfg} className="flex h-9 items-center gap-1 rounded-lg bg-accent px-4 text-sm font-medium text-accent-fg hover:bg-accent-h disabled:opacity-50"><Ic d={I.check} size={14}/> บันทึก</button>
      </div>
      <div className="text-[11px] text-muted">ยอดรวม ≥ ค่านี้ → โบนัสแปลงเป็นเงินสด | ต่ำกว่า → โบนัสถูกตัดทิ้ง · ค่านี้ใช้เป็นเกณฑ์ "เทิร์นแตก" อัตโนมัติด้วย (ยอดเล่นได้ต่ำกว่าค่านี้ = ล้างเทิร์นให้เอง)</div>
    </div>

    <div className={card}>
      <h3 className="text-sm font-bold text-fg">เคลียร์เทิร์นสมาชิก <span className="font-normal text-muted">(แสดงเฉพาะคนที่มีเทิร์นค้าง)</span></h3>
      <div className="flex flex-wrap items-center gap-2">
        <input type="text" value={q} onChange={e=>setQ(e.target.value)} onKeyDown={e=>e.key==="Enter"&&search(q)} placeholder="username / เบอร์" className={inp+" !w-64"}/>
        <button onClick={()=>search(q)} className="flex h-9 items-center gap-1 rounded-lg border border-line bg-surface px-3 text-sm font-medium text-fg-2 hover:bg-sunken"><Ic d={I.search||I.refresh} size={14}/> ค้นหา</button>
      </div>
      {err&&<div className="text-sm text-danger">{err}</div>}
      {loading?<div className="py-8 text-center text-sm text-muted">กำลังโหลด…</div>:(
      <div className="overflow-x-auto rounded-lg border border-line">
        <table className="w-full text-sm">
          <thead><tr className="border-b border-line bg-sunken/60 text-left text-xs font-semibold text-muted">
            <th className="px-3 py-2">Username</th><th className="px-3 py-2">เบอร์</th><th className="px-3 py-2 text-right">เครดิต (เงินสด + โบนัส)</th><th className="px-3 py-2 text-right">เทิร์นที่เหลือ</th><th className="px-3 py-2 text-right">จัดการ</th>
          </tr></thead>
          <tbody>{rows.length===0?<tr><td colSpan={5} className="px-3 py-8 text-center text-muted">ไม่พบสมาชิกที่มีเทิร์นค้าง</td></tr>:rows.map(r=>{
            const remaining=Math.max(0,N(r.turnover_required)-N(r.turnover_progress));
            return (<tr key={r.id} className="border-b border-line last:border-0 hover:bg-sunken/40">
              <td className="px-3 py-2 font-medium">{r.username||"-"}</td>
              <td className="px-3 py-2 text-muted mono">{r.phone||"-"}</td>
              <td className="px-3 py-2 text-right tnum">{money2(r.total_balance)}{N(r.bonus_balance)>0&&<div className="text-[11px] text-muted">โบนัส {money2(r.bonus_balance)}</div>}</td>
              <td className="px-3 py-2 text-right tnum">{money2(remaining)}<div className="text-[11px] text-muted">{r.turnover_percent!=null?r.turnover_percent+"%":""}</div></td>
              <td className="px-3 py-2 text-right"><button disabled={busyId===r.id} onClick={()=>clearTurnover(r)} className="text-xs font-medium text-accent hover:underline disabled:opacity-50">{busyId===r.id?"กำลังทำ…":"เคลียร์เทิร์น"}</button></td>
            </tr>);
          })}</tbody>
        </table>
      </div>)}
    </div>
    <div className="rounded-lg border border-line bg-sunken/40 p-4 text-sm leading-relaxed text-fg-2">
      <p className="mb-2 font-semibold text-fg">เทิร์นโอเวอร์ คืออะไร?</p>
      <p className="mb-2">เทิร์นโอเวอร์ (Turnover) คือ ยอดเดิมพันสะสมที่สมาชิกต้องทำให้ครบตามเงื่อนไขก่อนจึงจะถอนเงินได้ ระบบจะคำนวณจากยอดเครดิตที่ได้รับ × ตัวคูณเทิร์นที่ตั้งไว้</p>
      <p className="mb-2"><strong>ตัวอย่าง:</strong> รับโบนัส 100 บาท ตัวคูณเทิร์น × 5 → ต้องเดิมพันสะสม 500 บาท จึงจะถอนได้</p>
      <p>เมื่อสมาชิกเดิมพันครบตามยอดเทิร์นที่กำหนด ระบบจะ "เคลียร์เทิร์น" ให้อัตโนมัติ และเปิดให้ถอนเงินได้ตามปกติ</p>
    </div>
  </div>);
}