import { useState, useCallback, useEffect } from "react";

/* ── WordPress Site Manager ──────────────────────────────────────
   เชื่อมต่อ vanvaew.com (หรือเว็บ WP ใดๆ) ผ่าน REST API
   พร้อม Application Password → แก้ไข Posts, Pages, Homepage
──────────────────────────────────────────────────────────────── */

const CSS = `
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0e0c; --bg2:#181614; --bg3:#211f1c;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12);
  --text:#f0ece4; --muted:#888078; --sub:#5a5650;
  --green:#2ec27e; --green-d:#1a7a50; --green-bg:rgba(46,194,126,0.1);
  --amber:#e8a030; --amber-bg:rgba(232,160,48,0.1);
  --red:#e05050; --red-bg:rgba(224,80,80,0.1);
  --blue:#4a9eff; --blue-bg:rgba(74,158,255,0.08);
  --radius:12px;
}
body{background:var(--bg);color:var(--text);font-family:'Sarabun',sans-serif;font-size:14px;line-height:1.6}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.fade{animation:fadeUp .3s ease}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#333;border-radius:4px}
input,textarea,select{font-family:'Sarabun',sans-serif;font-size:14px}
button{font-family:'Sarabun',sans-serif;cursor:pointer}
`;

// ── Helpers
const api = (base, path, opts = {}) =>
  fetch(`${base}/wp-json/wp/v2${path}`, opts);

const authHead = (user, pass) => ({
  Authorization: "Basic " + btoa(`${user}:${pass}`),
  "Content-Type": "application/json",
});

const Spin = () => (
  <div style={{ width: 14, height: 14, border: "2px solid rgba(255,255,255,0.2)", borderTopColor: "var(--green)", borderRadius: "50%", animation: "spin .6s linear infinite", flexShrink: 0 }} />
);

const Badge = ({ s }) => {
  const map = { publish: ["var(--green)", "เผยแพร่"], draft: ["var(--amber)", "ร่าง"], private: ["#a78bfa", "ส่วนตัว"], pending: ["#60a5fa", "รอตรวจ"] };
  const [col, lbl] = map[s] ?? ["var(--muted)", s];
  return <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 20, background: col + "22", color: col, fontFamily: "'JetBrains Mono'", border: `1px solid ${col}33` }}>{lbl}</span>;
};

const Toast = ({ msg, type }) => {
  const col = type === "error" ? "var(--red)" : type === "warn" ? "var(--amber)" : "var(--green)";
  return msg ? (
    <div style={{ position: "fixed", bottom: 24, right: 24, zIndex: 999, background: "var(--bg3)", border: `1px solid ${col}44`, borderLeft: `3px solid ${col}`, padding: "12px 18px", borderRadius: 10, maxWidth: 360, fontSize: 13, color: "var(--text)", boxShadow: "0 8px 32px rgba(0,0,0,0.5)", animation: "fadeUp .3s ease" }}>
      {msg}
    </div>
  ) : null;
};

// ── Rich text toolbar helper
const inputStyle = {
  width: "100%", background: "var(--bg3)", border: "1px solid var(--border2)",
  borderRadius: 8, padding: "10px 12px", color: "var(--text)",
  outline: "none", transition: "border-color .2s",
  resize: "vertical",
};

