// fichaje.eu — Shared UI primitives

const Card = ({ children, style, padded = true, onClick, hoverable }) => (
  <div onClick={onClick} style={{
    background: 'var(--white)',
    border: '1px solid var(--slate-150)',
    borderRadius: 'var(--r-lg)',
    boxShadow: 'var(--shadow-xs)',
    padding: padded ? 20 : 0,
    transition: 'box-shadow .15s, transform .15s',
    cursor: onClick ? 'pointer' : 'default',
    ...style,
  }}
    onMouseEnter={hoverable ? (e) => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; } : undefined}
    onMouseLeave={hoverable ? (e) => { e.currentTarget.style.boxShadow = 'var(--shadow-xs)'; } : undefined}
  >{children}</div>
);

const SectionHead = ({ title, subtitle, action }) => (
  <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, marginBottom: 14 }}>
    <div>
      <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{title}</div>
      {subtitle && <div style={{ fontSize: 13, color: 'var(--slate-500)', marginTop: 2 }}>{subtitle}</div>}
    </div>
    {action}
  </div>
);

const Btn = ({ children, variant = 'primary', size = 'md', icon, iconRight, onClick, style, disabled, type }) => {
  const v = {
    primary:   { bg: 'var(--brand-600)', color: '#fff', border: 'transparent', hoverBg: 'var(--brand-700)' },
    secondary: { bg: 'var(--white)', color: 'var(--ink)', border: 'var(--slate-200)', hoverBg: 'var(--slate-50)' },
    ghost:     { bg: 'transparent', color: 'var(--slate-700)', border: 'transparent', hoverBg: 'var(--slate-100)' },
    danger:    { bg: 'var(--danger-500)', color: '#fff', border: 'transparent', hoverBg: 'var(--danger-600)' },
    soft:      { bg: 'var(--brand-50)', color: 'var(--brand-600)', border: 'transparent', hoverBg: 'var(--brand-100)' },
    success:   { bg: 'var(--success-500)', color: '#fff', border: 'transparent', hoverBg: 'var(--success-600)' },
  }[variant];
  const s = {
    sm: { pad: '6px 10px', fs: 13, gap: 6 },
    md: { pad: '9px 14px', fs: 14, gap: 8 },
    lg: { pad: '12px 18px', fs: 15, gap: 10 },
  }[size];
  return (
    <button type={type} onClick={onClick} disabled={disabled} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: s.gap,
      padding: s.pad, fontSize: s.fs, fontWeight: 600, lineHeight: 1,
      borderRadius: 'var(--r-md)',
      background: v.bg, color: v.color, border: `1px solid ${v.border === 'transparent' ? 'transparent' : `var(--${v.border.replace('var(--','').replace(')','')})`}`,
      opacity: disabled ? 0.55 : 1,
      transition: 'background .12s, transform .06s, box-shadow .12s',
      boxShadow: variant === 'primary' ? '0 1px 0 rgba(15,23,42,.08), inset 0 -1px 0 rgba(0,0,0,.1)' : 'none',
      ...style,
    }}
    onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.background = v.hoverBg; }}
    onMouseLeave={(e) => { if (!disabled) e.currentTarget.style.background = v.bg; }}
    onMouseDown={(e) => e.currentTarget.style.transform = 'translateY(1px)'}
    onMouseUp={(e) => e.currentTarget.style.transform = 'translateY(0)'}
    >
      {icon}{children}{iconRight}
    </button>
  );
};

const Badge = ({ children, tone = 'slate', dot, style }) => {
  const t = {
    slate:   ['var(--slate-100)', 'var(--slate-700)', 'var(--slate-400)'],
    brand:   ['var(--brand-50)', 'var(--brand-600)', 'var(--brand-500)'],
    success: ['var(--success-50)', 'var(--success-600)', 'var(--success-500)'],
    warning: ['var(--warning-50)', 'var(--warning-600)', 'var(--warning-500)'],
    danger:  ['var(--danger-50)', 'var(--danger-600)', 'var(--danger-500)'],
    violet:  ['var(--violet-100)', '#6D28D9', 'var(--violet-500)'],
    teal:    ['var(--teal-100)', '#0F766E', 'var(--teal-500)'],
    pink:    ['var(--pink-100)', '#BE185D', 'var(--pink-500)'],
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 9px',
      borderRadius: 'var(--r-pill)',
      background: t[0], color: t[1],
      fontSize: 12, fontWeight: 600, lineHeight: 1.4,
      whiteSpace: 'nowrap',
      ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: t[2] }}/>}
      {children}
    </span>
  );
};

