'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  Box,
  Container,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Card,
  CardContent,
  Typography,
  InputAdornment,
  Pagination,
  Grid,
  LinearProgress,
  Chip,
} from '@mui/material';
import {
  Search,
  FilterList,
  Event,
  TrendingUp,
  People,
  CardGiftcard,
  Phone,
  Share,
  ShoppingCart,
  Email,
  LocalFireDepartment,
  NewReleases,
  Warning,
  Star,
} from '@mui/icons-material';
import Header from '@/shared/ui/Header';
import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';

// Mock 데이터
const mockEvents = [
  {
    id: '1',
    title: '신규고객 유치 이벤트',
    status: 'active' as const,
    daysLeft: 5,
    participants: 128,
    targetParticipants: 200,
    roi: 450,
    startDate: '2025-11-01',
    endDate: '2025-11-15',
    prize: '커피 쿠폰',
    method: '전화번호 입력',
    isUrgent: true,
    isPopular: false,
    isHighROI: true,
    isNew: false,
  },
  {
    id: '2',
    title: '재방문 유도 이벤트',
    status: 'active' as const,
    daysLeft: 12,
    participants: 56,
    targetParticipants: 100,
    roi: 320,
    startDate: '2025-11-05',
    endDate: '2025-11-20',
    prize: '할인 쿠폰',
    method: 'SNS 팔로우',
    isUrgent: false,
    isPopular: false,
    isHighROI: false,
    isNew: false,
  },
  {
    id: '3',
    title: '매출증대 프로모션',
    status: 'ended' as const,
    daysLeft: 0,
    participants: 234,
    targetParticipants: 150,
    roi: 580,
    startDate: '2025-10-15',
    endDate: '2025-10-31',
    prize: '상품권',
    method: '구매 인증',
    isUrgent: false,
    isPopular: true,
    isHighROI: true,
    isNew: false,
  },
  {
    id: '4',
    title: '봄맞이 특별 이벤트',
    status: 'scheduled' as const,
    daysLeft: 30,
    participants: 0,
    targetParticipants: 300,
    roi: 0,
    startDate: '2025-12-01',
    endDate: '2025-12-15',
    prize: '체험권',
    method: '이메일 등록',
    isUrgent: false,
    isPopular: false,
    isHighROI: false,
    isNew: true,
  },
];

type EventStatus = 'all' | 'active' | 'scheduled' | 'ended';
type Period = '1month' | '3months' | '6months' | '1year' | 'all';
type SortBy = 'latest' | 'participants' | 'roi';

