// portal-ui.jsx — Small shared primitives for the employee portal.

function PCard({ children, style, pad = 18, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 14,
      padding: pad, boxShadow: 'var(--shadow-sm)', cursor: onClick ? 'pointer' : 'default', ...style,
    }}>{children}</div>
  );
}

function PPill({ tone = 'neutral', children, icon }) {
  const tones = {
    good: ['var(--good-soft)', 'var(--good)'], warn: ['var(--warn-soft)', 'var(--warn)'],
    bad: ['var(--bad-soft)', 'var(--bad)'], info: ['var(--info-soft)', 'var(--info)'],
    accent: ['var(--accent-soft)', 'var(--accent-deep)'], indigo: ['var(--indigo-soft)', 'var(--indigo)'],
    neutral: ['var(--panel-3)', 'var(--text-2)'], dark: ['#0F172A', '#fff'],
  }[tone] || ['var(--panel-3)', 'var(--text-2)'];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5, padding: '2px 10px', borderRadius: 100,
      background: tones[0], color: tones[1], fontSize: 11.5, fontWeight: 600, whiteSpace: 'nowrap',
    }}>{icon}{children}</span>
  );
}

function PStat({ label, value, sub, tone, icon }) {
  return (
    <PCard>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <span className="eyebrow">{label}</span>
        {icon && <span style={{ color: tone === 'accent' ? 'var(--accent)' : 'var(--muted)' }}>{icon}</span>}
      </div>
      <div className="mono tnum" style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.5, color: tone === 'accent' ? 'var(--accent)' : tone === 'good' ? 'var(--good)' : 'var(--text)' }}>{value}</div>
      {sub && <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{sub}</div>}
    </PCard>
  );
}

function PSectionTitle({ children, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12, marginTop: 4 }}>
      <h2 style={{ margin: 0, fontSize: 16, fontWeight: 700, letterSpacing: -0.2 }}>{children}</h2>
      {action}
    </div>
  );
}

// Status pill specialized for timecard / payroll states
const P_STATUS = {
  'pending-ops': ['Manager review', 'warn'], 'pending-acct': ['Accounting', 'info'],
  approved: ['Approved', 'good'], paid: ['Paid', 'dark'], rejected: ['Rejected', 'bad'],
  pending: ['Pending', 'warn'], 'action-required': ['Action needed', 'bad'],
  acknowledged: ['Acknowledged', 'good'], viewed: ['Viewed', 'neutral'], signed: ['Signed', 'good'],
};
function PStatusPill({ status }) {
  const [label, tone] = P_STATUS[status] || [status, 'neutral'];
  return <PPill tone={tone}>{label}</PPill>;
}

// Simple modal
function PModal({ open, onClose, title, children, footer, width = 480 }) {
  if (!open) return null;
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, background: 'rgba(15,23,42,0.5)' }}>
      <div className="anim-up" style={{ width, maxHeight: '86%', background: 'var(--paper)', borderRadius: 16, boxShadow: 'var(--shadow-lg)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'var(--panel)' }}>
          <div style={{ fontWeight: 700, fontSize: 16 }}>{title}</div>
          <button onClick={onClose} style={{ width: 30, height: 30, borderRadius: 15, border: 'none', background: 'var(--panel-3)', display: 'grid', placeItems: 'center' }}><IconClose size={15} /></button>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>{children}</div>
        {footer && <div style={{ padding: '14px 20px', borderTop: '1px solid var(--line)', background: 'var(--panel)', display: 'flex', justifyContent: 'flex-end', gap: 10 }}>{footer}</div>}
      </div>
    </div>
  );
}

// Labeled field for forms
function PField({ label, children, hint }) {
  return (
    <label style={{ display: 'block', marginBottom: 14 }}>
      <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-2)', marginBottom: 5 }}>{label}</div>
      {children}
      {hint && <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>{hint}</div>}
    </label>
  );
}
const pInputStyle = {
  width: '100%', padding: '9px 12px', border: '1px solid var(--line-strong)', borderRadius: 9,
  fontSize: 14, fontFamily: 'inherit', background: 'var(--panel)', outline: 'none',
};

Object.assign(window, { PCard, PPill, PStat, PSectionTitle, PStatusPill, PModal, PField, pInputStyle });