{Ic.tickets} [ Support inbox · pen + helmet ]

Tickets {openCt} OPEN · {pendCt} PENDING · {tickets.length} TOTAL

{tickets.map((t) => (

setSel(t.id)}> {t.id}

{t.subject}

{t.customerName} · {t.product} · {fmtDay(t.opened)}

{t.status}

))}

{active ? (

{active.subject}

{active.id} · {active.customerName} · {active.customer} · {active.product}

{active.status === "closed" ? : }

{active.thread.map((m, i) => (

{m.who === "admin" ? "Admin" : active.customerName} · {fmtDate(m.when)}

{m.body}

))} {active.status === "closed" && (

— closed by {active.closedBy || "user"} {active.closedAt ? "· " + fmtDate(active.closedAt) : ""} —

)}

setDraft(e.target.value)}
                disabled={active.status === "closed"} />
              <button className="send-btn" onClick={sendReply} disabled={!draft.trim() || active.status === "closed"}>
                Reply <span>→</span>
              </button>
            </div>
          </div>
        ) : (
          <div className="empty"><b>No ticket selected</b>Pick a ticket from the list.</div>
        )}
      </div>
    </div>
  );
}

/* ============== Forum messages — with 5 heart rating ============== */
function ForumPanel({ messages, setMessages, showToast }) {
  const setHearts = (id, n) => {
    setMessages(messages.map(m => m.id === id ? { ...m, hearts: m.hearts === n ? n - 1 : n } : m));
  };
  return (
    <div className="admin-panel">
      <div className="eyebrow">{Ic.forum} [ Private messages from the forum ]</div>
      <h2>Inbox <span className="count">{messages.length} MESSAGES</span></h2>
      <div className="forum-grid">
        {messages.map((m) => (
          <div className="forum-msg" key={m.id}>
            <div className="who-avatar">{initials(m.who)}</div>
            <div>
              <div className="head">
                <span className="who">{m.who}<span className="em">{m.email}</span></span>
                <span className="when">{fmtDay(m.when)}</span>
              </div>
              <div className="body">{m.body}</div>
              <div className="acts">
                <button className="ad-action" onClick={() => showToast("Reply composer (mock)")}>Reply</button>
                <button className="ad-action" onClick={() => showToast("Opened on forum")}>Open thread</button>
                <button className="ad-action danger" onClick={() => setMessages(messages.filter(x => x.id !== m.id))}>Archive</button>
              </div>
            </div>
            <div className="hearts" title="Rate this message">
              <span className="lbl">Rate</span>
              {[1,2,3,4,5].map(n => (
                <button key={n} className={n <= m.hearts ? "on" : ""} onClick={() => setHearts(m.id, n)} aria-label={"Rate " + n + " hearts"}>
                  <HeartIcon filled={n <= m.hearts} />
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============== Live chat ============== */
function LiveChatPanel({ chats, setChats, showToast }) {
  const [sel, setSel] = useState(chats[0]?.id);
  const [draft, setDraft] = useState("");
  const scrollRef = useRef(null);
  const active = chats.find(c => c.id === sel);

useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [sel, active?.messages.length]);

const openWith = (id) => {
    setSel(id);
    setChats(chats.map(c => c.id === id ? { ...c, live: true } : c));
    showToast("Live chat opened");
  };

return (
    <div className="admin-panel">
      <div className="eyebrow">{Ic.chat} [ Live chat ]</div>
      <h2>Conversations <span className="count">{chats.filter(c => c.live).length} LIVE · {chats.length} TOTAL</span></h2>
      <div className="chat-shell">
        <div className="chat-list">
          {chats.map((c) => (
            <div key={c.id}
              className={"it" + (c.live ? " live" : "") + (sel === c.id ? " active" : "")}
              onClick={() => setSel(c.id)}>
              <span className="dot"></span>
              <div className="avatar">{initials(c.who)}</div>
              <div style={{ minWidth: 0 }}>
                <div className="name">{c.who}</div>
                <div className="last" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.last}</div>
              </div>
            </div>
          ))}
        </div>
        {active ? (
          <div className="chat-stage">
            <div className="ch-head">
              <span className="name">{active.who}<span className="em">{active.email}</span></span>
              {active.live
                ? <span className="live-pill">Live now</span>
                : <button className="ad-action primary" onClick={() => openWith(active.id)}>Open live chat</button>}
            </div>
            <div className="scroll" ref={scrollRef}>
              {active.messages.map((m, i) => (
                <div className={"bubble " + m.who} key={i} style={{ alignSelf: m.who === "admin" ? "flex-end" : "flex-start" }}>
                  <div className="who">{m.who === "admin" ? "You" : active.who} · {fmtDate(m.when)}</div>
                  {m.body}
                </div>
              ))}
            </div>
            <div className="reply">
              <input type="text" placeholder={"Message " + active.who + "…"}
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                onKeyDown={(e) => { if (e.key === "Enter") send(); }} />
              <button className="send-btn" onClick={send} disabled={!draft.trim()}>Send <span>→</span></button>
            </div>
          </div>
        ) : (
          <div className="empty"><b>No customer selected</b>Pick a conversation on the left.</div>
        )}
      </div>
    </div>
  );
}

/* ============== Feature requests ============== */
function FeaturesPanel({ features }) {
  const grouped = useMemo(() => {
    const m = {};
    features.forEach(f => { (m[f.product] ||= []).push(f); });
    Object.values(m).forEach(arr => arr.sort((a,b) => b.votes - a.votes));
    return m;
  }, [features]);

const productOrder = Object.keys(grouped).sort();

return (
    <div className="admin-panel">
      <div className="eyebrow">{Ic.features} [ Feature requests · forum aggregate ]</div>
      <h2>Roadmap candidates <span className="count">{features.length} REQUESTS · {productOrder.length} PRODUCTS</span></h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {productOrder.map((prod) => (
          <div className="fr-product" key={prod}>
            <h3><span className="pname">{prod}</span> <span className="ct">{grouped[prod].length} requests · {grouped[prod].reduce((s,r) => s + r.votes, 0)} votes</span></h3>
            <div className="fr-list">
              {grouped[prod].map((f, i) => (
                <div className={"fr-item" + (i === 0 ? " top" : "")} key={f.id}>
                  <div className="votes">{f.votes}<span className="lbl">votes</span></div>
                  <div>
                    <div className="ftitle">{f.title}</div>
                    <div className="fmeta">
                      {i === 0 && <span className="crown">★ TOP</span>}
                      Filed by {f.author}
                    </div>
                  </div>
                  <div className="fbtns">
                    <button className="ad-action primary">Add to roadmap</button>
                    <button className="ad-action">View thread</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============== Mail compose (existing) ============== */
function ComposeMail({ customers, onSent }) {
  const [to, setTo] = useState("ALL");
  const [subject, setSubject] = useState("");
  const [body, setBody] = useState("");
  const [busy, setBusy] = useState(false);
  const canSend = !!subject.trim() && !!body.trim() && (to === "ALL" ? customers.length > 0 : !!to);

return (
    <div className="admin-panel">
      <div className="eyebrow">{Ic.mail} [ Compose mail ]</div>
      <h2>Send a broadcast <span className="count">FROM XOVND</span></h2>
      <form className="compose-form" onSubmit={send}>
        <div className="from"><b>From:</b> {FROM_ADDR}</div>
        <div className="row">
          <label><span>To</span>
            <select value={to} onChange={(e) => setTo(e.target.value)}>
              <option value="ALL">All clients ({customers.length})</option>
              {customers.map(c => <option key={c.email} value={c.email}>{c.email}</option>)}
            </select>
          </label>
          <label><span>Subject</span>
            <input type="text" placeholder="Spring drop — €40 off CLVSTER" value={subject} onChange={(e) => setSubject(e.target.value)} />
          </label>
        </div>
        <label><span>Body</span>
          <textarea placeholder={"Hi {{name}},\n\nWe've just shipped CLVSTER v1.0.3…"} value={body} onChange={(e) => setBody(e.target.value)} />
        </label>
        <button type="submit" className="send-btn" disabled={!canSend || busy}>{busy ? "Sending…" : "Send"} <span>→</span></button>
      </form>
    </div>
  );
}

function MailLog({ messages }) {
  return (
    <div className="admin-panel">
      <div className="eyebrow">{Ic.mail} [ Sent messages ]</div>
      <h2>Mail log <span className="count">{messages.length} SENT</span></h2>
      {messages.length === 0
        ? <div className="empty"><b>No mail sent yet</b>Compose your first message above.</div>
        : <div className="msg-log">
            {messages.map((m) => (
              <div className="msg-card" key={m.id}>
                <div className="h">
                  <span><span className="to">to:</span> {m.to.length} · {m.to.slice(0, 2).join(", ")}{m.to.length > 2 ? " +" + (m.to.length - 2) : ""}</span>
                  <span>{fmtDate(m.sentAt)}</span>
                </div>
                <div className="subj">{m.subject}</div>
                <div className="body">{m.body}</div>
              </div>
            ))}
          </div>
      }
    </div>
  );
}

/* ============== Overview (stats) ============== */
function OverviewPanel({ purchases, tickets, forum, features, chats, onJump }) {
  const totalRev = purchases.reduce((s,p) => s + p.amount, 0);
  const openTickets = tickets.filter(t => t.status !== "closed").length;
  const live = chats.filter(c => c.live).length;
  const stats = [
    { label: "Revenue · 90d",    big: "€" + totalRev,           sub: purchases.length + " orders",   to: "purchases" },
    { label: "Open tickets",     big: openTickets,              sub: tickets.length + " total",      to: "tickets"   },
    { label: "Forum DMs",        big: forum.length,             sub: "private inbox",                to: "forum"     },
    { label: "Live chats",       big: live,                     sub: chats.length + " open",         to: "chat"      },
    { label: "Feature requests", big: features.length,          sub: "sorted by product",            to: "features"  },
  ];
  return (
    <div className="admin-panel">
      <div className="eyebrow">{Ic.overview} [ Overview ]</div>
      <h2>Today, at a glance</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12 }}>
        {stats.map((s) => (
          <button key={s.to} className="ad-action" style={{
            background: "var(--black)", padding: "18px 18px 20px", textAlign: "left",
            display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start",
            letterSpacing: 0, textTransform: "none", fontSize: 13, color: "var(--white)",
            cursor: "pointer", lineHeight: 1.2,
          }} onClick={() => onJump(s.to)}>
            <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#807a6c", letterSpacing: "0.18em", textTransform: "uppercase" }}>{s.label}</span>
            <span style={{ fontFamily: "'Archivo Black'", fontSize: 30, lineHeight: 1, letterSpacing: "-0.02em" }}>{s.big}</span>
            <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#807a6c", letterSpacing: "0.08em" }}>{s.sub}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ============== Admin gate ============== */
const ADMIN_EMAIL = "stalactite3d@gmail.com";

function AdminGate({ children }) {
  const auth = window.useAuth();
  const [loginOpen, setLoginOpen] = useState(false);
  const isAdmin = auth.user && auth.user.email.toLowerCase() === ADMIN_EMAIL.toLowerCase();

if (isAdmin) return children;

const signedInButWrong = auth.user && !isAdmin;

<div style={{ maxWidth: 520, margin: "120px auto", padding: 32, border: "1px dashed #2a2722", textAlign: "center" }}>
        <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "var(--pink)", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 12 }}>
          [ Restricted area ]
        </div>
        <h1 style={{ fontFamily: "'Archivo Black'", fontSize: 38, margin: "0 0 14px", letterSpacing: "-0.02em", color: "var(--white)" }}>
          {signedInButWrong ? "Not your account." : "Admin only."}
        </h1>
        <p style={{ color: "#b5b0a2", fontSize: 14, lineHeight: 1.55, margin: "0 0 22px", textWrap: "pretty" }}>
          {signedInButWrong
            ? <>You're signed in as <b style={{ color: "var(--white)" }}>{auth.user.email}</b>. Admin tools are only available to the studio account.</>
            : "This page is for the XOVND studio. Sign in with the admin email to continue."}
        </p>
        <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
          {signedInButWrong
            ? <button className="send-btn" style={{ alignSelf: "auto" }} onClick={() => { auth.logout(); setLoginOpen(true); }}>
                Sign out & switch <span>→</span>
              </button>
            : <button className="send-btn" style={{ alignSelf: "auto" }} onClick={() => setLoginOpen(true)}>
                Sign in <span>→</span>
              </button>}
          <a href="index.html" className="ad-action" style={{ alignSelf: "center" }}>Back to site</a>
        </div>
        <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#4a463d", letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 28 }}>
          ADMIN · {ADMIN_EMAIL}
        </div>
      </div>

{window.LoginModal && (
        <window.LoginModal open={loginOpen} onClose={() => setLoginOpen(false)} onAuth={auth.login} />
      )}
    </div>
  );
}

/* ============== Main app ============== */
function AdminApp() {
  const [tab, setTab] = useState("overview");
  const [customers, setCustomers] = useState(window.xovndDB.getCustomers());
  const [messages, setMessages] = useState(window.xovndDB.getMessages());

const [purchases, setPurchases] = useState(() => ensureSeed(KEY_PURCHASES, SEED_PURCHASES));
  const [tickets,   setTickets]   = useState(() => ensureSeed(KEY_TICKETS, SEED_TICKETS));
  const [forum,     setForum]     = useState(() => ensureSeed(KEY_FORUM, SEED_FORUM));
  const [features,  setFeatures]  = useState(() => ensureSeed(KEY_FEATURES, SEED_FEATURES));
  const [chats,     setChats]     = useState(() => ensureSeed(KEY_CHATS, SEED_CHATS));

useEffect(() => writeObj(KEY_PURCHASES, purchases), [purchases]);
  useEffect(() => writeObj(KEY_TICKETS,   tickets),   [tickets]);
  useEffect(() => writeObj(KEY_FORUM,     forum),     [forum]);
  useEffect(() => writeObj(KEY_FEATURES,  features),  [features]);
  useEffect(() => writeObj(KEY_CHATS,     chats),     [chats]);

const [toast, setToast] = useState("");
  useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(""), 2200); return () => clearTimeout(t); }, [toast]);
  const showToast = (s) => setToast(s);

const copy = async (s) => { try { await navigator.clipboard.writeText(s); showToast("Copied · " + s); } catch { showToast("Copy failed"); } };

// listen for sign-ups
  useEffect(() => {
    const onStorage = () => {
      setCustomers(window.xovndDB.getCustomers());
      setMessages(window.xovndDB.getMessages());
    };
    window.addEventListener("storage", onStorage);
    return () => window.removeEventListener("storage", onStorage);
  }, []);

const tabs = [
    { id: "overview",  label: "Overview",  icon: Ic.overview  },
    { id: "purchases", label: "Purchases", icon: Ic.purchases, count: purchases.length },
    { id: "tickets",   label: "Support",   icon: Ic.tickets,   count: tickets.filter(t => t.status !== "closed").length },
    { id: "forum",     label: "Forum DMs", icon: Ic.forum,     count: forum.length },
    { id: "chat",      label: "Live chat", icon: Ic.chat,      count: chats.filter(c => c.live).length },
    { id: "features",  label: "Features",  icon: Ic.features,  count: features.length },
    { id: "mail",      label: "Broadcast", icon: Ic.mail,      count: messages.length },
  ];

return (
    <div className="admin-shell">
      <div className="admin-bar">
        <div className="left">
          <img src="assets/fluxus-mark.png" alt="" />
          <span className="wm">OVND</span>
          <span className="tag">Admin · hidden</span>
        </div>
        <div className="right">
          <span>{customers.length} clients · {purchases.length} sales · {tickets.filter(t => t.status !== "closed").length} open tickets</span>
          <span style={{ color: "#3a3630" }}>·</span>
          <a href="index.html">← Back to site</a>
        </div>
      </div>

<div className="admin-grid">
        {tab === "overview" && <OverviewPanel
          purchases={purchases} tickets={tickets} forum={forum} features={features} chats={chats}
          onJump={setTab} />}
        {tab === "purchases" && <PurchasesPanel purchases={purchases} onCopy={copy} />}
        {tab === "tickets"   && <TicketsPanel tickets={tickets} setTickets={setTickets} showToast={showToast} />}
        {tab === "forum"     && <ForumPanel messages={forum} setMessages={setForum} showToast={showToast} />}
        {tab === "chat"      && <LiveChatPanel chats={chats} setChats={setChats} showToast={showToast} />}
        {tab === "features"  && <FeaturesPanel features={features} />}
        {tab === "mail"      && (
          <>
            <ComposeMail customers={customers} onSent={(msg) => { setMessages(window.xovndDB.getMessages()); showToast(msg); }} />
            <MailLog messages={messages} />
          </>
        )}
      </div>

<div className={"admin-toast" + (toast ? " show" : "")}>{toast}</div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AdminGate><AdminApp /></AdminGate>);

Sales {purchases.length} ORDERS · €{purchases.reduce((s,p) => s + p.amount, 0)}

Tickets {openCt} OPEN · {pendCt} PENDING · {tickets.length} TOTAL

{active.subject}