import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import {
  Badge,
  MetricCard as CommonMetricCard,
  PageHeader,
  Panel,
  PanelBody,
  PanelDescription,
  PanelHeader,
  PanelTitle,
} from '@/components/ui/Primitives';

interface HermesShellProps {
  title: string;
  description: string;
  badge?: string;
  actions?: ReactNode;
  children: ReactNode;
  className?: string;
}

export function HermesShell({ title, description, badge = 'Hermes Mission Control', actions, children, className }: HermesShellProps) {
  return (
    <div className={cn('space-y-6', className)}>
      <PageHeader
        eyebrow={<Badge variant="info">{badge}</Badge>}
        title={title}
        description={description}
        actions={actions}
      />
      {children}
    </div>
  );
}

interface SectionCardProps {
  title: string;
  subtitle?: string;
  children: ReactNode;
  className?: string;
  actions?: ReactNode;
}

export function SectionCard({ title, subtitle, actions, children, className }: SectionCardProps) {
  return (
    <Panel density="normal" className={className}>
      <PanelHeader className="mb-4">
        <div className="min-w-0">
          <PanelTitle>{title}</PanelTitle>
          {subtitle ? <PanelDescription>{subtitle}</PanelDescription> : null}
        </div>
        {actions}
      </PanelHeader>
      <PanelBody>{children}</PanelBody>
    </Panel>
  );
}

interface MetricCardProps {
  label: string;
  value: string | number;
  helpText?: string;
  tone?: 'default' | 'success' | 'warning' | 'danger' | 'info';
  icon?: ReactNode;
}

export function MetricCard({ label, value, helpText, tone = 'default', icon }: MetricCardProps) {
  const commonTone: Record<NonNullable<MetricCardProps['tone']>, 'neutral' | 'success' | 'warning' | 'danger' | 'info'> = {
    default: 'neutral',
    success: 'success',
    warning: 'warning',
    danger: 'danger',
    info: 'info',
  };

  return (
    <CommonMetricCard
      label={<span className="flex items-center justify-between gap-3">{label}{icon ? <span className="text-[var(--bl-text-tertiary)]">{icon}</span> : null}</span>}
      value={value}
      helper={helpText}
      tone={commonTone[tone]}
    />
  );
}
