/* global React */
// Small UI primitives consumed across admin demo pages.
// Styling mirrors packages/ui/src/tokens.css utility classes from the real app.
const { useState: _useS, useEffect: _useE } = React;

function Sparkline({ data, width = 92, height = 24, stroke = '#c6a15b', strokeWidth = 1.5 }) {
  if (!data || data.length < 2) return <svg width={width} height={height}/>;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const padX = strokeWidth + 1, padY = strokeWidth + 1;
  const innerW = width - padX * 2, innerH = height - padY * 2;
  const points = data.map((v, i) => {
    const x = padX + (i / (data.length - 1)) * innerW;
    const y = padY + (1 - (v - min) / range) * innerH;
    return `${x.toFixed(2)},${y.toFixed(2)}`;
  });
  const linePath = points.map((p, i) => (i === 0 ? 'M' : 'L') + p).join(' ');
  return (
    <svg width={width} height={height} aria-hidden style={{display:'inline-block'}}>
      <path d={linePath} fill="none" stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function MonoLabel({ children, style }) {
  return <span className="cos-mono" style={style}>{children}</span>;
}

function SectionLabel({ children, style }) {
  return <span className="cos-section-label" style={style}>{children}</span>;
}

function Tag({ tone = 'default', children, style }) {
  const cls = 'cos-tag ' + (
    tone === 'gold' ? 'cos-tag-gold'
    : tone === 'ok' ? 'cos-tag-ok'
    : tone === 'err' ? 'cos-tag-err'
    : tone === 'warn' ? 'cos-tag-warn'
    : ''
  );
  return <span className={cls} style={style}>{children}</span>;
}

function StatusTag({ status }) {
  const tone =
    status === 'open' ? 'ok'
    : status === 'sold_out' ? 'err'
    : status === 'cancelled' ? 'err'
    : status === 'draft' ? 'warn'
    : 'default';
  return <Tag tone={tone}>{String(status).replace('_', ' ').toUpperCase()}</Tag>;
}

function Btn({ variant = 'default', children, style, ...rest }) {
  const cls = 'cos-btn ' + (
    variant === 'primary' ? 'cos-btn-primary'
    : variant === 'ghost' ? 'cos-btn-ghost'
    : variant === 'quiet' ? 'cos-btn-quiet'
    : variant === 'danger' ? 'cos-btn-danger'
    : ''
  );
  return <button className={cls} style={style} {...rest}>{children}</button>;
}

/* Toast micro-component — fires from window.adminToast('msg') */
function ToastHost() {
  const [items, setItems] = _useS([]);
  _useE(() => {
    window.adminToast = (msg, tone = 'ok') => {
      const id = Math.random().toString(36).slice(2);
      setItems(prev => [...prev, { id, msg, tone }]);
      setTimeout(() => setItems(prev => prev.filter(t => t.id !== id)), 2800);
    };
  }, []);
  return (
    <div style={{position:'fixed', right: 24, bottom: 24, zIndex: 1000, display:'flex', flexDirection:'column', gap: 8}}>
      {items.map(t => (
        <div key={t.id} style={{
          display:'flex', alignItems:'center', gap: 10,
          padding: '12px 16px', borderRadius: 12,
          background: 'var(--surface-raised)',
          border: '1px solid var(--ink-500)',
          color: 'var(--text-chalk)', fontSize: 13, fontWeight: 500,
          boxShadow: 'var(--shadow-card)',
          minWidth: 240, animation: 'toast-in .2s ease',
        }}>
          <span style={{width: 7, height: 7, borderRadius: '50%', flexShrink: 0, background: t.tone === 'err' ? 'var(--err)' : 'var(--ok)'}}/>
          {t.msg}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Sparkline, MonoLabel, SectionLabel, Tag, StatusTag, Btn, ToastHost });