// ── Login Screen
const LoginScreen = ({ onLogin }) => {
  const [f, setF] = useState({ url: "https://www.vanvaew.com", user: "", pass: "" });
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState("");

  const go = async () => {
    setLoading(true); setErr("");
    try {
      const res = await api(f.url.replace(/\/$/, ""), "/users/me", { headers: authHead(f.user, f.pass) });
      if (!res.ok) throw new Error(`HTTP ${res.status} — ตรวจสอบ username/password`);
      const me = await res.json();
      onLogin({ ...f, url: f.url.replace(/\/$/, ""), displayName: me.name, roles: me.roles });
    } catch (e) { setErr(e.message); }
    setLoading(false);
  };

  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <style>{CSS}</style>
      <div className="fade" style={{ width: "100%", maxWidth: 420, background: "var(--bg2)", border: "1px solid var(--border)", borderRadius: 20, padding: "40px 36px", boxShadow: "0 24px 64px rgba(0,0,0,0.5)" }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div style={{ fontSize: 32, marginBottom: 8 }}>⚡</div>
          <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 18, fontWeight: 700, color: "var(--text)", letterSpacing: ".02em" }}>WP Site Manager</div>
          <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4, fontFamily: "'JetBrains Mono'" }}>vanvaew.com · REST API</div>
        </div>

        {[
          { key: "url", lbl: "Site URL", ph: "https://www.vanvaew.com", type: "url" },
          { key: "user", lbl: "Username", ph: "admin / vanvaew", type: "text" },
          { key: "pass", lbl: "Application Password", ph: "xxxx xxxx xxxx xxxx xxxx xxxx", type: "password" },
        ].map(({ key, lbl, ph, type }) => (
          <div key={key} style={{ marginBottom: 16 }}>
            <label style={{ display: "block", fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 6 }}>{lbl}</label>
            <input type={type} placeholder={ph} value={f[key]} onChange={e => setF(p => ({ ...p, [key]: e.target.value }))}
              style={{ ...inputStyle, fontSize: 13 }}
              onFocus={e => e.target.style.borderColor = "var(--green)"}
              onBlur={e => e.target.style.borderColor = "var(--border2)"}
              onKeyDown={e => e.key === "Enter" && go()}
            />
          </div>
        ))}

        {err && <div style={{ marginBottom: 14, padding: "10px 12px", background: "var(--red-bg)", border: "1px solid var(--red)33", borderRadius: 8, color: "var(--red)", fontSize: 12, fontFamily: "'JetBrains Mono'" }}>{err}</div>}

        <button onClick={go} disabled={loading || !f.url || !f.user || !f.pass}
          style={{ width: "100%", padding: "12px", background: loading ? "var(--bg3)" : "var(--green)", border: "none", borderRadius: 10, color: loading ? "var(--muted)" : "#000", fontWeight: 700, fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, transition: "background .2s" }}>
          {loading ? <><Spin /> กำลังเชื่อมต่อ...</> : "→ เข้าสู่ระบบ"}
        </button>
      </div>
    </div>
  );
};

