/* veil-profile.jsx — Profile / Mind-map screen */
/* eslint-disable no-undef */

function VeilMindMap({ size = 220 }) {
  // Constellation map. Deterministic positions, drawn purely with SVG.
  // Nodes = topics, lines = recurring connections between them.
  const nodes = [
    { x:  0,  y:  0,  r: 6.5, label: "you",       primary: true,  hue: 248 },
    { x: -55, y: -42, r: 4.5, label: "Time",      hue: 295 },
    { x:  60, y: -55, r: 4,   label: "Memory",    hue: 248 },
    { x: -78, y:  22, r: 3.5, label: "Stillness", hue: 200 },
    { x:  72, y:  20, r: 4,   label: "Language",  hue: 270 },
    { x: -32, y:  70, r: 3,   label: "Dreams",    hue: 320 },
    { x:  40, y:  78, r: 3.5, label: "Solitude",  hue: 295 },
    { x:  90, y: -20, r: 2.5, label: "Attention", hue: 200 },
    { x: -90, y: -10, r: 2.5, label: "Boredom",   hue: 248 },
  ];
  const edges = [
    [0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],
    [1,2],[3,6],[4,7],[2,5],[1,8],[3,8],
  ];

  return (
    <div style={{ position: "relative", width: size, height: size }}>
      {/* halo */}
      <div style={{
        position: "absolute", inset: -20,
        background: "radial-gradient(circle, oklch(0.62 0.17 295 / 0.25), transparent 65%)",
        filter: "blur(8px)", pointerEvents: "none",
      }}/>
      <svg viewBox="-110 -110 220 220" width={size} height={size}
           style={{ position: "absolute", inset: 0, overflow: "visible" }}>
        {/* faint orbital rings */}
        {[40, 70, 100].map((r, i) => (
          <circle key={r} cx="0" cy="0" r={r} fill="none"
                  stroke="oklch(0.42 0.012 270 / 0.4)" strokeWidth="0.4"
                  strokeDasharray="0.8 2.2"/>
        ))}
        {/* edges */}
        {edges.map(([a, b], i) => (
          <line key={i}
                x1={nodes[a].x} y1={nodes[a].y}
                x2={nodes[b].x} y2={nodes[b].y}
                stroke="oklch(0.50 0.04 270 / 0.55)" strokeWidth="0.5"/>
        ))}
        {/* nodes */}
        {nodes.map((n, i) => {
          const col = n.primary
            ? "oklch(0.74 0.14 248)"
            : `oklch(0.78 0.10 ${n.hue})`;
          return (
            <g key={i}>
              <circle cx={n.x} cy={n.y} r={n.r}
                      fill={col}
                      style={{ filter: n.primary ? "drop-shadow(0 0 6px oklch(0.74 0.14 248 / 0.8))" : "drop-shadow(0 0 3px " + col + ")" }}/>
              {!n.primary && (
                <circle cx={n.x} cy={n.y} r={n.r + 3}
                        fill="none" stroke={col} strokeWidth="0.4" opacity="0.5"/>
              )}
              {n.label && (
                <text x={n.x + n.r + 4}
                      y={n.y + 3}
                      fontSize={n.primary ? "9" : "7.5"}
                      fontFamily="League Spartan, sans-serif"
                      fontWeight="600"
                      letterSpacing="0.5"
                      fill={n.primary ? "oklch(0.96 0.005 270)" : "oklch(0.78 0.012 270)"}>
                  {n.label.toUpperCase()}
                </text>
              )}
            </g>
          );
        })}
      </svg>
    </div>
  );
}

const PROFILE_TOPICS = [
  { label: "Philosophy",     w: 92 },
  { label: "Consciousness",  w: 78 },
  { label: "Late nights",    w: 64 },
  { label: "Memory",         w: 58 },
  { label: "Stillness",      w: 44 },
  { label: "Language",       w: 38 },
  { label: "Dreams",         w: 32 },
];

const PROFILE_THOUGHTS = [
  {
    id: "t1",
    text: "We've confused stillness with stagnation. The most alive I've ever felt was sitting alone, doing nothing.",
    resonance: 94, replies: 312, time: "3 nights ago",
  },
  {
    id: "t2",
    text: "Boredom used to be the antechamber of every good idea I had. I keep wondering what I let into that room instead.",
    resonance: 79, replies: 88, time: "1 week ago",
  },
];

const PROFILE_SAVED = [
  {
    nick: "The Philosopher",
    text: "If attention is a form of love, what are we doing to each other in feeds?",
    hue: 295,
  },
  {
    nick: null,
    text: "Theory: every social platform eventually becomes about its loudest 1%.",
    hue: 248,
  },
  {
    nick: "Late Night Thinker",
    text: "3am again. trade you a confession for a confession?",
    hue: 200,
  },
];

