import { Card, Avatar, Typography, Tag, Badge } from 'antd';
import { TeamOutlined, ScheduleOutlined, SendOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import type { SocialGroupSummary } from '@/types/social';
import dayjs from 'dayjs';

const { Text } = Typography;

const TYPE_CONFIG: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
  SHIFT_TEAM: { color: 'green', label: 'Shift Team', icon: <ScheduleOutlined /> },
  CAMPAIGN_TEAM: { color: 'blue', label: 'Campaign Team', icon: <SendOutlined /> },
  CUSTOM: { color: 'purple', label: 'Group', icon: <TeamOutlined /> },
};

interface Props {
  group: SocialGroupSummary;
}

export default function GroupCard({ group }: Props) {
  const config = TYPE_CONFIG[group.type] ?? TYPE_CONFIG['CUSTOM']!;

  return (
    <Link to={`/volunteer/groups/${group.id}`} style={{ textDecoration: 'none' }}>
      <Card
        hoverable
        size="small"
        style={{ marginBottom: 8 }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Badge dot={group.hasActiveCall} status="processing" offset={[-4, 4]}>
            <Avatar
              icon={config.icon}
              style={{ backgroundColor: `var(--ant-color-${config.color})`, flexShrink: 0 }}
            />
          </Badge>
          <div style={{ flex: 1, minWidth: 0 }}>
            <Text strong ellipsis style={{ display: 'block' }}>{group.name}</Text>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Tag color={config.color} style={{ margin: 0, fontSize: 11 }}>{config.label}</Tag>
              {group.hasActiveCall && (
                <Tag color="red" icon={<VideoCameraOutlined />} style={{ margin: 0, fontSize: 11 }}>Live</Tag>
              )}
              <Text type="secondary" style={{ fontSize: 12 }}>
                {group.memberCount} member{group.memberCount !== 1 ? 's' : ''}
              </Text>
            </div>
          </div>
          <Text type="secondary" style={{ fontSize: 11, flexShrink: 0 }}>
            {dayjs(group.joinedAt).format('MMM D')}
          </Text>
        </div>
      </Card>
    </Link>
  );
}
