/* ui.jsx — shared atoms: Icon set, StatusBadge, Avatar, Logo, Ring, Bars
   Exports to window. Stroke icons inherit currentColor. */

const YB_ICONS = {
  dashboard: 'M3 3h7v8H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 15h7v6H3z',
  building: 'M3 21h18M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M9 7h2M9 11h2M9 15h2M19 21v-9a1 1 0 0 0-1-1h-3',
  doc: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h6',
  shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  shieldcheck: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zM9 12l2 2 4-4',
  alert: 'M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01',
  clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2',
  kanban: 'M6 4v13M12 4v9M18 4v6M3 4h18',
  sparkle: 'M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z',
  search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3',
  bell: 'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  plus: 'M12 5v14M5 12h14',
  upload: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12',
  check: 'M20 6 9 17l-5-5',
  chevdown: 'M6 9l6 6 6-6',
  chevright: 'M9 6l6 6-6 6',
  arrowup: 'M12 19V5M5 12l7-7 7 7',
  arrowdown: 'M12 5v14M19 12l-7 7-7-7',
  calendar: 'M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',
  pen: 'M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z',
  scan: 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M3 12h18',
  user: 'M20 21a8 8 0 1 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
  pin: 'M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
  filter: 'M3 5h18l-7 8v6l-4-2v-4z',
  link: 'M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H1a2 2 0 0 1 0-4h.1A1.6 1.6 0 0 0 2.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H7a1.6 1.6 0 0 0 1-1.5V1a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V7a1.6 1.6 0 0 0 1.5 1H23a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z',
  receipt: 'M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1zM8 7h8M8 11h8M8 15h5',
  home: 'M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z',
};

function Icon({ name, size = 18, stroke = 1.6, fill = 'none', style, className }) {
  const d = YB_ICONS[name] || '';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      className={className} style={{ flex: '0 0 auto', ...style }}>
      {d.split('M').filter(Boolean).map((seg, i) => <path key={i} d={'M' + seg} />)}
    </svg>
  );
}

const STATUS = {
  compliant: ['badge-compliant', 'Cumplido'],
  review:    ['badge-review', 'En revisión'],
  missing:   ['badge-missing', 'Falta info'],
  expired:   ['badge-expired', 'Vencido'],
  progress:  ['badge-progress', 'En trámite'],
  pending:   ['badge-neutral', 'Pendiente'],
  signed:    ['badge-compliant', 'Firmado'],
};
function StatusBadge({ kind, children }) {
  const [cls, label] = STATUS[kind] || ['badge-neutral', kind];
  return <span className={'badge ' + cls}><span className="dot" />{children || label}</span>;
}

function Avatar({ name, size = 30, bg = '#E6A100', color = '#3a2a00' }) {
  const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: bg, color,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.38, fontWeight: 700, flex: '0 0 auto', letterSpacing: '.02em',
    }}>{initials}</div>
  );
}

/* YellowBlock mark — stacked blocks forming a "Y/B" block. variant: solid|mono */
function Logo({ size = 26, wordmark = true, ink = 'var(--ink)' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: size * 0.34 }}>
      <svg width={size} height={size} viewBox="0 0 32 32" style={{ flex: '0 0 auto' }}>
        <rect x="2" y="2" width="28" height="28" rx="7" fill="#1C1A17" />
        <rect x="7" y="7" width="8.5" height="8.5" rx="2.2" fill="#FFC83D" />
        <rect x="16.5" y="7" width="8.5" height="8.5" rx="2.2" fill="#FFC83D" opacity="0.45" />
        <rect x="7" y="16.5" width="8.5" height="8.5" rx="2.2" fill="#FFC83D" opacity="0.45" />
        <rect x="16.5" y="16.5" width="8.5" height="8.5" rx="2.2" fill="#FFC83D" />
      </svg>
      {wordmark && (
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: size * 0.66, letterSpacing: '-.01em', color: ink, whiteSpace: 'nowrap' }}>
          Yellow<span style={{ color: 'var(--yb-yellow-deep)' }}>Block</span>
        </span>
      )}
    </div>
  );
}

/* Donut ring — value 0..100, multi-segment optional */
function Ring({ value, size = 130, thick = 12, track = '#EEF0F3', color = '#059669', children }) {
  const r = (size - thick) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - value / 100);
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={thick} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={thick}
          strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round" />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        {children}
      </div>
    </div>
  );
}

/* 270° gauge arc, value 0..100 */
function Gauge({ value, size = 200, thick = 14 }) {
  const r = (size - thick) / 2 - 2;
  const cx = size / 2, cy = size / 2;
  const start = 135, sweep = 270;
  const polar = (ang) => {
    const a = (ang - 90) * Math.PI / 180;
    return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
  };
  const arc = (a0, a1) => {
    const [x0, y0] = polar(a0), [x1, y1] = polar(a1);
    const large = (a1 - a0) > 180 ? 1 : 0;
    return `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`;
  };
  const valAng = start + sweep * (value / 100);
  const grad = `gauge-grad-${size}`;
  return (
    <svg width={size} height={size * 0.78} viewBox={`0 0 ${size} ${size * 0.86}`}>
      <defs>
        <linearGradient id={grad} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#DC2626" />
          <stop offset="0.45" stopColor="#D97706" />
          <stop offset="0.75" stopColor="#059669" />
        </linearGradient>
      </defs>
      <path d={arc(start, start + sweep)} fill="none" stroke="var(--surface-2)" strokeWidth={thick} strokeLinecap="round" />
      <path d={arc(start, valAng)} fill="none" stroke={`url(#${grad})`} strokeWidth={thick} strokeLinecap="round" />
      {(() => { const [hx, hy] = polar(valAng); return <circle cx={hx} cy={hy} r={thick/2 + 2.5} fill="#fff" stroke="#059669" strokeWidth="3" />; })()}
    </svg>
  );
}

Object.assign(window, { Icon, StatusBadge, Avatar, Logo, Ring, Gauge, YB_ICONS, YB_STATUS: STATUS });