/* global React */
/* Shared UI primitives + wordmark + icons + SPA router */
const { useState, useEffect, useMemo, useRef } = React;

const Icon = {
  arrow: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  check: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>,
  spark: () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z"/></svg>,
  eye: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>,
  alert: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01"/><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>,
  coin: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M15 10H10.5a1.5 1.5 0 0 0 0 3h3a1.5 1.5 0 0 1 0 3H9"/></svg>,
};

/* Wordmark — QR-code mark with brand prism */
const QRLogo = ({ size = 28 }) => {
  const s = size;
  const GREEN = "#0acf83", ORANGE = "#f24e1e", PURPLE = "#a259ff", RED = "#ff7262", BLUE = "#1abcfe";
  // Finder: outer ring tinted with a brand color, inner solid white
  const Finder = ({ x, y, color }) => {
    const u = s * 0.22;
    const stroke = s * 0.045;
    return (
      <g transform={`translate(${x} ${y})`}>
        <rect width={u} height={u} rx={s*0.05} fill="none" stroke={color} strokeWidth={stroke}/>
        <rect x={u*0.32} y={u*0.32} width={u*0.36} height={u*0.36} rx={s*0.018} fill="#ffffff"/>
      </g>
    );
  };
  const D = (x, y, color = "#ffffff") => (
    <rect key={`${x}-${y}`} x={x} y={y} width={s*0.06} height={s*0.06} rx={s*0.012} fill={color}/>
  );
  return (
    <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s} style={{display:"block", flexShrink:0}}>
      <rect width={s} height={s} rx={s*0.22} fill="#0f0f14"/>
      <Finder x={s*0.10} y={s*0.10} color={GREEN}/>
      <Finder x={s*0.68} y={s*0.10} color={ORANGE}/>
      <Finder x={s*0.10} y={s*0.68} color={BLUE}/>
      {/* data dots — sprinkled brand colors */}
      {D(s*0.40, s*0.36, ORANGE)}
      {D(s*0.54, s*0.36)}
      {D(s*0.68, s*0.40, GREEN)}
      {D(s*0.40, s*0.50)}
      {D(s*0.68, s*0.50, RED)}
      {D(s*0.46, s*0.62)}
      {D(s*0.54, s*0.62, BLUE)}
      {D(s*0.62, s*0.62)}
      {D(s*0.78, s*0.62, ORANGE)}
      {D(s*0.46, s*0.76, GREEN)}
      {D(s*0.62, s*0.76)}
      {D(s*0.78, s*0.76)}
    </svg>
  );
};

const Wordmark = ({ size = 22, dark = false }) => (
  <div className="wordmark" style={{ fontSize: size, color: dark ? "#fff" : undefined, display:"inline-flex", alignItems:"center", gap: size*0.45 }}>
    <QRLogo size={size * 1.4}/>
    <span>Scanalytics</span>
  </div>
);

/* Mini pill */
const Pill = ({ children, color = "var(--brand-purple)", style }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: 6,
    padding: "4px 12px", borderRadius: 999, fontSize: 11, fontWeight: 600,
    color: color,
    background: `color-mix(in srgb, ${color} 14%, white)`,
    letterSpacing: 0.04, textTransform: "uppercase",
    fontFamily: "var(--font-mono)",
    ...style
  }}>{children}</span>
);

/* SPA router — hash based. Strips any ?query so "#/dashboard?checkout=success"
   still matches the "/dashboard" route (the query stays in window.location). */
const parseRoute = () => ((window.location.hash || "#/").slice(1).split("?")[0]) || "/";
const useRoute = () => {
  const [route, setRoute] = useState(parseRoute);
  useEffect(() => {
    const onHash = () => setRoute(parseRoute());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const navigate = (to) => { window.location.hash = to; };
  return [route, navigate];
};

/* Auth helpers — localStorage */
const AUTH_KEY = "scanalytics_user";
const getUser = () => {
  try { return JSON.parse(localStorage.getItem(AUTH_KEY) || "null"); } catch { return null; }
};
const setUser = (u) => {
  if (u) localStorage.setItem(AUTH_KEY, JSON.stringify(u));
  else localStorage.removeItem(AUTH_KEY);
};

Object.assign(window, { Icon, Wordmark, QRLogo, Pill, useRoute, getUser, setUser });