// Atomes UI — DA "lja-studio" (clean, Linear/Notion-style)
// Cohérent avec l'écosystème interne montré sur le screenshot Annuaire.

// ——— Avatar pastel déterministe (initiales) ———
const PASTELS = [
  ['#ffb7b0', '#fff'],  // peach
  ['#ffd197', '#5a3b00'],  // orange
  ['#ffc4dc', '#fff'],  // pink
  ['#a4e4a8', '#fff'],  // mint
  ['#9fc8ff', '#fff'],  // blue
  ['#ffe585', '#5a4400'],  // yellow
  ['#d6c4ff', '#fff'],  // lavender
  ['#cfead0', '#1b3a1c'],  // sage
];
function pastelFor(name = '?') {
  let h = 0; for (const c of name) h = (h * 31 + c.charCodeAt(0)) >>> 0;
  return PASTELS[h % PASTELS.length];
}
function initials(name = '?') {
  const parts = name.replace(/[@_]/g, ' ').trim().split(/\s+/);
  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
  return name.replace(/[@._]/g,'').slice(0, 2).toUpperCase();
}
const Avatar = ({ name = '?', size = 40, mono = false }) => {
  const [bg, fg] = pastelFor(name);
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: bg, color: fg, flex: 'none',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      font: `700 ${Math.round(size*0.36)}px ${mono ? 'var(--font-mono)' : 'var(--font-sans)'}`,
      letterSpacing: 0.2,
    }}>{initials(name)}</div>
  );
};

// ——— Status pill (avec emoji), comme dans le screenshot ———
// variant = couleur (gray/yel/blu/grn/prp/org/red), emoji + libellé
const StatusPill = ({ emoji, children, variant = 'gray', size = 'md', count, style = {} }) => {
  const bg = `var(--st-${variant}-bg)`;
  const tx = `var(--st-${variant}-tx)`;
  const pad = size === 'sm' ? '2px 8px' : '4px 12px';
  const fs = size === 'sm' ? 11 : 12.5;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: bg, color: tx, padding: pad, borderRadius: 999,
      font: `600 ${fs}px var(--font-sans)`,
      whiteSpace: 'nowrap',
      ...style,
    }}>
      {emoji && <span style={{ fontSize: fs + 1 }}>{emoji}</span>}
      <span>{children}</span>
      {typeof count === 'number' && (
        <span style={{ opacity: 0.7, font: `500 ${fs - 1}px var(--font-mono)`, marginLeft: 2 }}>{count}</span>
      )}
    </span>
  );
};

// ——— Filter pill (top-of-page), variante active = ink noir ———
const FilterPill = ({ active = false, emoji, children, count }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    background: active ? '#111' : 'transparent',
    color: active ? '#fff' : 'var(--ink)',
    border: active ? '1px solid #111' : '1px solid var(--border-2)',
    padding: '5px 12px', borderRadius: 999,
    font: '500 12.5px var(--font-sans)',
    cursor: 'pointer',
  }}>
    {emoji && <span>{emoji}</span>}
    <span>{children}</span>
    {typeof count === 'number' && (
      <span style={{
        opacity: active ? 0.8 : 0.5,
        font: '500 11.5px var(--font-mono)',
      }}>{count}</span>
    )}
  </span>
);

// ——— Bouton ———
const Btn = ({ children, variant = 'ghost', size = 'md', icon, style = {}, ...rest }) => {
  const pad = size === 'sm' ? '4px 10px' : size === 'lg' ? '10px 18px' : '7px 14px';
  const fs = size === 'sm' ? 12 : size === 'lg' ? 14 : 13;
  const variants = {
    ghost:    { background: 'var(--paper)', color: 'var(--ink)', border: '1px solid var(--border-2)' },
    primary:  { background: 'var(--primary)', color: '#fff', border: '1px solid var(--primary)' },
    dark:     { background: '#111', color: '#fff', border: '1px solid #111' },
    success:  { background: '#16a34a', color: '#fff', border: '1px solid #16a34a' },
    danger:   { background: '#fff', color: '#b91c1c', border: '1px solid #fda4a4' },
    soft:     { background: 'var(--paper-2)', color: 'var(--ink)', border: '1px solid transparent' },
  };
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, justifyContent: 'center',
      padding: pad, borderRadius: 8,
      font: `600 ${fs}px var(--font-sans)`,
      cursor: 'pointer', lineHeight: 1.2,
      ...variants[variant], ...style,
    }} {...rest}>{icon}{children}</button>
  );
};

