import { BidiText } from '@/components/foundation/BidiText';
import { StatusBadge } from '@/components/foundation/StatusBadge';
import { Card } from '@/components/surfaces/Card';
import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
import type { ReactNode } from 'react';
import styles from './Evidence.module.css';

export type EvidenceStatus = 'approved' | 'pending-review' | 'research-only' | 'prohibited';

export interface MetricContent {
  value: string;
  label: string;
  qualification?: string;
  sourceReference?: string;
  status: EvidenceStatus;
}

const statusTone = {
  approved: 'success',
  'pending-review': 'warning',
  'research-only': 'info',
  prohibited: 'error',
} as const;

export function canRenderProductionEvidence(status: EvidenceStatus): boolean {
  return status === 'approved';
}

interface MetricProps {
  content: MetricContent;
  statusLabel: string;
  production?: boolean;
  headingLevel?: HeadingLevel;
}

export function Metric({
  content,
  statusLabel,
  production = false,
  headingLevel = 3,
}: MetricProps) {
  if (production && !canRenderProductionEvidence(content.status)) return null;
  return (
    <Card className={styles.metric}>
      <StatusBadge tone={statusTone[content.status]}>{statusLabel}</StatusBadge>
      <BidiText className={styles.value}>{content.value}</BidiText>
      <Heading level={headingLevel} appearance="subheading">
        {content.label}
      </Heading>
      {content.qualification ? <Text variant="supporting">{content.qualification}</Text> : null}
      {content.sourceReference ? (
        <small className={styles.source}>{content.sourceReference}</small>
      ) : null}
    </Card>
  );
}

export function EvidenceShell({
  title,
  status,
  statusLabel,
  children,
}: {
  title: string;
  status: EvidenceStatus;
  statusLabel: string;
  children?: ReactNode;
}) {
  if (status === 'prohibited') return null;
  return (
    <Card className={styles.shell} tone="muted">
      <div className={styles.shellHeader}>
        <Heading level={3} appearance="subheading">
          {title}
        </Heading>
        <StatusBadge tone={statusTone[status]}>{statusLabel}</StatusBadge>
      </div>
      {children}
    </Card>
  );
}
