import { Row, Col, Progress, Typography } from 'antd';
import {
  MailOutlined,
  EnvironmentOutlined,
  DollarOutlined,
  PhoneOutlined,
  PlaySquareOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import type { EngagementSummary } from '@/types/api';

interface EngagementSummaryPanelProps {
  engagement: EngagementSummary;
}

interface StatItemProps {
  icon: React.ReactNode;
  label: string;
  value: number | string;
  color: string;
}

function StatItem({ icon, label, value, color }: StatItemProps) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        padding: '6px 10px',
        background: 'rgba(255,255,255,0.04)',
        borderRadius: 6,
        border: '1px solid rgba(255,255,255,0.06)',
      }}
    >
      <span style={{ color, fontSize: 16 }}>{icon}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <Typography.Text type="secondary" style={{ fontSize: 11, display: 'block' }}>
          {label}
        </Typography.Text>
        <Typography.Text strong style={{ fontSize: 14 }}>
          {value}
        </Typography.Text>
      </div>
    </div>
  );
}

export default function EngagementSummaryPanel({ engagement }: EngagementSummaryPanelProps) {
  const hasInfluence = engagement.influence.emailsSent > 0 || engagement.influence.responsesSubmitted > 0;
  const hasMap = engagement.map.shiftsSignedUp > 0 || engagement.map.canvassVisits > 0;
  const hasPayments = engagement.payments.donationCount > 0;
  const hasSms = engagement.sms.conversations > 0;
  const hasMedia = engagement.media.videoViews > 0;
  const hasAnyData = hasInfluence || hasMap || hasPayments || hasSms || hasMedia;

  const score = engagement.overall.engagementScore;

  return (
    <div>
      {/* Score and dates */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 12 }}>
        <Progress
          type="circle"
          percent={score}
          size={56}
          strokeColor={score >= 70 ? '#52c41a' : score >= 40 ? '#faad14' : '#ff4d4f'}
          format={(p) => <span style={{ fontSize: 14, fontWeight: 600 }}>{p}</span>}
        />
        <div>
          <Typography.Text strong style={{ display: 'block', fontSize: 14 }}>
            Engagement Score
          </Typography.Text>
          <div style={{ display: 'flex', gap: 16, marginTop: 2 }}>
            {engagement.overall.firstSeen && (
              <Typography.Text type="secondary" style={{ fontSize: 11 }}>
                First seen: {dayjs(engagement.overall.firstSeen).format('MMM D, YYYY')}
              </Typography.Text>
            )}
            {engagement.overall.lastSeen && (
              <Typography.Text type="secondary" style={{ fontSize: 11 }}>
                Last seen: {dayjs(engagement.overall.lastSeen).format('MMM D, YYYY')}
              </Typography.Text>
            )}
          </div>
        </div>
      </div>

      {!hasAnyData ? (
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          No engagement data recorded yet.
        </Typography.Text>
      ) : (
        <Row gutter={[8, 8]}>
          {hasInfluence && (
            <>
              <Col xs={12}>
                <StatItem
                  icon={<MailOutlined />}
                  label="Emails Sent"
                  value={engagement.influence.emailsSent}
                  color="#1890ff"
                />
              </Col>
              <Col xs={12}>
                <StatItem
                  icon={<MailOutlined />}
                  label="Responses"
                  value={engagement.influence.responsesSubmitted}
                  color="#52c41a"
                />
              </Col>
            </>
          )}
          {hasMap && (
            <>
              <Col xs={12}>
                <StatItem
                  icon={<EnvironmentOutlined />}
                  label="Shift Signups"
                  value={engagement.map.shiftsSignedUp}
                  color="#13c2c2"
                />
              </Col>
              <Col xs={12}>
                <StatItem
                  icon={<EnvironmentOutlined />}
                  label="Canvass Visits"
                  value={engagement.map.canvassVisits}
                  color="#722ed1"
                />
              </Col>
            </>
          )}
          {hasPayments && (
            <>
              <Col xs={12}>
                <StatItem
                  icon={<DollarOutlined />}
                  label="Donations"
                  value={engagement.payments.donationCount}
                  color="#fadb14"
                />
              </Col>
              <Col xs={12}>
                <StatItem
                  icon={<DollarOutlined />}
                  label="Total Donated"
                  value={`$${engagement.payments.totalDonatedCAD.toFixed(2)}`}
                  color="#fadb14"
                />
              </Col>
            </>
          )}
          {hasSms && (
            <>
              <Col xs={12}>
                <StatItem
                  icon={<PhoneOutlined />}
                  label="Conversations"
                  value={engagement.sms.conversations}
                  color="#fa8c16"
                />
              </Col>
              <Col xs={12}>
                <StatItem
                  icon={<PhoneOutlined />}
                  label="SMS Received"
                  value={engagement.sms.messagesReceived}
                  color="#fa8c16"
                />
              </Col>
            </>
          )}
          {hasMedia && (
            <Col xs={12}>
              <StatItem
                icon={<PlaySquareOutlined />}
                label="Video Views"
                value={engagement.media.videoViews}
                color="#a0d911"
              />
            </Col>
          )}
        </Row>
      )}
    </div>
  );
}
