// UI components for Edgesense

// ---- Icons (minimal line set, no emoji) ----
const Icon = ({ name, size = 16, stroke = 1.6 }) => {
  const paths = {
    wind: 'M3 8h12a3 3 0 1 0-3-3M3 12h17M3 16h12a3 3 0 1 1-3 3',
    activity: 'M3 12h4l2-7 4 14 2-7h6',
    cpu: 'M5 5h14v14H5z M9 1v4M15 1v4M9 19v4M15 19v4M1 9h4M1 15h4M19 9h4M19 15h4 M9 9h6v6H9z',
    bell: 'M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8 M10 21a2 2 0 0 0 4 0',
    map: 'M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z M9 3v15 M15 6v15',
    settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z 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-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 1.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.3H9a1.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.8V9a1.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',
    download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
    search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M21 21l-4.3-4.3',
    arrowUp: 'M12 19V5 M5 12l7-7 7 7',
    arrowDown: 'M12 5v14 M19 12l-7 7-7-7',
    arrowRight: 'M5 12h14 M12 5l7 7-7 7',
    plus: 'M12 5v14 M5 12h14',
    check: 'M5 13l4 4L19 7',
    thermo: 'M14 14V4a2 2 0 0 0-4 0v10a4 4 0 1 0 4 0z',
    drop: 'M12 2s6 7 6 12a6 6 0 1 1-12 0c0-5 6-12 6-12z',
    gauge: 'M12 22a10 10 0 1 0-7-3 M12 14l6-6',
    leaf: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 3c1 4 .5 5-1 7-1 1.5-2 4-3 6 M2 22l8-8',
    cloud: 'M16 17a4 4 0 1 0 0-8h-1.3A6 6 0 0 0 4 11a4 4 0 0 0 0 8z',
    sun: 'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
    moon: 'M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z',
    pin: 'M12 22s-7-6.4-7-12a7 7 0 1 1 14 0c0 5.6-7 12-7 12z M12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
    chevronRight: 'M9 6l6 6-6 6',
    chevronDown: 'M6 9l6 6 6-6',
    sparkles: 'M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8',
    layers: 'M12 2l10 6-10 6L2 8l10-6z M2 14l10 6 10-6 M2 18l10 6 10-6',
    user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
  };
  const d = paths[name] || '';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      {d.split('M').filter(Boolean).map((seg, i) => <path key={i} d={'M' + seg} />)}
    </svg>
  );
};

// ---- Brand mark ----
const Brand = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <rect x="0.5" y="0.5" width="31" height="31" rx="9" stroke="var(--ink)" strokeWidth="1" fill="var(--ink)" />
    <g stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round">
      <path d="M7 12 H18 a2.5 2.5 0 1 0 -2.5 -2.5" />
      <path d="M7 16 H22" />
      <path d="M7 20 H18 a2.5 2.5 0 1 1 -2.5 2.5" />
    </g>
  </svg>
);

// ---- Sidebar ----
const Sidebar = ({ current, onSelect }) => {
  const nav = [
    { id: 'overview',  label: 'Overview',     icon: 'activity' },
    { id: 'zones',     label: 'Zones & Map',  icon: 'map' },
    { id: 'history',   label: 'History',      icon: 'layers' },
    { id: 'forecast',  label: 'Forecast',     icon: 'sparkles' },
    { id: 'alerts',    label: 'Alerts',       icon: 'bell', badge: 3 },
    { id: 'devices',   label: 'Edge Devices', icon: 'cpu' },
  ];
  return (
    <aside style={{
      width: 240, flexShrink: 0, padding: '20px 16px',
      borderRight: '1px solid var(--line)',
      display: 'flex', flexDirection: 'column', gap: 24,
      background: 'var(--bg)',
      position: 'sticky', top: 0, height: '100vh', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Brand size={30} />
        <div style={{ lineHeight: 1.15 }}>
          <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: '-0.01em' }}>Edgesense</div>
          <div style={{ color: 'var(--ink-3)', fontSize: 11, fontFamily: 'Geist Mono' }}>v2.4 · IAQ Cloud</div>
        </div>
      </div>

      {/* search */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '8px 10px',
        border: '1px solid var(--line)',
        borderRadius: 10,
        background: 'var(--bg-elev)',
        color: 'var(--ink-3)',
      }}>
        <Icon name="search" size={14} />
        <span style={{ fontSize: 13 }}>Search metrics…</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'Geist Mono', fontSize: 11, color: 'var(--ink-4)', padding: '1px 5px', border: '1px solid var(--line)', borderRadius: 4 }}>⌘K</span>
      </div>

      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {nav.map(n => {
          const active = n.id === current;
          return (
            <button key={n.id} onClick={() => onSelect(n.id)} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '9px 10px',
              border: 0,
              background: active ? 'var(--ink)' : 'transparent',
              color: active ? 'var(--bg)' : 'var(--ink-2)',
              borderRadius: 8,
              cursor: 'pointer',
              fontSize: 13.5,
              fontWeight: active ? 500 : 400,
              textAlign: 'left',
              transition: 'background 0.15s',
            }}>
              <Icon name={n.icon} size={15} />
              <span>{n.label}</span>
              {n.badge && (
                <span style={{
                  marginLeft: 'auto',
                  background: active ? 'var(--accent)' : 'var(--bad)',
                  color: active ? 'var(--ink)' : 'var(--bg-elev)',
                  fontSize: 10, fontFamily: 'Geist Mono', fontWeight: 500,
                  padding: '1px 6px', borderRadius: 10, minWidth: 18, textAlign: 'center',
                }}>{n.badge}</span>
              )}
            </button>
          );
        })}
      </nav>

      <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          padding: 12, borderRadius: 12,
          background: 'var(--bg-elev)',
          border: '1px solid var(--line)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--ink-3)', fontFamily: 'Geist Mono', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--good)' }} />
            <span>System Live</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 6 }}>
            19 / 19 nodes online
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 2, fontFamily: 'Geist Mono' }}>
            last sync · 2s ago
          </div>
        </div>
        <button style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 10px', border: '1px solid var(--line)', borderRadius: 10, background: 'transparent', cursor: 'pointer', fontSize: 13,
        }}>
          <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent)', display: 'grid', placeItems: 'center', color: 'var(--ink)', fontSize: 10, fontWeight: 600 }}>SA</div>
          <span style={{ color: 'var(--ink-2)' }}>S. Ahsan</span>
          <Icon name="chevronDown" size={14} />
        </button>
      </div>
    </aside>
  );
};

