import { Badge, StatusDot, MonoText, Button } 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;

function formatBytes(bytes: number): string {
  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`;
  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${bytes} B`;
}

interface Props {
  deployment: Deployment;
  version: AppVersion | null;
  externalUrl: string;
  onStop: () => void;
  onStart: () => void;
}

export function StatusCard({ deployment, version, externalUrl, onStop, onStart }: 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>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>

      <div className={styles.statusCardActions}>
        {(deployment.status === 'RUNNING' || deployment.status === 'STARTING' || deployment.status === 'DEGRADED')
          && <Button size="sm" variant="danger" onClick={onStop}>Stop</Button>}
        {deployment.status === 'STOPPED' && <Button size="sm" variant="secondary" onClick={onStart}>Start</Button>}
      </div>
    </div>
  );
}