import { Card, Tag, Typography, Space, Button, Progress, Tooltip } from 'antd';
import {
  PlayCircleOutlined,
  PauseCircleOutlined,
  LinkOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import type { Instance } from '@/types/api';

const statusColors: Record<string, string> = {
  RUNNING: 'green',
  STOPPED: 'default',
  PROVISIONING: 'processing',
  ERROR: 'red',
  DESTROYING: 'orange',
};

interface InstanceCardProps {
  instance: Instance;
  onStart?: (id: string) => void;
  onStop?: (id: string) => void;
}

export default function InstanceCard({ instance, onStart, onStop }: InstanceCardProps) {
  const navigate = useNavigate();

  const healthCheck = instance.healthChecks?.[0];
  const healthPercent = healthCheck
    ? Math.round((healthCheck.healthyServices / healthCheck.totalServices) * 100)
    : 0;

  return (
    <Card
      hoverable
      onClick={() => navigate(`/app/instances/${instance.id}`)}
      style={{ width: '100%' }}
      actions={[
        <Tooltip title="Open Site" key="open">
          <Button
            type="text"
            icon={<LinkOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              window.open(`https://app.${instance.domain}`, '_blank');
            }}
          />
        </Tooltip>,
        instance.status === 'RUNNING' ? (
          <Tooltip title="Stop" key="stop">
            <Button
              type="text"
              icon={<PauseCircleOutlined />}
              onClick={(e) => {
                e.stopPropagation();
                onStop?.(instance.id);
              }}
            />
          </Tooltip>
        ) : (instance.status === 'STOPPED' || instance.status === 'ERROR') ? (
          <Tooltip title="Start" key="start">
            <Button
              type="text"
              icon={<PlayCircleOutlined />}
              onClick={(e) => {
                e.stopPropagation();
                onStart?.(instance.id);
              }}
            />
          </Tooltip>
        ) : (
          <Tooltip title={instance.status === 'PROVISIONING' ? 'Provisioning...' : instance.status} key="disabled">
            <Button
              type="text"
              icon={<PlayCircleOutlined />}
              disabled
            />
          </Tooltip>
        ),
        <Tooltip title="Settings" key="settings">
          <Button
            type="text"
            icon={<SettingOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              navigate(`/app/instances/${instance.id}`);
            }}
          />
        </Tooltip>,
      ]}
    >
      <Card.Meta
        title={
          <Space>
            <span>{instance.name}</span>
            <Tag color={statusColors[instance.status]}>{instance.status}</Tag>
          </Space>
        }
        description={
          <Space direction="vertical" style={{ width: '100%' }}>
            <Typography.Text type="secondary">{instance.domain}</Typography.Text>
            {healthCheck && (
              <div>
                <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                  Services: {healthCheck.healthyServices}/{healthCheck.totalServices}
                </Typography.Text>
                <Progress
                  percent={healthPercent}
                  size="small"
                  status={healthPercent === 100 ? 'success' : healthPercent > 50 ? 'active' : 'exception'}
                  showInfo={false}
                />
              </div>
            )}
            <Space size="small" wrap>
              {instance.enableMedia && <Tag>Media</Tag>}
              {instance.enableListmonk && <Tag>Newsletter</Tag>}
              {instance.enableGancio && <Tag>Events</Tag>}
              {instance.enableChat && <Tag>Chat</Tag>}
              {instance.enableMonitoring && <Tag>Monitoring</Tag>}
            </Space>
          </Space>
        }
      />
    </Card>
  );
}
