/* ==========================================================================
 * ADMIN NEXT — page-domains.jsx  (ตั้งค่าลิงก์ & เชื่อมโดเมน)
 * ========================================================================== */

function DomainsPage({ toast }) {
  const [data,setData]=useState(null),[loading,setLoading]=useState(true),[err,setErr]=useState(null);
  const [cf,setCf]=useState(null),[cfToken,setCfToken]=useState(""),[saving,setSaving]=useState(false);
  const [newUrl,setNewUrl]=useState(""),[newLabel,setNewLabel]=useState("");
  const [checking,setChecking]=useState(null);

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

  const saveCfToken=async()=>{ setSaving(true);
    try{ await api("/domains/cf-token",{method:"POST",body:{token:cfToken}}); toast("บันทึก Token แล้ว"); setCfToken(""); load(); }
    catch(e){ toast(e.message||"บันทึกไม่สำเร็จ"); } finally{ setSaving(false); } };

  const addDomain=async()=>{
    if(!newUrl.trim())return;
    const list=[...(data?.list||[]),{url:newUrl.trim(),label:newLabel.trim()}];
    setSaving(true);
    try{ await api("/domains",{method:"POST",body:{list,primary:data?.primary,roles:data?.roles}}); toast("เพิ่มแล้ว"); setNewUrl(""); setNewLabel(""); load(); }
    catch(e){ toast(e.message||"เพิ่มไม่สำเร็จ"); } finally{ setSaving(false); } };

  const removeDomain=(url)=>{
    const list=(data?.list||[]).filter(d=>d.url!==url);
    setSaving(true);
    api("/domains",{method:"POST",body:{list,primary:data?.primary===url?"":data?.primary,roles:data?.roles}})
      .then(()=>{ toast("ลบแล้ว"); load(); }).catch(e=>toast(e.message||"ลบไม่สำเร็จ")).finally(()=>setSaving(false));
  };

  const setPrimary=async(url)=>{ setSaving(true);
    try{ await api("/domains",{method:"POST",body:{list:data?.list,primary:url,roles:data?.roles}}); toast("ตั้งเป็นหลักแล้ว"); load(); }
    catch(e){ toast(e.message||"ไม่สำเร็จ"); } finally{ setSaving(false); } };

  const connectDomain=async(url)=>{ setChecking(url);
    try{ const r=await api("/domains/connect",{method:"POST",body:{url}}); toast(r.ok?"เชื่อมต่อสำเร็จ":"ไม่สำเร็จ: "+(r.message||"")); }
    catch(e){ toast(e.message||"เชื่อมต่อไม่สำเร็จ"); } finally{ setChecking(null); } };

  const checkDomain=async(url)=>{ setChecking(url);
    try{ const r=await api("/domains/check",{method:"POST",body:{url}}); toast(r.ok?"DNS ถูกต้อง":"DNS ยังไม่ถูกต้อง: "+(r.message||"")); }
    catch(e){ toast(e.message||"ตรวจสอบไม่สำเร็จ"); } finally{ setChecking(null); } };

  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}/>;

  return (<div className="space-y-5">
    {/* Cloudflare Token */}
    <div className="rounded-xl border border-line bg-surface p-5 shadow-sm space-y-3">
      <h3 className="text-sm font-semibold text-fg">Cloudflare API Token</h3>
      {cf&&<div className="flex items-center gap-2 text-xs"><Badge tone={cf.tokenOk?"success":"warn"}>{cf.tokenOk?"เชื่อมต่อแล้ว":"ยังไม่เชื่อมต่อ"}</Badge>{cf.tokenMessage&&<span className="text-muted">{cf.tokenMessage}</span>}</div>}
      {canAny(["tool_domains_manage","settings"])&&<div className="flex gap-2"><input type="password" value={cfToken} onChange={e=>setCfToken(e.target.value)} placeholder="ใส่ API Token ใหม่" className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm"/>
        <button disabled={saving||!cfToken} onClick={saveCfToken} className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg hover:bg-accent-h disabled:opacity-50">บันทึก</button></div>}
    </div>

    {/* Domain List */}
    <div className="rounded-xl border border-line bg-surface p-5 shadow-sm space-y-3">
      <div className="flex items-center justify-between"><h3 className="text-sm font-semibold text-fg">โดเมนเว็บไซต์</h3><span className="text-xs text-muted">หลัก: {data?.primary||data?.fallback||"-"}</span></div>

      <div className="space-y-2">
        {(data?.list||[]).map(d=>(
          <div key={d.url} className="flex items-center gap-2 rounded-lg border border-line-soft p-3">
            <div className="min-w-0 flex-1"><div className="font-medium text-sm text-fg truncate">{d.url}</div>{d.label&&<div className="text-[11px] text-muted">{d.label}</div>}</div>
            {data?.primary===d.url&&<Badge tone="accent">หลัก</Badge>}
            <button title="ตั้งเป็นหลัก" onClick={()=>setPrimary(d.url)} disabled={saving} className="grid h-7 w-7 place-items-center rounded-lg border border-line text-fg-2 hover:bg-sunken disabled:opacity-50"><Ic d={I.star} size={14}/></button>
            {cf?.tokenOk&&<button title="เชื่อม CF" onClick={()=>connectDomain(d.url)} disabled={checking===d.url} className="grid h-7 w-7 place-items-center rounded-lg border border-line text-info hover:bg-sunken disabled:opacity-50"><Ic d={I.refresh} size={14} cls={checking===d.url?"animate-spin":""}/></button>}
            <button title="ตรวจ DNS" onClick={()=>checkDomain(d.url)} disabled={checking===d.url} className="grid h-7 w-7 place-items-center rounded-lg border border-line text-fg-2 hover:bg-sunken disabled:opacity-50"><Ic d={I.search} size={14}/></button>
            {canAny(["tool_domains_manage","settings"])&&<button title="ลบ" onClick={()=>removeDomain(d.url)} disabled={saving} className="grid h-7 w-7 place-items-center rounded-lg border border-line text-danger hover:bg-sunken disabled:opacity-50"><Ic d={I.trash} size={14}/></button>}
          </div>))}
      </div>

      {canAny(["tool_domains_manage","settings"])&&<div className="flex gap-2 pt-2">
        <input type="text" value={newUrl} onChange={e=>setNewUrl(e.target.value)} placeholder="example.com" className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm"/>
        <input type="text" value={newLabel} onChange={e=>setNewLabel(e.target.value)} placeholder="ชื่อ (ไม่บังคับ)" className="w-32 rounded-lg border border-line bg-surface px-3 py-2 text-sm"/>
        <button disabled={saving||!newUrl.trim()} onClick={addDomain} className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg hover:bg-accent-h disabled:opacity-50"><Ic d={I.plus} size={16}/></button>
      </div>}
    </div>

    {/* Domain Roles */}
    {data?.roles&&<div className="rounded-xl border border-line bg-surface p-5 shadow-sm space-y-3">
      <h3 className="text-sm font-semibold text-fg">โดเมนเฉพาะงาน</h3>
      <p className="text-xs text-muted">กำหนดโดเมนเฉพาะสำหรับแต่ละงาน (ว่าง = ใช้โดเมนหลัก)</p>
      {[["marketing","การตลาด"],["referral","ชวนเพื่อน"],["login","เข้าสู่ระบบ"]].map(([k,l])=>
        <div key={k} className="flex items-center gap-3"><label className="w-24 text-xs font-semibold text-fg-2">{l}</label>
        <select value={data.roles[k]||""} onChange={e=>{const roles={...data.roles,[k]:e.target.value}; setData(d=>({...d,roles})); api("/domains",{method:"POST",body:{list:data.list,primary:data.primary,roles}}).then(()=>toast("บันทึกแล้ว")).catch(e2=>toast(e2.message||"ไม่สำเร็จ"));}} className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm">
          <option value="">ใช้โดเมนหลัก</option>
          {(data.list||[]).map(d=><option key={d.url} value={d.url}>{d.url}</option>)}
        </select></div>)}
    </div>}
  </div>);
}