// PatientUI.jsx — shared skeleton, error/retry, empty state, mobile bottom nav
const { useEffect } = React;

function Skeleton({ lines = 3, height = 14, className = '' }) {
  return (
    <div className={`skeleton-stack ${className}`.trim()} aria-hidden="true">
      {Array.from({ length: lines }, (_, i) => (
        <div
          key={i}
          className="skeleton td-skeleton"
          style={{ height, width: `${Math.max(38, 78 - i * 14)}%` }}
        />
      ))}
    </div>
  );
}

function ErrorRetry({ message, onRetry, retryLabel = 'Try again' }) {
  return (
    <div className="td-panel td-error-retry" role="alert">
      <p className="td-error-msg">{message}</p>
      <button type="button" className="btn btn-primary td-cta" onClick={onRetry}>
        {retryLabel}
      </button>
    </div>
  );
}

function EmptyStateIllus({ variant = 'search' }) {
  if (variant === 'folder') {
    return (
      <svg className="td-empty-illus" width="64" height="64" viewBox="0 0 64 64" aria-hidden="true">
        <rect x="12" y="16" width="40" height="36" rx="4" fill="none" stroke="currentColor" strokeWidth="2"/>
        <path d="M12 24h40" stroke="currentColor" strokeWidth="2"/>
        <circle cx="32" cy="38" r="6" fill="none" stroke="currentColor" strokeWidth="2"/>
      </svg>
    );
  }
  return (
    <svg className="td-empty-illus" width="64" height="64" viewBox="0 0 64 64" aria-hidden="true">
      <circle cx="28" cy="28" r="14" fill="none" stroke="currentColor" strokeWidth="2"/>
      <path d="M38 38l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <path d="M22 28h12M28 22v12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.4"/>
    </svg>
  );
}

function EmptyState({ title, description, action, onAction, actionLabel, variant = 'search' }) {
  return (
    <div className="td-empty-state">
      <EmptyStateIllus variant={variant} />
      {title && <h3>{title}</h3>}
      {description && <p>{description}</p>}
      {action}
      {!action && onAction && actionLabel && (
        <button type="button" className="btn btn-secondary" onClick={onAction}>
          {actionLabel}
        </button>
      )}
    </div>
  );
}

const BOTTOM_NAV_ITEMS = [
  { screen: 'triage', label: 'Triage', icon: 'tooth' },
  { screen: 'directory', label: 'Find', icon: 'pin' },
  { screen: 'smile-mentors', label: 'Jobs', icon: 'briefcase' },
  { screen: 'marketplace', label: 'Shop', icon: 'cart' },
];

const BOTTOM_NAV_SCREENS = new Set([
  'landing', 'modern', 'chooser', 'triage', 'directory', 'snapshot',
  'smile-mentors', 'marketplace', 'jobs', 'ce-hub',
]);

const SCREEN_ALIASES = {
  jobs: 'smile-mentors',
  'ce-hub': 'smile-mentors',
  modern: 'landing',
  chooser: 'landing',
};

function BottomNav({ screen, go }) {
  const visible = BOTTOM_NAV_SCREENS.has(screen);
  const activeKey = SCREEN_ALIASES[screen] || screen;

  useEffect(() => {
    const root = document.querySelector('.app.has-bottom-nav-target');
    if (!root) return undefined;
    if (visible) root.classList.add('has-bottom-nav');
    else root.classList.remove('has-bottom-nav');
    return () => root.classList.remove('has-bottom-nav');
  }, [visible]);

  if (!visible || !go) return null;

  const nav = (target) => (e) => {
    e.preventDefault();
    go(target);
  };

  return (
    <nav className="td-bottom-nav" aria-label="Patient quick navigation">
      {BOTTOM_NAV_ITEMS.map((item) => {
        const isActive = activeKey === item.screen
          || (item.screen === 'smile-mentors' && (screen === 'jobs' || screen === 'ce-hub'));
        const Tag = 'button';
        return (
          <Tag
            key={item.screen}
            type="button"
            className={isActive ? 'is-active' : ''}
            onClick={nav(item.screen)}
            aria-label={item.label}
            aria-current={isActive ? 'page' : undefined}
          >
            {window.FlatIcon && window.ICONS && window.ICONS[item.icon]
              ? React.createElement(window.FlatIcon, { name: item.icon, size: 20 })
              : null}
            <span>{item.label}</span>
          </Tag>
        );
      })}
    </nav>
  );
}

Object.assign(window, {
  Skeleton,
  ErrorRetry,
  EmptyState,
  EmptyStateIllus,
  BottomNav,
  BOTTOM_NAV_SCREENS,
});