// Shared atoms, tokens, icons for Kuhnic redesign
// Tailwind-independent. Uses CSS vars + plain inline classes / styles.

const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;

// ─────────────────────────────────────────────────────────────
// MIcons — minimal Lucide-style stroke icons
// ─────────────────────────────────────────────────────────────
const MIcon = ({ d, size = 16, stroke = 1.8, fill = 'none', style = {}, children }) => (
  <svg
    width={size} height={size} viewBox="0 0 24 24" fill={fill}
    stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
    style={{ flexShrink: 0, ...style }}
  >
    {d ? <path d={d} /> : children}
  </svg>
);

const I = {
  Dashboard: (p) => <MIcon {...p}><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></MIcon>,
  Users: (p) => <MIcon {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></MIcon>,
  FileText: (p) => <MIcon {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h5"/></MIcon>,
  Wrench: (p) => <MIcon {...p}><path d="M14.7 6.3a5 5 0 0 1-6.4 6.4L3 18l3 3 5.3-5.3a5 5 0 0 0 6.4-6.4l-3 3-2.4-2.4 3-3z"/></MIcon>,
  Calendar: (p) => <MIcon {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></MIcon>,
  Message: (p) => <MIcon {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></MIcon>,
  Dollar: (p) => <MIcon {...p}><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></MIcon>,
  Shield: (p) => <MIcon {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></MIcon>,
  Book: (p) => <MIcon {...p}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5z"/><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></MIcon>,
  Chart: (p) => <MIcon {...p}><path d="M3 3v18h18"/><path d="M7 15l4-4 4 4 5-5"/></MIcon>,
  Settings: (p) => <MIcon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.3.16.55.41.72.72A1.65 1.65 0 0 0 21 10h.09a2 2 0 0 1 0 4H21a1.65 1.65 0 0 0-1.6 1z"/></MIcon>,
  Bell: (p) => <MIcon {...p}><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"/></MIcon>,
  Search: (p) => <MIcon {...p}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></MIcon>,
  Plus: (p) => <MIcon {...p}><path d="M12 5v14M5 12h14"/></MIcon>,
  Chevron: (p) => <MIcon {...p}><path d="m9 18 6-6-6-6"/></MIcon>,
  ChevronDown: (p) => <MIcon {...p}><path d="m6 9 6 6 6-6"/></MIcon>,
  ArrowUp: (p) => <MIcon {...p}><path d="m5 12 7-7 7 7M12 5v14"/></MIcon>,
  ArrowDown: (p) => <MIcon {...p}><path d="m19 12-7 7-7-7M12 19V5"/></MIcon>,
  ArrowRight: (p) => <MIcon {...p}><path d="M5 12h14M13 5l7 7-7 7"/></MIcon>,
  MapPin: (p) => <MIcon {...p}><path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></MIcon>,
  Phone: (p) => <MIcon {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.4-1.4a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></MIcon>,
  Navigation: (p) => <MIcon {...p}><polygon points="3 11 22 2 13 21 11 13 3 11"/></MIcon>,
  Camera: (p) => <MIcon {...p}><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></MIcon>,
  Check: (p) => <MIcon {...p}><path d="M20 6 9 17l-5-5"/></MIcon>,
  Clock: (p) => <MIcon {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></MIcon>,
  Alert: (p) => <MIcon {...p}><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></MIcon>,
  Info: (p) => <MIcon {...p}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></MIcon>,
  Star: (p) => <MIcon {...p}><polygon points="12 2 15.1 8.3 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 8.9 8.3 12 2"/></MIcon>,
  Zap: (p) => <MIcon {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></MIcon>,
  Sun: (p) => <MIcon {...p}><circle cx="12" cy="12" r="5"/><path d="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"/></MIcon>,
  Moon: (p) => <MIcon {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></MIcon>,
  Menu: (p) => <MIcon {...p}><path d="M3 12h18M3 6h18M3 18h18"/></MIcon>,
  X: (p) => <MIcon {...p}><path d="M18 6 6 18M6 6l12 12"/></MIcon>,
  Droplet: (p) => <MIcon {...p}><path d="M12 2.7s7 6.6 7 11.3a7 7 0 0 1-14 0c0-4.7 7-11.3 7-11.3z"/></MIcon>,
  Thermometer: (p) => <MIcon {...p}><path d="M14 14.8V4a2 2 0 1 0-4 0v10.8a4 4 0 1 0 4 0z"/></MIcon>,
  Fan: (p) => <MIcon {...p}><path d="M10.8 12a2.2 2.2 0 1 1 2.2 2.2"/><path d="M13 3v5a3 3 0 0 0 3 3h5a9 9 0 0 0-8-8z"/><path d="M3 11a9 9 0 0 0 8 8v-5a3 3 0 0 0-3-3H3z"/><path d="M11 21a9 9 0 0 0 8-8h-5a3 3 0 0 0-3 3v5z"/></MIcon>,
  Home: (p) => <MIcon {...p}><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></MIcon>,
  User: (p) => <MIcon {...p}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></MIcon>,
  Briefcase: (p) => <MIcon {...p}><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></MIcon>,
  GripVertical: (p) => <MIcon {...p}><circle cx="9" cy="5" r="1" fill="currentColor"/><circle cx="9" cy="12" r="1" fill="currentColor"/><circle cx="9" cy="19" r="1" fill="currentColor"/><circle cx="15" cy="5" r="1" fill="currentColor"/><circle cx="15" cy="12" r="1" fill="currentColor"/><circle cx="15" cy="19" r="1" fill="currentColor"/></MIcon>,
  Plug: (p) => <MIcon {...p}><path d="M12 22v-5M9 7V2M15 7V2M5 14h14v-4H5v4zm2 0v2a5 5 0 0 0 10 0v-2"/></MIcon>,
  Sparkles: (p) => <MIcon {...p}><path d="m12 3-1.5 4.5L6 9l4.5 1.5L12 15l1.5-4.5L18 9l-4.5-1.5L12 3zM5 18l-.8 2.2L2 21l2.2.8L5 24l.8-2.2L8 21l-2.2-.8L5 18zM19 13l-.5 1.5L17 15l1.5.5.5 1.5.5-1.5 1.5-.5-1.5-.5L19 13z"/></MIcon>,
  TrendUp: (p) => <MIcon {...p}><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></MIcon>,
  CreditCard: (p) => <MIcon {...p}><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></MIcon>,
  Snowflake: (p) => <MIcon {...p}><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19M12 8l-3-3M12 8l3-3M12 16l-3 3M12 16l3 3M8 12l-3-3M8 12l-3 3M16 12l3-3M16 12l3 3"/></MIcon>,
};

// ─────────────────────────────────────────────────────────────
// Tokens
// ─────────────────────────────────────────────────────────────
const tokens = {
  // Status colors (light mode)
  status: {
    red:    { bg: 'oklch(0.96 0.02 25)',  fg: 'oklch(0.48 0.18 25)',  border: 'oklch(0.88 0.06 25)' },
    green:  { bg: 'oklch(0.95 0.04 155)', fg: 'oklch(0.45 0.13 155)', border: 'oklch(0.85 0.08 155)' },
    amber:  { bg: 'oklch(0.96 0.05 75)',  fg: 'oklch(0.48 0.14 65)',  border: 'oklch(0.88 0.1 75)' },
    blue:   { bg: 'oklch(0.95 0.03 240)', fg: 'oklch(0.48 0.15 240)', border: 'oklch(0.86 0.07 240)' },
    purple: { bg: 'oklch(0.95 0.03 290)', fg: 'oklch(0.48 0.15 290)', border: 'oklch(0.86 0.07 290)' },
    slate:  { bg: 'oklch(0.96 0 0)',      fg: 'oklch(0.45 0 0)',      border: 'oklch(0.88 0 0)' },
    teal:   { bg: 'oklch(0.95 0.03 195)', fg: 'oklch(0.45 0.1 195)',  border: 'oklch(0.86 0.06 195)' },
  },
};

// ─────────────────────────────────────────────────────────────
// Atoms
// ─────────────────────────────────────────────────────────────
function Badge({ tone = 'slate', children, dot = false, style = {} }) {
  const t = tokens.status[tone] || tokens.status.slate;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 22, padding: '0 10px', borderRadius: 999,
      background: t.bg, color: t.fg,
      fontSize: 12, fontWeight: 500, lineHeight: 1,
      whiteSpace: 'nowrap',
      ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.fg }} />}
      {children}
    </span>
  );
}

function Button({ variant = 'default', size = 'default', children, style = {}, onClick, ...rest }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
    fontSize: 14, fontWeight: 500, lineHeight: 1,
    borderRadius: 10, border: '1px solid transparent',
    cursor: 'pointer', transition: 'all 120ms',
    whiteSpace: 'nowrap', fontFamily: 'inherit',
  };
  const sizes = {
    default: { height: 32, padding: '0 14px' },
    sm: { height: 28, padding: '0 12px', fontSize: 13 },
    lg: { height: 36, padding: '0 16px' },
    icon: { width: 32, height: 32, padding: 0 },
    'icon-sm': { width: 28, height: 28, padding: 0 },
  };
  const variants = {
    default: { background: 'var(--brand)', color: 'var(--brand-fg)', border: '1px solid var(--brand)' },
    outline: { background: 'var(--card)', color: 'var(--fg)', border: '1px solid var(--border)' },
    ghost:   { background: 'transparent', color: 'var(--fg)' },
    secondary: { background: 'var(--muted)', color: 'var(--fg)' },
    destructive: { background: tokens.status.red.bg, color: tokens.status.red.fg, border: `1px solid ${tokens.status.red.border}` },
  };
  return (
    <button
      onClick={onClick}
      style={{ ...base, ...sizes[size], ...variants[variant], ...style }}
      onMouseEnter={(e) => {
        if (variant === 'ghost') e.currentTarget.style.background = 'var(--muted)';
        if (variant === 'outline') e.currentTarget.style.background = 'var(--muted)';
      }}
      onMouseLeave={(e) => {
        if (variant === 'ghost') e.currentTarget.style.background = 'transparent';
        if (variant === 'outline') e.currentTarget.style.background = 'var(--card)';
      }}
      {...rest}
    >
      {children}
    </button>
  );
}

function Card({ children, style = {}, pad = true, ...rest }) {
  return (
    <div style={{
      background: 'var(--card)',
      border: '1px solid var(--border)',
      borderRadius: 14,
      padding: pad ? 20 : 0,
      ...style,
    }} {...rest}>{children}</div>
  );
}

// Placeholder SVG for job photos etc
function PhotoPlaceholder({ width = 120, height = 120, label, style = {} }) {
  return (
    <div style={{
      width, height, borderRadius: 10,
      background: 'repeating-linear-gradient(45deg, var(--muted) 0 8px, var(--muted2) 8px 16px)',
      border: '1px solid var(--border)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--muted-fg)', fontFamily: 'ui-monospace, monospace',
      fontSize: 10, textAlign: 'center', padding: 4,
      ...style,
    }}>
      {label || 'photo'}
    </div>
  );
}

// Gradient monogram avatar
const AVATAR_GRADIENTS = [
  ['#0d9488', '#14b8a6'], // teal
  ['#ea580c', '#f97316'], // orange
  ['#7c3aed', '#a855f7'], // purple
  ['#dc2626', '#f43f5e'], // rose
  ['#059669', '#10b981'], // emerald
  ['#2563eb', '#3b82f6'], // blue
  ['#b45309', '#d97706'], // amber
  ['#475569', '#64748b'], // slate
];
function hashString(s) {
  let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
  return Math.abs(h);
}
function Avatar({ name, size = 32, style = {} }) {
  const parts = name.split(/\s+/);
  const initials = (parts[0]?.[0] || '') + (parts[1]?.[0] || '');
  const g = AVATAR_GRADIENTS[hashString(name) % AVATAR_GRADIENTS.length];
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: `linear-gradient(135deg, ${g[0]}, ${g[1]})`,
      color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.38, fontWeight: 600, letterSpacing: 0,
      flexShrink: 0,
      ...style,
    }}>
      {initials.toUpperCase()}
    </div>
  );
}

// StatCard — big number, label, trend
function StatCard({ label, value, delta, deltaGood, icon, pad = 20, sub }) {
  return (
    <div style={{
      background: 'var(--card)', border: '1px solid var(--border)',
      borderRadius: 14, padding: pad,
      display: 'flex', flexDirection: 'column', gap: 10, minHeight: 108,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        color: 'var(--muted-fg)', fontSize: 13, fontWeight: 500,
      }}>
        <span>{label}</span>
        {icon && <span style={{ color: 'var(--muted-fg)' }}>{icon}</span>}
      </div>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.4, color: 'var(--fg)', lineHeight: 1 }}>
        {value}
      </div>
      {(delta || sub) && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
          {delta && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 2,
              color: deltaGood ? tokens.status.green.fg : tokens.status.red.fg,
              fontWeight: 500,
            }}>
              {deltaGood ? <I.ArrowUp size={12} /> : <I.ArrowDown size={12} />}
              {delta}
            </span>
          )}
          {sub && <span style={{ color: 'var(--muted-fg)' }}>{sub}</span>}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  I, MIcon, tokens, Badge, Button, Card, PhotoPlaceholder, Avatar, StatCard,
  hashString, AVATAR_GRADIENTS,
});