// ---- Top bar ----
const TopBar = ({ now, crumb, title, accent }) => {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 16,
      padding: '20px 32px 16px',
      borderBottom: '1px solid var(--line)',
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-3)', fontSize: 12, fontFamily: 'Geist Mono', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
          <Icon name="pin" size={12} />
          Independent University · Bashundhara Campus
          <span style={{ color: 'var(--ink-4)' }}>/</span>
          <span>{crumb}</span>
        </div>
        <h1 className="serif" style={{ margin: '6px 0 0', fontSize: 36, lineHeight: 1.05, fontWeight: 400, letterSpacing: '-0.02em' }}>
          {title} <em style={{ color: 'var(--ink-3)' }}>{accent}</em>
        </h1>
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
        <TimeRangeSwitcher />
        <button style={iconBtn}><Icon name="download" size={15} /></button>
        <button style={iconBtn}><Icon name="bell" size={15} /></button>
        <button style={iconBtn}><Icon name="settings" size={15} /></button>
      </div>
    </div>
  );
};

const iconBtn = {
  display: 'inline-grid', placeItems: 'center',
  width: 34, height: 34,
  border: '1px solid var(--line)',
  background: 'var(--bg-elev)',
  borderRadius: 10,
  color: 'var(--ink-2)',
  cursor: 'pointer',
};

const TimeRangeSwitcher = () => {
  const [v, setV] = React.useState('24h');
  const opts = ['1h', '24h', '7d', '30d'];
  return (
    <div style={{ display: 'inline-flex', padding: 3, border: '1px solid var(--line)', borderRadius: 10, background: 'var(--bg-elev)' }}>
      {opts.map(o => (
        <button key={o} onClick={() => setV(o)} style={{
          border: 0, padding: '5px 10px',
          background: v === o ? 'var(--ink)' : 'transparent',
          color: v === o ? 'var(--bg)' : 'var(--ink-3)',
          borderRadius: 7,
          fontSize: 12, fontFamily: 'Geist Mono', cursor: 'pointer',
        }}>{o}</button>
      ))}
    </div>
  );
};

// ---- Card primitive ----
const Card = ({ children, style, hoverable = false, ...rest }) => (
  <div {...rest} style={{
    background: 'var(--bg-elev)',
    border: '1px solid var(--line)',
    borderRadius: 'var(--radius)',
    boxShadow: 'var(--shadow-sm)',
    ...(hoverable ? { transition: 'transform 0.2s, box-shadow 0.2s' } : {}),
    ...style,
  }}>{children}</div>
);

// ---- Metric Card ----
const MetricCard = ({ metric, value, unit, delta, hue, line, series, dp = 1, icon, label, status, large = false }) => {
  const arrow = delta == null ? null : (delta > 0 ? 'arrowUp' : (delta < 0 ? 'arrowDown' : 'arrowRight'));
  const deltaColor = delta > 0 ? 'var(--bad)' : (delta < 0 ? 'var(--good)' : 'var(--ink-4)');
  return (
    <Card style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{
          width: 24, height: 24, borderRadius: 7,
          background: hue, color: 'var(--ink)',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name={icon} size={13} />
        </span>
        <span style={{ fontSize: 12.5, color: 'var(--ink-2)', fontWeight: 500 }}>{label}</span>
        {status && (
          <span style={{ marginLeft: 'auto', fontSize: 10, fontFamily: 'Geist Mono', textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)' }}>
            {status}
          </span>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, lineHeight: 1 }}>
        <span className="mono" style={{
          fontSize: large ? 36 : 28,
          fontWeight: 500, letterSpacing: '-0.03em',
          fontVariantNumeric: 'tabular-nums',
        }}>{typeof value === 'number' ? value.toFixed(dp) : value}</span>
        <span style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'Geist Mono' }}>{unit}</span>
      </div>
      <div style={{ marginTop: -2 }}>
        <Sparkline data={series} color={line || hue} height={34} />
      </div>
      {delta != null && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11.5, color: deltaColor, fontFamily: 'Geist Mono' }}>
          <Icon name={arrow} size={11} stroke={2} />
          <span>{Math.abs(delta).toFixed(dp)}</span>
          <span style={{ color: 'var(--ink-4)' }}>vs prev hour</span>
        </div>
      )}
    </Card>
  );
};

Object.assign(window, { Icon, Brand, Sidebar, TopBar, TimeRangeSwitcher, Card, MetricCard, iconBtn });