// ——— Vignette vidéo placeholder ———
const Thumb = ({ ratio = 9/16, label, dur, style = {} }) => (
  <div style={{
    position: 'relative',
    width: '100%',
    paddingBottom: `${ratio * 100}%`,
    background: 'linear-gradient(135deg, #d8d8d4 0%, #c8c8c4 100%)',
    borderRadius: 8,
    overflow: 'hidden',
    flex: 'none',
    ...style,
  }}>
    <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
      <defs>
        <pattern id="dots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1" fill="rgba(0,0,0,0.08)" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#dots)" />
    </svg>
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: '50%',
        background: 'rgba(255,255,255,0.92)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 1 L12 7 L3 13 Z" fill="#111" /></svg>
      </div>
    </div>
    {dur && (
      <div style={{
        position: 'absolute', bottom: 6, right: 6,
        background: 'rgba(0,0,0,0.7)', color: '#fff',
        padding: '1px 6px', borderRadius: 4,
        font: '500 10px var(--font-mono)',
      }}>{dur}</div>
    )}
    {label && (
      <div style={{
        position: 'absolute', top: 6, left: 6,
        background: 'rgba(255,255,255,0.85)', color: 'var(--ink-2)',
        padding: '1px 6px', borderRadius: 4,
        font: '500 10px var(--font-sans)',
      }}>{label}</div>
    )}
  </div>
);

// ——— Code promo (copyable look) ———
const PromoCode = ({ code, size = 'md' }) => {
  const fs = size === 'lg' ? 16 : size === 'xl' ? 24 : 12.5;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      color: 'var(--primary)',
      font: `700 ${fs}px var(--font-mono)`,
      letterSpacing: size === 'xl' ? 1 : 0.4,
    }}>
      <span>{code}</span>
      <svg width="12" height="12" viewBox="0 0 12 12" style={{ opacity: 0.6 }}>
        <rect x="3" y="3" width="7" height="7" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.3" />
        <rect x="1.5" y="1.5" width="7" height="7" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.3" />
      </svg>
    </span>
  );
};

// ——— Sidebar lja-studio (identique sur tous les écrans) ———
function Sidebar({ active = 'Pipeline', collapsed = false }) {
  const items = [
    { label: 'Accueil',        icon: '◇' },
    { label: 'To do Sylvie',   icon: '●' },
    { label: 'To do Katlyn',   icon: '●' },
    { label: 'Influenceuses',  icon: '◉' },
    { label: 'Pipeline',       icon: '⋮' },  // = Testing Ads
    { label: 'Calendrier',     icon: '▤' },
    { label: 'Vidéos',         icon: '▷' },
    { label: 'Sourcing',       icon: '✦' },
    { label: 'Activité',       icon: '◐' },
    { label: 'Hebdo',          icon: '▦' },
    { label: 'Kit média',      icon: '◆' },
    { label: 'Paiements',      icon: '€' },
    { label: 'Archives',       icon: '▢' },
  ];
  const w = collapsed ? 56 : 200;
  return (
    <aside style={{
      width: w, flex: 'none',
      background: 'var(--paper)',
      borderRight: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column',
      padding: collapsed ? '14px 0' : '14px 12px',
    }}>
      {/* Brand */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: collapsed ? '0 14px 12px' : '0 4px 12px', marginBottom: 6, borderBottom: '1px solid var(--border)' }}>
        <div style={{
          width: 28, height: 28, borderRadius: 7,
          background: '#111', color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          font: '800 11px var(--font-sans)', letterSpacing: 0.4, flex: 'none',
        }}>JA</div>
        {!collapsed && (
          <div style={{ lineHeight: 1.15, minWidth: 0 }}>
            <div style={{ font: '700 13px var(--font-sans)' }}>Joyaux d'Auré</div>
            <div style={{ font: '400 10.5px var(--font-sans)', color: 'var(--ink-3)' }}>Micro-influence</div>
          </div>
        )}
      </div>

      {/* Search */}
      {!collapsed && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '6px 9px', marginBottom: 10,
          background: 'var(--paper-2)', borderRadius: 7,
          color: 'var(--ink-3)', font: '400 12px var(--font-sans)',
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="5" cy="5" r="3.5" fill="none" stroke="currentColor" strokeWidth="1.3"/><path d="M8 8 L11 11" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
          <span style={{ flex: 1 }}>Recherche…</span>
          <span style={{ font: '500 10px var(--font-mono)', opacity: 0.7 }}>⌘K</span>
        </div>
      )}

      {/* Nav */}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 1, flex: 1 }}>
        {items.map(it => {
          const isActive = it.label === active;
          return (
            <div key={it.label} style={{
              display: 'flex', alignItems: 'center', gap: 9,
              padding: collapsed ? '7px 14px' : '6px 8px',
              borderRadius: 6,
              background: isActive ? 'var(--primary-soft)' : 'transparent',
              color: isActive ? 'var(--primary)' : 'var(--ink-2)',
              font: `${isActive ? 600 : 500} 12.5px var(--font-sans)`,
              cursor: 'pointer',
              justifyContent: collapsed ? 'center' : 'flex-start',
            }}>
              <span style={{
                width: 14, textAlign: 'center', flex: 'none',
                font: '500 12px var(--font-sans)',
                color: isActive ? 'var(--primary)' : 'var(--ink-3)',
              }}>{it.icon}</span>
              {!collapsed && <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.label}</span>}
            </div>
          );
        })}
      </nav>

      {/* User footer */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 9,
        padding: collapsed ? '8px 14px 0' : '10px 4px 0',
        borderTop: '1px solid var(--border)',
        marginTop: 10,
      }}>
        <Avatar name="Benjamin" size={26} />
        {!collapsed && (
          <div style={{ lineHeight: 1.15, minWidth: 0 }}>
            <div style={{ font: '600 12px var(--font-sans)' }}>Benjamin</div>
            <div style={{ font: '400 10.5px var(--font-sans)', color: 'var(--ink-3)' }}>Fondateur</div>
          </div>
        )}
      </div>
    </aside>
  );
}

