/* veil-components.jsx
   ----------------------------------------------------------------
   Shared building blocks for Veil:
   - VeilIcon set (line icons, 1.5 stroke)
   - VeilSigil — generative geometric identity glyph
   - VeilWordmark
   - VeilHeader, VeilTabBar
   - VeilPostCard, VeilFilterRow
   - VeilChatRow
*/

/* eslint-disable no-undef */

// ──────────────────────────────────────────────────────────
// Icon set — outlined, 1.5 stroke, 22px viewBox
// ──────────────────────────────────────────────────────────
function VeilIcon({ name, size = 20, color = "currentColor", strokeWidth = 1.5, style }) {
  const s = strokeWidth;
  const common = { width: size, height: size, viewBox: "0 0 22 22", fill: "none", stroke: color, strokeWidth: s, strokeLinecap: "round", strokeLinejoin: "round", style };
  switch (name) {
    case "search":
      return (<svg {...common}><circle cx="10" cy="10" r="6"/><path d="M14.5 14.5L19 19"/></svg>);
    case "bell":
      return (<svg {...common}><path d="M5 16h12l-1.4-2A2 2 0 0 1 15 12.8V9.5A4 4 0 0 0 11 5.5 4 4 0 0 0 7 9.5v3.3a2 2 0 0 1-.6 1.4z"/><path d="M9.5 18.5a1.5 1.5 0 0 0 3 0"/></svg>);
    case "home":
      return (<svg {...common}><path d="M4 10.5L11 4l7 6.5"/><path d="M5.5 9.5V18h11V9.5"/><path d="M9 18v-5h4v5"/></svg>);
    case "message":
      return (<svg {...common}><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h9A2.5 2.5 0 0 1 18 6.5v6A2.5 2.5 0 0 1 15.5 15H9l-4 3v-3.5"/></svg>);
    case "profile":
      // abstract identity dot — not a person silhouette
      return (<svg {...common}><circle cx="11" cy="11" r="7"/><circle cx="11" cy="11" r="2.5"/></svg>);
    case "compose":
      return (<svg {...common}><path d="M4 18h14"/><path d="M4 14l10-10 4 4-10 10H4z"/></svg>);
    case "resonate":
      // concentric arcs — sound/idea ripple
      return (<svg {...common}><path d="M11 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M7.5 7.5a5 5 0 0 0 0 7"/><path d="M14.5 7.5a5 5 0 0 1 0 7"/><path d="M5 5a8 8 0 0 0 0 12"/><path d="M17 5a8 8 0 0 1 0 12"/></svg>);
    case "reply":
      return (<svg {...common}><path d="M4 14V9.5A2.5 2.5 0 0 1 6.5 7h11A2.5 2.5 0 0 1 20 9.5v3A2.5 2.5 0 0 1 17.5 15H9l-5 3z" transform="translate(-1,-1)"/></svg>);
    case "save":
      return (<svg {...common}><path d="M6 3.5h10v15l-5-3.5-5 3.5z"/></svg>);
    case "saved":
      return (<svg {...common} fill={color} stroke="none"><path d="M6 3.5h10v15l-5-3.5-5 3.5z"/></svg>);
    case "follow":
      return (<svg {...common}><circle cx="11" cy="11" r="7.5"/><path d="M11 7.5v7M7.5 11h7"/></svg>);
    case "followed":
      return (<svg {...common}><circle cx="11" cy="11" r="7.5"/><path d="M7.5 11.5l2.5 2.5 4.5-5"/></svg>);
    case "more":
      return (<svg {...common}><circle cx="5.5" cy="11" r="1" fill={color}/><circle cx="11" cy="11" r="1" fill={color}/><circle cx="16.5" cy="11" r="1" fill={color}/></svg>);
    case "arrow-up":
      return (<svg {...common}><path d="M11 18V5M5 11l6-6 6 6"/></svg>);
    case "back":
      return (<svg {...common}><path d="M14 5l-6 6 6 6"/></svg>);
    case "settings":
      return (<svg {...common}><circle cx="11" cy="11" r="2.5"/><path d="M11 3v2M11 17v2M3 11h2M17 11h2M5.6 5.6l1.4 1.4M15 15l1.4 1.4M5.6 16.4L7 15M15 7l1.4-1.4"/></svg>);
    case "flame":
      return (<svg {...common}><path d="M11 3.5c.5 3.5 4 4 4 8a4 4 0 1 1-8 0c0-1.5.5-2.5 1.5-3 0 1 .5 1.5 1.2 1.2C9 7.5 9.5 5.5 11 3.5z"/></svg>);
    case "trend":
      return (<svg {...common}><path d="M4 14l4-4 3 3 7-7"/><path d="M14 6h4v4"/></svg>);
    case "deep":
      // chevron-down stack — depth
      return (<svg {...common}><path d="M5 7l6 5 6-5"/><path d="M5 12l6 5 6-5" opacity="0.55"/></svg>);
    case "lock":
      return (<svg {...common}><rect x="5" y="10" width="12" height="9" rx="2"/><path d="M8 10V7a3 3 0 0 1 6 0v3"/></svg>);
    default:
      return null;
  }
}

// ──────────────────────────────────────────────────────────
// VeilSigil — deterministic geometric "anonymous identity"
// Each user has one; generated from a seed string (the
// nickname/id). Used wherever an avatar would otherwise sit.
// Renders 4 thin radial lines + a central node — feels like a
// constellation glyph or a hashed identity emblem.
// ──────────────────────────────────────────────────────────
function VeilSigil({ seed = "anon", size = 36, hue = 248, dim = false }) {
  // simple seeded hash → 6 angles in [0, 2π)
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const rand = (n) => { h = (h * 1664525 + 1013904223) >>> 0; return (h % 1000) / 1000 * n; };
  const lines = Array.from({ length: 5 }, () => ({
    a: rand(Math.PI * 2),
    r: 8 + rand(8),
    w: 0.8 + rand(0.6),
  }));
  const dots = Array.from({ length: 3 }, () => ({
    a: rand(Math.PI * 2), r: 4 + rand(6),
  }));
  const c = `oklch(${dim ? 0.62 : 0.78} 0.10 ${hue})`;
  const cFaint = `oklch(${dim ? 0.45 : 0.62} 0.10 ${hue} / 0.55)`;
  return (
    <svg width={size} height={size} viewBox="-12 -12 24 24" style={{ display: "block" }}>
      <circle cx="0" cy="0" r="10.5" fill="none" stroke={cFaint} strokeWidth="0.4" strokeDasharray="0.6 1.2"/>
      {lines.map((l, i) => (
        <line key={i}
              x1="0" y1="0"
              x2={Math.cos(l.a) * l.r} y2={Math.sin(l.a) * l.r}
              stroke={c} strokeWidth={l.w} strokeLinecap="round" opacity={0.9 - i * 0.12}/>
      ))}
      {dots.map((d, i) => (
        <circle key={i}
                cx={Math.cos(d.a) * d.r} cy={Math.sin(d.a) * d.r}
                r="0.7" fill={c}/>
      ))}
      <circle cx="0" cy="0" r="1.4" fill={c}/>
    </svg>
  );
}

// ──────────────────────────────────────────────────────────
// Wordmark — "Veil" in Instrument Serif italic
// ──────────────────────────────────────────────────────────
function VeilWordmark({ size = 26 }) {
  return (
    <span style={{
      fontFamily: "var(--veil-font-display)",
      fontSize: size,
      fontWeight: 600,
      letterSpacing: "0.02em",
      textTransform: "lowercase",
      color: "var(--veil-text)",
      lineHeight: 1,
      display: "inline-flex",
      alignItems: "baseline",
      gap: 4,
    }}>
      veil
      <span style={{
        width: 4, height: 4, borderRadius: "50%",
        background: "var(--veil-blue)",
        boxShadow: "0 0 6px var(--veil-blue)",
        transform: "translateY(-2px)",
      }}/>
    </span>
  );
}

// ──────────────────────────────────────────────────────────
// Resonance bar — tiny luminous gauge, 0–100
// ──────────────────────────────────────────────────────────
function VeilResonance({ value = 50, hue }) {
  const color = value > 85
    ? "var(--veil-violet)"
    : value > 65
      ? "var(--veil-blue)"
      : "var(--veil-muted)";
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      fontFamily: "var(--veil-font-mono)", fontSize: 10,
      letterSpacing: "0.06em", color: "var(--veil-muted)",
      textTransform: "uppercase",
    }}>
      <span style={{
        position: "relative", width: 28, height: 3, borderRadius: 2,
        background: "var(--veil-hairline)",
      }}>
        <span style={{
          position: "absolute", inset: 0, width: `${value}%`,
          background: color, borderRadius: 2,
          boxShadow: value > 80 ? `0 0 6px ${color}` : "none",
        }}/>
      </span>
      <span>{value}</span>
    </span>
  );
}

