// Helios UI primitives — icons, sidebar, shells. Used by all screens.
// All icons are inline Lucide-style outlines @ 1.5px stroke, currentColor.

const Icon = ({ d, size = 16, stroke = 1.5, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {d}
  </svg>
);

const Icons = {
  PanelLeft: (p) => <Icon {...p} d={<><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></>}/>,
  SquarePen: (p) => <Icon {...p} d={<><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z"/></>}/>,
  Plus: (p) => <Icon {...p} d={<><path d="M5 12h14M12 5v14"/></>}/>,
  ChevronRight: (p) => <Icon {...p} d={<path d="m9 18 6-6-6-6"/>}/>,
  ChevronsUpDown: (p) => <Icon {...p} d={<><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></>}/>,
  Database: (p) => <Icon {...p} d={<><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></>}/>,
  BarChart3: (p) => <Icon {...p} d={<><path d="M3 3v18h18"/><path d="M7 16V9M12 16V6M17 16v-4"/></>}/>,
  Bell: (p) => <Icon {...p} d={<><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>}/>,
  MessageCircle: (p) => <Icon {...p} d={<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>}/>,
  Pin: (p) => <Icon {...p} d={<><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1Z"/></>}/>,
  TrendingUp: (p) => <Icon {...p} d={<><path d="M22 7 13.5 15.5l-5-5L2 17"/><path d="M16 7h6v6"/></>}/>,
  TrendingDown: (p) => <Icon {...p} d={<><path d="M22 17 13.5 8.5l-5 5L2 7"/><path d="M16 17h6v-6"/></>}/>,
  X: (p) => <Icon {...p} d={<path d="M18 6 6 18M6 6l12 12"/>}/>,
  KeyRound: (p) => <Icon {...p} d={<><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4Z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></>}/>,
  Sparkle: (p) => <Icon {...p} d={<path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>}/>,
  Stop: (p) => <Icon {...p} d={<rect x="6" y="6" width="12" height="12" rx="1.5"/>}/>,
  Copy: (p) => <Icon {...p} d={<><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>}/>,
  Check: (p) => <Icon {...p} d={<path d="M20 6 9 17l-5-5"/>}/>,
  Sun: (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></>}/>,
};

// ─────────────────────────────────────────────────────────
// Helios mark + wordmark — the REAL brand glyph.
// Geometry mirrors src/components/ui/Logo.astro on the homepage so the demo
// stays brand-consistent with the rest of gethelios.io.
//   HeliosMark      → 12-kite mandala only (39×39).
//   HeliosWordmark  → mandala + path-based "Helios" wordmark (173×39 ratio).
// The wordmark path is fill=currentColor so callers can theme via CSS color.
// ─────────────────────────────────────────────────────────
const HELIOS_MARK_PATHS = [
  "M21.5637 0L26 1.23099L22.4363 15L18 13.769L21.5637 0Z",
  "M32.5 3L36 6.5L25.5 17L22 13.5L32.5 3Z",
  "M37.769 11L39 16.5453L25.231 21L24 15.4547L37.769 11Z",
  "M39 21.5637L37.769 26L24 22.4363L25.231 18L39 21.5637Z",
  "M36 32.25L32.5 36L22 24.75L25.5 21L36 32.25Z",
  "M26 37.769L21.5637 39L18 25.231L22.4363 24L26 37.769Z",
  "M17.4363 39L13 37.769L16.5637 24L21 25.231L17.4363 39Z",
  "M6.5 36L3 32.25L13.5 21L17 24.75L6.5 36Z",
  "M1.23099 26L0 21.5637L13.769 18L15 22.4363L1.23099 26Z",
  "M0 16.5453L1.23099 11L15 15.4547L13.769 21L0 16.5453Z",
  "M3 6.5L6.5 3L17 13.5L13.5 17L3 6.5Z",
  "M13 1.23099L17.4363 0L21 13.769L16.5637 15L13 1.23099Z",
];
const HELIOS_WORDMARK_PATH = "M52.08 3.4H57.12V17.656H73.008V3.4H78.048V37H73.008V22.216H57.12V37H52.08V3.4ZM93.789 37.48C86.493 37.48 81.597 31.816 81.597 25C81.597 18.136 86.493 12.52 93.789 12.52C101.037 12.52 105.837 18.04 105.069 26.44H86.733C87.165 30.328 89.565 33.352 93.837 33.352C97.053 33.352 99.309 31.624 100.221 29.032L104.877 29.512C103.821 34.024 99.741 37.48 93.789 37.48ZM86.829 22.648H100.173C99.645 19.192 97.629 16.6 93.693 16.6C89.709 16.6 87.501 19.192 86.829 22.648ZM108.014 3.4H113.054V37H108.014V3.4ZM117.666 13H122.706V37H117.666V13ZM116.994 4.6C116.994 2.872 118.434 1.432 120.162 1.432C121.938 1.432 123.33 2.872 123.33 4.6C123.33 6.376 121.938 7.768 120.162 7.768C118.434 7.768 116.994 6.376 116.994 4.6ZM137.821 37.48C130.381 37.48 125.725 31.864 125.725 25C125.725 18.136 130.381 12.52 137.821 12.52C145.261 12.52 149.869 18.136 149.869 25C149.869 31.864 145.261 37.48 137.821 37.48ZM130.765 25C130.765 29.272 133.309 32.92 137.821 32.92C142.285 32.92 144.829 29.272 144.829 25C144.829 20.68 142.285 17.032 137.821 17.032C133.309 17.032 130.765 20.68 130.765 25ZM161.152 37.48C155.392 37.48 151.792 34.408 151.216 29.656L156.016 29.368C156.352 32.248 158.512 33.496 161.056 33.496C163.456 33.496 165.568 32.392 165.568 30.184C165.568 28.216 163.84 27.544 161.872 27.16L158.944 26.632C154.624 25.864 151.648 23.608 151.648 19.72C151.648 15.4 155.968 12.52 160.816 12.52C165.712 12.52 169.696 15.064 170.272 20.008L165.712 20.296C165.328 17.752 163.216 16.504 160.912 16.504C158.56 16.504 156.448 17.704 156.448 19.624C156.448 21.352 157.936 21.976 160.096 22.408L163.072 22.936C167.344 23.656 170.656 25.816 170.656 30.136C170.656 34.504 166.576 37.48 161.152 37.48Z";

// SVG paint-server IDs (linearGradient, mask) are document-global — when the
// same id appears in multiple <svg>s, every url(#id) reference resolves to
// the FIRST occurrence in document order. Multiple HeliosMark/HeliosWordmark
// instances on the same page (here: BrandCorner on every slide + Sidebar
// inside every FloatingFrame's AppShell) collided, so the burst would fail
// to paint on later slides. useId gives each instance unique ids.
const HeliosMark = ({ size = 20 }) => {
  // useId returns ":r0:" style strings — strip the colons so the id is safe
  // inside SVG url() references and HTML attribute selectors alike.
  const uid = React.useId().replace(/:/g, "");
  const gradId = `hg-${uid}`;
  const maskId = `hm-${uid}`;
  return (
    <svg width={size} height={size} viewBox="0 0 39 39" fill="none" aria-hidden>
      <defs>
        <linearGradient id={gradId} x1="52" y1="19" x2="18.2113" y2="39.3508" gradientUnits="userSpaceOnUse">
          <stop stopColor="#FBCFE8"/>
          <stop offset="0.524038" stopColor="#FF4CAA"/>
          <stop offset="1" stopColor="#A855F7"/>
        </linearGradient>
        <mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width="39" height="39">
          {HELIOS_MARK_PATHS.map((d, i) => <path key={i} d={d} fill="white"/>)}
          <circle cx="19.5" cy="19.5" r="6.5" fill="white"/>
        </mask>
      </defs>
      <g mask={`url(#${maskId})`}><rect x="-10" y="-1" width="56" height="40" fill={`url(#${gradId})`}/></g>
      <circle cx="19.5" cy="19.5" r="2.6" fill="#FFFFFF"/>
    </svg>
  );
};

// Wordmark uses `size` as height in px so existing callers (size={14}) keep
// working. Width scales proportionally from the 173:39 viewBox.
const HeliosWordmark = ({ size = 18 }) => {
  // useId returns ":r0:" style strings — strip the colons so the id is safe
  // inside SVG url() references and HTML attribute selectors alike.
  const uid = React.useId().replace(/:/g, "");
  const gradId = `hwg-${uid}`;
  const maskId = `hwm-${uid}`;
  const width = (173 / 39) * size;
  return (
    <svg width={width} height={size} viewBox="0 0 173 39" fill="none" aria-label="Helios">
      <defs>
        <linearGradient id={gradId} x1="52" y1="19" x2="18.2113" y2="39.3508" gradientUnits="userSpaceOnUse">
          <stop stopColor="#FBCFE8"/>
          <stop offset="0.524038" stopColor="#FF4CAA"/>
          <stop offset="1" stopColor="#A855F7"/>
        </linearGradient>
        <mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width="39" height="39">
          {HELIOS_MARK_PATHS.map((d, i) => <path key={i} d={d} fill="white"/>)}
          <circle cx="19.5" cy="19.5" r="6.5" fill="white"/>
        </mask>
      </defs>
      <g mask={`url(#${maskId})`}><rect x="-10" y="-1" width="56" height="40" fill={`url(#${gradId})`}/></g>
      <circle cx="19.5" cy="19.5" r="2.6" fill="#FFFFFF"/>
      <path fill="currentColor" d={HELIOS_WORDMARK_PATH}/>
    </svg>
  );
};

// Sidebar lives in Sidebar.jsx — loaded after Primitives so HeliosSidebar
// can use Icons + HeliosWordmark from this file.

// ─────────────────────────────────────────────────────────
// Content canvas — the "raised card on warm bg" pattern.
// Wraps all main-area content. Pass {children}.
// ─────────────────────────────────────────────────────────
const ContentCanvas = ({ children, padded = true }) => (
  <main style={{
    flex: 1,
    margin: "8px 8px 8px 0",
    background: "var(--color-surface)",
    border: "1px solid var(--color-border)",
    borderRadius: "var(--radius)",
    boxShadow: "var(--shadow-card)",
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
  }}>
    {children}
  </main>
);

// AppShell — sidebar + canvas, fixed-size for design canvas artboards.
const AppShell = ({ children, current, width = 1280, height = 820 }) => (
  <div style={{
    width, height,
    display: "flex",
    background: "var(--color-bg)",
    fontFamily: "var(--font-sans)",
    color: "var(--color-text)",
    overflow: "hidden",
  }}>
    <HeliosSidebar current={current}/>
    <ContentCanvas>{children}</ContentCanvas>
  </div>
);

Object.assign(window, {
  Icon, Icons, HeliosMark, HeliosWordmark, ContentCanvas, AppShell,
});