/* veil-home.jsx — Home / Feed screen */
/* eslint-disable no-undef */

const HOME_POSTS = [
  {
    id: "p1",
    time: "3:41 AM",
    nick: "The Philosopher",
    text: "We've confused stillness with stagnation. The most alive I've ever felt was sitting alone, doing nothing, watching evening turn into night. Nothing buffered, nothing measured — just the slow assembling of a thought I didn't ask for.",
    resonance: 94,
    replies: 312,
    saved: true,
    resonated: true,
    followed: true,
    tone: "deep",   // deep / hot / rising / fresh
    glow: "violet",
  },
  {
    id: "p2",
    time: "12m",
    text: "If language shapes thought, what thoughts have we lost each time a word goes extinct? Is the death of a verb the death of a way of paying attention?",
    resonance: 81,
    replies: 184,
    tone: "hot",
    glow: "blue",
    badge: "HOT DISCUSSION",
  },
  {
    id: "p3",
    time: "44m",
    nick: "Late Night Thinker",
    followed: true,
    text: "Theory: every social platform eventually becomes about its loudest 1%. We built one where there's no one left to be loud.",
    resonance: 76,
    replies: 92,
  },
  {
    id: "p4",
    time: "1h",
    text: "I miss being bored. The way it used to push me into ideas instead of into a feed.",
    resonance: 68,
    replies: 47,
    tone: "rising",
  },
  {
    id: "p5",
    time: "2h",
    text: "Question for the room — is honesty easier or harder when nobody knows it's you? I keep thinking about how I write to strangers vs. people who can place me.",
    resonance: 71,
    replies: 158,
    tone: "fresh",
  },
  {
    id: "p6",
    time: "3h",
    nick: "Smart Anonymous",
    followed: true,
    text: "The internet promised plurality and delivered an echo. The veil promises silence and is somehow louder than anything I've read in years.",
    resonance: 88,
    replies: 221,
    glow: "blue",
  },
];

function VeilFilterRow({ active, onChange }) {
  const filters = [
    { key: "resonant", label: "Resonant" },
    { key: "rising",   label: "Rising" },
    { key: "deep",     label: "Deep" },
    { key: "fresh",    label: "Fresh" },
    { key: "following",label: "Following" },
  ];
  return (
    <div className="veil-scroll" style={{
      display: "flex", gap: 8, padding: "2px 18px 14px",
      overflowX: "auto", overflowY: "hidden",
    }}>
      {filters.map(f => {
        const on = active === f.key;
        return (
          <button key={f.key} onClick={() => onChange(f.key)}
                  style={{
                    flex: "0 0 auto",
                    padding: "7px 14px",
                    borderRadius: 999,
                    fontSize: 12.5,
                    letterSpacing: "0.01em",
                    color: on ? "var(--veil-text)" : "var(--veil-muted)",
                    background: on ? "oklch(0.74 0.14 248 / 0.14)" : "oklch(0.20 0.008 270 / 0.6)",
                    border: on ? "1px solid oklch(0.74 0.14 248 / 0.45)" : "1px solid var(--veil-hairline)",
                    boxShadow: on ? "0 0 16px -6px oklch(0.74 0.14 248 / 0.6)" : "none",
                    transition: "all 0.18s",
                  }}>
            {f.label}
          </button>
        );
      })}
    </div>
  );
}

