// ui-core.jsx — primitives reutilizáveis para layout, feedback e dados

function cx(...parts) {
  return parts.filter(Boolean).join(' ');
}

function EmptyState({ icon = 'lucide:inbox', title = 'Nada por aqui', description, compact = false, className = '' }) {
  return (
    <div className={cx('empty-state', compact && 'empty-state-compact', className)}>
      <div className="empty-state-icon">
        <iconify-icon icon={icon} />
      </div>
      <div className="empty-state-title">{title}</div>
      {description && <div className="empty-state-description">{description}</div>}
    </div>
  );
}

function LoadingState({ label = 'Carregando…', className = '', compact = false }) {
  return (
    <div className={cx('loading-state', compact && 'loading-state-compact', className)}>
      <iconify-icon icon="lucide:loader-circle" className="spin-icon" />
      <div className="loading-state-label">{label}</div>
    </div>
  );
}

function PageSectionHeader({ title, subtitle, actions, className = '' }) {
  return (
    <div className={cx('page-section-header', className)}>
      <div>
        <div className="section-title">{title}</div>
        {subtitle && <div className="section-sub">{subtitle}</div>}
      </div>
      {actions && <div className="action-group">{actions}</div>}
    </div>
  );
}

function ActionGroup({ children, className = '' }) {
  return <div className={cx('action-group', className)}>{children}</div>;
}

function StatusBadge({ tone = 'default', dot = false, children, className = '' }) {
  const toneMap = {
    ok: 'tag-ok',
    err: 'tag-err',
    warn: 'tag-warn',
    info: 'tag-info',
    accent: 'tag-accent',
  };
  return <span className={cx('tag', toneMap[tone], dot && 'tag-dot', className)}>{children}</span>;
}

function SearchField({ value, onChange, placeholder = 'Buscar…', className = '' }) {
  return (
    <div className={cx('search-wrap', className)}>
      <iconify-icon icon="lucide:search" className="search-icon" />
      <input className="input" placeholder={placeholder} value={value} onChange={onChange} />
    </div>
  );
}

function FilterBar({ children, className = '' }) {
  return <div className={cx('filter-bar', className)}>{children}</div>;
}

function DataTableShell({ children, className = '', tableClassName = '', mobile = false }) {
  return (
    <div className={cx('card', 'card-table', 'data-table-shell', className)}>
      <div className={cx('data-table-scroll', mobile && 'data-table-scroll-mobile')}>
        <div className={tableClassName}>{children}</div>
      </div>
    </div>
  );
}

function EntityMetaCell({ title, subtitle, className = '' }) {
  return (
    <div className={cx('entity-meta-cell', className)}>
      <div className="entity-meta-title">{title}</div>
      {subtitle && <div className="entity-meta-subtitle">{subtitle}</div>}
    </div>
  );
}

function CompactEntityList({ rows, renderRow, empty, className = '' }) {
  if (!rows.length) return empty ?? null;
  return <div className={cx('entity-list', className)}>{rows.map(renderRow)}</div>;
}

Object.assign(window, {
  cx,
  EmptyState,
  LoadingState,
  PageSectionHeader,
  ActionGroup,
  StatusBadge,
  SearchField,
  FilterBar,
  DataTableShell,
  EntityMetaCell,
  CompactEntityList,
});