/* ==========================================================================
 * ADMIN NEXT — page-memberlevels.jsx  (ระดับสมาชิก — settings-based)
 * ========================================================================== */

function MemberLevelsPage({ toast }) {
  const [cfg,setCfg]=useState({}),[loading,setLoading]=useState(true),[saving,setSaving]=useState(false),[err,setErr]=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}));

  let levels=[]; try{ levels=JSON.parse(cfg.member_levels||"[]"); }catch{levels=[];}
  if(!Array.isArray(levels))levels=[];

  const setLevels=(fn)=>{
    const next=fn(levels);
    set("member_levels",JSON.stringify(next));
  };
  const addLevel=()=>setLevels(ls=>[...ls,{name:"",min_deposit:0,cashback_percent:0,color:"#6366F1"}]);
  const updateLevel=(i,k,v)=>setLevels(ls=>ls.map((l,j)=>j===i?{...l,[k]:v}:l));
  const removeLevel=(i)=>setLevels(ls=>ls.filter((_,j)=>j!==i));

  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 Tog=({k,label})=><label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked={cfg[k]==="true"||cfg[k]===true} 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>;

  return (<div className="space-y-5">
    <div className="rounded-xl border border-line bg-surface p-5 shadow-sm space-y-4">
      <h3 className="text-sm font-semibold text-fg">ตั้งค่าระดับสมาชิก</h3>
      {Tog({k:"member_levels_enabled",label:"เปิดระบบระดับสมาชิก"})}
      <p className="text-xs text-muted">ระดับจะอัพเกรดอัตโนมัติตามยอดฝากสะสม</p>
    </div>

    <div className="space-y-3">
      {levels.map((lv,i)=>(
        <div key={i} className="rounded-xl border border-line bg-surface p-4 shadow-sm">
          <div className="flex items-center gap-3 mb-3">
            <input type="color" value={lv.color||"#6366F1"} onChange={e=>updateLevel(i,"color",e.target.value)} className="h-8 w-8 cursor-pointer rounded border-0"/>
            <input type="text" value={lv.name} onChange={e=>updateLevel(i,"name",e.target.value)} placeholder="ชื่อระดับ" className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm font-medium"/>
            <button onClick={()=>removeLevel(i)} className="grid h-7 w-7 place-items-center rounded-lg border border-line text-danger hover:bg-sunken"><Ic d={I.trash} size={14}/></button>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div><label className="mb-1 block text-[11px] font-semibold text-muted">ยอดฝากขั้นต่ำ (บาท)</label><input type="number" value={lv.min_deposit||""} onChange={e=>updateLevel(i,"min_deposit",Number(e.target.value))} className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm"/></div>
            <div><label className="mb-1 block text-[11px] font-semibold text-muted">คืนยอดเสีย (%)</label><input type="number" value={lv.cashback_percent||""} onChange={e=>updateLevel(i,"cashback_percent",Number(e.target.value))} className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm" step="0.1"/></div>
          </div>
        </div>))}
      <button onClick={addLevel} className="flex w-full items-center justify-center gap-1.5 rounded-xl border border-dashed border-line bg-surface py-3 text-sm font-medium text-muted hover:border-accent hover:text-accent"><Ic d={I.plus} size={16}/> เพิ่มระดับ</button>
    </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>);
}