import { Typography, Tag, Space, Grid } from 'antd';
import {
  SendOutlined,
  ScheduleOutlined,
  EnvironmentOutlined,
  TeamOutlined,
  MailOutlined,
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import dayjs from 'dayjs';

const { Text } = Typography;

interface RelatedCampaign {
  id: string;
  slug: string;
  title: string;
  description: string | null;
  emailCount: number;
}

interface RelatedShift {
  id: string;
  title: string;
  startTime: string;
  location: string | null;
  currentVolunteers: number;
  maxVolunteers: number | null;
}

interface RelatedContentProps {
  campaigns?: RelatedCampaign[];
  shifts?: RelatedShift[];
}

export default function RelatedContent({ campaigns = [], shifts = [] }: RelatedContentProps) {
  const screens = Grid.useBreakpoint();
  const isMobile = !screens.md;

  if (campaigns.length === 0 && shifts.length === 0) return null;

  const cardStyle: React.CSSProperties = {
    minWidth: isMobile ? 220 : 240,
    maxWidth: 280,
    padding: '12px 14px',
    borderRadius: 8,
    background: 'rgba(255,255,255,0.04)',
    border: '1px solid rgba(255,255,255,0.08)',
    flexShrink: 0,
  };

  return (
    <div style={{ marginTop: 32 }}>
      {campaigns.length > 0 && (
        <div style={{ marginBottom: 24 }}>
          <Text strong style={{ color: 'rgba(255,255,255,0.75)', fontSize: 14, display: 'block', marginBottom: 12 }}>
            <SendOutlined style={{ marginRight: 6 }} />Related Campaigns
          </Text>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 4 }}>
            {campaigns.map(c => (
              <Link key={c.id} to={`/campaign/${c.slug}`} style={{ textDecoration: 'none' }}>
                <div style={cardStyle}>
                  <Text strong style={{ color: '#fff', fontSize: 14, display: 'block' }}>{c.title}</Text>
                  {c.description && (
                    <Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 12, display: 'block', marginTop: 4 }}>
                      {c.description}
                    </Text>
                  )}
                  <Tag icon={<MailOutlined />} color="blue" style={{ marginTop: 8 }}>{c.emailCount} emails</Tag>
                </div>
              </Link>
            ))}
          </div>
        </div>
      )}

      {shifts.length > 0 && (
        <div>
          <Text strong style={{ color: 'rgba(255,255,255,0.75)', fontSize: 14, display: 'block', marginBottom: 12 }}>
            <ScheduleOutlined style={{ marginRight: 6 }} />Upcoming Shifts
          </Text>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 4 }}>
            {shifts.map(s => {
              const start = dayjs(s.startTime);
              return (
                <Link key={s.id} to="/shifts" style={{ textDecoration: 'none' }}>
                  <div style={cardStyle}>
                    <Text strong style={{ color: '#fff', fontSize: 14, display: 'block' }}>{s.title}</Text>
                    <Space direction="vertical" size={2} style={{ marginTop: 6 }}>
                      <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>
                        <ScheduleOutlined style={{ marginRight: 4 }} />
                        {start.format('ddd, MMM D')} at {start.format('h:mm A')}
                      </Text>
                      {s.location && (
                        <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>
                          <EnvironmentOutlined style={{ marginRight: 4 }} />
                          {s.location}
                        </Text>
                      )}
                      <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>
                        <TeamOutlined style={{ marginRight: 4 }} />
                        {s.currentVolunteers} signed up
                        {s.maxVolunteers && ` / ${s.maxVolunteers}`}
                      </Text>
                    </Space>
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}
