// Megosztott komponensek és ikonok

const Icon = ({ name, size = 20, stroke = 1.6 }) => {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'home':       return <svg {...props}><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2v-9z"/></svg>;
    case 'dashboard':  return <svg {...props}><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>;
    case 'gavel':      return <svg {...props}><path d="M14 4l6 6"/><path d="M11 7l6 6"/><path d="M9 9l6 6-7 7-6-6 7-7z"/><path d="M14 21h7"/></svg>;
    case 'meter':      return <svg {...props}><path d="M3 16a9 9 0 0 1 18 0"/><path d="M3 16h2"/><path d="M19 16h2"/><path d="M12 7v1"/><path d="M12 16l4-5"/><circle cx="12" cy="16" r="1.5" fill="currentColor"/></svg>;
    case 'thumbs-up':  return <svg {...props}><path d="M7 11v9a1 1 0 0 0 1 1h9.5a2 2 0 0 0 2-1.6l1.4-7A2 2 0 0 0 19 10h-5l1-4a2 2 0 0 0-2-2.5L9 11"/><path d="M3 11h4v10H3z"/></svg>;
    case 'plus':       return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'check':      return <svg {...props}><path d="M5 12l5 5 9-11"/></svg>;
    case 'check2':     return <svg {...props}><path d="M5 12l4 4L19 7"/></svg>;
    case 'x':          return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'arrow-l':    return <svg {...props}><path d="M19 12H5M12 19l-7-7 7-7"/></svg>;
    case 'arrow-r':    return <svg {...props}><path d="M5 12h14M12 5l7 7-7 7"/></svg>;
    case 'chevron-r':  return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-d':  return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'camera':     return <svg {...props}><rect x="2" y="6" width="20" height="14" rx="3"/><circle cx="12" cy="13" r="4"/><path d="M9 6l1.5-2h3L15 6"/></svg>;
    case 'clock':      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'user':       return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>;
    case 'users':      return <svg {...props}><circle cx="9" cy="8" r="4"/><path d="M2 21c1-4 3.5-6 7-6s6 2 7 6"/><path d="M16 11a4 4 0 0 0 0-7"/><path d="M22 21c-.5-3-2-5-5-5.5"/></svg>;
    case 'inbox':      return <svg {...props}><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.5L4 12v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6l-1.5-6.5A2 2 0 0 0 16.5 4h-9a2 2 0 0 0-2 1.5z"/></svg>;
    case 'coins':      return <svg {...props}><ellipse cx="9" cy="6" rx="6" ry="2.5"/><path d="M3 6v4c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5V6"/><path d="M3 10v4c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-4"/><path d="M9 17.5c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5V13c0-1.4-2.7-2.5-6-2.5"/></svg>;
    case 'wallet':     return <svg {...props}><path d="M3 7V5a2 2 0 0 1 2-2h12.5a1.5 1.5 0 0 1 0 3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7H5"/><circle cx="17" cy="13" r="1.2" fill="currentColor"/></svg>;
    case 'chart':      return <svg {...props}><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 5-7"/></svg>;
    case 'doc':        return <svg {...props}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>;
    case 'docs':       return <svg {...props}><path d="M16 3H6a2 2 0 0 0-2 2v14"/><rect x="8" y="7" width="12" height="14" rx="2"/></svg>;
    case 'calendar':   return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'gantt':      return <svg {...props}><path d="M3 5h10M3 12h14M3 19h8" strokeWidth="3"/></svg>;
    case 'settings':   return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="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.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.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"/></svg>;
    case 'shield':     return <svg {...props}><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/></svg>;
    case 'logout':     return <svg {...props}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>;
    case 'image':      return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="M21 15l-5-5-11 11"/></svg>;
    case 'list':       return <svg {...props}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
    case 'edit':       return <svg {...props}><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>;
    case 'trash':      return <svg {...props}><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>;
    case 'bell':       return <svg {...props}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>;
    case 'smile':      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><circle cx="9" cy="10" r="0.6" fill="currentColor"/><circle cx="15" cy="10" r="0.6" fill="currentColor"/></svg>;
    case 'chat':       return <svg {...props}><path d="M21 12a8 8 0 0 1-11.8 7L4 21l1.5-4.5A8 8 0 1 1 21 12z"/></svg>;
    case 'send':       return <svg {...props}><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>;
    case 'paperclip':  return <svg {...props}><path d="M21.4 11l-9 9a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8-8"/></svg>;
    case 'help':       return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-1 .5-1 1.2-1 1.7"/><path d="M12 17h.01"/></svg>;
    case 'mail':       return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case 'search':     return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case 'filter':     return <svg {...props}><path d="M3 5h18M6 12h12M10 19h4"/></svg>;
    case 'upload':     return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>;
    case 'download':   return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>;
    case 'phone':      return <svg {...props}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 3a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c1 .3 2 .5 3 .6a2 2 0 0 1 1.7 2z"/></svg>;
    case 'tag':        return <svg {...props}><path d="M20.5 13l-7 7a2 2 0 0 1-3 0L3 12.5V3h9.5L20.5 11a2 2 0 0 1 0 2z"/><circle cx="7.5" cy="7.5" r="1.2" fill="currentColor"/></svg>;
    case 'flash':      return <svg {...props}><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>;
    case 'eye':        return <svg {...props}><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>;
    case 'forint':     return <svg {...props}><path d="M8 4h10M8 4v16M8 10h7M8 14h-3M14 14h3"/></svg>;
    case 'receipt':    return <svg {...props}><path d="M5 3v18l2-1.5L9 21l2-1.5L13 21l2-1.5L17 21l2-1.5V3l-2 1.5L15 3l-2 1.5L11 3 9 4.5 7 3 5 4.5z"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>;
    case 'lock':       return <svg {...props}><rect x="4" y="11" width="16" height="11" rx="2"/><path d="M8 11V7a4 4 0 1 1 8 0v4"/></svg>;
    case 'attach':     return <svg {...props}><path d="M21.4 11l-9.2 9.2a5 5 0 1 1-7.1-7.1l9.6-9.6a3.5 3.5 0 1 1 5 5L10 18.1a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg>;
    case 'building':   return <svg {...props}><rect x="4" y="2" width="16" height="20" rx="1"/><path d="M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01"/></svg>;
    case 'sparkle':    return <svg {...props}><path d="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"/></svg>;
    default: return null;
  }
};

