// pages-admin.jsx — lightweight admin hub (content editing is done in Sanity Studio)

// ===========================================================================
// ADMIN DASHBOARD
// ===========================================================================
function AdminDashboard({ lang }) {
  lang = lang || window.AM_LANG || "en";
  var sd = window.SITE_DATA || { projects: [], journal: [], inquiries: [], settings: {} };
  var inquiries = sd.inquiries || [];
  var sanityConfigured = !!(window.SANITY_PROJECT_ID || sd._sanityProjectId);

  return (
    <AdminShell active="dash" crumb="Dashboard" lang={lang}>
      <div className="ph">
        <div>
          <div className="am-mono am-muted">{lang === "th" ? "ยินดีต้อนรับกลับ" : "Welcome back"}</div>
          <h2>{lang === "th" ? "ภาพรวมสตูดิโอ" : "Studio overview"}</h2>
        </div>
      </div>

      {/* Sanity Studio CTA */}
      <div style={{ background: "var(--ink)", color: "white", padding: "28px 32px", marginBottom: 28, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", color: "#847d6d", marginBottom: 8 }}>CONTENT MANAGEMENT</div>
          <div style={{ fontWeight: 700, fontSize: 20, marginBottom: 6 }}>Sanity Studio</div>
          <div style={{ fontSize: 13, color: "#9b9589" }}>
            {lang === "th"
              ? "แก้ไขผลงาน บทความ และการตั้งค่าได้ที่ Sanity Studio"
              : "Edit projects, journal articles, and site settings in Sanity Studio."}
          </div>
        </div>
        <a href="https://archsmatter.sanity.studio" target="_blank" rel="noopener"
           style={{ background: "white", color: "var(--ink)", padding: "12px 24px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.06em", textDecoration: "none", whiteSpace: "nowrap" }}>
          OPEN STUDIO ↗
        </a>
      </div>

      {/* KPI row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 28 }}>
        {[
          { lbl: lang === "th" ? "ผลงาน" : "Projects",  num: String(sd.projects.length) },
          { lbl: lang === "th" ? "บทความ" : "Articles",  num: String(sd.journal.length)  },
          { lbl: lang === "th" ? "การติดต่อ" : "Inquiries", num: String(inquiries.length)  },
        ].map(function(k, i) {
          return (
            <div key={i} className="am-card am-kpi">
              <div className="lbl">{k.lbl}</div>
              <div className="num" style={{ fontSize: 40 }}>{k.num}</div>
            </div>
          );
        })}
      </div>

      {/* Inquiries + Setup guide */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>

        {/* Inquiries */}
        <div className="am-card" style={{ padding: 0 }}>
          <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--line-soft)" }}>
            <div className="am-h3" style={{ fontSize: 16 }}>{lang === "th" ? "การติดต่อล่าสุด" : "Recent inquiries"}</div>
          </div>
          {inquiries.length === 0 ? (
            <div style={{ padding: "24px 20px", color: "var(--ink-3)", fontSize: 13 }}>
              {lang === "th" ? "ยังไม่มีการติดต่อ" : "No inquiries yet. Submit the Contact form on the public site to test."}
            </div>
          ) : (
            <table className="am-table">
              <thead><tr>
                <th>{lang === "th" ? "ชื่อ" : "Name"}</th>
                <th>{lang === "th" ? "อีเมล" : "Email"}</th>
                <th>{lang === "th" ? "ข้อความ" : "Message"}</th>
                <th>{lang === "th" ? "วันที่" : "Date"}</th>
              </tr></thead>
              <tbody>
                {inquiries.slice().reverse().map(function(inq, i) {
                  return (
                    <tr key={i}>
                      <td style={{ fontWeight: 600 }}>{inq.name || "—"}</td>
                      <td className="am-mono am-muted">{inq.email || "—"}</td>
                      <td style={{ maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{inq.message || "—"}</td>
                      <td className="am-mono am-muted">{inq.submitted_at ? inq.submitted_at.slice(0, 10) : "—"}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
          {inquiries.length > 0 && (
            <div style={{ padding: "10px 20px", borderTop: "1px solid var(--line-soft)" }}>
              <button className="am-btn ghost sm" onClick={function() {
                if (!window.confirm(lang === "th" ? "ล้างการติดต่อทั้งหมด?" : "Clear all inquiries?")) return;
                if (window.AM_SAVE) window.AM_SAVE("inquiries", []);
                window.location.reload();
              }}>
                {lang === "th" ? "ล้างทั้งหมด" : "Clear all"}
              </button>
            </div>
          )}
        </div>

        {/* Setup guide */}
        <div className="am-card">
          <div className="am-h3" style={{ fontSize: 15, marginBottom: 16 }}>
            {lang === "th" ? "วิธีตั้งค่า Sanity" : "Sanity setup"}
          </div>
          {[
            { n: "1", en: "Create a free account at sanity.io", th: "สร้างบัญชีฟรีที่ sanity.io" },
            { n: "2", en: "cd sanity && npm install", th: "cd sanity && npm install" },
            { n: "3", en: "npx sanity init — get your Project ID", th: "npx sanity init — รับ Project ID" },
            { n: "4", en: "Paste Project ID into data/data.js", th: "วาง Project ID ลงใน data/data.js" },
            { n: "5", en: "npm run deploy — publish your Studio", th: "npm run deploy — เผยแพร่ Studio" },
            { n: "6", en: "Add your content in Sanity Studio", th: "เพิ่มเนื้อหาใน Sanity Studio" },
          ].map(function(s, i) {
            return (
              <div key={i} style={{ display: "flex", gap: 12, padding: "10px 0", borderBottom: "1px solid var(--line-soft)", alignItems: "flex-start" }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--accent)", minWidth: 16, paddingTop: 2 }}>{s.n}</span>
                <span style={{ fontSize: 13 }}>{lang === "th" ? s.th : s.en}</span>
              </div>
            );
          })}
          <div className="am-mono am-muted" style={{ marginTop: 14, fontSize: 10 }}>
            {lang === "th" ? "ดู sanity/ ในโปรเจ็กต์สำหรับไฟล์ schema" : "See sanity/ in the repo for schema files."}
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

// ===========================================================================
// PLACEHOLDER — redirect users to Sanity Studio for content editing
// ===========================================================================
function AdminRedirect({ section, lang }) {
  lang = lang || window.AM_LANG || "en";
  var labels = {
    projects: { en: "Projects", th: "ผลงาน" },
    journal:  { en: "Journal",  th: "บทความ" },
    pages:    { en: "Pages",    th: "หน้าเว็บ" },
    media:    { en: "Media",    th: "สื่อ"    },
  };
  var lbl = labels[section] || { en: section, th: section };

  return (
    <AdminShell active={section} crumb={lang === "th" ? lbl.th : lbl.en} lang={lang}>
      <div style={{ padding: "60px 0", textAlign: "center" }}>
        <div className="am-eyebrow" style={{ marginBottom: 16 }}>CONTENT IS MANAGED IN</div>
        <div className="am-h3" style={{ marginBottom: 24 }}>Sanity Studio</div>
        <div className="am-body am-muted" style={{ marginBottom: 32, maxWidth: 400, margin: "0 auto 32px" }}>
          {lang === "th"
            ? "แก้ไข" + lbl.th + "ได้ที่ Sanity Studio ซึ่งทีมทุกคนเข้าใช้งานได้จากเบราว์เซอร์"
            : "Edit " + lbl.en.toLowerCase() + " in Sanity Studio — accessible to your whole team from any browser."}
        </div>
        <a href="https://archsmatter.sanity.studio" target="_blank" rel="noopener"
           className="am-btn sm" style={{ display: "inline-block", textDecoration: "none" }}>
          Open Sanity Studio ↗
        </a>
        <div style={{ marginTop: 12 }}>
          <button className="am-btn ghost sm" onClick={function() { if (window.AM_NAVIGATE) window.AM_NAVIGATE("admin"); }}>
            ← Back to dashboard
          </button>
        </div>
      </div>
    </AdminShell>
  );
}

function AdminProjectsIndex({ lang }) { return <AdminRedirect section="projects" lang={lang} />; }
function AdminEditProject({ lang })   { return <AdminRedirect section="projects" lang={lang} />; }
function AdminJournal({ lang })       { return <AdminRedirect section="journal"  lang={lang} />; }
function AdminEditPage({ lang })      { return <AdminRedirect section="pages"    lang={lang} />; }
function AdminMedia({ lang })         { return <AdminRedirect section="media"    lang={lang} />; }

Object.assign(window, { AdminDashboard, AdminProjectsIndex, AdminEditProject, AdminJournal, AdminEditPage, AdminMedia });