/* icon.jsx — lucide wrapper + tiny shared UI primitives.
   Exposed on window for the other Babel scripts. */

// Renders a lucide icon by PascalCase name (e.g. "Shield", "ShoppingBag").
function Icon({ name, size = 20, strokeWidth = 2, className = "", style }) {
  const lib = (typeof window !== "undefined" && window.lucide) || {};
  // lucide UMD icon = ["svg", {svgAttrs}, [ [tag, {attrs}], ... ] ]
  const node = (lib.icons && lib.icons[name]) || lib[name] || null;
  const children = node && Array.isArray(node[2]) ? node[2] : null;
  if (!children) {
    // graceful fallback: empty box so layout never breaks
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" className={className} style={style} aria-hidden="true" />
    );
  }
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={style}
      aria-hidden="true"
    >
      {children.map((child, i) => React.createElement(child[0], { ...child[1], key: i }))}
    </svg>
  );
}

/* Abstract rose bloom mark, built only from simple ellipses (no hand-drawn
   illustration). Used as the Last Rose botanical motif. */
function RoseMark({ size = 96, color = "#E14D62", className = "", style, petals = 7 }) {
  const cx = 50, cy = 50;
  const layers = [
    { r: 30, rx: 12, ry: 26, op: 0.16, count: petals, off: 0 },
    { r: 20, rx: 9, ry: 18, op: 0.26, count: petals, off: 26 },
    { r: 10, rx: 6, ry: 11, op: 0.42, count: petals, off: 13 },
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" className={className} style={style} aria-hidden="true">
      {layers.map((L, li) =>
        Array.from({ length: L.count }).map((_, i) => {
          const ang = (360 / L.count) * i + L.off;
          return (
            <ellipse
              key={li + "-" + i}
              cx={cx}
              cy={cy - L.r * 0.45}
              rx={L.rx}
              ry={L.ry}
              fill={color}
              fillOpacity={L.op}
              transform={`rotate(${ang} ${cx} ${cy})`}
            />
          );
        })
      )}
      <circle cx={cx} cy={cy} r={4.5} fill={color} fillOpacity={0.85} />
    </svg>
  );
}

/* Small monogram lockup used in headers/cards for the shell brand. */
function RoseGlyph({ size = 26, color = "#E14D62" }) {
  return <RoseMark size={size} color={color} petals={6} />;
}

/* Large layered bloom for the hub hero — a radial spirograph of translucent
   petals (simple ellipses only) over a soft glow, densest at the core. */
function HeroBloom({ size = 560, color = "#E14D62", className = "", style }) {
  const cx = 50, cy = 50, petals = 9;
  const layers = [
    { rx: 15, ry: 45, op: 0.06, off: 0 },
    { rx: 13.5, ry: 39, op: 0.07, off: 20 },
    { rx: 12, ry: 33, op: 0.09, off: 10 },
    { rx: 10, ry: 27, op: 0.12, off: 30 },
    { rx: 8, ry: 21, op: 0.15, off: 15 },
    { rx: 6, ry: 15, op: 0.20, off: 25 },
    { rx: 4, ry: 10, op: 0.28, off: 5 },
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" className={className} style={style} aria-hidden="true">
      <defs>
        <radialGradient id="lr-hero-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={color} stopOpacity="0.32" />
          <stop offset="50%" stopColor={color} stopOpacity="0.06" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx={cx} cy={cy} r="49" fill="url(#lr-hero-glow)" />
      <g className="hero-bloom">
        {layers.map((L, li) =>
          Array.from({ length: petals }).map((_, i) => {
            const ang = (360 / petals) * i + L.off;
            return (
              <ellipse key={li + "-" + i} cx={cx} cy={cy} rx={L.rx} ry={L.ry}
                fill={color} fillOpacity={L.op}
                transform={`rotate(${ang} ${cx} ${cy})`} />
            );
          })
        )}
      </g>
      <circle cx={cx} cy={cy} r="6.5" fill={color} fillOpacity="0.5" />
      <circle cx={cx} cy={cy} r="3" fill={color} fillOpacity="0.8" />
    </svg>
  );
}

/* Dark/light theme toggle pill, shared by login + hub. */
function ThemeToggle({ mode, onToggle, th }) {
  const light = mode === "light";
  return (
    <button
      onClick={onToggle}
      aria-label={light ? "Switch to dark theme" : "Switch to light theme"}
      className="inline-flex items-center gap-2 rounded-full px-3 py-2 text-[12.5px] font-semibold transition-colors"
      style={{ color: th.sub, background: th.chip, border: `1px solid ${th.cardBorder}` }}
    >
      <Icon name={light ? "Moon" : "Sun"} size={15} style={{ color: th.accent }} />
      <span className="hidden sm:inline">{light ? "Dark" : "Light"}</span>
    </button>
  );
}

/* Small "open this view in a new tab" affordance. `href` is a hash route
   (e.g. "#/app/bloom"); target=_blank makes the browser open the full URL in
   a new tab. stopPropagation so it never triggers a parent card's navigation. */
function OpenInNewTab({ href, size = 14, title = "Open in new tab", className = "", style }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      title={title}
      aria-label={title}
      onClick={(e) => e.stopPropagation()}
      className={"inline-flex items-center justify-center rounded-lg transition-colors hover:opacity-80 " + className}
      style={style}
    >
      <Icon name="ArrowUpRight" size={size} />
    </a>
  );
}

Object.assign(window, { Icon, RoseMark, RoseGlyph, ThemeToggle, OpenInNewTab });