/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ============================================================
// LOGO — 3 rotated nested squares = vibration wave + precision
// ============================================================
function Logo({ size = 20, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
      <rect x="4" y="4" width="16" height="16" stroke={color} strokeWidth="1.5" />
      <rect x="7" y="7" width="10" height="10" stroke={color} strokeWidth="1.5" transform="rotate(15 12 12)" opacity="0.6" />
      <rect x="9.5" y="9.5" width="5" height="5" fill={color} transform="rotate(30 12 12)" />
    </svg>
  );
}

function Wordmark({ showTagline = true }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <Logo size={22} />
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <div style={{ fontWeight: 600, fontSize: 15, letterSpacing: "-0.02em" }}>
          Vibranium
        </div>
        {showTagline && (
          <div style={{ fontSize: 9.5, color: "var(--fg-muted)", letterSpacing: "0.08em", textTransform: "uppercase", marginTop: 2 }}>
            Obserwator wibracji
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// STATUS — colorblind-safe via SHAPE (● = ok, ▲ = warn, ■ = alarm)
// ============================================================
const STATUS_META = {
  ok: { color: "var(--ok)", weak: "var(--ok-weak)", border: "var(--ok-border)", label: "OK", shape: "circle" },
  warn: { color: "var(--warn)", weak: "var(--warn-weak)", border: "var(--warn-border)", label: "Ostrzeżenie", shape: "triangle" },
  alarm: { color: "var(--alarm)", weak: "var(--alarm-weak)", border: "var(--alarm-border)", label: "Alarm", shape: "square" },
  idle: { color: "var(--fg-subtle)", weak: "var(--bg-sunken)", border: "var(--border)", label: "Brak", shape: "dash" },
};

function StatusGlyph({ status, size = 10 }) {
  const meta = STATUS_META[status] || STATUS_META.idle;
  const s = size;
  if (meta.shape === "circle") {
    return <svg width={s} height={s} viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill={meta.color} /></svg>;
  }
  if (meta.shape === "triangle") {
    return <svg width={s} height={s} viewBox="0 0 10 10"><polygon points="5,1 9.5,9 0.5,9" fill={meta.color} /></svg>;
  }
  if (meta.shape === "square") {
    return <svg width={s} height={s} viewBox="0 0 10 10"><rect x="1" y="1" width="8" height="8" fill={meta.color} /></svg>;
  }
  return <svg width={s} height={s} viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke={meta.color} strokeWidth="2"/></svg>;
}

function StatusBadge({ status, label, size = "md" }) {
  const meta = STATUS_META[status] || STATUS_META.idle;
  const pad = size === "sm" ? "2px 6px" : "3px 8px";
  const fs = size === "sm" ? 10 : 11;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: pad, fontSize: fs, fontWeight: 500,
      background: meta.weak, color: meta.color,
      border: `1px solid ${meta.border}`,
      borderRadius: "var(--r-sm)",
      textTransform: "uppercase", letterSpacing: "0.05em",
      fontFamily: "var(--font-mono)",
    }}>
      <StatusGlyph status={status} size={8} />
      {label ?? meta.label}
    </span>
  );
}

// ============================================================
// BUTTON
// ============================================================
function Button({ variant = "default", size = "md", children, icon, onClick, style, disabled }) {
  const sizes = {
    sm: { padding: "4px 10px", fontSize: 11, height: 24 },
    md: { padding: "6px 12px", fontSize: 12, height: 28 },
    lg: { padding: "8px 16px", fontSize: 13, height: 34 },
  };
  const variants = {
    default: { background: "var(--surface)", color: "var(--fg)", border: "1px solid var(--border-strong)" },
    primary: { background: "var(--fg)", color: "var(--bg)", border: "1px solid var(--fg)" },
    ghost: { background: "transparent", color: "var(--fg)", border: "1px solid transparent" },
    accent: { background: "var(--accent)", color: "var(--accent-fg)", border: "1px solid var(--accent)" },
    danger: { background: "var(--alarm-weak)", color: "var(--alarm)", border: "1px solid var(--alarm-border)" },
  };
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        ...sizes[size], ...variants[variant],
        borderRadius: "var(--r-sm)",
        fontWeight: 500,
        letterSpacing: "-0.005em",
        display: "inline-flex", alignItems: "center", gap: 6,
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.5 : 1,
        transition: "background 0.1s, border-color 0.1s",
        whiteSpace: "nowrap",
        ...style,
      }}
      onMouseEnter={(e) => { if (!disabled && variant === "default") e.currentTarget.style.background = "var(--bg-sunken)"; }}
      onMouseLeave={(e) => { if (!disabled && variant === "default") e.currentTarget.style.background = "var(--surface)"; }}
    >
      {icon}
      {children}
    </button>
  );
}

