// PatientUI.jsx — shared skeleton, error/retry, empty state, mobile bottom nav

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>
  );
}

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