import { Card, Progress, Typography, Tag, Alert } from 'antd';
import { TrophyOutlined } from '@ant-design/icons';
import type { DashboardActionCampaign } from './types';

interface ActionCampaignCardProps {
  campaign: DashboardActionCampaign;
}

export default function ActionCampaignCard({ campaign }: ActionCampaignCardProps) {
  const percent = campaign.totalSteps > 0
    ? Math.round((campaign.completedSteps / campaign.totalSteps) * 100)
    : 0;

  const nextStep = [...campaign.steps]
    .sort((a, b) => a.order - b.order)
    .find((s) => !s.completed);

  return (
    <Card
      styles={{
        header: { borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '12px 20px', minHeight: 'auto' },
        body: { padding: '16px 20px' },
      }}
      title={
        <span style={{ fontSize: 14, fontWeight: 600 }}>
          <TrophyOutlined style={{ marginRight: 8, color: '#faad14' }} />
          Your Goal
        </span>
      }
    >
      <Typography.Title level={5} style={{ margin: '0 0 4px' }}>
        {campaign.title}
      </Typography.Title>
      {campaign.description && (
        <Typography.Text type="secondary" style={{ fontSize: 13, display: 'block', marginBottom: 12 }}>
          {campaign.description}
        </Typography.Text>
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          {campaign.completedSteps} of {campaign.totalSteps} complete
        </Typography.Text>
        {campaign.rewardEarned && <Tag color="gold" style={{ margin: 0 }}>Reward Earned!</Tag>}
      </div>
      <Progress
        percent={percent}
        status={campaign.rewardEarned ? 'success' : 'active'}
        showInfo={false}
        strokeWidth={10}
        style={{ marginBottom: 0 }}
      />

      {campaign.rewardEarned && campaign.rewardText && (
        <Alert
          type="success"
          showIcon
          message="You've earned your reward!"
          description={campaign.rewardText}
          style={{ marginTop: 12 }}
        />
      )}

      {!campaign.rewardEarned && campaign.rewardText && (
        <Typography.Text style={{ fontSize: 12, display: 'block', marginTop: 10, color: 'rgba(255,255,255,0.5)' }}>
          <TrophyOutlined style={{ marginRight: 4 }} />
          {campaign.rewardText}
        </Typography.Text>
      )}

      {nextStep && !campaign.rewardEarned && (
        <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
          <Typography.Text style={{ fontSize: 13 }}>
            <strong>Next:</strong>{' '}
            <Typography.Text type="secondary" style={{ fontSize: 13 }}>{nextStep.label}</Typography.Text>
          </Typography.Text>
        </div>
      )}
    </Card>
  );
}