// ============================================================
// ICONS — thin, monoline, lucide-inspired but minimal
// ============================================================
const Ic = {
  search: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
  refresh: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/></svg>,
  download: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3v13m0 0 4-4m-4 4-4-4M4 21h16"/></svg>,
  upload: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 21V8m0 0 4 4m-4-4-4 4M4 3h16"/></svg>,
  mail: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="m3 7 9 6 9-6"/></svg>,
  edit: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 4h4v4M14 4 4 14v4h4L18 8"/></svg>,
  eye: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>,
  plus: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 5v14M5 12h14"/></svg>,
  chevronRight: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m9 6 6 6-6 6"/></svg>,
  chevronDown: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m6 9 6 6 6-6"/></svg>,
  chevronLeft: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m15 6-6 6 6 6"/></svg>,
  arrowUp: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 19V5M6 11l6-6 6 6"/></svg>,
  arrowDown: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 5v14M6 13l6 6 6-6"/></svg>,
  dashboard: (p) => <svg width={p.size ?? 18} height={p.size ?? 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="8" height="10"/><rect x="13" y="3" width="8" height="6"/><rect x="3" y="15" width="8" height="6"/><rect x="13" y="11" width="8" height="10"/></svg>,
  measure: (p) => <svg width={p.size ?? 18} height={p.size ?? 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 12h3l3-7 4 14 3-7h5"/></svg>,
  chart: (p) => <svg width={p.size ?? 18} height={p.size ?? 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 21V3M3 21h18"/><path d="M7 16v-5M11 16V8M15 16v-3M19 16V5"/></svg>,
  config: (p) => <svg width={p.size ?? 18} height={p.size ?? 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.3.9a7 7 0 0 0-2-1.2L14 3h-4l-.6 2.5a7 7 0 0 0-2 1.2l-2.3-.9-2 3.5 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.2l-2 1.5 2 3.5 2.3-.9a7 7 0 0 0 2 1.2L10 21h4l.6-2.5a7 7 0 0 0 2-1.2l2.3.9 2-3.5-2-1.5c.1-.4.1-.8.1-1.2Z"/></svg>,
  computer: (p) => <svg width={p.size ?? 18} height={p.size ?? 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="4" width="18" height="13" rx="1"/><path d="M8 21h8M12 17v4"/></svg>,
  moon: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10Z"/></svg>,
  sun: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4"/></svg>,
  file: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 3H6v18h12V7l-4-4ZM14 3v4h4"/></svg>,
  wrench: (p) => <svg width={p.size ?? 14} height={p.size ?? 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-.5-.5-2 2.3-2.3Z"/></svg>,
};

// ============================================================
// INPUT
// ============================================================
function Input({ icon, placeholder, value, onChange, style }) {
  return (
    <div style={{
      position: "relative",
      display: "flex", alignItems: "center",
      height: 28,
      background: "var(--surface)",
      border: "1px solid var(--border-strong)",
      borderRadius: "var(--r-sm)",
      ...style,
    }}>
      {icon && <div style={{ padding: "0 8px 0 10px", color: "var(--fg-muted)", display: "flex" }}>{icon}</div>}
      <input
        value={value ?? ""}
        onChange={onChange}
        placeholder={placeholder}
        style={{
          flex: 1, border: 0, outline: 0, background: "transparent",
          padding: icon ? "0 10px 0 0" : "0 10px",
          fontSize: 12, color: "var(--fg)", height: "100%",
        }}
      />
    </div>
  );
}

// ============================================================
// CARD
// ============================================================
function Card({ children, style, pad = true, elev = false }) {
  return (
    <div style={{
      background: elev ? "var(--bg-elev)" : "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--r-md)",
      padding: pad ? 16 : 0,
      ...style,
    }}>
      {children}
    </div>
  );
}

// ============================================================
// STAT CARD
// ============================================================
function StatCard({ label, value, unit, trend, trendValue, status, note, style }) {
  const trendColor = trend === "up" ? "var(--alarm)" : trend === "down" ? "var(--ok)" : "var(--fg-muted)";
  return (
    <div style={{
      padding: "14px 16px",
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--r-md)",
      display: "flex", flexDirection: "column", gap: 8,
      ...style,
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div className="uppercase-label">{label}</div>
        {status && <StatusGlyph status={status} size={9} />}
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
        <div className="mono tighter" style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1 }}>
          {value}
        </div>
        {unit && <div className="mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>{unit}</div>}
      </div>
      {(trend || note) && (
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: trendColor }}>
          {trend === "up" && <Ic.arrowUp size={10} />}
          {trend === "down" && <Ic.arrowDown size={10} />}
          <span className="mono">{trendValue}</span>
          {note && <span style={{ color: "var(--fg-muted)" }}>{note}</span>}
        </div>
      )}
    </div>
  );
}

// ============================================================
// BREADCRUMB
// ============================================================
function Breadcrumb({ items }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--fg-muted)" }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span style={{ color: "var(--fg-subtle)" }}><Ic.chevronRight size={11} /></span>}
          <span
            onClick={it.onClick}
            style={{
              cursor: it.onClick ? "pointer" : "default",
              color: i === items.length - 1 ? "var(--fg)" : "var(--fg-muted)",
              fontWeight: i === items.length - 1 ? 500 : 400,
            }}
          >
            {it.label}
          </span>
        </React.Fragment>
      ))}
    </div>
  );
}

Object.assign(window, {
  Logo, Wordmark, StatusGlyph, StatusBadge, STATUS_META,
  Button, Input, Card, StatCard, Breadcrumb, Ic,
});