import { Button, Progress, Space, Typography, theme } from 'antd';
import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  PlayCircleOutlined,
  ReloadOutlined,
  RocketOutlined,
  DashboardOutlined,
  SettingOutlined,
  SendOutlined,
  EnvironmentOutlined,
  PlaySquareOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import type { TourSection, SectionProgress } from './types';

const { Text } = Typography;

const iconMap: Record<string, React.ReactNode> = {
  RocketOutlined: <RocketOutlined />,
  DashboardOutlined: <DashboardOutlined />,
  SettingOutlined: <SettingOutlined />,
  SendOutlined: <SendOutlined />,
  EnvironmentOutlined: <EnvironmentOutlined />,
  PlaySquareOutlined: <PlaySquareOutlined />,
  TeamOutlined: <TeamOutlined />,
};

interface TourSectionCardProps {
  section: TourSection;
  progress: SectionProgress | null;
  onLaunch: () => void;
  onReset: () => void;
}

export function TourSectionCard({ section, progress, onLaunch, onReset }: TourSectionCardProps) {
  const { token } = theme.useToken();

  const isCompleted = progress?.completed ?? false;
  const isInProgress = progress && !progress.completed && progress.currentStep > 0;
  const percent = progress
    ? isCompleted
      ? 100
      : Math.round((progress.currentStep / Math.max(progress.totalSteps, 1)) * 100)
    : 0;

  return (
    <div
      style={{
        padding: '12px 16px',
        borderRadius: token.borderRadius,
        border: `1px solid ${token.colorBorderSecondary}`,
        background: token.colorBgContainer,
        marginBottom: 8,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div
          style={{
            fontSize: 20,
            color: isCompleted ? token.colorSuccess : token.colorPrimary,
            marginTop: 2,
            flexShrink: 0,
          }}
        >
          {isCompleted ? <CheckCircleOutlined /> : (iconMap[section.icon] || <RocketOutlined />)}
        </div>

        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text strong>{section.title}</Text>
            <Text type="secondary" style={{ fontSize: 12, flexShrink: 0 }}>
              <ClockCircleOutlined style={{ marginRight: 4 }} />
              {section.estimatedMinutes} min
            </Text>
          </div>

          <Text type="secondary" style={{ fontSize: 13, display: 'block', marginTop: 2 }}>
            {section.description}
          </Text>

          {(isInProgress || isCompleted) && (
            <Progress
              percent={percent}
              size="small"
              status={isCompleted ? 'success' : 'active'}
              style={{ marginTop: 8, marginBottom: 0 }}
              showInfo={false}
            />
          )}

          <Space style={{ marginTop: 8 }}>
            {isCompleted ? (
              <Button
                size="small"
                icon={<ReloadOutlined />}
                onClick={(e) => { e.stopPropagation(); onReset(); }}
              >
                Restart
              </Button>
            ) : isInProgress ? (
              <Button
                size="small"
                type="primary"
                icon={<PlayCircleOutlined />}
                onClick={onLaunch}
              >
                Resume (Step {(progress?.currentStep ?? 0) + 1}/{progress?.totalSteps ?? 0})
              </Button>
            ) : (
              <Button
                size="small"
                type="primary"
                icon={<PlayCircleOutlined />}
                onClick={onLaunch}
              >
                Start
              </Button>
            )}
          </Space>
        </div>
      </div>
    </div>
  );
}