export default function EventsPage() {
  const router = useRouter();
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<EventStatus>('all');
  const [periodFilter, setPeriodFilter] = useState<Period>('1month');
  const [sortBy, setSortBy] = useState<SortBy>('latest');
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  // 필터링 및 정렬
  const filteredEvents = mockEvents
    .filter((event) => {
      const matchesSearch = event.title.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesStatus = statusFilter === 'all' || event.status === statusFilter;
      return matchesSearch && matchesStatus;
    })
    .sort((a, b) => {
      if (sortBy === 'latest') {
        return new Date(b.startDate).getTime() - new Date(a.startDate).getTime();
      } else if (sortBy === 'participants') {
        return b.participants - a.participants;
      } else if (sortBy === 'roi') {
        return b.roi - a.roi;
      }
      return 0;
    });

  // 페이지네이션
  const totalPages = Math.ceil(filteredEvents.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = Math.min(startIndex + itemsPerPage, filteredEvents.length);
  const pageEvents = filteredEvents.slice(startIndex, endIndex);

  const handleEventClick = (eventId: string) => {
    router.push(`/events/${eventId}`);
  };

  const getStatusStyle = (status: string) => {
    switch (status) {
      case 'active':
        return {
          bgcolor: colors.mint,
          color: 'white',
        };
      case 'scheduled':
        return {
          bgcolor: colors.blue,
          color: 'white',
        };
      case 'ended':
        return {
          bgcolor: colors.gray[300],
          color: colors.gray[700],
        };
      default:
        return {
          bgcolor: colors.gray[200],
          color: colors.gray[600],
        };
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'active':
        return '진행중';
      case 'scheduled':
        return '예정';
      case 'ended':
        return '종료';
      default:
        return status;
    }
  };

  const getMethodIcon = (method: string) => {
    switch (method) {
      case '전화번호 입력':
        return <Phone sx={{ fontSize: 18 }} />;
      case 'SNS 팔로우':
        return <Share sx={{ fontSize: 18 }} />;
      case '구매 인증':
        return <ShoppingCart sx={{ fontSize: 18 }} />;
      case '이메일 등록':
        return <Email sx={{ fontSize: 18 }} />;
      default:
        return <Event sx={{ fontSize: 18 }} />;
    }
  };

  const calculateProgress = (event: (typeof mockEvents)[0]) => {
    if (event.status !== 'active') return 0;
    const total = new Date(event.endDate).getTime() - new Date(event.startDate).getTime();
    const elapsed = Date.now() - new Date(event.startDate).getTime();
    return Math.min(Math.max((elapsed / total) * 100, 0), 100);
  };

  // 통계 계산
  const stats = {
    total: mockEvents.length,
    active: mockEvents.filter((e) => e.status === 'active').length,
    totalParticipants: mockEvents.reduce((sum, e) => sum + e.participants, 0),
    avgROI: Math.round(
      mockEvents.filter((e) => e.roi > 0).reduce((sum, e) => sum + e.roi, 0) /
        mockEvents.filter((e) => e.roi > 0).length
    ),
  };

  return (
    <>
      <Header title="이벤트 목록" showBack={true} showMenu={false} showProfile={true} />
      <Box
        sx={{
          pt: { xs: 7, sm: 8 },
          pb: 10,
          bgcolor: colors.gray[50],
          minHeight: '100vh',
        }}
      >
        <Container
          maxWidth="lg"
          sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 6 }, px: { xs: 3, sm: 6, md: 10 } }}
        >
          {/* Summary Statistics */}
          <Grid container spacing={{ xs: 2, sm: 4 }} sx={{ mb: { xs: 4, sm: 8 } }}>
            <Grid item xs={6} sm={3}>
              <Card
                elevation={0}
                sx={{
                  ...cardStyles.default,
                  background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
                  borderColor: 'transparent',
                }}
              >
                <CardContent
                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
                >
                  <Event
                    sx={{
                      fontSize: { xs: 24, sm: 32 },
                      color: colors.gray[900],
                      mb: 1,
                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
                    }}
                  />
                  <Typography
                    variant="h4"
                    sx={{
                      fontWeight: 700,
                      color: colors.gray[900],
                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
                      mb: 0.5,
                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
                    }}
                  >
                    {stats.total}
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      color: colors.gray[700],
                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                    }}
                  >
                    전체 이벤트
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Card
                elevation={0}
                sx={{
                  ...cardStyles.default,
                  background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
                  borderColor: 'transparent',
                }}
              >
                <CardContent
                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
                >
                  <LocalFireDepartment
                    sx={{
                      fontSize: { xs: 24, sm: 32 },
                      color: colors.gray[900],
                      mb: 1,
                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
                    }}
                  />
                  <Typography
                    variant="h4"
                    sx={{
                      fontWeight: 700,
                      color: colors.gray[900],
                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
                      mb: 0.5,
                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
                    }}
                  >
                    {stats.active}
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      color: colors.gray[700],
                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                    }}
                  >
                    진행중
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Card
                elevation={0}
                sx={{
                  ...cardStyles.default,
                  background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
                  borderColor: 'transparent',
                }}
              >
                <CardContent
                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
                >
                  <People
                    sx={{
                      fontSize: { xs: 24, sm: 32 },
                      color: colors.gray[900],
                      mb: 1,
                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
                    }}
                  />
                  <Typography
                    variant="h4"
                    sx={{
                      fontWeight: 700,
                      color: colors.gray[900],
                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
                      mb: 0.5,
                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
                    }}
                  >
                    {stats.totalParticipants}
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      color: colors.gray[700],
                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                    }}
                  >
                    총 참여자
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Card
                elevation={0}
                sx={{
                  ...cardStyles.default,
                  background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
                  borderColor: 'transparent',
                }}
              >
                <CardContent
                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
                >
                  <TrendingUp
                    sx={{
                      fontSize: { xs: 24, sm: 32 },
                      color: colors.gray[900],
                      mb: 1,
                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
                    }}
                  />
                  <Typography
                    variant="h4"
                    sx={{
                      fontWeight: 700,
                      color: colors.gray[900],
                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
                      mb: 0.5,
                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
                    }}
                  >
                    {stats.avgROI}%
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      color: colors.gray[700],
                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                    }}
                  >
                    평균 ROI
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          </Grid>

          {/* Search Section */}
          <Box sx={{ mb: { xs: 4, sm: 8 } }}>
            <TextField
              fullWidth
              placeholder="이벤트명 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search sx={{ color: colors.gray[400], fontSize: { xs: 20, sm: 24 } }} />
                  </InputAdornment>
                ),
              }}
              sx={{
                '& .MuiOutlinedInput-root': {
                  borderRadius: 3,
                  bgcolor: 'white',
                  fontSize: { xs: '0.875rem', sm: '1rem' },
                  '& fieldset': {
                    borderColor: colors.gray[200],
                  },
                  '&:hover fieldset': {
                    borderColor: colors.gray[300],
                  },
                  '&.Mui-focused fieldset': {
                    borderColor: colors.purple,
                  },
                },
              }}
            />
          </Box>

          {/* Filters */}
          <Box sx={{ mb: { xs: 4, sm: 8 } }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 4 }, flexWrap: 'wrap' }}>
              <FormControl sx={{ flex: 1, minWidth: 120 }}>
                <InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>상태</InputLabel>
                <Select
                  value={statusFilter}
                  label="상태"
                  onChange={(e) => setStatusFilter(e.target.value as EventStatus)}
                  sx={{
                    borderRadius: 2,
                    bgcolor: 'white',
                    fontSize: { xs: '0.875rem', sm: '1rem' },
                    '& .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.gray[200],
                    },
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.gray[300],
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.purple,
                    },
                  }}
                >
                  <MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
                  <MenuItem value="active" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>진행중</MenuItem>
                  <MenuItem value="scheduled" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>예정</MenuItem>
                  <MenuItem value="ended" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>종료</MenuItem>
                </Select>
              </FormControl>
              <FormControl sx={{ flex: 1, minWidth: 140 }}>
                <InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>기간</InputLabel>
                <Select
                  value={periodFilter}
                  label="기간"
                  onChange={(e) => setPeriodFilter(e.target.value as Period)}
                  sx={{
                    borderRadius: 2,
                    bgcolor: 'white',
                    fontSize: { xs: '0.875rem', sm: '1rem' },
                    '& .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.gray[200],
                    },
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.gray[300],
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.purple,
                    },
                  }}
                >
                  <MenuItem value="1month" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1개월</MenuItem>
                  <MenuItem value="3months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 3개월</MenuItem>
                  <MenuItem value="6months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 6개월</MenuItem>
                  <MenuItem value="1year" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1년</MenuItem>
                  <MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
                </Select>
              </FormControl>
            </Box>
          </Box>

          {/* Sorting */}
          <Box sx={{ mb: { xs: 4, sm: 8 } }}>
            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}>
                정렬
              </Typography>
              <FormControl sx={{ width: { xs: 140, sm: 160 } }}>
                <Select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value as SortBy)}
                  size="small"
                  sx={{
                    borderRadius: 2,
                    bgcolor: 'white',
                    fontSize: { xs: '0.8125rem', sm: '0.875rem' },
                    '& .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.gray[200],
                    },
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.gray[300],
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                      borderColor: colors.purple,
                    },
                  }}
                >
                  <MenuItem value="latest" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>최신순</MenuItem>
                  <MenuItem value="participants" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>참여자순</MenuItem>
                  <MenuItem value="roi" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>투자대비수익률순</MenuItem>
                </Select>
              </FormControl>
            </Box>
          </Box>

          {/* Event List */}
          <Box sx={{ mb: { xs: 5, sm: 10 } }}>
            {pageEvents.length === 0 ? (
              <Card
                elevation={0}
                sx={{
                  ...cardStyles.default,
                }}
              >
                <CardContent sx={{ textAlign: 'center', py: { xs: 10, sm: 20 } }}>
                  <Box sx={{ color: colors.gray[300], mb: { xs: 2, sm: 3 } }}>
                    <Box
                      component="span"
                      className="material-icons"
                      sx={{ fontSize: { xs: 48, sm: 72 } }}
                    >
                      event_busy
                    </Box>
                  </Box>
                  <Typography variant="h6" sx={{ mb: { xs: 1, sm: 2 }, color: colors.gray[700], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
                    검색 결과가 없습니다
                  </Typography>
                  <Typography variant="body2" sx={{ color: colors.gray[500], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                    다른 검색 조건으로 다시 시도해보세요
                  </Typography>
                </CardContent>
              </Card>
            ) : (
              <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 6 } }}>
                {pageEvents.map((event) => (
                  <Card
                    key={event.id}
                    elevation={0}
                    sx={{
                      ...cardStyles.clickable,
                    }}
                    onClick={() => handleEventClick(event.id)}
                  >
                    <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 } }}>
                      {/* Header with Badges */}
                      <Box sx={{ mb: { xs: 2, sm: 4 } }}>
                        <Box
                          sx={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'start',
                            mb: { xs: 2, sm: 3 },
                            flexDirection: { xs: 'column', sm: 'row' },
                            gap: { xs: 1.5, sm: 0 },
                          }}
                        >
                          <Typography
                            variant="h6"
                            sx={{ fontWeight: 700, color: colors.gray[900], flex: 1, fontSize: { xs: '1rem', sm: '1.25rem' } }}
                          >
                            {event.title}
                          </Typography>
                          <Box
                            sx={{
                              px: { xs: 2, sm: 2.5 },
                              py: { xs: 0.5, sm: 0.75 },
                              borderRadius: 2,
                              fontSize: { xs: '0.75rem', sm: '0.875rem' },
                              fontWeight: 600,
                              ...getStatusStyle(event.status),
                            }}
                          >
                            {getStatusText(event.status)}
                            {event.status === 'active'
                              ? ` | D-${event.daysLeft}`
                              : event.status === 'scheduled'
                                ? ` | D+${event.daysLeft}`
                                : ''}
                          </Box>
                        </Box>

                        {/* Status Badges */}
                        <Box sx={{ display: 'flex', gap: { xs: 1, sm: 1.5 }, flexWrap: 'wrap' }}>
                          {event.isUrgent && (
                            <Chip
                              icon={<Warning sx={{ fontSize: { xs: 14, sm: 16 } }} />}
                              label="마감임박"
                              size="small"
                              sx={{
                                bgcolor: '#FEF3C7',
                                color: '#92400E',
                                fontWeight: 600,
                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
                                height: { xs: 24, sm: 28 },
                                '& .MuiChip-icon': { color: '#92400E' },
                              }}
                            />
                          )}
                          {event.isPopular && (
                            <Chip
                              icon={<LocalFireDepartment sx={{ fontSize: { xs: 14, sm: 16 } }} />}
                              label="인기"
                              size="small"
                              sx={{
                                bgcolor: '#FEE2E2',
                                color: '#991B1B',
                                fontWeight: 600,
                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
                                height: { xs: 24, sm: 28 },
                                '& .MuiChip-icon': { color: '#991B1B' },
                              }}
                            />
                          )}
                          {event.isHighROI && (
                            <Chip
                              icon={<Star sx={{ fontSize: { xs: 14, sm: 16 } }} />}
                              label="높은 ROI"
                              size="small"
                              sx={{
                                bgcolor: '#DCFCE7',
                                color: '#166534',
                                fontWeight: 600,
                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
                                height: { xs: 24, sm: 28 },
                                '& .MuiChip-icon': { color: '#166534' },
                              }}
                            />
                          )}
                          {event.isNew && (
                            <Chip
                              icon={<NewReleases sx={{ fontSize: { xs: 14, sm: 16 } }} />}
                              label="신규"
                              size="small"
                              sx={{
                                bgcolor: '#DBEAFE',
                                color: '#1E40AF',
                                fontWeight: 600,
                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
                                height: { xs: 24, sm: 28 },
                                '& .MuiChip-icon': { color: '#1E40AF' },
                              }}
                            />
                          )}
                        </Box>
                      </Box>

                      {/* Progress Bar for Active Events */}
                      {event.status === 'active' && (
                        <Box sx={{ mb: { xs: 2, sm: 4 } }}>
                          <Box
                            sx={{
                              display: 'flex',
                              justifyContent: 'space-between',
                              alignItems: 'center',
                              mb: 1,
                            }}
                          >
                            <Typography
                              variant="caption"
                              sx={{ color: colors.gray[600], fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
                            >
                              이벤트 진행률
                            </Typography>
                            <Typography
                              variant="caption"
                              sx={{ color: colors.gray[700], fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
                            >
                              {Math.round(calculateProgress(event))}%
                            </Typography>
                          </Box>
                          <LinearProgress
                            variant="determinate"
                            value={calculateProgress(event)}
                            sx={{
                              height: { xs: 6, sm: 8 },
                              borderRadius: 4,
                              bgcolor: colors.gray[200],
                              '& .MuiLinearProgress-bar': {
                                borderRadius: 4,
                                background: `linear-gradient(90deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
                              },
                            }}
                          />
                        </Box>
                      )}

                      {/* Event Info and Stats Container */}
                      <Box
                        sx={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'flex-end',
                          flexDirection: { xs: 'column', sm: 'row' },
                          gap: { xs: 3, sm: 0 },
                        }}
                      >
                        {/* Left: Event Info */}
                        <Box sx={{ width: { xs: '100%', sm: 'auto' } }}>
                          <Box sx={{ mb: { xs: 2, sm: 4 }, display: 'flex', flexDirection: 'column', gap: { xs: 1.5, sm: 2 } }}>
                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                              <CardGiftcard sx={{ fontSize: { xs: 16, sm: 18 }, color: colors.pink }} />
                              <Typography
                                variant="body2"
                                sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}
                              >
                                {event.prize}
                              </Typography>
                            </Box>
                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                              {getMethodIcon(event.method)}
                              <Typography
                                variant="body2"
                                sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}
                              >
                                {event.method}
                              </Typography>
                            </Box>
                          </Box>

                          {/* Date */}
                          <Typography
                            variant="body2"
                            sx={{
                              color: colors.gray[600],
                              display: 'flex',
                              alignItems: 'center',
                              gap: { xs: 1.5, sm: 2 },
                              fontSize: { xs: '0.75rem', sm: '0.875rem' },
                            }}
                          >
                            <span>📅</span>
                            <span>
                              {event.startDate} ~ {event.endDate}
                            </span>
                          </Typography>
                        </Box>

                        {/* Right: Stats */}
                        <Box sx={{ display: 'flex', gap: { xs: 4, sm: 8 }, textAlign: 'right', width: { xs: '100%', sm: 'auto' }, justifyContent: { xs: 'flex-start', sm: 'flex-end' } }}>
                          <Box>
                            <Typography
                              variant="body2"
                              sx={{ mb: { xs: 0.5, sm: 1 }, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
                            >
                              참여자
                            </Typography>
                            <Typography
                              variant="h5"
                              sx={{ fontWeight: 700, color: colors.gray[900], mb: 0.5, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}
                            >
                              {event.participants.toLocaleString()}
                              <Typography
                                component="span"
                                variant="body2"
                                sx={{ ml: 0.5, color: colors.gray[600], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
                              >
                                명
                              </Typography>
                            </Typography>
                            {event.targetParticipants > 0 && (
                              <Typography
                                variant="caption"
                                sx={{ color: colors.gray[500], fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
                              >
                                목표: {event.targetParticipants}명 (
                                {Math.round((event.participants / event.targetParticipants) * 100)}
                                %)
                              </Typography>
                            )}
                          </Box>
                          <Box>
                            <Typography
                              variant="body2"
                              sx={{ mb: { xs: 0.5, sm: 1 }, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
                            >
                              ROI
                            </Typography>
                            <Typography
                              variant="h5"
                              sx={{
                                fontWeight: 700,
                                fontSize: { xs: '1.125rem', sm: '1.5rem' },
                                color:
                                  event.roi >= 400
                                    ? colors.mint
                                    : event.roi >= 200
                                      ? colors.orange
                                      : colors.gray[500],
                              }}
                            >
                              {event.roi}%
                            </Typography>
                          </Box>
                        </Box>
                      </Box>
                    </CardContent>
                  </Card>
                ))}
              </Box>
            )}
          </Box>

          {/* Pagination */}
          {totalPages > 1 && (
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <Pagination
                count={totalPages}
                page={currentPage}
                onChange={(_, page) => setCurrentPage(page)}
                size="large"
                sx={{
                  '& .MuiPaginationItem-root': {
                    color: colors.gray[700],
                    fontWeight: 600,
                    '&.Mui-selected': {
                      background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
                      color: 'white',
                      '&:hover': {
                        background: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blueLight} 100%)`,
                      },
                    },
                    '&:hover': {
                      bgcolor: colors.gray[100],
                    },
                  },
                }}
              />
            </Box>
          )}
        </Container>
      </Box>
    </>
  );
}