/* global React */
// Shared UI primitives + icons used across the Sea Containers Hub

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ------- Icons (inline SVG, one stroke style) -------
const Icon = ({ name, size = 16, className = "", style = {} }) => {
  const paths = {
    dashboard: <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>,
    inbox: <><path d="M3 13l3-8h12l3 8"/><path d="M3 13v6a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-6"/><path d="M3 13h5l1 2h6l1-2h5"/></>,
    container: <><rect x="3" y="7" width="18" height="11" rx="1"/><path d="M7 7v11M11 7v11M15 7v11M19 7v11"/></>,
    truck: <><rect x="2" y="7" width="12" height="9" rx="1"/><path d="M14 10h4l3 3v3h-7"/><circle cx="6" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></>,
    depot: <><path d="M3 10l9-6 9 6"/><path d="M5 10v10h14V10"/><rect x="9" y="13" width="6" height="7"/></>,
    signal: <><path d="M4 20h16"/><path d="M6 17v-3M10 17v-6M14 17v-9M18 17V7"/></>,
    phone: <><rect x="7" y="2" width="10" height="20" rx="2"/><circle cx="12" cy="18" r="1"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    users: <><circle cx="9" cy="8" r="3.5"/><circle cx="17" cy="9" r="3"/><path d="M2 20c0-3.5 3.5-6 7-6s7 2.5 7 6"/><path d="M14 20c0-2.5 2-4.5 5-4.5s3 0 3 0"/></>,
    bell: <><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5L6 16z"/><path d="M10 20a2 2 0 0 0 4 0"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    check: <><path d="M4 12l5 5L20 6"/></>,
    x: <><path d="M6 6l12 12M18 6l6 12" transform="translate(-6 0)"/></>,
    arrow: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
    chev_r: <><path d="m9 6 6 6-6 6"/></>,
    chev_d: <><path d="m6 9 6 6 6-6"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    filter: <><path d="M3 5h18M6 12h12M10 19h4"/></>,
    sort: <><path d="M8 6v12M8 6l-3 3M8 6l3 3"/><path d="M16 6v12M16 18l-3-3M16 18l3-3"/></>,
    dot3: <><circle cx="5" cy="12" r="1.3"/><circle cx="12" cy="12" r="1.3"/><circle cx="19" cy="12" r="1.3"/></>,
    warn: <><path d="M12 3 2 21h20L12 3z"/><path d="M12 10v5M12 18v.01"/></>,
    link: <><path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1"/><path d="M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="m3 7 9 7 9-7"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="1.5"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    map: <><path d="m3 6 6-2 6 2 6-2v14l-6 2-6-2-6 2V6z"/><path d="M9 4v14M15 6v14"/></>,
    bolt: <><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></>,
    doc: <><path d="M7 3h8l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M15 3v4h4"/><path d="M9 12h6M9 16h6"/></>,
    refresh: <><path d="M4 12a8 8 0 0 1 14-5l2-2v6h-6"/><path d="M20 12a8 8 0 0 1-14 5l-2 2v-6h6"/></>,
    play: <><path d="M7 4v16l13-8z"/></>,
    camera: <><rect x="3" y="7" width="18" height="13" rx="2"/><circle cx="12" cy="13" r="4"/><path d="M8 7l2-3h4l2 3"/></>,
    mic: <><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 12a7 7 0 0 0 14 0M12 19v3"/></>,
    download: <><path d="M12 4v12"/><path d="m7 11 5 5 5-5"/><path d="M4 20h16"/></>,
    flag: <><path d="M5 3v18"/><path d="M5 4h12l-2 4 2 4H5"/></>,
    pin: <><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1A2 2 0 0 1 7 4.3l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
    trending: <><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></>,
    nz: null,
    moon: <><path d="M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5.6 5.6 4.2 4.2M19.8 19.8l-1.4-1.4M5.6 18.4l-1.4 1.4M19.8 4.2l-1.4 1.4"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className={className} style={style} aria-hidden>
      {paths[name]}
    </svg>
  );
};

// ------- Source chip -------
const SrcChip = ({ src }) => (
  <span className="src-chip" data-src={src} title={`Data from ${src}`}>{src}</span>
);

// ------- Pill -------
const Pill = ({ tone, children, noDot, className = "" }) => (
  <span className={`pill ${tone || ""} ${noDot ? "no-dot" : ""} ${className}`}>{children}</span>
);

// ------- Field (label + value + optional source chip) -------
const Field = ({ label, src, children, big, style }) => (
  <div style={{ ...style }}>
    <div className="field-label">
      <span>{label}</span>{src && <SrcChip src={src} />}
    </div>
    <div className={`field-value ${big ? "big" : ""}`}>{children}</div>
  </div>
);

// ------- Simple kbd -------
const Kbd = ({ children }) => (
  <span style={{
    fontFamily: "var(--font-mono)", fontSize: 10.5, padding: "1px 5px",
    background: "var(--ink-100)", color: "var(--ink-700)",
    border: "1px solid var(--line)", borderRadius: 4
  }}>{children}</span>
);

// Expose
Object.assign(window, { Icon, SrcChip, Pill, Field, Kbd });