// ── Main App
export default function App() {
  const [cred, setCred] = useState(null);
  const [tab, setTab] = useState("posts");
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState(null); // { type, item }
  const [toast, setToast] = useState({ msg: "", type: "ok" });
  const [saving, setSaving] = useState(false);
  const [search, setSearch] = useState("");
  const [creating, setCreating] = useState(false);

  const showToast = (msg, type = "ok") => {
    setToast({ msg, type });
    setTimeout(() => setToast({ msg: "", type: "ok" }), 3500);
  };

  // ── Fetch list
  const fetchList = useCallback(async (type) => {
    if (!cred) return;
    setLoading(true); setItems([]); setEditing(null); setSearch("");
    try {
      const endpoint = type === "posts" ? "/posts?per_page=50&_fields=id,title,status,date,link" :
                       type === "pages" ? "/pages?per_page=50&_fields=id,title,status,date,link" : "";
      const res = await api(cred.url, endpoint, { headers: authHead(cred.user, cred.pass) });
      if (!res.ok) throw new Error("โหลดไม่ได้");
      setItems(await res.json());
    } catch (e) { showToast("โหลดล้มเหลว: " + e.message, "error"); }
    setLoading(false);
  }, [cred]);

  useEffect(() => { if (cred && (tab === "posts" || tab === "pages")) fetchList(tab); }, [tab, cred]);

  // ── Open editor → fetch full content
  const openEdit = async (item, type) => {
    setEditing({ type, item: { ...item, content: { rendered: "" }, excerpt: { rendered: "" } }, loading: true });
    try {
      const res = await api(cred.url, `/${type}/${item.id}?context=edit`, { headers: authHead(cred.user, cred.pass) });
      const full = await res.json();
      setEditing({ type, item: full, loading: false });
    } catch (e) { showToast("โหลด content ล้มเหลว", "error"); }
  };

  // ── Save (update)
  const saveEdit = async () => {
    if (!editing) return;
    setSaving(true);
    try {
      const { type, item } = editing;
      const body = {
        title: item.title?.raw ?? item.title?.rendered ?? "",
        content: item.content?.raw ?? item.content?.rendered ?? "",
        excerpt: item.excerpt?.raw ?? item.excerpt?.rendered ?? "",
        status: item.status,
      };
      const res = await api(cred.url, `/${type}/${item.id}`, {
        method: "POST",
        headers: authHead(cred.user, cred.pass),
        body: JSON.stringify(body),
      });
      if (!res.ok) {
        const err = await res.json();
        throw new Error(err.message || `HTTP ${res.status}`);
      }
      showToast(`✓ บันทึกสำเร็จ — ${item.title?.rendered || item.title?.raw || ""}`, "ok");
      fetchList(type);
      setEditing(null);
    } catch (e) { showToast("บันทึกล้มเหลว: " + e.message, "error"); }
    setSaving(false);
  };

  // ── Create new
  const createNew = async (type, data) => {
    setSaving(true);
    try {
      const res = await api(cred.url, `/${type}`, {
        method: "POST",
        headers: authHead(cred.user, cred.pass),
        body: JSON.stringify(data),
      });
      if (!res.ok) {
        const err = await res.json();
        throw new Error(err.message || `HTTP ${res.status}`);
      }
      const created = await res.json();
      showToast(`✓ สร้างสำเร็จ!`, "ok");
      setCreating(false);
      fetchList(type);
      openEdit(created, type);
    } catch (e) { showToast("สร้างล้มเหลว: " + e.message, "error"); }
    setSaving(false);
  };

  // ── Delete
  const deleteItem = async (type, id, title) => {
    if (!window.confirm(`⚠️ ยืนยันการลบ "${title}"?\nการกระทำนี้ไม่สามารถย้อนกลับได้`)) return;
    try {
      const res = await api(cred.url, `/${type}/${id}?force=false`, {
        method: "DELETE",
        headers: authHead(cred.user, cred.pass),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      showToast(`🗑 ย้ายไป Trash แล้ว`, "warn");
      setItems(prev => prev.filter(i => i.id !== id));
      if (editing?.item?.id === id) setEditing(null);
    } catch (e) { showToast("ลบล้มเหลว: " + e.message, "error"); }
  };

  if (!cred) return <LoginScreen onLogin={setCred} />;

  const filtered = items.filter(i => {
    const t = (i.title?.rendered || "").toLowerCase();
    return t.includes(search.toLowerCase());
  });

  const navItems = [
    { id: "posts", icon: "📝", label: "โพสต์" },
    { id: "pages", icon: "📄", label: "Pages" },
    { id: "homepage", icon: "🏠", label: "Homepage" },
  ];

  return (
    <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
      <style>{CSS}</style>
      <Toast {...toast} />

      {/* ── Sidebar */}
      <div style={{ width: 200, flexShrink: 0, background: "var(--bg2)", borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column", padding: "20px 0" }}>
        <div style={{ padding: "0 16px 20px", borderBottom: "1px solid var(--border)" }}>
          <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 13, fontWeight: 700, color: "var(--text)" }}>⚡ WP Manager</div>
          <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 3, fontFamily: "'JetBrains Mono'", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {cred.url.replace(/https?:\/\//, "")}
          </div>
          <div style={{ marginTop: 6, fontSize: 11, color: "var(--green)", fontFamily: "'JetBrains Mono'" }}>
            ● {cred.displayName}
          </div>
        </div>

        <nav style={{ flex: 1, padding: "12px 8px" }}>
          {navItems.map(n => (
            <button key={n.id} onClick={() => setTab(n.id)}
              style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", padding: "9px 12px", borderRadius: 8, border: "none", background: tab === n.id ? "var(--green-bg)" : "transparent", color: tab === n.id ? "var(--green)" : "var(--muted)", fontSize: 13, fontWeight: tab === n.id ? 600 : 400, textAlign: "left", transition: "all .15s", marginBottom: 2 }}>
              <span>{n.icon}</span>{n.label}
            </button>
          ))}
        </nav>

        <div style={{ padding: "12px 8px", borderTop: "1px solid var(--border)" }}>
          <button onClick={() => { setCred(null); setItems([]); setEditing(null); }}
            style={{ width: "100%", padding: "8px 12px", borderRadius: 8, border: "none", background: "transparent", color: "var(--sub)", fontSize: 12, textAlign: "left", fontFamily: "'Sarabun'" }}>
            ← ออกจากระบบ
          </button>
        </div>
      </div>

      {/* ── Main Content */}
      <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>

        {/* List panel */}
        {(tab === "posts" || tab === "pages") && (
          <div style={{ width: editing ? 320 : "100%", flexShrink: 0, borderRight: editing ? "1px solid var(--border)" : "none", display: "flex", flexDirection: "column", overflow: "hidden", transition: "width .2s" }}>
            {/* Toolbar */}
            <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", display: "flex", gap: 10, alignItems: "center" }}>
              <input placeholder={`ค้นหา ${tab === "posts" ? "โพสต์" : "Page"}...`} value={search} onChange={e => setSearch(e.target.value)}
                style={{ ...inputStyle, flex: 1, padding: "8px 12px", fontSize: 13 }}
                onFocus={e => e.target.style.borderColor = "var(--green)"}
                onBlur={e => e.target.style.borderColor = "var(--border2)"}
              />
              <button onClick={() => setCreating(true)}
                style={{ flexShrink: 0, padding: "8px 14px", background: "var(--green)", border: "none", borderRadius: 8, color: "#000", fontWeight: 700, fontSize: 13, whiteSpace: "nowrap" }}>
                + สร้างใหม่
              </button>
              <button onClick={() => fetchList(tab)}
                style={{ flexShrink: 0, padding: "8px 10px", background: "var(--bg3)", border: "1px solid var(--border)", borderRadius: 8, color: "var(--muted)", fontSize: 13 }}>
                ↻
              </button>
            </div>

            {/* List */}
            <div style={{ flex: 1, overflowY: "auto", padding: "8px" }}>
              {loading && (
                <div style={{ display: "flex", flexDirection: "column", gap: 6, padding: 8 }}>
                  {Array(6).fill(0).map((_, i) => (
                    <div key={i} style={{ height: 60, background: "var(--bg3)", borderRadius: 8, animation: "pulse 1.4s infinite", animationDelay: `${i * 0.1}s` }} />
                  ))}
                </div>
              )}

              {!loading && filtered.map(item => (
                <div key={item.id}
                  onClick={() => openEdit(item, tab)}
                  style={{
                    padding: "12px 14px", borderRadius: 10, marginBottom: 4,
                    background: editing?.item?.id === item.id ? "var(--bg3)" : "transparent",
                    border: `1px solid ${editing?.item?.id === item.id ? "var(--border2)" : "transparent"}`,
                    cursor: "pointer", transition: "all .15s",
                    display: "flex", alignItems: "flex-start", gap: 10,
                  }}
                  onMouseEnter={e => { if (editing?.item?.id !== item.id) e.currentTarget.style.background = "var(--bg3)"; }}
                  onMouseLeave={e => { if (editing?.item?.id !== item.id) e.currentTarget.style.background = "transparent"; }}
                >
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}
                      dangerouslySetInnerHTML={{ __html: item.title?.rendered || "(ไม่มีชื่อ)" }} />
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
                      <Badge s={item.status} />
                      <span style={{ fontSize: 11, color: "var(--sub)", fontFamily: "'JetBrains Mono'" }}>#{item.id}</span>
                    </div>
                  </div>
                  <button onClick={e => { e.stopPropagation(); deleteItem(tab, item.id, item.title?.rendered || ""); }}
                    style={{ flexShrink: 0, padding: "4px 8px", background: "transparent", border: "none", color: "var(--sub)", fontSize: 14, borderRadius: 6, transition: "color .15s" }}
                    onMouseEnter={e => e.currentTarget.style.color = "var(--red)"}
                    onMouseLeave={e => e.currentTarget.style.color = "var(--sub)"}
                    title="ย้ายไป Trash"
                  >🗑</button>
                </div>
              ))}

              {!loading && filtered.length === 0 && (
                <div style={{ textAlign: "center", padding: "40px 20px", color: "var(--muted)", fontSize: 13 }}>
                  {search ? "ไม่พบผลลัพธ์" : `ไม่มี ${tab === "posts" ? "โพสต์" : "Page"}`}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Editor panel */}
        {editing && (
          <div className="fade" style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
            {/* Editor header */}
            <div style={{ padding: "14px 20px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 12 }}>
              <button onClick={() => setEditing(null)}
                style={{ padding: "6px 10px", background: "var(--bg3)", border: "1px solid var(--border)", borderRadius: 8, color: "var(--muted)", fontSize: 13 }}>
                ← กลับ
              </button>
              <div style={{ flex: 1, fontFamily: "'JetBrains Mono'", fontSize: 12, color: "var(--muted)" }}>
                #{editing.item.id} · {editing.type}
              </div>
              {editing.item.link && (
                <a href={editing.item.link} target="_blank" rel="noreferrer"
                  style={{ fontSize: 12, color: "var(--blue)", textDecoration: "none", fontFamily: "'JetBrains Mono'" }}>
                  ↗ ดูบนเว็บ
                </a>
              )}
              <select value={editing.item.status} onChange={e => setEditing(p => ({ ...p, item: { ...p.item, status: e.target.value } }))}
                style={{ padding: "6px 10px", background: "var(--bg3)", border: "1px solid var(--border2)", borderRadius: 8, color: "var(--text)", fontSize: 13 }}>
                <option value="publish">เผยแพร่</option>
                <option value="draft">ร่าง</option>
                <option value="private">ส่วนตัว</option>
                <option value="pending">รอตรวจ</option>
              </select>
              <button onClick={saveEdit} disabled={saving || editing.loading}
                style={{ padding: "8px 20px", background: saving ? "var(--bg3)" : "var(--green)", border: "none", borderRadius: 8, color: saving ? "var(--muted)" : "#000", fontWeight: 700, fontSize: 13, display: "flex", alignItems: "center", gap: 6 }}>
                {saving ? <><Spin /> กำลังบันทึก...</> : "💾 บันทึก"}
              </button>
            </div>

            {editing.loading ? (
              <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted)", gap: 10 }}>
                <Spin /> กำลังโหลด...
              </div>
            ) : (
              <div style={{ flex: 1, overflowY: "auto", padding: "24px" }}>
                {/* Title */}
                <div style={{ marginBottom: 20 }}>
                  <label style={{ display: "block", fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 6 }}>ชื่อเรื่อง (Title)</label>
                  <input value={editing.item.title?.raw ?? editing.item.title?.rendered ?? ""}
                    onChange={e => setEditing(p => ({ ...p, item: { ...p.item, title: { ...p.item.title, raw: e.target.value } } }))}
                    style={{ ...inputStyle, fontSize: 18, fontWeight: 700, padding: "12px 14px" }}
                    onFocus={e => e.target.style.borderColor = "var(--green)"}
                    onBlur={e => e.target.style.borderColor = "var(--border2)"}
                    placeholder="ชื่อบทความ..."
                  />
                </div>

                {/* Excerpt */}
                <div style={{ marginBottom: 20 }}>
                  <label style={{ display: "block", fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 6 }}>สรุปย่อ (Excerpt)</label>
                  <textarea rows={3} value={editing.item.excerpt?.raw ?? editing.item.excerpt?.rendered ?? ""}
                    onChange={e => setEditing(p => ({ ...p, item: { ...p.item, excerpt: { ...p.item.excerpt, raw: e.target.value } } }))}
                    style={{ ...inputStyle, minHeight: 80 }}
                    onFocus={e => e.target.style.borderColor = "var(--green)"}
                    onBlur={e => e.target.style.borderColor = "var(--border2)"}
                    placeholder="คำอธิบายสั้นๆ..."
                  />
                </div>

                {/* Content */}
                <div>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
                    <label style={{ fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em" }}>เนื้อหา (Content HTML)</label>
                    <span style={{ fontSize: 11, color: "var(--sub)", fontFamily: "'JetBrains Mono'" }}>
                      {(editing.item.content?.raw ?? "").length} ตัวอักษร
                    </span>
                  </div>
                  <textarea rows={22}
                    value={editing.item.content?.raw ?? editing.item.content?.rendered ?? ""}
                    onChange={e => setEditing(p => ({ ...p, item: { ...p.item, content: { ...p.item.content, raw: e.target.value } } }))}
                    style={{ ...inputStyle, fontFamily: "'JetBrains Mono'", fontSize: 12, minHeight: 420, lineHeight: 1.6 }}
                    onFocus={e => e.target.style.borderColor = "var(--green)"}
                    onBlur={e => e.target.style.borderColor = "var(--border2)"}
                    placeholder="<p>เนื้อหาบทความ HTML...</p>"
                    spellCheck={false}
                  />
                  <div style={{ marginTop: 8, padding: "8px 12px", background: "var(--bg3)", borderRadius: 8, fontSize: 11, color: "var(--sub)", fontFamily: "'JetBrains Mono'", lineHeight: 1.8 }}>
                    💡 รองรับ HTML ตัวอย่าง: &lt;p&gt;...&lt;/p&gt; · &lt;h2&gt;...&lt;/h2&gt; · &lt;ul&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ul&gt; · &lt;strong&gt;...&lt;/strong&gt; · &lt;a href="..."&gt;...&lt;/a&gt;
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Homepage Tab */}
        {tab === "homepage" && <HomepageEditor cred={cred} showToast={showToast} />}

        {/* Empty state */}
        {(tab === "posts" || tab === "pages") && !editing && !loading && items.length > 0 && (
          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted)", flexDirection: "column", gap: 12 }}>
            <div style={{ fontSize: 48 }}>👆</div>
            <div style={{ fontSize: 14 }}>เลือก{tab === "posts" ? "โพสต์" : "Page"}ที่ต้องการแก้ไข</div>
          </div>
        )}
      </div>

      {/* Create Modal */}
      {creating && <CreateModal type={tab} onClose={() => setCreating(false)} onCreate={createNew} saving={saving} />}
    </div>
  );
}

// ── Homepage Editor
function HomepageEditor({ cred, showToast }) {
  const [pages, setPages] = useState([]);
  const [hp, setHp] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    (async () => {
      setLoading(true);
      try {
        // Get reading settings to find homepage ID
        const settRes = await fetch(`${cred.url}/wp-json`, { headers: authHead(cred.user, cred.pass) });
        // Fallback: get front page via pages list
        const pRes = await api(cred.url, "/pages?per_page=50&_fields=id,title,status", { headers: authHead(cred.user, cred.pass) });
        const ps = await pRes.json();
        setPages(ps);

        // Try to get the settings
        const optRes = await fetch(`${cred.url}/wp-json/wp/v2/settings`, { headers: authHead(cred.user, cred.pass) });
        if (optRes.ok) {
          const opts = await optRes.json();
          const frontId = opts.page_on_front;
          if (frontId) {
            const fpRes = await api(cred.url, `/pages/${frontId}?context=edit`, { headers: authHead(cred.user, cred.pass) });
            if (fpRes.ok) { setHp(await fpRes.json()); }
          }
        }
      } catch (e) { }
      setLoading(false);
    })();
  }, [cred]);

  const loadPage = async (id) => {
    setLoading(true);
    const res = await api(cred.url, `/pages/${id}?context=edit`, { headers: authHead(cred.user, cred.pass) });
    if (res.ok) setHp(await res.json());
    setLoading(false);
  };

  const save = async () => {
    if (!hp) return;
    setSaving(true);
    try {
      const res = await api(cred.url, `/pages/${hp.id}`, {
        method: "POST",
        headers: authHead(cred.user, cred.pass),
        body: JSON.stringify({
          title: hp.title?.raw ?? hp.title?.rendered,
          content: hp.content?.raw ?? hp.content?.rendered,
          status: hp.status,
        }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      showToast("✓ บันทึก Homepage สำเร็จ!", "ok");
    } catch (e) { showToast("บันทึกล้มเหลว: " + e.message, "error"); }
    setSaving(false);
  };

  return (
    <div className="fade" style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ padding: "14px 20px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ fontWeight: 700, fontSize: 14 }}>🏠 แก้ไข Homepage</div>
        <div style={{ flex: 1 }} />
        <select onChange={e => loadPage(e.target.value)} style={{ padding: "6px 10px", background: "var(--bg3)", border: "1px solid var(--border2)", borderRadius: 8, color: "var(--text)", fontSize: 13 }}>
          <option value="">— เลือก Page —</option>
          {pages.map(p => <option key={p.id} value={p.id}>{p.title?.rendered || `#${p.id}`}</option>)}
        </select>
        {hp && (
          <button onClick={save} disabled={saving}
            style={{ padding: "8px 20px", background: saving ? "var(--bg3)" : "var(--green)", border: "none", borderRadius: 8, color: saving ? "var(--muted)" : "#000", fontWeight: 700, fontSize: 13, display: "flex", alignItems: "center", gap: 6 }}>
            {saving ? <><Spin /> บันทึก...</> : "💾 บันทึก"}
          </button>
        )}
      </div>

      {loading ? (
        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 10, color: "var(--muted)" }}><Spin /> กำลังโหลด...</div>
      ) : !hp ? (
        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12, color: "var(--muted)" }}>
          <div style={{ fontSize: 40 }}>🏠</div>
          <div>เลือก Page ที่เป็น Homepage จาก dropdown ด้านบน</div>
          <div style={{ fontSize: 12, color: "var(--sub)" }}>ปกติคือ Page ชื่อ "Home" หรือ "หน้าแรก"</div>
        </div>
      ) : (
        <div style={{ flex: 1, overflowY: "auto", padding: 24 }}>
          <div style={{ marginBottom: 20 }}>
            <label style={{ display: "block", fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 6 }}>ชื่อหน้า</label>
            <input value={hp.title?.raw ?? hp.title?.rendered ?? ""}
              onChange={e => setHp(p => ({ ...p, title: { ...p.title, raw: e.target.value } }))}
              style={{ ...inputStyle, fontSize: 18, fontWeight: 700, padding: "12px 14px" }}
              onFocus={e => e.target.style.borderColor = "var(--green)"}
              onBlur={e => e.target.style.borderColor = "var(--border2)"}
            />
          </div>
          <div>
            <label style={{ display: "block", fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 6 }}>เนื้อหา Homepage (HTML)</label>
            <textarea rows={26}
              value={hp.content?.raw ?? hp.content?.rendered ?? ""}
              onChange={e => setHp(p => ({ ...p, content: { ...p.content, raw: e.target.value } }))}
              style={{ ...inputStyle, fontFamily: "'JetBrains Mono'", fontSize: 12, lineHeight: 1.6, minHeight: 500 }}
              onFocus={e => e.target.style.borderColor = "var(--green)"}
              onBlur={e => e.target.style.borderColor = "var(--border2)"}
              spellCheck={false}
            />
          </div>
        </div>
      )}
    </div>
  );
}

// ── Create Modal
function CreateModal({ type, onClose, onCreate, saving }) {
  const [f, setF] = useState({ title: "", content: "", status: "draft" });
  const lbl = type === "posts" ? "โพสต์ใหม่" : "Page ใหม่";

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 500, padding: 20 }}>
      <div className="fade" style={{ width: "100%", maxWidth: 520, background: "var(--bg2)", border: "1px solid var(--border2)", borderRadius: 16, padding: 32, boxShadow: "0 24px 64px rgba(0,0,0,0.6)" }}>
        <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 24 }}>+ สร้าง{lbl}</div>
        <div style={{ marginBottom: 16 }}>
          <label style={{ display: "block", fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 6 }}>ชื่อเรื่อง</label>
          <input value={f.title} onChange={e => setF(p => ({ ...p, title: e.target.value }))}
            style={{ ...inputStyle, fontSize: 15 }}
            onFocus={e => e.target.style.borderColor = "var(--green)"}
            onBlur={e => e.target.style.borderColor = "var(--border2)"}
            placeholder={type === "posts" ? "ชื่อบทความ..." : "ชื่อหน้า..."}
            autoFocus
          />
        </div>
        <div style={{ marginBottom: 20 }}>
          <label style={{ display: "block", fontSize: 11, color: "var(--muted)", fontFamily: "'JetBrains Mono'", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 6 }}>สถานะ</label>
          <select value={f.status} onChange={e => setF(p => ({ ...p, status: e.target.value }))}
            style={{ ...inputStyle, height: "auto", padding: "9px 12px" }}>
            <option value="draft">ร่าง (draft)</option>
            <option value="publish">เผยแพร่ทันที</option>
          </select>
        </div>
        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
          <button onClick={onClose} style={{ padding: "9px 20px", background: "var(--bg3)", border: "1px solid var(--border)", borderRadius: 8, color: "var(--muted)", fontSize: 14 }}>ยกเลิก</button>
          <button onClick={() => onCreate(type, f)} disabled={saving || !f.title}
            style={{ padding: "9px 20px", background: f.title ? "var(--green)" : "var(--bg3)", border: "none", borderRadius: 8, color: f.title ? "#000" : "var(--muted)", fontWeight: 700, fontSize: 14, display: "flex", alignItems: "center", gap: 6 }}>
            {saving ? <><Spin /> กำลังสร้าง...</> : `+ สร้าง${lbl}`}
          </button>
        </div>
      </div>
    </div>
  );
}<b>All 404 Redirect to Homepage</b> has detected that the target URL is invalid. This will cause an infinite loop redirection. Please go to the plugin settings and correct the target link!