// Shared UI primitives + icons
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// === Icons (inline SVG) ===
const Icon = ({ name, size = 16, stroke = 1.7, ...p }) => {
  const paths = {
    home: <><path d="M3 11.5L12 4l9 7.5"/><path d="M5 10v10h14V10"/></>,
    briefcase: <><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2"/><path d="M3 12h18"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></>,
    message: <><path d="M21 12a9 9 0 11-3.5-7.1L21 4l-1 4a8.9 8.9 0 011 4z"/></>,
    layout: <><rect x="3" y="3" width="7" height="18" rx="1.5"/><rect x="14" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="16" width="7" height="5" rx="1.5"/></>,
    file: <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z"/><path d="M14 3v5h5"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    chevron: <><path d="M9 6l6 6-6 6"/></>,
    chevronD: <><path d="M6 9l6 6 6-6"/></>,
    arrow: <><path d="M5 12h14M13 5l7 7-7 7"/></>,
    arrowL: <><path d="M19 12H5M11 5l-7 7 7 7"/></>,
    x: <><path d="M18 6L6 18M6 6l12 12"/></>,
    check: <><path d="M5 13l4 4L19 7"/></>,
    sparkles: <><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"/><circle cx="12" cy="12" r="2.5"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6"/></>,
    users: <><circle cx="9" cy="8" r="3.5"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19c1-3 3.5-5 6-5s5 2 6 5"/><path d="M15 19c.5-2.5 2-4 4-4s3 1 4 3"/></>,
    phone: <><path d="M5 4h3l2 5-2 1c1 3 3 5 6 6l1-2 5 2v3a2 2 0 01-2 2A14 14 0 013 6a2 2 0 012-2z"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    mapPin: <><path d="M12 21s-7-7.5-7-12a7 7 0 0114 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 00-.1-1.2l2-1.5-2-3.5-2.4.8a7 7 0 00-2-1.2L14 3h-4l-.5 2.4a7 7 0 00-2 1.2l-2.4-.8-2 3.5 2 1.5A7 7 0 005 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.5 2.4-.8c.6.5 1.3.9 2 1.2L10 21h4l.5-2.4c.7-.3 1.4-.7 2-1.2l2.4.8 2-3.5-2-1.5c.1-.4.1-.8.1-1.2z"/></>,
    link: <><path d="M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1"/><path d="M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1"/></>,
    copy: <><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/></>,
    grip: <><circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/></>,
    trash: <><path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></>,
    pencil: <><path d="M4 20l4-1 11-11-3-3L5 16l-1 4z"/></>,
    bell: <><path d="M6 8a6 6 0 1112 0c0 5 3 5 3 9H3c0-4 3-4 3-9z"/><path d="M10 21a2 2 0 004 0"/></>,
    play: <><path d="M7 5l12 7-12 7V5z"/></>,
    download: <><path d="M12 4v12M6 12l6 6 6-6M5 20h14"/></>,
    cv: <><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 7h6M9 11h6M9 15h4"/></>,
    star: <><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6L12 17l-5.4 2.8 1-6L3.2 9.5l6.1-.9L12 3z"/></>,
    flag: <><path d="M5 21V4"/><path d="M5 4h11l-1.5 3L16 10H5"/></>,
    filter: <><path d="M4 5h16l-6 8v6l-4-2v-4L4 5z"/></>,
    eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="2.5"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={stroke}
         strokeLinecap="round" strokeLinejoin="round" {...p}>
      {paths[name]}
    </svg>
  );
};

const Avatar = ({ name, size = '', color }) => {
  const init = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
  // deterministic warm bg
  let hash = 0;
  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
  const hue = hash % 360;
  const bg = `oklch(0.93 0.04 ${hue})`;
  const fg = `oklch(0.32 0.10 ${hue})`;
  return (
    <div className={'avatar ' + size} style={{ background: color || bg, color: fg, borderColor: 'transparent' }}>
      {init}
    </div>
  );
};

const Badge = ({ children, kind = '', ...p }) => <span className={'badge ' + kind} {...p}>{children}</span>;

const Btn = ({ kind = '', size = '', icon, children, ...rest }) => (
  <button className={['btn', kind, size].filter(Boolean).join(' ')} {...rest}>
    {icon && <Icon name={icon} size={size === 'sm' ? 13 : 14} />}
    {children}
  </button>
);

const Toggle = ({ on, onChange }) => (
  <div className={'tgl ' + (on ? 'on' : '')} onClick={() => onChange(!on)} role="switch" aria-checked={on}/>
);

const Source = ({ src }) => {
  const s = window.TalentirData.SOURCES[src];
  if (!s) return null;
  return <span className="src" title={s.label}><span className={'src-ico ' + s.cls}>{s.code}</span></span>;
};

const ScoreNumber = ({ value, size = 14 }) => {
  const cls = value >= 80 ? 'good' : value >= 60 ? '' : value >= 40 ? 'warn' : 'danger';
  return (
    <div className="scorebox">
      <span className={'v ' + cls} style={{ fontSize: size }}>{value}</span>
    </div>
  );
};

const ScoreBar = ({ value }) => {
  const cls = value >= 80 ? 'good' : value >= 60 ? '' : value >= 40 ? 'warn' : 'danger';
  return <span className={'score-bar ' + cls} style={{ '--pct': value + '%' }} />;
};

const StatusBadge = ({ status }) => {
  const s = window.TalentirData.STATUSES.find(x => x.id === status);
  if (!s) return null;
  const isInterview = status === 'wawancara-hr' || status === 'wawancara-user';
  const kind = status === 'diterima' ? 'good' : status === 'ditolak' ? 'danger' : isInterview ? 'warn' : status === 'ai' ? 'accent' : '';
  return <Badge kind={kind}><span className="dot" style={{ background: 'currentColor' }}/>{s.name}</Badge>;
};

// HR avatar (uses user-defined color)
const HRAvatar = ({ hr, size = 22 }) => {
  if (!hr) return null;
  const init = hr.name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: 99,
      display: 'grid', placeItems: 'center',
      background: hr.avatar, color: hr.color,
      fontSize: Math.round(size * 0.4),
      fontWeight: 800,
      flexShrink: 0,
    }}>{init}</div>
  );
};

// Inline pip showing who's assigned
const AssigneePip = ({ hrId, onClick }) => {
  const hr = window.TalentirData.HR_USERS.find(h => h.id === hrId);
  if (!hr) {
    return (
      <span className="asg-pip unassigned" onClick={onClick} style={onClick ? { cursor: 'pointer' } : null}>
        <span className="av">?</span>
        Belum dibagi
      </span>
    );
  }
  return (
    <span className="asg-pip" onClick={onClick} style={onClick ? { cursor: 'pointer' } : null}>
      <HRAvatar hr={hr} size={16}/>
      {hr.name.split(' ')[0]}
    </span>
  );
};

Object.assign(window, { Icon, Avatar, Badge, Btn, Toggle, Source, ScoreNumber, ScoreBar, StatusBadge, HRAvatar, AssigneePip });