/* MaiAgent Partner Portal — shared UI atoms */

const Btn = ({ variant = 'primary', size, icon, iconRight, children, ...rest }) => {
  const cls = ['btn', `btn--${variant}`];
  if (size) cls.push(`btn--${size}`);
  return (
    <button className={cls.join(' ')} {...rest}>
      {icon && <Icon name={icon} size={size === 'sm' ? 14 : 16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'sm' ? 14 : 16} />}
    </button>
  );
};

const IconBtn = ({ name, hasDot, ...rest }) => (
  <button className="icon-btn" {...rest}>
    <Icon name={name} />
    {hasDot && <span className="icon-btn__dot" />}
  </button>
);

const Badge = ({ tone = 'gray', dot, lg, children }) => {
  const cls = ['badge', `badge--${tone}`];
  if (lg) cls.push('badge--lg');
  return (
    <span className={cls.join(' ')}>
      {dot && <span className="badge__dot" />}
      {children}
    </span>
  );
};

const Avatar = ({ name, size, style }) => {
  const cls = ['avatar', size && `avatar--${size}`].filter(Boolean).join(' ');
  return <div className={cls} style={{ ...avatarStyle(name), ...(style || {}) }}>{initials(name)}</div>;
};

const Card = ({ title, sub, action, children, style, className = '' }) => (
  <div className={`card ${className}`} style={style}>
    {(title || action) && (
      <div className="card-header">
        <div>
          {title && <div className="card-title">{title}</div>}
          {sub && <div className="card-sub">{sub}</div>}
        </div>
        {action && <div>{action}</div>}
      </div>
    )}
    {children}
  </div>
);

const Field = ({ label, required, hint, full, children }) => (
  <div className={`field ${full ? 'field--full' : ''}`}>
    {label && <label>{label}{required && <span className="required">*</span>}</label>}
    {children}
    {hint && <span className="field__hint">{hint}</span>}
  </div>
);

const RadioPills = ({ value, onChange, options }) => (
  <div className="radio-pills">
    {options.map((o) => (
      <button key={o.value} type="button" className={`radio-pill ${value === o.value ? 'is-active' : ''}`} onClick={() => onChange(o.value)}>
        {o.label}
      </button>
    ))}
  </div>
);

const Stepper = ({ steps, current }) => (
  <div className="stepper">
    {steps.map((s, i) => {
      const done = i < current;
      const cur = i === current;
      return (
        <React.Fragment key={i}>
          <div className={`stepper__step ${done ? 'is-done' : ''} ${cur ? 'is-current' : ''}`}>
            <div className="stepper__dot">
              {done ? <Icon name="check" size={12} /> : i + 1}
            </div>
            <span>{s}</span>
          </div>
          {i < steps.length - 1 && <div className={`stepper__bar ${done ? 'is-done' : ''}`} />}
        </React.Fragment>
      );
    })}
  </div>
);

const Progress = ({ value, variant }) => (
  <div className="progress">
    <div className={`progress__bar ${variant ? `progress__bar--${variant}` : ''}`} style={{ width: `${Math.min(100, value)}%` }} />
  </div>
);

const Switch = ({ value, onChange }) => (
  <div className={`switch ${value ? 'is-on' : ''}`} onClick={() => onChange(!value)} role="button" aria-pressed={value} />
);

// Status badge for deals
function dealStatusBadge(status, t) {
  const map = {
    approved: { tone: 'green', dot: true, label: t('deals.status.approved') },
    pending:  { tone: 'amber', dot: true, label: t('deals.status.pending') },
    rejected: { tone: 'red',   dot: true, label: t('deals.status.rejected') },
    draft:    { tone: 'gray',  dot: true, label: t('deals.status.draft') },
    expired:  { tone: 'gray',  dot: true, label: t('deals.status.expired') },
  };
  const m = map[status] || map.draft;
  return <Badge tone={m.tone} dot={m.dot}>{m.label}</Badge>;
}

function stageBadge(stage, t) {
  const tone = stage === 'won' ? 'green' : stage === 'lost' ? 'red' : 'blue';
  return <Badge tone={tone}>{t('deals.stage.' + stage)}</Badge>;
}

// Material cover backgrounds — flat geometric, brand-colored
const materialCover = (cover) => {
  const palettes = {
    navy: { bg: '#131838', accent: '#26C281', shapes: ['#1F4FFF', '#4338CA'] },
    green: { bg: '#E7F8EF', accent: '#1F4FFF', shapes: ['#26C281', '#1FA86E'] },
    lavender: { bg: '#F4F6FF', accent: '#1F4FFF', shapes: ['#6366F1', '#4338CA'] },
    blue: { bg: '#E6EAFF', accent: '#26C281', shapes: ['#1F4FFF', '#2E6BFF'] },
    fire: { bg: '#131838', accent: '#FF7A3D', shapes: ['#FF7A3D', '#EF4444'] },
  };
  return palettes[cover] || palettes.navy;
};

const MaterialCover = ({ cover, cat }) => {
  const p = materialCover(cover);
  const isDark = cover === 'navy' || cover === 'fire';
  const dotColor = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(31,79,255,0.10)';
  return (
    <div className="tile__cover" style={{ background: p.bg, color: isDark ? 'white' : 'var(--mai-fg)' }}>
      {/* halftone dots top-right */}
      <div style={{
        position: 'absolute', right: -10, top: -10, width: 120, height: 120,
        backgroundImage: `radial-gradient(${dotColor} 1.4px, transparent 1.4px)`,
        backgroundSize: '10px 10px',
        maskImage: 'radial-gradient(circle at 100% 0%, black 0%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(circle at 100% 0%, black 0%, transparent 70%)',
      }} />
      {/* slabs */}
      <div style={{
        position: 'absolute', right: -30, bottom: -50,
        width: 80, height: 220,
        transform: 'rotate(-22deg)',
        background: p.shapes[0],
        borderRadius: 8,
        opacity: 0.9,
      }} />
      <div style={{
        position: 'absolute', right: 10, bottom: -60,
        width: 40, height: 220,
        transform: 'rotate(-22deg)',
        background: p.shapes[1],
        borderRadius: 8,
        opacity: 0.95,
      }} />
      <div style={{
        position: 'absolute', right: -10, bottom: -80,
        width: 18, height: 220,
        transform: 'rotate(-22deg)',
        background: p.accent,
        borderRadius: 8,
      }} />
      <div style={{ position: 'absolute', left: 16, top: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', opacity: 0.7 }}>
        {cat}
      </div>
      <div style={{ position: 'absolute', left: 16, bottom: 14, fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.1, maxWidth: '60%' }}>
        <span style={{ color: p.accent }}>Mai</span>Agent
      </div>
    </div>
  );
};

Object.assign(window, {
  Btn, IconBtn, Badge, Avatar, Card, Field, RadioPills, Stepper, Progress, Switch,
  dealStatusBadge, stageBadge, MaterialCover,
});