// Primus IQ — Shared UI components and styles

const Field = ({ label, hint, children }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
      <label style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</label>
      {hint && <span style={{ fontSize: 11, color: 'var(--mute)' }}>{hint}</span>}
    </div>
    {children}
  </div>
);

const fieldInput = {
  width: '100%', height: 40, padding: '0 14px', borderRadius: 10,
  border: '1px solid var(--line-2)', background: 'white',
  fontSize: 14, fontFamily: 'inherit', color: 'var(--ink)',
};

const PRACTICES = [
  'Public Policy Realization',
  'Sector Potential Realization',
  'Impact Realization',
  'Economic Potential Realization',
  'Data & Digital Strategy',
  'Transaction Realization',
];

const extColors = {
  pdf:  '#B23A48',
  xlsx: '#2E6F40',
  pptx: '#C76A23',
  docx: '#2A5A9E',
  png:  '#7A4FB3',
  jpg:  '#7A4FB3',
  mp4:  '#1F4A6B',
  txt:  '#666666',
};

const CONF_LABELS = {
  public:   'Public',
  internal: 'Internal',
  client:   'Confidential',
  strict:   'Restricted Visibility',
};


const ModalShell = ({ onClose, width = 520, title, subtitle, children, padded = true, headerBorder = true }) => (
  <div onClick={onClose} style={{
    position: 'absolute', inset: 0, zIndex: 50,
    background: 'rgba(26, 22, 20, 0.32)', backdropFilter: 'blur(4px)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    animation: 'fadein 0.18s ease-out',
  }}>
    <div onClick={e => e.stopPropagation()} style={{
      width, maxHeight: '90%', overflow: 'auto',
      background: 'var(--bg-card)', borderRadius: 16,
      boxShadow: '0 30px 80px rgba(26,22,20,0.25), 0 0 0 1px var(--line)',
      animation: 'rise 0.22s ease-out',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        borderBottom: headerBorder ? '1px solid var(--line)' : 'none',
      }}>
        <div>
          <h2 className="serif" style={{ fontSize: 18, fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>{title}</h2>
          {subtitle && <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 4 }}>{subtitle}</div>}
        </div>
        <button onClick={onClose} style={{
          width: 30, height: 30, borderRadius: 8, background: 'transparent', border: 'none',
          cursor: 'pointer', display: 'grid', placeItems: 'center', color: 'var(--mute)',
        }}
        onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-soft)'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
        >
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
        </button>
      </div>
      {padded ? children : children}
    </div>
  </div>
);

const contentArea = {
  flex: 1, height: '100%', background: 'var(--bg)',
  position: 'relative', overflow: 'auto',
};

const fileMenuItemStyle = {
  width: '100%', padding: '9px 14px', background: 'transparent', border: 'none',
  cursor: 'pointer', textAlign: 'left', fontSize: 13, fontFamily: 'inherit',
  color: 'var(--ink)', display: 'flex', alignItems: 'center', gap: 8,
  transition: 'background 0.12s',
};

const FileBadge = ({ ext, size = 'sm' }) => {
  const dims = size === 'lg' ? { w: 48, h: 56, fs: 11 } : { w: 32, h: 38, fs: 9 };
  return (
    <div style={{
      width: dims.w, height: dims.h, borderRadius: 5,
      background: extColors[ext] || '#888', color: 'white',
      display: 'grid', placeItems: 'center',
      fontSize: dims.fs, fontWeight: 700, flexShrink: 0,
      letterSpacing: '0.04em',
    }}>{(ext || 'doc').toUpperCase()}</div>
  );
};

Object.assign(window, {
  Field,
  fieldInput,
  ModalShell,
  contentArea,
  PRACTICES,
  extColors,
  FileBadge,
  CONF_LABELS,
  fileMenuItemStyle,
});