// Shared components for Rune Oracle

const RuneTile = ({ rune, skin = "stone", size = 80, reversed = false, glow = false, onClick, selected = false }) => {
  const fontSize = size * 0.55;
  return (
    <div
      onClick={onClick}
      className={`rune-${skin} ${glow ? "glow-pulse" : ""}`}
      style={{
        width: size,
        height: size * 1.3,
        display: "flex", alignItems: "center", justifyContent: "center",
        borderRadius: size * 0.08,
        cursor: onClick ? "pointer" : "default",
        transform: reversed ? "rotate(180deg)" : "none",
        transition: "transform 0.3s",
        outline: selected ? "1px solid var(--gold-bright)" : "none",
        outlineOffset: 4,
        position: "relative"
      }}
    >
      <span className="rune-glyph" style={{ fontSize, fontWeight: 700, textShadow: skin === "gold" ? "0 1px 0 rgba(255,255,255,0.3)" : "0 1px 2px rgba(0,0,0,0.5)" }}>
        {rune.symbol}
      </span>
    </div>
  );
};

const Ornament = ({ width = 240, color = "var(--gold)", opacity = 0.5 }) => (
  <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width, opacity, margin: "0 auto" }}>
    <svg width={width} height="14" viewBox={`0 0 ${width} 14`} fill="none">
      <line x1="0" y1="7" x2={width/2 - 18} y2="7" stroke={color} strokeWidth="0.6"/>
      <line x1={width/2 + 18} y1="7" x2={width} y2="7" stroke={color} strokeWidth="0.6"/>
      <path d={`M${width/2 - 12} 7 L${width/2} 1 L${width/2 + 12} 7 L${width/2} 13 Z`} stroke={color} strokeWidth="0.7" fill="none"/>
      <circle cx={width/2} cy="7" r="1.2" fill={color}/>
    </svg>
  </div>
);

const StatusBar = ({ light = true }) => {
  const c = light ? "#E8E0D0" : "#1A1612";
  return (
    <div className="status-bar" style={{ color: c }}>
      <span>9:41</span>
      <span className="right" style={{ fontSize: 13 }}>
        <svg width="18" height="11" viewBox="0 0 18 11" fill="none"><path d="M1 8 L1 10 M5 6 L5 10 M9 4 L9 10 M13 2 L13 10 M17 0 L17 10" stroke={c} strokeWidth="1.5" strokeLinecap="round"/></svg>
        <svg width="16" height="11" viewBox="0 0 16 11" fill="none"><path d="M8 3 Q4 3 1 5 M8 6 Q5 6 3 7 M8 9 L8 9.5" stroke={c} strokeWidth="1.2" strokeLinecap="round"/></svg>
        <svg width="24" height="11" viewBox="0 0 24 11" fill="none"><rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke={c} strokeWidth="0.8" fill="none"/><rect x="2" y="2" width="16" height="7" rx="1" fill={c}/><rect x="21" y="3" width="1.5" height="5" rx="0.5" fill={c}/></svg>
      </span>
    </div>
  );
};

const TopBar = ({ title, subtitle, onBack, right }) => (
  <div style={{ padding: "8px 16px 12px", display: "flex", alignItems: "center", gap: 8, position: "relative", zIndex: 5 }}>
    {onBack && (
      <div onClick={onBack} style={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "var(--gold)" }}>
        <Icon.Back size={22}/>
      </div>
    )}
    <div style={{ flex: 1, textAlign: "center" }}>
      {title && <div className="font-display" style={{ fontSize: 14, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold)" }}>{title}</div>}
      {subtitle && <div style={{ fontSize: 11, color: "var(--ash)", fontStyle: "italic", marginTop: 2 }}>{subtitle}</div>}
    </div>
    <div style={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }}>
      {right}
    </div>
  </div>
);

const BottomNav = ({ active, onNav }) => {
  const items = [
    { key: "home", icon: Icon.Yggdrasil, label: "Home", iconSize: 18 },
    { key: "library", icon: Icon.Library, label: "Runes", iconSize: 18 },
    { key: "journal", icon: Icon.Journal, label: "Journal", iconSize: 18 },
    { key: "settings", icon: Icon.Settings, label: "Settings", iconSize: 18 }
  ];
  return (
    <div className="bottom-nav">
      {items.map(it => {
        const IconComp = it.icon;
        return (
          <div key={it.key} className={`nav-item ${active === it.key ? "active" : ""}`} onClick={() => onNav(it.key)}>
            <IconComp size={it.iconSize} color="currentColor"/>
            <div className="label">{it.label}</div>
          </div>
        );
      })}
    </div>
  );
};

const Frame = ({ children, style }) => (
  <div className="ornate-card" style={{ padding: 20, background: "var(--bg-card)", ...style }}>
    {children}
  </div>
);

window.RuneTile = RuneTile;
window.Ornament = Ornament;
window.StatusBar = StatusBar;
window.TopBar = TopBar;
window.BottomNav = BottomNav;
window.Frame = Frame;