/* ==========================================================================
 * ADMIN NEXT — page-mktlinks.jsx  (ช่องทางสมัคร — marketing channels CRUD)
 * ========================================================================== */

function MktLinksPage({ toast }) {
  const [rows,setRows]=useState([]),[loading,setLoading]=useState(true),[err,setErr]=useState(null);
  const [form,setForm]=useState(null),[busy,setBusy]=useState(false),[del,setDel]=useState(null);

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

  const save=async()=>{ setBusy(true);
    try{
      const body={name:form.name,iconUrl:form.iconUrl,slug:form.slug,enabled:form.enabled!==false};
      if(form._id){ await api("/marketing/channels/"+form._id,{method:"PUT",body}); }
      else { await api("/marketing/channels",{method:"POST",body}); }
      toast("บันทึกแล้ว"); setForm(null); load();
    }catch(e){ toast(e.message||"บันทึกไม่สำเร็จ"); } finally{ setBusy(false); } };

  const doDelete=async()=>{ setBusy(true);
    try{ await api("/marketing/channels/"+del.id,{method:"DELETE"}); toast("ลบแล้ว"); setDel(null); load(); }
    catch(e){ toast(e.message||"ลบไม่สำเร็จ"); } finally{ setBusy(false); } };

  const toggleEnabled=async(r)=>{
    try{ await api("/marketing/channels/"+r.id,{method:"PUT",body:{enabled:!r.enabled}}); load(); }
    catch(e){ toast(e.message||"ไม่สำเร็จ"); } };

  const newForm=()=>({name:"",slug:"",iconUrl:"",enabled:true});
  const H=({children,extra=""})=>(<th className={"whitespace-nowrap px-3 py-2.5 text-left text-[13px] font-bold text-fg-2 "+extra}>{children}</th>);

  return (<div className="space-y-3">
    <div className="flex flex-wrap items-center gap-2">
      <button onClick={load} 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"><Ic d={I.refresh} size={16} cls={loading?"animate-spin":""}/> รีเฟรช</button>
      <button onClick={()=>setForm(newForm())} className="flex h-9 items-center gap-1.5 rounded-lg bg-accent px-3 text-sm font-medium text-accent-fg hover:bg-accent-h"><Ic d={I.plus} size={16}/> เพิ่มช่องทาง</button>
      <div className="ml-auto text-xs text-muted tnum">{rows.length} ช่องทาง</div>
    </div>

    {err ? <HistErr msg={err} onRetry={load}/>
    : (<div className="overflow-hidden rounded-xl border border-line bg-surface shadow-sm"><div className="overflow-x-auto"><table className="w-full min-w-[600px] border-collapse text-sm">
      <thead className="border-b-2 border-accent/25 bg-accent-soft"><tr>{H({children:"ชื่อ"})}{H({children:"Slug"})}{H({children:"สมาชิก",extra:"text-right"})}{H({children:"สถานะ"})}{H({children:"จัดการ",extra:"text-right pr-4"})}</tr></thead>
      <tbody>
        {loading ? Array.from({length:4}).map((_,i)=>(<tr key={i} className="border-b border-line-soft"><td className="px-3 py-3" colSpan="5"><div className="skel h-5 w-full"/></td></tr>))
        : rows.length===0 ? (<tr><td colSpan="5" className="px-4 py-16 text-center text-sm font-medium text-fg-2">ยังไม่มีช่องทาง</td></tr>)
        : rows.map(r=>(<tr key={r.id} className="border-b border-line-soft last:border-0 hover:bg-sunken/50">
          <td className="px-3 py-2.5"><div className="flex items-center gap-2">{r.icon_url&&<img src={r.icon_url} className="h-6 w-6 rounded object-cover bg-sunken" onError={e=>{e.target.style.display="none"}}/>}<span className="font-medium text-fg">{r.name}</span></div></td>
          <td className="px-3 text-xs text-fg-2 mono">{r.slug}</td>
          <td className="px-3 text-right tnum text-fg-2">{Number(r.signup_count||0).toLocaleString("th-TH")}</td>
          <td className="px-3"><Badge tone={r.enabled?"success":"danger"}>{r.enabled?"เปิด":"ปิด"}</Badge></td>
          <td className="pr-4"><div className="flex items-center justify-end gap-1">
            <button title={r.enabled?"ปิด":"เปิด"} onClick={()=>toggleEnabled(r)} className={"grid h-7 w-7 place-items-center rounded-lg border border-line hover:bg-sunken "+(r.enabled?"text-success":"text-muted")}><Ic d={I.check} size={14}/></button>
            <button title="แก้ไข" onClick={()=>setForm({_id:r.id,name:r.name,slug:r.slug||"",iconUrl:r.icon_url||"",enabled:r.enabled})} className="grid h-7 w-7 place-items-center rounded-lg border border-line text-fg-2 hover:bg-sunken"><Ic d={I.edit} size={14}/></button>
            <button title="ลบ" onClick={()=>setDel(r)} 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></td>
        </tr>))}
      </tbody>
    </table></div></div>)}

    {form&&(<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 fade-in" onClick={()=>setForm(null)}><div className="w-full max-w-md rounded-xl border border-line bg-surface p-5 shadow-lg pop" onClick={e=>e.stopPropagation()}>
      <h3 className="mb-4 text-base font-semibold">{form._id?"แก้ไขช่องทาง":"เพิ่มช่องทาง"}</h3>
      {[["ชื่อช่องทาง","name"],["Slug (ภาษาอังกฤษ)","slug"],["URL ไอคอน","iconUrl"]].map(([l,k])=>
        <div key={k} className="mb-3"><label className="mb-1 block text-xs font-semibold text-fg-2">{l}</label><input type="text" value={form[k]||""} onChange={e=>setForm(f=>({...f,[k]:e.target.value}))} className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm"/></div>)}
      <div className="flex justify-end gap-2 pt-2">
        <button onClick={()=>setForm(null)} className="rounded-lg border border-line px-4 py-2 text-sm font-medium text-fg-2 hover:bg-sunken">ยกเลิก</button>
        <button disabled={busy||!form.name} onClick={save} className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg hover:bg-accent-h disabled:opacity-50">{busy?"กำลังบันทึก…":"บันทึก"}</button>
      </div>
    </div></div>)}

    {del&&<SimpleConfirmModal title="ลบช่องทาง" msg={"ลบ \""+(del?.name||"")+"\"?"} onOk={doDelete} onCancel={()=>setDel(null)}/>}
  </div>);
}