import { Badge, StatusDot, MonoText } from '@cameleer/design-system';
import type { Deployment, AppVersion } from '../../../../api/queries/admin/apps';
import { timeAgo } from '../../../../utils/format-utils';
import styles from '../AppDeploymentPage.module.css';

const STATUS_COLORS = {
  RUNNING: 'success', STARTING: 'warning', FAILED: 'error',
  STOPPED: 'auto', DEGRADED: 'warning', STOPPING: 'auto',
} as const;

const DEPLOY_STATUS_DOT = {
  RUNNING: 'live', STARTING: 'running', DEGRADED: 'stale',
  STOPPING: 'stale', STOPPED: 'dead', FAILED: 'error',
} as const;

interface Props {
  deployment: Deployment;
  version: AppVersion | null;
  externalUrl: string;
}

export function StatusCard({ deployment, version, externalUrl }: Props) {
  const running = deployment.replicaStates?.filter((r) => r.status === 'RUNNING').length ?? 0;
  const total = deployment.replicaStates?.length ?? 0;

  return (
    <div className={styles.statusCard}>
      <div className={styles.statusCardHeader}>
        <StatusDot variant={DEPLOY_STATUS_DOT[deployment.status as keyof typeof DEPLOY_STATUS_DOT] ?? 'dead'} />
        <Badge label={deployment.status} color={STATUS_COLORS[deployment.status as keyof typeof STATUS_COLORS] ?? 'auto'} />
        {version && <Badge label={`v${version.version}`} color="auto" />}
      </div>

      <div className={styles.statusCardGrid}>
        {version && <><span>JAR</span><MonoText size="sm">{version.jarFilename}</MonoText></>}
        {version && <><span>Checksum</span><MonoText size="xs">{version.jarChecksum.substring(0, 12)}</MonoText></>}
        <span>Replicas</span><span>{running}/{total}</span>
        <span>Strategy</span><span>{deployment.deploymentStrategy ?? '—'}</span>
        <span>URL</span>
        {deployment.status === 'RUNNING'
          ? <a href={externalUrl} target="_blank" rel="noreferrer"><MonoText size="sm">{externalUrl}</MonoText></a>
          : <MonoText size="sm">{externalUrl}</MonoText>}
        <span>Deployed</span><span>{deployment.deployedAt ? timeAgo(deployment.deployedAt) : '—'}</span>
      </div>

      {deployment.status === 'FAILED' && deployment.errorMessage && (
        <div className={styles.statusCardError}>
          <span className={styles.statusCardErrorLabel}>Failure reason</span>
          {deployment.errorMessage}
        </div>
      )}
    </div>
  );
}