function VeilPostCard({ post, onToggle }) {
  const glow = post.glow === "violet"
    ? "0 0 0 1px oklch(0.62 0.17 295 / 0.30), 0 0 30px -8px oklch(0.62 0.17 295 / 0.40)"
    : post.glow === "blue"
      ? "0 0 0 1px oklch(0.74 0.14 248 / 0.30), 0 0 26px -8px oklch(0.74 0.14 248 / 0.35)"
      : "0 0 0 1px var(--veil-hairline)";
  const accentHue = post.glow === "violet" ? 295 : 248;

  return (
    <article style={{
      position: "relative",
      margin: "0 16px 12px",
      padding: "16px 16px 12px",
      borderRadius: 20,
      background: "linear-gradient(180deg, oklch(0.19 0.008 270 / 0.92), oklch(0.17 0.008 270 / 0.92))",
      boxShadow: glow,
      backdropFilter: "blur(8px)",
    }}>
      {/* header */}
      <header style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
        <VeilSigil seed={post.id + (post.nick || "")} size={26} hue={accentHue}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: "flex", alignItems: "baseline", gap: 6,
            fontSize: 13, minWidth: 0,
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
          }}>
            <span style={{ color: "var(--veil-text-soft)", fontWeight: 500, flexShrink: 0 }}>Anonymous</span>
            {post.nick && (
              <span style={{
                color: "var(--veil-muted)",
                minWidth: 0,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}>
                · saved as <span style={{
                  color: "var(--veil-blue)",
                  fontFamily: "var(--veil-font-display)",
                  fontSize: 13, fontWeight: 500,
                  letterSpacing: "0.01em",
                  marginLeft: 2,
                }}>{post.nick}</span>
              </span>
            )}
          </div>
          <div className="veil-meta" style={{ marginTop: 2 }}>{post.time}</div>
        </div>
        {post.badge && (
          <span style={{
            fontFamily: "var(--veil-font-mono)", fontSize: 9.5,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--veil-cyan)",
            padding: "4px 8px", borderRadius: 999,
            background: "oklch(0.82 0.12 200 / 0.10)",
            border: "1px solid oklch(0.82 0.12 200 / 0.35)",
          }}>
            <span style={{
              display: "inline-block", width: 5, height: 5, borderRadius: "50%",
              background: "var(--veil-cyan)", marginRight: 5, transform: "translateY(-1px)",
              boxShadow: "0 0 6px var(--veil-cyan)",
            }}/>
            {post.badge}
          </span>
        )}
      </header>

      {/* body */}
      <p className="veil-body" style={{
        margin: 0,
        fontSize: 15.5,
        color: "var(--veil-text)",
        textWrap: "pretty",
      }}>{post.text}</p>

      {/* resonance / meta */}
      <div style={{
        display: "flex", alignItems: "center",
        gap: 14, marginTop: 14, marginBottom: 10,
      }}>
        <VeilResonance value={post.resonance}/>
        {post.tone === "rising" && (
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--veil-muted)", fontFamily: "var(--veil-font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase" }}>
            <VeilIcon name="trend" size={12} color="var(--veil-cyan)"/> Rising
          </span>
        )}
        {post.tone === "deep" && (
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--veil-muted)", fontFamily: "var(--veil-font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase" }}>
            <VeilIcon name="deep" size={12} color="var(--veil-violet)"/> Depth thread
          </span>
        )}
      </div>

      {/* action row */}
      <div style={{
        display: "flex", alignItems: "center",
        gap: 4,
        paddingTop: 10,
        borderTop: "1px solid var(--veil-hairline)",
      }}>
        <ActionButton icon={post.resonated ? "resonate" : "resonate"}
                      active={post.resonated}
                      label={String(338 + post.resonance)}
                      onClick={() => onToggle(post.id, "resonated")}/>
        <ActionButton icon="reply" label={String(post.replies)}/>
        <ActionButton icon={post.saved ? "saved" : "save"}
                      active={post.saved}
                      onClick={() => onToggle(post.id, "saved")}/>
        <div style={{ flex: 1 }}/>
        <button onClick={() => onToggle(post.id, "followed")}
                style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  padding: "6px 12px", borderRadius: 999,
                  fontSize: 12, color: post.followed ? "var(--veil-text)" : "var(--veil-text-soft)",
                  background: post.followed ? "oklch(0.20 0.008 270)" : "transparent",
                  border: post.followed
                    ? "1px solid var(--veil-hairline-hi)"
                    : "1px solid var(--veil-hairline)",
                }}>
          <VeilIcon name={post.followed ? "followed" : "follow"} size={13}/>
          {post.followed ? "Following" : "Follow"}
        </button>
      </div>
    </article>
  );
}

function ActionButton({ icon, label, active, onClick }) {
  return (
    <button onClick={onClick}
            style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              padding: "6px 8px",
              borderRadius: 8,
              fontSize: 12.5,
              fontFamily: "var(--veil-font-mono)",
              color: active ? "var(--veil-blue)" : "var(--veil-muted)",
              transition: "color 0.15s",
            }}>
      <VeilIcon name={icon} size={16} color={active ? "var(--veil-blue)" : "currentColor"}/>
      {label}
    </button>
  );
}

function VeilHome({ onTabChange, active, scrollRef }) {
  const [filter, setFilter] = React.useState("resonant");
  const [posts, setPosts] = React.useState(HOME_POSTS);

  const toggle = (id, key) =>
    setPosts(p => p.map(x => x.id === id ? { ...x, [key]: !x[key] } : x));

  return (
    <div className="veil-app" style={{ position: "relative", height: "100%", overflow: "hidden" }}>
      <div className="veil-ambient"/>
      <div ref={scrollRef} className="veil-scroll" style={{
        position: "relative", zIndex: 1,
        height: "100%", overflowY: "auto",
        paddingBottom: 110, paddingTop: 44, // status bar
      }}>
        {/* header */}
        <VeilHeader
          left={<VeilWordmark size={24}/>}
          right={<>
            <button><VeilIcon name="search" size={20} color="var(--veil-text-soft)"/></button>
            <button style={{ position: "relative" }}>
              <VeilIcon name="bell" size={20} color="var(--veil-text-soft)"/>
              <span style={{
                position: "absolute", top: 1, right: 1,
                width: 6, height: 6, borderRadius: "50%",
                background: "var(--veil-violet)", boxShadow: "0 0 6px var(--veil-violet)",
              }}/>
            </button>
          </>}
        />

        {/* curated tagline */}
        <div style={{
          padding: "2px 18px 14px", marginTop: -4,
        }}>
          <div style={{
            fontFamily: "var(--veil-font-display)",
            fontSize: 24, fontWeight: 500,
            color: "var(--veil-text)", letterSpacing: "-0.02em",
            lineHeight: 1.1,
            textTransform: "lowercase",
          }}>
            thoughts worth<br/>
            <span style={{ color: "var(--veil-muted)", fontWeight: 300 }}>staying up for.</span>
          </div>
          <div className="veil-meta" style={{ marginTop: 8 }}>
            <span style={{
              display: "inline-block", width: 5, height: 5, borderRadius: "50%",
              background: "var(--veil-cyan)", boxShadow: "0 0 5px var(--veil-cyan)",
              marginRight: 6,
            }}/>
            7,412 minds online · curated
          </div>
        </div>

        <VeilFilterRow active={filter} onChange={setFilter}/>

        {posts.map(p => <VeilPostCard key={p.id} post={p} onToggle={toggle}/>)}

        <div style={{ textAlign: "center", padding: "20px 0 8px" }}>
          <span className="veil-meta" style={{ color: "var(--veil-subtle)" }}>
            ⸻ end of curated thread ⸻
          </span>
        </div>
      </div>

      <VeilTabBar active={active} onChange={onTabChange}/>
    </div>
  );
}

window.VeilHome = VeilHome;
window.VeilPostCard = VeilPostCard;