// ──────────────────────────────────────────────────────────
// Top header — wordmark + actions
// ──────────────────────────────────────────────────────────
function VeilHeader({ left, right, title, sub, leadingBack, onBack }) {
  return (
    <div className="veil-header" style={{
      position: "sticky", top: 0, zIndex: 30,
      padding: "8px 18px 12px",
      background: "linear-gradient(180deg, oklch(0.12 0.005 270 / 0.98) 0%, oklch(0.12 0.005 270 / 0.96) 80%, oklch(0.12 0.005 270 / 0.6))",
      backdropFilter: "blur(18px) saturate(160%)",
      WebkitBackdropFilter: "blur(18px) saturate(160%)",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 32 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          {leadingBack && (
            <button onClick={onBack} style={{ display: "flex", alignItems: "center", marginLeft: -4 }}>
              <VeilIcon name="back" size={22}/>
            </button>
          )}
          {left}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          {right}
        </div>
      </div>
      {title && (
        <div style={{ marginTop: 4 }}>
          <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em", textTransform: "lowercase" }}>{title}</div>
          {sub && <div className="veil-meta" style={{ marginTop: 6 }}>{sub}</div>}
        </div>
      )}
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Bottom tab bar — Home / Messages / Profile
// ──────────────────────────────────────────────────────────
function VeilTabBar({ active, onChange, compose }) {
  const tabs = [
    { key: "home", icon: "home", label: "Feed" },
    { key: "messages", icon: "message", label: "Inbox" },
    { key: "profile", icon: "profile", label: "Mind" },
  ];
  return (
    <div className="veil-tabbar" style={{
      position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 40,
      padding: "10px 18px 26px",
      pointerEvents: "auto",
    }}>
      <div style={{
        position: "relative",
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
        alignItems: "center",
        height: 58,
        background: "oklch(0.16 0.008 270 / 0.78)",
        border: "1px solid var(--veil-hairline)",
        borderRadius: 999,
        backdropFilter: "blur(22px) saturate(140%)",
        WebkitBackdropFilter: "blur(22px) saturate(140%)",
        boxShadow: "0 12px 40px -10px oklch(0 0 0 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.04)",
      }}>
        {tabs.map(t => (
          <button key={t.key} onClick={() => onChange(t.key)}
                  style={{
                    display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                    gap: 3, height: "100%",
                    color: active === t.key ? "var(--veil-text)" : "var(--veil-subtle)",
                    transition: "color 0.18s",
                  }}>
            <span style={{
              position: "relative", display: "inline-flex",
            }}>
              <VeilIcon name={t.icon} size={22} strokeWidth={active === t.key ? 1.7 : 1.3}/>
              {active === t.key && (
                <span style={{
                  position: "absolute", inset: -8, borderRadius: "50%",
                  background: "radial-gradient(circle, oklch(0.74 0.14 248 / 0.22), transparent 70%)",
                  pointerEvents: "none",
                }}/>
              )}
            </span>
            <span style={{
              fontFamily: "var(--veil-font-mono)", fontSize: 9.5,
              letterSpacing: "0.12em", textTransform: "uppercase",
            }}>{t.label}</span>
          </button>
        ))}
        {/* active indicator — top hairline glow */}
        <span style={{
          position: "absolute", top: -1, height: 2, width: 28,
          left: `calc(${["home","messages","profile"].indexOf(active)} * (100% / 3) + (100% / 6) - 14px)`,
          background: "var(--veil-blue)",
          borderRadius: 2,
          boxShadow: "0 0 12px var(--veil-blue)",
          transition: "left 0.32s cubic-bezier(.6,.2,.2,1)",
        }}/>
      </div>
    </div>
  );
}

Object.assign(window, {
  VeilIcon, VeilSigil, VeilWordmark, VeilResonance,
  VeilHeader, VeilTabBar,
});