/* Starboard · Display Components
   Card (+ slots), semantic typography, Badge, TableSimple.
   Load with: <script type="text/babel" src="Display.jsx"></script> */

// ─── Card ───
const CARD_VARIANT_CLASS = { standard: '', marketing: 'ad-card--marketing', modal: 'ad-card--modal', 'modal-grade': 'ad-card--modal' };

const Card = ({ variant = 'standard', interactive, href, className = '', children, ...rest }) => {
  const cls = [
    'ad-card',
    CARD_VARIANT_CLASS[variant] || '',
    interactive || href ? 'ad-card--interactive' : '',
    className,
  ].filter(Boolean).join(' ');
  if (href) return <a className={cls} href={href} {...rest}>{children}</a>;
  return <div className={cls} tabIndex={interactive ? 0 : undefined} {...rest}>{children}</div>;
};

const CardHeader = ({ title, action, children }) => (
  <div className="ad-card__header">
    <h3 className="ad-card__title">{title || children}</h3>
    {action && <div className="ad-card__action">{action}</div>}
  </div>
);

const CardBody = ({ children, className = '', ...rest }) => (
  <div className={`ad-card__body ${className}`.trim()} {...rest}>{children}</div>
);

const CardFooter = ({ children, className = '', ...rest }) => (
  <div className={`ad-card__footer ${className}`.trim()} {...rest}>{children}</div>
);

// ─── Typography — thin semantic wrappers over the global type
//     styles in colors_and_type.css. No new sizes. ───
const adTypeEl = (Tag) => ({ className = '', children, ...rest }) => (
  <Tag className={`ad-type ${className}`.trim()} {...rest}>{children}</Tag>
);
const H1 = adTypeEl('h1');
const H2 = adTypeEl('h2');
const H3 = adTypeEl('h3');
const H4 = adTypeEl('h4');
const H5 = adTypeEl('h5');
const H6 = adTypeEl('h6');
const P = adTypeEl('p');

const Lead = ({ className = '', children, ...rest }) => (
  <p className={`ad-lead ${className}`.trim()} {...rest}>{children}</p>
);
const Muted = ({ as: Tag = 'span', className = '', children, ...rest }) => (
  <Tag className={`ad-muted ${className}`.trim()} {...rest}>{children}</Tag>
);
const Small = ({ className = '', children, ...rest }) => (
  <small className={`ad-small ${className}`.trim()} {...rest}>{children}</small>
);
const Code = ({ className = '', children, ...rest }) => (
  <code className={`ad-code ${className}`.trim()} {...rest}>{children}</code>
);
const Blockquote = ({ cite, className = '', children, ...rest }) => (
  <blockquote className={`ad-blockquote ${className}`.trim()} {...rest}>
    {children}
    {cite && <cite>— {cite}</cite>}
  </blockquote>
);
const Ul = ({ className = '', children, ...rest }) => (
  <ul className={`ad-list ${className}`.trim()} {...rest}>{children}</ul>
);
const Ol = ({ className = '', children, ...rest }) => (
  <ol className={`ad-list ${className}`.trim()} {...rest}>{children}</ol>
);
const Prose = ({ className = '', children, ...rest }) => (
  <div className={`ad-prose ${className}`.trim()} {...rest}>{children}</div>
);

// ─── Badge ───
const Badge = ({
  status = 'neutral',     // info | success | warning | error | neutral
  tone = 'soft',          // soft | solid | outline
  size = 'md',            // sm | md
  dot, icon, count,
  onRemove, removeLabel,
  className = '',
  children,
}) => {
  const cls = [
    'ad-badge',
    `ad-badge--${status}`,
    tone !== 'soft' ? `ad-badge--${tone}` : '',
    size === 'sm' ? 'ad-badge--sm' : '',
    count !== undefined ? 'ad-badge--count' : '',
    className,
  ].filter(Boolean).join(' ');
  return (
    <span className={cls}>
      {dot && <span className="ad-badge__dot" aria-hidden="true" />}
      {icon && <span className="ad-badge__icon" aria-hidden="true">{icon}</span>}
      {count !== undefined ? count : children}
      {onRemove && (
        <button className="ad-badge__remove" aria-label={removeLabel || `Remove ${typeof children === 'string' ? children : 'badge'}`} onClick={onRemove}>
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"><path d="m18 6-12 12M6 6l12 12"/></svg>
        </button>
      )}
    </span>
  );
};

// ─── TableSimple ───
/* columns: [{ key, label, num, width }]
   rows: array of objects keyed by column key
   footer: optional object keyed by column key (totals row) */
const TableSimple = ({ caption, columns = [], rows = [], footer, striped, bordered, compact, className = '' }) => {
  const cls = [
    'ad-table',
    striped ? 'ad-table--striped' : '',
    bordered ? 'ad-table--bordered' : '',
    compact ? 'ad-table--compact' : '',
    className,
  ].filter(Boolean).join(' ');
  return (
    <table className={cls}>
      {caption && <caption>{caption}</caption>}
      <thead>
        <tr>
          {columns.map((c) => (
            <th key={c.key} className={c.num ? 'ad-table__num' : undefined} style={c.width ? { width: c.width } : undefined} scope="col">
              {c.label}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, i) => (
          <tr key={i}>
            {columns.map((c) => (
              <td key={c.key} className={c.num ? 'ad-table__num' : undefined}>{row[c.key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
      {footer && (
        <tfoot>
          <tr>
            {columns.map((c) => (
              <td key={c.key} className={c.num ? 'ad-table__num' : undefined}>{footer[c.key]}</td>
            ))}
          </tr>
        </tfoot>
      )}
    </table>
  );
};

Object.assign(window, {
  Card, CardHeader, CardBody, CardFooter,
  H1, H2, H3, H4, H5, H6, P, Lead, Muted, Small, Code, Blockquote, Ul, Ol, Prose,
  Badge, TableSimple,
});