// ——— Page chrome (avec sidebar) ———
function Page({ title, subtitle, kicker, children, active = 'Pipeline', toolbar, sidebarCollapsed = false }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'var(--bg)', color: 'var(--ink)',
      font: '500 13px var(--font-sans)',
      display: 'flex', overflow: 'hidden',
    }}>
      <Sidebar active={active} collapsed={sidebarCollapsed} />
      <main style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {(title || toolbar) && (
          <header style={{ padding: '18px 22px 8px', display: 'flex', alignItems: 'flex-end', gap: 16 }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              {kicker && (
                <div style={{ font: '500 11px var(--font-sans)', color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 2 }}>{kicker}</div>
              )}
              {title && (
                <h1 style={{ margin: 0, font: '700 28px var(--font-sans)', color: 'var(--ink)', letterSpacing: -0.5 }}>{title}</h1>
              )}
              {subtitle && (
                <div style={{ marginTop: 2, font: '400 13px var(--font-sans)', color: 'var(--ink-3)' }}>{subtitle}</div>
              )}
            </div>
            {toolbar && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{toolbar}</div>}
          </header>
        )}
        <div style={{ flex: 1, minWidth: 0, padding: '8px 22px 22px', overflow: 'hidden' }}>{children}</div>
      </main>
    </div>
  );
}

// ——— Carte blanche standard ———
const Card = ({ children, style = {}, hover = false, ...rest }) => (
  <div
    style={{
      background: 'var(--paper)',
      border: '1px solid var(--border)',
      borderRadius: 12,
      ...style,
    }}
    {...rest}
  >{children}</div>
);

// ——— Statuts Testing Ads -> mapping pill ———
const TA_STATUS = {
  source:   { emoji: '📥', label: 'Source reçue',  variant: 'gray',  short: 'Reçue' },
  kit:      { emoji: '⚙️', label: 'Kit en prép.', variant: 'gray',   short: 'Kit prép' },
  toEdit:   { emoji: '✂️', label: 'À monter',      variant: 'yel',   short: 'À monter' },
  editing:  { emoji: '🎬', label: 'En montage',    variant: 'blu',   short: 'Montage' },
  edited:   { emoji: '✅', label: 'Montée',         variant: 'grn',   short: 'Montée' },
  testing:  { emoji: '📡', label: 'En testing',    variant: 'prp',   short: 'Testing' },
  scaled:   { emoji: '🚀', label: 'Scalée',         variant: 'grn',   short: 'Scalée' },
  killed:   { emoji: '❌', label: 'Killée',         variant: 'red',   short: 'Killée' },
};

window.WF = {
  Avatar, StatusPill, FilterPill, Btn, Thumb, PromoCode,
  Sidebar, Page, Card,
  TA_STATUS, pastelFor, initials,
};