// Avatar
const Avatar = ({ user, size = 'md' }) => {
  if (!user) return null;
  const cls = 'avatar' + (size === 'sm' ? ' sm' : size === 'lg' ? ' lg' : '');
  return <span className={cls} style={{ background: user.color }}>{user.avatar}</span>;
};

// Status pill
const StatusPill = ({ status }) => {
  const map = {
    pending:  { label: 'Jóváhagyásra vár', cls: 'pending' },
    approved: { label: 'Jóváhagyva',       cls: 'approved' },
    rejected: { label: 'Elutasítva',       cls: 'rejected' },
    paid:     { label: 'Kifizetve',        cls: 'paid' },
  };
  const m = map[status] || map.pending;
  return <span className={'status ' + m.cls}><span className="dot"/>{m.label}</span>;
};

const PhaseChip = ({ phaseId, compact = false }) => {
  const p = window.getPhase(phaseId);
  if (!p) return null;
  return (
    <span className="chip" style={{ background: p.color + '22', color: p.color, border: 'none', fontWeight: 600 }}>
      <span className="mono" style={{ fontSize: 11, opacity: 0.8 }}>{p.code}</span>
      {!compact && <span>{p.name}</span>}
    </span>
  );
};

// Progress bar with label
const BudgetBar = ({ spent, pending = 0, budget, height = 8 }) => {
  const pct = budget > 0 ? Math.min(100, (spent / budget) * 100) : 0;
  const pendingPct = budget > 0 ? Math.min(100 - pct, (pending / budget) * 100) : 0;
  const over = spent > budget;
  return (
    <div className="bar" style={{ height }}>
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ width: pct + '%', background: over ? 'var(--danger)' : 'var(--ink)', transition: 'width 0.3s' }}/>
        {pendingPct > 0 && <div style={{ width: pendingPct + '%', background: 'var(--warn)', opacity: 0.6 }}/>}
      </div>
    </div>
  );
};

// Photo placeholder grid
const PhotoStrip = ({ count = 0, size = 56 }) => {
  if (count === 0) return null;
  const items = Array.from({ length: Math.min(count, 4) });
  return (
    <div style={{ display: 'flex', gap: 4 }}>
      {items.map((_, i) => (
        <div key={i} className="photo-ph" style={{ width: size, height: size, fontSize: 10 }}>
          {i === 3 && count > 4 ? `+${count - 3}` : <Icon name="image" size={18}/>}
        </div>
      ))}
    </div>
  );
};

// Modal / bottom sheet
const Sheet = ({ open, onClose, children, title }) => {
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-handle"/>
        {title && <h2 style={{ marginBottom: 12, padding: '0 4px' }}>{title}</h2>}
        {children}
      </div>
    </div>
  );
};

// Pull-down hint
const Hint = ({ children }) => (
  <div style={{ padding: '10px 12px', background: 'var(--accent-l)', borderRadius: 'var(--r-md)', color: 'var(--accent-d)', fontSize: 13, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
    <Icon name="sparkle" size={16}/>
    <div>{children}</div>
  </div>
);

Object.assign(window, { Icon, Avatar, StatusPill, PhaseChip, BudgetBar, PhotoStrip, Sheet, Hint });