function VeilProfile({ onTabChange, active }) {
  return (
    <div className="veil-app" style={{ position: "relative", height: "100%", overflow: "hidden" }}>
      <div className="veil-ambient"/>

      <div className="veil-scroll" style={{
        position: "relative", zIndex: 1,
        height: "100%", overflowY: "auto",
        paddingTop: 44, paddingBottom: 110,
      }}>
        <VeilHeader
          left={<span style={{
            fontFamily: "var(--veil-font-display)",
            fontSize: 18, fontWeight: 500,
            color: "var(--veil-text-soft)",
            letterSpacing: "-0.005em",
            textTransform: "lowercase",
          }}>your mind</span>}
          right={<>
            <button><VeilIcon name="settings" size={20} color="var(--veil-text-soft)"/></button>
          </>}
        />

        {/* identity sigil + meta */}
        <div style={{
          display: "flex", flexDirection: "column", alignItems: "center",
          padding: "12px 0 24px",
        }}>
          <VeilMindMap size={240}/>
          <div style={{
            marginTop: 14,
            fontFamily: "var(--veil-font-display)",
            fontSize: 28, fontWeight: 600,
            letterSpacing: "-0.02em",
            color: "var(--veil-text)",
            textTransform: "lowercase",
          }}>anonymous</div>
          <div className="veil-meta" style={{ marginTop: 4, fontSize: 10.5 }}>
            joined the veil · 412 nights ago
          </div>
        </div>

        {/* resonance level */}
        <div style={{
          margin: "0 16px 18px",
          padding: 16,
          borderRadius: 18,
          background: "linear-gradient(180deg, oklch(0.19 0.008 270 / 0.92), oklch(0.16 0.008 270 / 0.92))",
          border: "1px solid var(--veil-hairline)",
        }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
            <span className="veil-meta">resonance level</span>
            <span style={{
              fontFamily: "var(--veil-font-display)",
              fontSize: 20, fontWeight: 600,
              color: "var(--veil-text)",
              letterSpacing: "-0.01em",
              textTransform: "lowercase",
            }}>quiet signal</span>
          </div>
          {/* gauge */}
          <div style={{ position: "relative", height: 6, borderRadius: 3, background: "oklch(0.22 0.008 270)", overflow: "hidden" }}>
            <div style={{
              position: "absolute", inset: 0, width: "72%",
              background: "linear-gradient(90deg, oklch(0.74 0.14 248), oklch(0.62 0.17 295))",
              boxShadow: "0 0 14px oklch(0.62 0.17 295 / 0.6)",
              borderRadius: 3,
            }}/>
            {/* tier ticks */}
            {[20, 40, 60, 80].map(t => (
              <div key={t} style={{
                position: "absolute", top: 0, bottom: 0,
                left: `${t}%`, width: 1,
                background: "oklch(0.14 0.006 270)",
              }}/>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
            {["dust","whisper","signal","echo","resonance"].map((t, i) => (
              <span key={t} style={{
                fontFamily: "var(--veil-font-ui)", fontSize: 8.5,
                letterSpacing: "0.12em", textTransform: "uppercase",
                color: i === 2 ? "var(--veil-violet)" : "var(--veil-subtle)",
                fontWeight: i === 2 ? 600 : 500,
              }}>{t}</span>
            ))}
          </div>
        </div>

        {/* minimalist stats */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          gap: 1,
          margin: "0 16px 22px",
          background: "var(--veil-hairline)",
          border: "1px solid var(--veil-hairline)",
          borderRadius: 18, overflow: "hidden",
        }}>
          <Stat label="Thoughts" value="47" sub="shared"/>
          <Stat label="Resonance" value="3,184" sub="received"/>
          <Stat label="Kept names" value="9" sub="private"/>
        </div>

        {/* favorite topics — orbit feel via varying weight */}
        <Section title="A map of attention" sub="topics you keep returning to">
          <div style={{
            display: "flex", flexWrap: "wrap", gap: 8,
            padding: "0 16px 4px",
          }}>
            {PROFILE_TOPICS.map((t, i) => {
              const op = t.w / 100;
              return (
                <span key={t.label} style={{
                  padding: "7px 12px",
                  borderRadius: 999,
                  fontSize: 11 + (t.w / 100) * 4,
                  letterSpacing: "-0.005em",
                  background: `oklch(0.20 0.008 270 / ${0.6 + op * 0.3})`,
                  border: `1px solid oklch(${0.30 + op * 0.10} 0.020 270)`,
                  color: i < 2 ? "var(--veil-text)" : "var(--veil-text-soft)",
                  boxShadow: i === 0 ? "0 0 16px -6px oklch(0.62 0.17 295 / 0.45)" : "none",
                }}>{t.label}</span>
              );
            })}
          </div>
        </Section>

        {/* published thoughts */}
        <Section title="Thoughts you've left here" sub="visible only as Anonymous">
          {PROFILE_THOUGHTS.map(t => (
            <div key={t.id} style={{
              margin: "0 16px 10px",
              padding: 14,
              borderRadius: 16,
              background: "oklch(0.18 0.008 270 / 0.85)",
              border: "1px solid var(--veil-hairline)",
            }}>
              <p className="veil-body" style={{
                margin: 0, fontSize: 14.5,
                color: "var(--veil-text-soft)", textWrap: "pretty",
              }}>{t.text}</p>
              <div style={{
                display: "flex", alignItems: "center",
                marginTop: 12, gap: 14,
              }}>
                <VeilResonance value={t.resonance}/>
                <span style={{
                  display: "inline-flex", alignItems: "center", gap: 5,
                  fontFamily: "var(--veil-font-ui)", fontSize: 10,
                  fontWeight: 500,
                  letterSpacing: "0.08em", textTransform: "uppercase",
                  color: "var(--veil-muted)",
                }}>
                  <VeilIcon name="reply" size={11}/> {t.replies}
                </span>
                <span style={{ flex: 1 }}/>
                <span className="veil-meta" style={{ fontSize: 9.5 }}>{t.time}</span>
              </div>
            </div>
          ))}
        </Section>

        {/* saved conversations */}
        <Section title="Saved" sub="moments you returned to">
          <div style={{ padding: "0 16px" }}>
            {PROFILE_SAVED.map((s, i) => (
              <div key={i} style={{
                display: "flex", gap: 12, padding: "10px 0",
                borderBottom: i < PROFILE_SAVED.length - 1 ? "1px solid var(--veil-hairline)" : "none",
              }}>
                <div style={{
                  width: 4, alignSelf: "stretch",
                  background: `oklch(0.62 0.17 ${s.hue})`,
                  borderRadius: 2,
                  boxShadow: `0 0 6px oklch(0.62 0.17 ${s.hue} / 0.5)`,
                  flexShrink: 0,
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 11.5, color: "var(--veil-muted)",
                    marginBottom: 4,
                  }}>
                    {s.nick ? (
                      <>Anonymous · <span style={{
                        color: `oklch(0.78 0.12 ${s.hue})`,
                        fontFamily: "var(--veil-font-display)",
                        fontSize: 12, fontWeight: 600,
                        letterSpacing: "0.02em",
                      }}>{s.nick}</span></>
                    ) : "Anonymous"}
                  </div>
                  <p className="veil-body" style={{
                    margin: 0, fontSize: 13.5,
                    color: "var(--veil-text-soft)", textWrap: "pretty",
                  }}>{s.text}</p>
                </div>
              </div>
            ))}
          </div>
        </Section>

        {/* recent activity — vertical timeline */}
        <Section title="Recent activity" sub="">
          <div style={{ padding: "0 16px", display: "flex", flexDirection: "column", gap: 12 }}>
            <Activity time="3:41 AM" text="left a thought on stillness" tone="violet"/>
            <Activity time="2:18 AM" text="resonated 4 thoughts in Depth thread"/>
            <Activity time="1:02 AM" text='kept "The Philosopher" as a private name' tone="blue"/>
            <Activity time="yesterday" text="opened a quiet room with Anonymous"/>
          </div>
        </Section>

        <div style={{ textAlign: "center", padding: "26px 0 4px" }}>
          <span className="veil-meta" style={{ color: "var(--veil-subtle)" }}>
            ⸻ no one knows it's you ⸻
          </span>
        </div>
      </div>

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

function Stat({ label, value, sub }) {
  return (
    <div style={{
      background: "oklch(0.18 0.008 270)",
      padding: "14px 4px",
      textAlign: "center",
    }}>
      <div style={{
        fontFamily: "var(--veil-font-display)",
        fontSize: 26, fontWeight: 600,
        color: "var(--veil-text)",
        letterSpacing: "-0.02em", lineHeight: 1,
      }}>{value}</div>
      <div className="veil-meta" style={{ marginTop: 6, fontSize: 9.5 }}>
        {label}
      </div>
      <div style={{
        fontFamily: "var(--veil-font-ui)", fontSize: 8.5, fontWeight: 500,
        letterSpacing: "0.10em", textTransform: "uppercase",
        color: "var(--veil-subtle)", marginTop: 1,
      }}>{sub}</div>
    </div>
  );
}

function Section({ title, sub, children }) {
  return (
    <section style={{ marginBottom: 22 }}>
      <div style={{ padding: "0 18px 10px" }}>
        <div style={{
          fontSize: 11, fontFamily: "var(--veil-font-ui)",
          fontWeight: 600,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--veil-muted)",
        }}>{title}</div>
        {sub && (
          <div style={{
            fontFamily: "var(--veil-font-display)",
            fontSize: 16, fontWeight: 500,
            color: "var(--veil-text-soft)",
            marginTop: 4, letterSpacing: "-0.01em",
            textTransform: "lowercase",
          }}>{sub}</div>
        )}
      </div>
      {children}
    </section>
  );
}

function Activity({ time, text, tone }) {
  const dotColor = tone === "violet" ? "var(--veil-violet)" : tone === "blue" ? "var(--veil-blue)" : "var(--veil-muted)";
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
      <span style={{
        width: 6, height: 6, borderRadius: "50%",
        background: dotColor, flexShrink: 0,
        boxShadow: tone ? `0 0 6px ${dotColor}` : "none",
        transform: "translateY(2px)",
      }}/>
      <span style={{ fontSize: 13.5, color: "var(--veil-text-soft)", flex: 1 }}>{text}</span>
      <span className="veil-meta" style={{ fontSize: 10 }}>{time}</span>
    </div>
  );
}

Object.assign(window, { VeilProfile, VeilMindMap });