// community.jsx — Q&A community and the activity feed.
// Loaded from index.html as an ordered `text/babel` classic script (position 6 of 8).
// Classic scripts share one global scope — see docs/engineering/Patterns.md §9.

// ─── Community Page ─────────────────────────────────────────────────────────
function CommunityPage() {
  const [tab, setTab] = useState("faq");
  const [questions, setQuestions] = useState([]);
  const [features, setFeatures] = useState([]);
  const [selectedQ, setSelectedQ] = useState(null);
  const [answers, setAnswers] = useState([]);
  const [showAsk, setShowAsk] = useState(false);
  const [askTitle, setAskTitle] = useState("");
  const [askBody, setAskBody] = useState("");
  const [answerBody, setAnswerBody] = useState("");
  const isLoggedIn = !!localStorage.getItem("zs_token");

  const loadQuestions = (cat) => {
    fetch(`${API_BASE}/community/questions?category=${cat}&limit=50`)
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).then(d => setQuestions(d.questions || []));
  };
  const loadFeatures = () => {
    fetch(`${API_BASE}/community/features`)
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).then(d => setFeatures(d.features || []));
  };

  useEffect(() => {
    if (tab === "features") loadFeatures();
    else loadQuestions(tab);
  }, [tab]);

  const openQuestion = (q) => {
    setSelectedQ(q);
    fetch(`${API_BASE}/community/questions/${q.id}/answers`)
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).then(d => setAnswers(d.answers || []));
  };

  const submitQuestion = async () => {
    if (!askTitle || !askBody) return;
    try {
      await apiCall("/community/questions", {
        method: "POST", body: JSON.stringify({ title: askTitle, body: askBody }),
      });
      setShowAsk(false); setAskTitle(""); setAskBody("");
      loadQuestions(tab);
    } catch (e) { alert(e.message); }
  };

  const submitAnswer = async () => {
    if (!answerBody || !selectedQ) return;
    try {
      await apiCall(`/community/questions/${selectedQ.id}/answers`, {
        method: "POST", body: JSON.stringify({ body: answerBody }),
      });
      setAnswerBody("");
      openQuestion(selectedQ);
    } catch (e) { alert(e.message); }
  };

  const vote = async (featureId, dir) => {
    try {
      await apiCall(`/community/features/${featureId}/vote`, {
        method: "POST", body: JSON.stringify({ direction: dir }),
      });
      loadFeatures();
    } catch (e) { alert(e.message); }
  };

  const tabStyle = (t) => ({
    padding: "10px 20px", fontSize: 14, fontWeight: tab === t ? 600 : 400,
    color: tab === t ? "#22c55e" : "#666", border: "none",
    borderBottom: tab === t ? "2px solid #22c55e" : "2px solid transparent",
    background: "none", cursor: "pointer", fontFamily: "'DM Sans', sans-serif",
  });

  const statusColor = { open: "#22c55e", planned: "#3b82f6", in_progress: "#f59e0b", shipped: "#d97706", declined: "#6e6e6e" };

  return (
    <div style={{ fontFamily: "'DM Sans', sans-serif", minHeight: "100vh", background: "#fafafa" }}>
      <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 48px", background: "#0a0a0a", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
        <Logo light />
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="ghost" size="sm" onClick={() => (window.location.hash = "#/")}>Home</Button>
          {isLoggedIn
            ? <Button size="sm" onClick={() => (window.location.hash = "#/dashboard")}>Dashboard</Button>
            : <Button size="sm" onClick={() => (window.location.hash = "#/login")}>Sign in</Button>}
        </div>
      </nav>

      <div style={{ maxWidth: 900, margin: "0 auto", padding: "40px 24px" }}>
        <h1 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 8 }}>Community</h1>
        <p style={{ color: "#666", marginBottom: 32 }}>Get help, share knowledge, and vote on what we build next.</p>

        <div style={{ borderBottom: "1px solid #e5e5e5", marginBottom: 32, display: "flex", gap: 0 }}>
          <button type="button" style={tabStyle("faq")} onClick={() => { setTab("faq"); setSelectedQ(null); }}>FAQ</button>
          <button type="button" style={tabStyle("question")} onClick={() => { setTab("question"); setSelectedQ(null); }}>Questions</button>
          <button type="button" style={tabStyle("features")} onClick={() => { setTab("features"); setSelectedQ(null); }}>Feature Requests</button>
        </div>

        {tab === "features" ? (
          <div>
            {features.map(f => (
              <div key={f.id} style={{ display: "flex", gap: 16, padding: "16px 0", borderBottom: "1px solid #eee" }}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, minWidth: 48 }}>
                  <button type="button" aria-label="Vote up" onClick={() => vote(f.id, "up")} style={{ background: "none", border: "none", cursor: "pointer", fontSize: 18, color: f.my_vote === "up" ? "#22c55e" : "#6e6e6e" }}>&#9650;</button>
                  <span style={{ fontWeight: 700, fontSize: 16 }}>{f.up_votes - f.down_votes}</span>
                  <button type="button" aria-label="Vote down" onClick={() => vote(f.id, "down")} style={{ background: "none", border: "none", cursor: "pointer", fontSize: 18, color: f.my_vote === "down" ? "#ef4444" : "#6e6e6e" }}>&#9660;</button>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                    <span style={{ fontWeight: 600 }}>{f.title}</span>
                    <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 12, background: (statusColor[f.status] || "#6e6e6e") + "22", color: statusColor[f.status] || "#6e6e6e", fontWeight: 600 }}>{f.status.replace("_", " ")}</span>
                  </div>
                  {f.description && <p style={{ fontSize: 13, color: "#666" }}>{f.description}</p>}
                </div>
              </div>
            ))}
            {features.length === 0 && <p style={{ color: "#6e6e6e", textAlign: "center", padding: 40 }}>No feature requests yet.</p>}
          </div>
        ) : selectedQ ? (
          <div>
            <button type="button" onClick={() => setSelectedQ(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "#22c55e", fontWeight: 500, marginBottom: 16, fontSize: 14 }}>&larr; Back to list</button>
            <div style={{ background: "#fff", borderRadius: 12, padding: 24, border: "1px solid #e5e5e5", marginBottom: 24 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <h3 style={{ fontSize: 18, fontWeight: 600 }}>{selectedQ.title}</h3>
                {selectedQ.pinned && <span style={{ fontSize: 11, color: "#f59e0b", fontWeight: 600 }}>PINNED</span>}
              </div>
              <p style={{ color: "#444", lineHeight: 1.7, marginBottom: 12, whiteSpace: "pre-wrap" }}>{selectedQ.body}</p>
              <div style={{ fontSize: 12, color: "#6e6e6e" }}>
                {selectedQ.author_name} {selectedQ.author_type === "admin" && <span style={{ background: "#22c55e22", color: "#22c55e", padding: "1px 6px", borderRadius: 4, fontSize: 10, fontWeight: 600 }}>TEAM</span>}
                {" — "}{new Date(selectedQ.created_at).toLocaleDateString()}
              </div>
            </div>

            <h4 style={{ fontSize: 14, fontWeight: 600, color: "#666", marginBottom: 16 }}>{answers.length} {answers.length === 1 ? "answer" : "answers"}</h4>

            {answers.map(a => (
              <div key={a.id} style={{ background: "#fff", borderRadius: 12, padding: 20, border: a.accepted ? "1px solid #22c55e" : "1px solid #e5e5e5", marginBottom: 12 }}>
                {a.accepted && <div style={{ fontSize: 11, color: "#22c55e", fontWeight: 600, marginBottom: 8 }}>ACCEPTED ANSWER</div>}
                <p style={{ color: "#444", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>{a.body}</p>
                <div style={{ fontSize: 12, color: "#6e6e6e", marginTop: 8 }}>
                  {a.author_name} {a.author_type === "admin" && <span style={{ background: "#22c55e22", color: "#22c55e", padding: "1px 6px", borderRadius: 4, fontSize: 10, fontWeight: 600 }}>TEAM</span>}
                  {" — "}{new Date(a.created_at).toLocaleDateString()}
                </div>
              </div>
            ))}

            {isLoggedIn ? (
              <div style={{ marginTop: 24, background: "#fff", borderRadius: 12, padding: 20, border: "1px solid #e5e5e5" }}>
                <textarea aria-label="Your answer" value={answerBody} onChange={e => setAnswerBody(e.target.value)} placeholder="Write your answer..." rows={4}
                  style={{ width: "100%", padding: 12, border: "1px solid #e0e0e0", borderRadius: 8, fontSize: 14, fontFamily: "'DM Sans', sans-serif", resize: "vertical", boxSizing: "border-box" }} />
                <div style={{ marginTop: 8, textAlign: "right" }}>
                  <Button size="sm" onClick={submitAnswer}>Post Answer</Button>
                </div>
              </div>
            ) : (
              <p style={{ color: "#6e6e6e", textAlign: "center", padding: 20, fontSize: 13 }}>
                <a href="#/login" style={{ color: "#22c55e" }}>Sign in</a> as a customer to post answers.
              </p>
            )}
          </div>
        ) : (
          <div>
            {tab === "question" && isLoggedIn && (
              <div style={{ marginBottom: 24 }}>
                {showAsk ? (
                  <div style={{ background: "#fff", borderRadius: 12, padding: 24, border: "1px solid #e5e5e5" }}>
                    <Input label="Title" value={askTitle} onChange={e => setAskTitle(e.target.value)} placeholder="What's your question?" />
                    <div style={{ marginBottom: 16 }}>
                      <label htmlFor="ask-details" style={{ display: "block", fontSize: 13, fontWeight: 500, color: "#666", marginBottom: 6 }}>Details</label>
                      <textarea id="ask-details" value={askBody} onChange={e => setAskBody(e.target.value)} placeholder="Provide more context..." rows={4}
                        style={{ width: "100%", padding: 12, border: "1px solid #e0e0e0", borderRadius: 8, fontSize: 14, fontFamily: "'DM Sans', sans-serif", resize: "vertical", boxSizing: "border-box" }} />
                    </div>
                    <div style={{ display: "flex", gap: 8 }}>
                      <Button size="sm" onClick={submitQuestion}>Post Question</Button>
                      <Button variant="outline" size="sm" onClick={() => setShowAsk(false)}>Cancel</Button>
                    </div>
                  </div>
                ) : (
                  <Button size="sm" onClick={() => setShowAsk(true)}>Ask a Question</Button>
                )}
              </div>
            )}
            {tab === "question" && !isLoggedIn && (
              <p style={{ fontSize: 13, color: "#6e6e6e", marginBottom: 16 }}>
                <a href="#/login" style={{ color: "#22c55e" }}>Sign in</a> as a customer to ask questions.
              </p>
            )}

            {questions.map(q => (
              <div key={q.id} role="button" tabIndex={0} onClick={() => openQuestion(q)} onKeyDown={e => (e.key === "Enter" || e.key === " ") && openQuestion(q)} style={{ background: "#fff", borderRadius: 12, padding: 20, border: "1px solid #e5e5e5", marginBottom: 12, cursor: "pointer", transition: "border-color 0.2s" }}
                onMouseEnter={e => e.currentTarget.style.borderColor = "#22c55e"} onMouseLeave={e => e.currentTarget.style.borderColor = "#e5e5e5"}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                      {q.pinned && <span style={{ fontSize: 10, color: "#f59e0b", fontWeight: 600 }}>PINNED</span>}
                      <span style={{ fontWeight: 600 }}>{q.title}</span>
                    </div>
                    <p style={{ fontSize: 13, color: "#666", lineHeight: 1.5, maxHeight: 40, overflow: "hidden" }}>{q.body}</p>
                  </div>
                  <div style={{ textAlign: "right", flexShrink: 0, marginLeft: 16 }}>
                    <div style={{ fontSize: 12, color: "#6e6e6e" }}>{q.answer_count} answers</div>
                  </div>
                </div>
                <div style={{ fontSize: 12, color: "#6e6e6e", marginTop: 8 }}>
                  {q.author_name} {q.author_type === "admin" && <span style={{ background: "#22c55e22", color: "#22c55e", padding: "1px 6px", borderRadius: 4, fontSize: 10, fontWeight: 600 }}>TEAM</span>}
                  {" — "}{new Date(q.created_at).toLocaleDateString()}
                </div>
              </div>
            ))}
            {questions.length === 0 && <p style={{ color: "#6e6e6e", textAlign: "center", padding: 40 }}>No {tab === "faq" ? "FAQs" : "questions"} yet.</p>}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Feed Page ──────────────────────────────────────────────────────────────
function FeedPage() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch(`${API_BASE}/community/feed?limit=50`).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).then(d => setPosts(d.posts || []));
  }, []);

  const catColors = { update: "#3b82f6", announcement: "#22c55e", changelog: "#d97706", tip: "#f59e0b" };

  return (
    <div style={{ fontFamily: "'DM Sans', sans-serif", minHeight: "100vh", background: "#fafafa" }}>
      <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 48px", background: "#0a0a0a" }}>
        <Logo light />
        <Button variant="ghost" size="sm" onClick={() => (window.location.hash = "#/")}>Home</Button>
      </nav>
      <div style={{ maxWidth: 700, margin: "0 auto", padding: "40px 24px" }}>
        <h1 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 8 }}>Updates</h1>
        <p style={{ color: "#666", marginBottom: 32 }}>Product updates, announcements, and tips from the ZenSys team.</p>
        {posts.map(p => (
          <div key={p.id} style={{ background: "#fff", borderRadius: 12, padding: 24, border: "1px solid #e5e5e5", marginBottom: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <span style={{ fontSize: 11, padding: "2px 10px", borderRadius: 12, background: (catColors[p.category] || "#6e6e6e") + "18", color: catColors[p.category] || "#6e6e6e", fontWeight: 600, textTransform: "uppercase" }}>{p.category}</span>
              <span style={{ fontSize: 12, color: "#6e6e6e" }}>{new Date(p.created_at).toLocaleDateString()}</span>
            </div>
            <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>{p.title}</h3>
            <p style={{ color: "#444", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>{p.body}</p>
            {p.admin_name && <div style={{ fontSize: 12, color: "#6e6e6e", marginTop: 12 }}>— {p.admin_name}</div>}
          </div>
        ))}
        {posts.length === 0 && <p style={{ color: "#6e6e6e", textAlign: "center", padding: 40 }}>No updates yet. Check back soon!</p>}
      </div>
    </div>
  );
}