import React from 'react';
import { Card, Col, Row, Tooltip, Typography } from 'antd';
import type { WorkflowOverview } from '../types';

const { Text } = Typography;

function formatDuration(seconds: number): string {
  if (seconds <= 0) return '—';
  if (seconds < 1) return `${Math.round(seconds * 1000)}ms`;
  if (seconds < 60) return `${seconds.toFixed(1)}s`;
  const m = Math.floor(seconds / 60);
  const s = Math.round(seconds % 60);
  return `${m}m ${s}s`;
}

interface Props {
  overview: WorkflowOverview | null;
  activeFilter: string | undefined;
  onFilter: (status: string | undefined) => void;
}

export function StatusCards({ overview, activeFilter, onFilter }: Props) {
  if (!overview) return null;

  const handleClick = (key: string) => {
    onFilter(activeFilter === key ? undefined : key);
  };

  const cardStyle = (key?: string): React.CSSProperties => ({
    cursor: key ? 'pointer' : 'default',
    borderColor: key && activeFilter === key ? '#1677ff' : undefined,
    height: '100%',
  });

  return (
    <Row gutter={12} style={{ marginBottom: 16 }}>
      {/* Total Runs */}
      <Col flex="1">
        <Card size="small" style={cardStyle()}>
          <Text type="secondary" style={{ fontSize: 14 }}>
            Total Runs
          </Text>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontSize: 24, fontWeight: 600, lineHeight: 1.3 }}>
              {overview.totalRuns.last24h}
            </span>
            <Text type="secondary" style={{ fontSize: 12 }}>
              24H
            </Text>
          </div>
          <Text type="secondary" style={{ fontSize: 12 }}>
            Total: {overview.totalRuns.total}
          </Text>
        </Card>
      </Col>

      {/* Success Rate */}
      <Col flex="1">
        <Card size="small" style={cardStyle()}>
          <Text type="secondary" style={{ fontSize: 14 }}>
            Success Rate
          </Text>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span
              style={{
                fontSize: 24,
                fontWeight: 600,
                lineHeight: 1.3,
                color: '#52c41a',
              }}
            >
              {overview.successRate.last24h}%
            </span>
            <Text type="secondary" style={{ fontSize: 12 }}>
              24H
            </Text>
          </div>
          <Text type="secondary" style={{ fontSize: 12 }}>
            Total: {overview.successRate.total}%
          </Text>
        </Card>
      </Col>

      {/* Failed — clickable */}
      <Col flex="1">
        <Card
          size="small"
          hoverable
          onClick={() => handleClick('FAILED')}
          style={cardStyle('FAILED')}
        >
          <Text type="secondary" style={{ fontSize: 14 }}>
            Failed
          </Text>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span
              style={{
                fontSize: 24,
                fontWeight: 600,
                lineHeight: 1.3,
                color: '#ff4d4f',
              }}
            >
              {overview.failed.last24h}
            </span>
            <Text type="secondary" style={{ fontSize: 12 }}>
              24H
            </Text>
          </div>
          <Text type="secondary" style={{ fontSize: 12 }}>
            Total: {overview.failed.total}
          </Text>
        </Card>
      </Col>

      {/* Duration P95 */}
      <Col flex="1">
        <Tooltip
          title={
            <>
              <div>
                Avg (24H): {formatDuration(overview.duration.last24h.avg)}
              </div>
              <div>
                Avg (Total): {formatDuration(overview.duration.total.avg)}
              </div>
            </>
          }
        >
          <Card size="small" style={cardStyle()}>
            <Text type="secondary" style={{ fontSize: 14 }}>
              Duration (P95)
            </Text>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{ fontSize: 24, fontWeight: 600, lineHeight: 1.3 }}>
                {formatDuration(overview.duration.last24h.p95)}
              </span>
              <Text type="secondary" style={{ fontSize: 12 }}>
                24H
              </Text>
            </div>
            <Text type="secondary" style={{ fontSize: 12 }}>
              Total: {formatDuration(overview.duration.total.p95)}
            </Text>
          </Card>
        </Tooltip>
      </Col>

      {/* Running — clickable */}
      <Col flex="1">
        <Card
          size="small"
          hoverable
          onClick={() => handleClick('RUNNING')}
          style={cardStyle('RUNNING')}
        >
          <Text type="secondary" style={{ fontSize: 14 }}>
            Running
          </Text>
          <div
            style={{
              fontSize: 24,
              fontWeight: 600,
              lineHeight: 1.3,
              color: '#1677ff',
            }}
          >
            {overview.running}
          </div>
        </Card>
      </Col>

      {/* Pending — clickable */}
      <Col flex="1">
        <Card
          size="small"
          hoverable
          onClick={() => handleClick('PENDING')}
          style={cardStyle('PENDING')}
        >
          <Text type="secondary" style={{ fontSize: 14 }}>
            Pending
          </Text>
          <div
            style={{
              fontSize: 24,
              fontWeight: 600,
              lineHeight: 1.3,
              color: '#faad14',
            }}
          >
            {overview.pending}
          </div>
        </Card>
      </Col>
    </Row>
  );
}
