/* ==========================================================================
 * ADMIN NEXT — page-apisettings.jsx  (API Game / API ฝาก / API SMS-KUB)
 * ========================================================================== */

function ApiSettingsPage({ toast, defaultTab="game" }) {
  const [cfg,setCfg]=useState({}),[loading,setLoading]=useState(true),[saving,setSaving]=useState(false),[err,setErr]=useState(null);
  const [sub,setSub]=useState(null),[testing,setTesting]=useState(null);

  const load=useCallback(async()=>{ setLoading(true); setErr(null);
    try{ const d=await api("/settings"); setCfg(d||{}); }
    catch(e){ if(e.status===401||e.status===403){window.__nxAuthFail?.();} setErr(e.message||"โหลดไม่สำเร็จ"); }
    finally{ setLoading(false); } },[]);
  useEffect(()=>{ load(); },[load]);

  const save=async()=>{ setSaving(true);
    try{ await api("/settings",{method:"POST",body:cfg}); toast("บันทึกแล้ว"); }
    catch(e){ toast(e.message||"บันทึกไม่สำเร็จ"); } finally{ setSaving(false); } };
  const set=(k,v)=>setCfg(c=>({...c,[k]:v}));

  const testApi=async(endpoint)=>{ setTesting(endpoint);
    try{ const r=await api(endpoint,{method:"POST",body:cfg}); toast(r.ok||r.success?"เชื่อมต่อสำเร็จ":"ไม่สำเร็จ: "+(r.message||r.error||"")); }
    catch(e){ toast(e.message||"ทดสอบไม่สำเร็จ"); } finally{ setTesting(null); } };

  /* Prefix Username ย้ายไปอยู่หน้าตั้งค่าเว็บไซต์แล้ว · แท็บที่ไม่มีสิทธิ์จะไม่แสดง */
  const gameTabs=[["amb","Agent","settings_agent"],["ufa","Ufa","settings_ufa"],["onesport","Onesport","settings_oneallsport"],["rb7","Rb7","settings_rb7"],["pghard","PGHARD","settings_pghard"]];
  const depositTabs=[["truewallet","TrueMoney / TrueWallet",["settings_truewallet","settings_tmnone"]],["webhook","Webhook / โหลดแอพ","settings_webhook"]];
  /* Slip2Go / Autopeer / AskMePay อยู่หน้า API ฝาก พิเศษ ใช้สิทธิ์เดียว settings_deposit_special */
  const depositSpecialTabs=[["slip2go","Slip2Go","settings_deposit_special"],["autopeer","Autopeer","settings_deposit_special"],["askmepay","AskMePay","settings_deposit_special"]];
  const tabSets={ game:gameTabs, deposit:depositTabs, depositSpecial:depositSpecialTabs };
  const tabs=(tabSets[defaultTab]||[]).filter(t=>can(t[2]));
  const activeTab=sub||(tabs[0]&&tabs[0][0]);

  useEffect(()=>{ if(tabs.length) setSub(tabs[0][0]); },[defaultTab]);

  if(loading) return <div className="flex items-center gap-2 py-16 justify-center text-sm text-muted"><Ic d={I.refresh} size={16} cls="animate-spin"/> กำลังโหลด…</div>;
  if(err) return <HistErr msg={err} onRetry={load}/>;

  const cbBase=location.origin;
  const Lb=({children})=><label className="mb-1 block text-xs font-semibold text-fg-2">{children}</label>;
  const In=({k,type="text",ph=""})=><input type={type} value={cfg[k]||""} onChange={e=>set(k,e.target.value)} placeholder={ph} className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm"/>;
  const Sel=({k,options,ph})=><select value={cfg[k]||""} onChange={e=>set(k,e.target.value)} className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm">{ph&&<option value="">{ph}</option>}{options.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>;
  const Tog=({k,label})=><label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked={cfg[k]==="true"||cfg[k]===true||cfg[k]==="1"} onChange={e=>set(k,e.target.checked?"true":"false")} className="h-4 w-4 rounded border-line accent-accent"/><span className="text-sm text-fg-2">{label}</span></label>;
  const Section=({title,children})=><div className="rounded-xl border border-line bg-surface p-5 shadow-sm space-y-4"><h3 className="text-sm font-semibold text-fg">{title}</h3>{children}</div>;
  const TestBtn=({ep,label="ทดสอบ"})=><button disabled={!!testing} onClick={()=>testApi(ep)} className="flex h-9 items-center gap-1.5 rounded-lg border border-line bg-surface px-3 text-sm font-medium text-fg-2 hover:bg-sunken disabled:opacity-50"><Ic d={I.refresh} size={14} cls={testing===ep?"animate-spin":""}/> {label}</button>;
  const CbUrl=({url})=><div className="rounded-lg bg-sunken px-3 py-2 text-xs mono text-muted break-all select-all">{url}</div>;

  const renderGameTab=()=>{
    if(activeTab==="amb") return Section({title:"AMB (Agent)",children:<>
      <div><Lb>Base URL</Lb>{In({k:"amb_base_url",ph:"https://api-test.ambexapi.com/api/v1"})}</div>
      <div><Lb>Agent Username</Lb>{In({k:"amb_agent_username"})}</div>
      <div><Lb>Key</Lb>{In({k:"amb_key",type:"password"})}</div>
      <div><Lb>Prefix</Lb>{In({k:"amb_prefix"})}</div>
      <div><Lb>White Label</Lb>{In({k:"amb_whitelabel"})}</div>
      {Tog({k:"leaderboard_enabled",label:"เปิด Leaderboard"})}
      {Tog({k:"amb_sports_enabled",label:"เปิด AMB Sports"})}
      {Tog({k:"amb_lotto_enabled",label:"เปิด AMB Lotto"})}
    </>});
    if(activeTab==="ufa") return Section({title:"UFA (MyUFA Partner API)",children:<>
      {Tog({k:"ufa_enabled",label:"เปิดใช้ UFA"})}
      <div><Lb>API URL</Lb>{In({k:"ufa_base_url",ph:"https://kraken.mrwed.cloud"})}</div>
      <div><Lb>API Key</Lb>{In({k:"ufa_api_key",type:"password"})}</div>
      <div><Lb>Agent Username</Lb>{In({k:"ufa_agent_username"})}</div>
      <div><Lb>Agent Password</Lb>{In({k:"ufa_agent_password",type:"password"})}</div>
      <div><Lb>Prefix</Lb>{In({k:"ufa_prefix"})}</div>
      <div><Lb>Callback URL</Lb><CbUrl url={cbBase+"/checkBalance และ "+cbBase+"/settleBet"}/></div>
      <TestBtn ep="/ufa/test-keys" label="ทดสอบ UFA"/>
    </>});
    if(activeTab==="onesport") return Section({title:"ONE-ALLSPORT",children:<>
      {Tog({k:"oneallsport_enabled",label:"เปิดใช้ ONE-ALLSPORT"})}
      <div><Lb>Merchant</Lb>{In({k:"oneallsport_merchant"})}</div>
      <div><Lb>API URL</Lb>{In({k:"oneallsport_api_url",ph:"https://..."})}</div>
      <div><Lb>App Key</Lb>{In({k:"oneallsport_app_key",type:"password"})}</div>
      <div><Lb>Prefix</Lb>{In({k:"oneallsport_prefix"})}</div>
      <div><Lb>Verify Signature</Lb>{Sel({k:"oneallsport_verify_sig",options:[["1","เปิด"],["0","ปิด"]]})}</div>
      <div><Lb>LSM URL</Lb>{In({k:"oneallsport_lsm_url",ph:"https://..."})}</div>
      <div><Lb>Callback URL</Lb><CbUrl url={cbBase+"/external/oneallsport"}/></div>
      <TestBtn ep="/oneallsport/test-keys" label="ทดสอบ ONE-ALLSPORT"/>
    </>});
    if(activeTab==="rb7") return Section({title:"RB7 (LOTTO-MW)",children:<>
      {Tog({k:"rb7_enabled",label:"เปิดใช้ RB7"})}
      <div><Lb>Prefix</Lb>{In({k:"rb7_prefix"})}</div>
      <div><Lb>Provider URL</Lb>{In({k:"rb7_provider_url",ph:"https://..."})}</div>
      <div><Lb>Operator Key</Lb>{In({k:"rb7_operator_key",type:"password"})}</div>
      <div><Lb>Callback URLs</Lb><CbUrl url={[cbBase+"/external/rb7/getBalance",cbBase+"/external/rb7/bet",cbBase+"/external/rb7/cancel",cbBase+"/external/rb7/settle",cbBase+"/external/rb7/rollback"].join("\n")}/></div>
      <TestBtn ep="/rb7/test-keys" label="ทดสอบ RB7"/>
    </>});
    if(activeTab==="pghard") return Section({title:"PG Hard",children:<>
      {Tog({k:"pghard_enabled",label:"เปิดใช้ PG Hard"})}
      <div><Lb>API URL</Lb>{In({k:"pghard_base_url",ph:"https://..."})}</div>
      <div><Lb>Operator ID</Lb>{In({k:"pghard_operator_id"})}</div>
      <div><Lb>Private Key</Lb>{In({k:"pghard_private_key",type:"password"})}</div>
      <div><Lb>Default Pool ID</Lb>{In({k:"pghard_default_pool_id"})}</div>
      <div><Lb>Default Preset ID</Lb>{In({k:"pghard_default_preset_id"})}</div>
      <div><Lb>Providers</Lb>{In({k:"pghard_providers",ph:"pghard,jilihard,jokerhard"})}</div>
    </>});
    return null;
  };

  const renderDepositTab=()=>{
    if(activeTab==="slip2go") return Section({title:"Slip2Go",children:<>
      <div className="grid grid-cols-2 gap-3">
        <div><Lb>Slip2Go Base URL</Lb>{In({k:"slip2go_base_url",ph:"https://..."})}</div>
        <div><Lb>Slip2Go Secret</Lb>{In({k:"slip2go_api_secret",type:"password"})}</div>
      </div>
      {Tog({k:"slip2go_enabled",label:"เปิดใช้ Slip2Go (ปิดเพื่อให้สลิปรอแอดมินตรวจสอบ)"})}
      {Tog({k:"slip_time_slip2go_enabled",label:"อ่านเวลาสลิปอัตโนมัติตอนเติมเครดิตมือ (ปิดแล้วเหลือเฉพาะกรอกเอง)"})}
    </>});
    if(activeTab==="truewallet") return <div className="space-y-5">
      {Section({title:"TrueWallet — Official Webhook",children:<>
        {Tog({k:"truewallet_webhook_enabled",label:"เปิดรับฝาก TrueWallet Webhook"})}
        <div><Lb>เบอร์ TrueWallet</Lb>{In({k:"truewallet_webhook_mobile",ph:"0812345678"})}</div>
        <div><Lb>Webhook Secret</Lb>{In({k:"truewallet_webhook_secret",type:"password"})}</div>
        <div><Lb>ค่าธรรมเนียม (%)</Lb><input type="number" value={cfg.truewallet_webhook_fee_percent||""} onChange={e=>set("truewallet_webhook_fee_percent",e.target.value)} className="w-32 rounded-lg border border-line bg-surface px-3 py-2 text-sm" placeholder="0"/></div>
        <div><Lb>Webhook URL</Lb><CbUrl url={cbBase+"/external/truewallet/webhook"}/></div>
      </>})}
      {Section({title:"TrueWallet — TMNOne (Slip2Go)",children:<>
        {Tog({k:"tmnone_enabled",label:"เปิดใช้ TMNOne"})}
        <div><Lb>ค่าธรรมเนียม TMNOne (%)</Lb><input type="number" value={cfg.tmnone_fee_percent||""} onChange={e=>set("tmnone_fee_percent",e.target.value)} className="w-32 rounded-lg border border-line bg-surface px-3 py-2 text-sm" placeholder="0"/></div>
        <TestBtn ep="/tmnone/test-connection" label="ทดสอบ TMNone"/>
      </>})}
      {Section({title:"TrueWallet — Angpao",children:<>
        <div><Lb>API Type</Lb>{Sel({k:"truemoney_api_type",options:[["inkz_shop","inkz_shop"],["gift","gift"]]})}</div>
        <div><Lb>ค่าธรรมเนียม (%)</Lb><input type="number" value={cfg.truemonney_fee_percent||""} onChange={e=>set("truemonney_fee_percent",e.target.value)} className="w-32 rounded-lg border border-line bg-surface px-3 py-2 text-sm" placeholder="2.9"/></div>
      </>})}
    </div>;
    if(activeTab==="autopeer") return Section({title:"Autopeer",children:<>
      {Tog({k:"autopeer_enabled",label:"เปิดใช้ Autopeer"})}
      <div><Lb>API URL</Lb>{In({k:"autopeer_base_url",ph:"https://gateway.autopeerdev.click"})}</div>
      <div><Lb>API Key</Lb>{In({k:"autopeer_key",type:"password"})}</div>
      <div><Lb>Prefix</Lb>{In({k:"autopeer_prefix"})}</div>
      <div><Lb>Language</Lb>{Sel({k:"autopeer_lang",options:[["th","ไทย"],["en","English"]]})}</div>
      <div><Lb>Redirect URL</Lb>{In({k:"autopeer_redirect_url",ph:"https://..."})}</div>
      <div><Lb>Callback URLs</Lb><CbUrl url={cbBase+"/external/autopeer/deposit\n"+cbBase+"/external/autopeer/withdraw"}/></div>
    </>});
    if(activeTab==="askmepay") return Section({title:"AskMePay (Auto QR)",children:<>
      {Tog({k:"askmepay_enabled",label:"เปิดใช้ AskMePay"})}
      <div><Lb>API URL</Lb>{In({k:"askmepay_base_url",ph:"https://..."})}</div>
      <div><Lb>Public Key</Lb>{In({k:"askmepay_public_key",type:"password"})}</div>
      <div><Lb>Secret Key</Lb>{In({k:"askmepay_secret_key",type:"password"})}</div>
      <div><Lb>Service ID</Lb>{In({k:"askmepay_service_id",ph:"100"})}</div>
      <div><Lb>Payout Service ID</Lb>{In({k:"askmepay_payout_service_id",ph:"100"})}</div>
      <div><Lb>Prefix</Lb>{In({k:"askmepay_prefix"})}</div>
      <div><Lb>Callback URL</Lb>{In({k:"askmepay_callback_url"})}</div>
      <div><Lb>Callback URLs</Lb><CbUrl url={cbBase+"/external/askmepay/deposit\n"+cbBase+"/external/askmepay/withdraw"}/></div>
      <TestBtn ep="/askmepay/test-keys" label="ทดสอบ AskMePay"/>
    </>});
    if(activeTab==="webhook") return Section({title:"Webhook / SMS App",children:<>
      <div><Lb>Webhook Secret</Lb>{In({k:"sms_webhook_secret",type:"password"})}</div>
      <div><Lb>Incoming Webhook URL</Lb><CbUrl url={cbBase+"/api/admin/sms/incoming"}/></div>
      <div>
        <Lb>แอปรับฝาก SMS (SMSRelay)</Lb>
        <div className="flex flex-wrap items-center gap-2">
          <a href="/downloads/app-debug.apk" download className="inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-semibold text-accent-fg shadow-sm hover:bg-accent-h">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M5 21h14"/></svg>
            ดาวน์โหลดแอป (APK)
          </a>
          <span className="text-xs text-muted">ติดตั้งบนมือถือ Android ที่ใส่ซิมผูกบัญชีรับเงิน แล้วกรอก Webhook URL + Secret ด้านบน</span>
        </div>
      </div>
    </>});
    return null;
  };

  return (<div className="space-y-4">
    {tabs.length>0&&<div className="flex flex-wrap gap-1 rounded-lg bg-sunken p-1">
      {tabs.map(([k,l])=><button key={k} onClick={()=>setSub(k)} className={"rounded-md px-3 py-1.5 text-sm font-medium transition-colors "+(activeTab===k?"bg-surface text-fg shadow-sm":"text-muted hover:text-fg")}>{l}</button>)}
    </div>}

    {defaultTab==="game"&&renderGameTab()}
    {(defaultTab==="deposit"||defaultTab==="depositSpecial")&&renderDepositTab()}

    {defaultTab==="sms"&&Section({title:"SMS-KUB (OTP)",children:<>
      <div><Lb>เปิด OTP สมัคร/ลืมรหัส</Lb>{Sel({k:"otp_enabled",options:[["1","เปิด"],["0","ปิด"]]})}</div>
      <div><Lb>API Key</Lb>{In({k:"smskub_api_key",type:"password"})}</div>
      <div><Lb>Project Key</Lb>{In({k:"smskub_project_key",ph:"OTP Project ID"})}</div>
      <div><Lb>Sender Name</Lb>{In({k:"smskub_sender_name",ph:"MySite"})}</div>
    </>})}

    <div className="flex justify-end">
      <button disabled={saving} onClick={save} className="rounded-lg bg-accent px-6 py-2.5 text-sm font-medium text-accent-fg hover:bg-accent-h disabled:opacity-50">{saving?"กำลังบันทึก…":"บันทึกทั้งหมด"}</button>
    </div>
  </div>);
}