const Avatar = ({ name, src, size = 36, color, ring }) => {
  // Deterministic palette from name
  const palettes = [
    ['#DBEAFE', '#1E40AF'], ['#FCE7F3', '#BE185D'], ['#D1FAE5', '#047857'],
    ['#FEF3C7', '#B45309'], ['#EDE9FE', '#6D28D9'], ['#CCFBF1', '#0F766E'],
    ['#FFE4E6', '#BE123C'], ['#E0E7FF', '#3730A3'],
  ];
  const idx = (name || '?').split('').reduce((a, c) => a + c.charCodeAt(0), 0) % palettes.length;
  const [bg, fg] = color || palettes[idx];
  const initials = (name || '?').split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: 999,
      background: bg, color: fg,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontWeight: 700, fontSize: size * 0.38,
      flexShrink: 0,
      boxShadow: ring ? '0 0 0 2px var(--white), 0 0 0 4px var(--brand-200)' : 'none',
      fontFamily: 'var(--font-sans)',
    }}>{initials}</div>
  );
};

const ProgressBar = ({ value, max = 100, color = 'var(--brand-600)', track = 'var(--slate-100)', height = 6 }) => (
  <div style={{ background: track, borderRadius: 999, height, overflow: 'hidden', width: '100%' }}>
    <div style={{ width: `${Math.min(100, (value / max) * 100)}%`, height: '100%', background: color, borderRadius: 999, transition: 'width .3s' }}/>
  </div>
);

const KV = ({ label, value, mono }) => (
  <div>
    <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--slate-500)' }}>{label}</div>
    <div className={mono ? 'mono' : ''} style={{ marginTop: 4, fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{value}</div>
  </div>
);

const Divider = ({ vertical, style }) => (
  <div style={{
    background: 'var(--slate-150)',
    ...(vertical ? { width: 1, alignSelf: 'stretch' } : { height: 1, width: '100%' }),
    ...style,
  }}/>
);

const Tabs = ({ tabs, value, onChange, style }) => (
  <div style={{ display: 'inline-flex', gap: 2, padding: 4, background: 'var(--slate-100)', borderRadius: 'var(--r-md)', ...style }}>
    {tabs.map(t => (
      <button key={t.value} onClick={() => onChange(t.value)} style={{
        padding: '6px 12px',
        fontSize: 13, fontWeight: 600,
        background: value === t.value ? 'var(--white)' : 'transparent',
        color: value === t.value ? 'var(--ink)' : 'var(--slate-600)',
        borderRadius: 'var(--r-sm)',
        boxShadow: value === t.value ? 'var(--shadow-xs)' : 'none',
        transition: 'all .15s',
      }}>{t.label}</button>
    ))}
  </div>
);

const Field = ({ label, hint, children, required }) => (
  <label style={{ display: 'block' }}>
    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--slate-700)', marginBottom: 6 }}>
      {label}{required && <span style={{ color: 'var(--danger-500)' }}> *</span>}
    </div>
    {children}
    {hint && <div style={{ fontSize: 12, color: 'var(--slate-500)', marginTop: 6 }}>{hint}</div>}
  </label>
);

const Input = ({ icon, ...props }) => (
  <div style={{ position: 'relative' }}>
    {icon && <div style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--slate-400)' }}>{icon}</div>}
    <input {...props} style={{
      width: '100%',
      padding: icon ? '10px 12px 10px 38px' : '10px 12px',
      fontSize: 14,
      border: '1px solid var(--slate-200)',
      borderRadius: 'var(--r-md)',
      background: 'var(--white)',
      color: 'var(--ink)',
      outline: 'none',
      transition: 'border-color .15s, box-shadow .15s',
      ...props.style,
    }}
    onFocus={(e) => { e.target.style.borderColor = 'var(--brand-500)'; e.target.style.boxShadow = 'var(--ring-brand)'; }}
    onBlur={(e) => { e.target.style.borderColor = 'var(--slate-200)'; e.target.style.boxShadow = 'none'; }}
    />
  </div>
);

const Stat = ({ label, value, delta, icon, tone = 'brand' }) => {
  const tones = {
    brand: ['var(--brand-50)', 'var(--brand-600)'],
    success: ['var(--success-50)', 'var(--success-600)'],
    warning: ['var(--warning-50)', 'var(--warning-600)'],
    violet: ['var(--violet-100)', '#6D28D9'],
  }[tone] || ['var(--slate-100)', 'var(--slate-700)'];
  return (
    <Card>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 12, color: 'var(--slate-500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>{label}</div>
          <div className="tnum" style={{ fontSize: 26, fontWeight: 700, marginTop: 6, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{value}</div>
          {delta && <div style={{ fontSize: 12, fontWeight: 600, color: delta.startsWith('-') ? 'var(--danger-600)' : 'var(--success-600)', marginTop: 4 }}>{delta}</div>}
        </div>
        <div style={{
          width: 38, height: 38, borderRadius: 'var(--r-md)',
          background: tones[0], color: tones[1],
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>{icon}</div>
      </div>
    </Card>
  );
};

Object.assign(window, { Card, SectionHead, Btn, Badge, Avatar, ProgressBar, KV, Divider, Tabs, Field, Input, Stat });