// CronoDato — Shared components

// ── Logo mark CD ──────────────────────────────────────────────
const CDLogo = ({ size = 32, showName = false, nameColor = '#0F172A', nameSide = 'right' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <div style={{
      width: size, height: size, borderRadius: size * 0.25,
      background: 'linear-gradient(135deg, #059669 0%, #047857 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, boxShadow: '0 2px 8px rgba(5,150,105,0.35)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Decorative circle */}
      <div style={{
        position: 'absolute', width: size * 1.1, height: size * 1.1,
        borderRadius: '50%', background: 'rgba(255,255,255,0.07)',
        top: -size * 0.3, right: -size * 0.3,
      }} />
      <span style={{
        fontFamily: "'DM Sans', sans-serif", fontWeight: 700,
        fontSize: size * 0.42, color: 'white', letterSpacing: '-0.03em',
        position: 'relative', zIndex: 1, lineHeight: 1,
      }}>CD</span>
    </div>
    {showName && (
      <span style={{
        fontFamily: "'DM Sans', sans-serif", fontWeight: 700,
        fontSize: size * 0.5, color: nameColor, letterSpacing: '-0.02em',
        lineHeight: 1,
      }}>CronoDato</span>
    )}
  </div>
);

// ── Topbar ─────────────────────────────────────────────────────
const Topbar = ({ title, subtitle, actions }) => (
  <div style={{
    height: 56, borderBottom: '1px solid #E2E8F0', background: 'white',
    display: 'flex', alignItems: 'center', padding: '0 28px',
    justifyContent: 'space-between', flexShrink: 0,
  }}>
    <div>
      <div style={{ fontSize: 16, fontWeight: 600, color: '#0F172A' }}>{title}</div>
      {subtitle && <div style={{ fontSize: 12, color: '#64748B' }}>{subtitle}</div>}
    </div>
    {actions && <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>{actions}</div>}
  </div>
);

// ── StatusBadge ────────────────────────────────────────────────
const StatusBadge = ({ status }) => {
  const map = {
    procesada:  { bg: '#ECFDF5', fg: '#047857', dot: '#059669', label: 'Procesada' },
    revisar:    { bg: '#FFFBEB', fg: '#B45309', dot: '#D97706', label: 'Revisar' },
    error:      { bg: '#FEF2F2', fg: '#B91C1C', dot: '#DC2626', label: 'Error' },
    procesando: { bg: '#EFF6FF', fg: '#1D4ED8', dot: '#2563EB', label: 'Procesando' },
    pendiente:  { bg: '#F1F5F9', fg: '#475569', dot: '#94A3B8', label: 'Pendiente' },
  };
  const s = map[status] || map.pendiente;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 500, padding: '3px 8px', borderRadius: 9999, background: s.bg, color: s.fg }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: s.dot, flexShrink: 0, display: 'inline-block' }}></span>
      {s.label}
    </span>
  );
};

// ── Btn ────────────────────────────────────────────────────────
const Btn = ({ children, variant = 'primary', size = 'md', onClick, disabled, style = {} }) => {
  const base = { fontFamily: "'DM Sans',sans-serif", cursor: disabled ? 'not-allowed' : 'pointer', fontWeight: 500, border: 'none', borderRadius: 6, display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'all 150ms', opacity: disabled ? 0.45 : 1, ...style };
  const sizes = { sm: { fontSize: 13, padding: '5px 12px' }, md: { fontSize: 14, padding: '8px 16px' }, lg: { fontSize: 16, padding: '11px 22px', borderRadius: 8 } };
  const variants = {
    primary:   { background: '#059669', color: 'white' },
    secondary: { background: 'white', color: '#0F172A', border: '1px solid #E2E8F0' },
    ghost:     { background: 'transparent', color: '#475569' },
    danger:    { background: '#DC2626', color: 'white' },
  };
  return <button onClick={disabled ? undefined : onClick} style={{ ...base, ...sizes[size], ...variants[variant] }}>{children}</button>;
};

// ── StatCard ───────────────────────────────────────────────────
const StatCard = ({ label, value, sub, color = '#059669' }) => (
  <div style={{ background: 'white', border: '1px solid #E2E8F0', borderRadius: 8, padding: '16px 20px', flex: 1, minWidth: 140, boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
    <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#94A3B8', marginBottom: 6 }}>{label}</div>
    <div style={{ fontSize: 28, fontWeight: 700, color, letterSpacing: -0.5, fontFamily: "'DM Mono',monospace" }}>{value}</div>
    {sub && <div style={{ fontSize: 12, color: '#94A3B8', marginTop: 2 }}>{sub}</div>}
  </div>
);

Object.assign(window, { CDLogo, Topbar, StatusBadge, Btn, StatCard });