// Reusable primitives: Button, Badge, Progress, Card, etc.
const Button = ({ variant = 'primary', size = 'md', children, onClick, className = '', icon, iconRight }) => {
  const sizes = {
    sm: 'h-8 px-3 text-[12.5px] gap-1.5',
    md: 'h-9 px-3.5 text-[13px] gap-1.5',
    lg: 'h-11 px-5 text-[14px] gap-2',
  };
  const variants = {
    primary: 'bg-accent text-black hover:bg-accent/90 font-medium',
    secondary: 'bg-transparent text-ink hairline hover:bg-white/[0.04]',
    ghost: 'bg-transparent text-mute hover:text-ink hover:bg-white/[0.04]',
    danger: 'bg-transparent text-ink hairline hover:bg-red-500/10 hover:text-red-400',
  };
  return (
    <button onClick={onClick}
      className={`inline-flex items-center justify-center rounded-[6px] t-fast focus-ring ${sizes[size]} ${variants[variant]} ${className}`}>
      {icon}
      {children}
      {iconRight}
    </button>
  );
};

const Badge = ({ children, tone = 'neutral', className = '' }) => {
  const tones = {
    neutral: 'text-mute hairline',
    accent:  'bg-accent/10 text-accent hairline2',
    green:   'text-emerald-300 bg-emerald-500/10',
    premium: 'text-ink hairline2',
    warn:    'text-amber-300 bg-amber-500/10',
  };
  return (
    <span className={`inline-flex items-center gap-1 h-[22px] px-2 rounded-[4px] text-[11px] font-mono uppercase tracking-wide ${tones[tone]} ${className}`}>
      {children}
    </span>
  );
};

const Progress = ({ value = 0, className = '', showPct = false }) => (
  <div className={`flex items-center gap-2 ${className}`}>
    <div className="flex-1 h-[3px] rounded-full bg-white/[0.06] overflow-hidden">
      <div className="h-full bg-accent rounded-full t-med" style={{ width: `${Math.round(value*100)}%` }} />
    </div>
    {showPct && <span className="text-mute text-[11px] font-mono w-8 text-right">{Math.round(value*100)}%</span>}
  </div>
);

const Card = ({ children, className = '', hover = false, onClick }) => (
  <div onClick={onClick}
    className={`rounded-[10px] bg-panel hairline ${hover ? 'hover:bg-panel2 hover:shadow-[inset_0_0_0_1px_#2A2A30] cursor-pointer' : ''} t-fast ${className}`}>
    {children}
  </div>
);

// Status pip matching the three module states
const StatusPip = ({ status, size = 16 }) => {
  if (status === 'concluido') return <div className="w-4 h-4 rounded-full bg-accent/15 flex items-center justify-center"><I.check size={10} className="text-accent"/></div>;
  if (status === 'em-progresso' || status === 'em-andamento') return <div className="w-4 h-4 rounded-full border border-accent flex items-center justify-center"><div className="w-1.5 h-1.5 rounded-full bg-accent"/></div>;
  return <div className="w-4 h-4 rounded-full border border-line2"/>;
};

const StatusLabel = ({ status }) => {
  if (status === 'concluido') return <span className="text-accent text-[11px] font-mono uppercase tracking-wide">Concluído</span>;
  if (status === 'em-andamento' || status === 'em-progresso') return <span className="text-ink text-[11px] font-mono uppercase tracking-wide">Em andamento</span>;
  if (status === 'bloqueado') return <span className="text-mute2 text-[11px] font-mono uppercase tracking-wide">Bloqueado</span>;
  return <span className="text-mute text-[11px] font-mono uppercase tracking-wide">Não iniciado</span>;
};

// Avatar: initials circle
const Avatar = ({ initials, size = 32, className = '' }) => (
  <div className={`rounded-full bg-white/[0.06] hairline2 flex items-center justify-center text-[12px] font-medium text-ink ${className}`}
       style={{ width: size, height: size, fontSize: size*0.38 }}>
    {initials}
  </div>
);

// Page header pattern used across screens
const PageHeader = ({ eyebrow, title, desc, right }) => (
  <div className="flex items-start justify-between gap-6 pb-6 mb-6 border-b border-line">
    <div className="min-w-0">
      {eyebrow && <div className="text-mute text-[11px] font-mono uppercase tracking-[0.1em] mb-2">{eyebrow}</div>}
      <h1 className="text-[28px] leading-[1.1] font-semibold tracking-tightest text-ink">{title}</h1>
      {desc && <p className="text-mute text-[14px] mt-2 max-w-xl leading-relaxed">{desc}</p>}
    </div>
    {right && <div className="shrink-0">{right}</div>}
  </div>
);

// Placeholder block for imagery — striped, mono caption
const Placeholder = ({ label = 'placeholder', className = '', children }) => (
  <div className={`stripes rounded-[8px] hairline flex items-center justify-center text-mute2 font-mono text-[11px] uppercase tracking-wider ${className}`}>
    {children || label}
  </div>
);

Object.assign(window, { Button, Badge, Progress, Card, StatusPip, StatusLabel, Avatar, PageHeader, Placeholder });