'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  Box,
  Container,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Card,
  CardContent,
  Typography,
  Button,
  InputAdornment,
  Pagination,
  Chip,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Grid,
  CircularProgress,
  Alert,
} from '@mui/material';
import {
  Search,
  FilterList,
  Casino,
  Download,
  People,
  TrendingUp,
  Person,
  AccessTime,
  Error as ErrorIcon,
} from '@mui/icons-material';
import { getParticipants } from '@/shared/api/participation.api';
import type { ParticipationResponse } from '@/shared/types/api.types';

// 디자인 시스템 색상
const colors = {
  pink: '#F472B6',
  purple: '#C084FC',
  purpleLight: '#E9D5FF',
  blue: '#60A5FA',
  mint: '#34D399',
  orange: '#FB923C',
  yellow: '#FBBF24',
  gray: {
    900: '#1A1A1A',
    700: '#4A4A4A',
    500: '#9E9E9E',
    300: '#D9D9D9',
    100: '#F5F5F5',
  },
};

type StatusType = 'all' | 'winner' | 'waiting';

export default function ParticipantsPage() {
  const params = useParams();
  const router = useRouter();
  const eventId = params.eventId as string;

  // 데이터 상태
  const [participants, setParticipants] = useState<ParticipationResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  // 필터 상태
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusType>('all');
  const [storeVisitedFilter, setStoreVisitedFilter] = useState<boolean | undefined>(undefined);

  // 페이지네이션 상태
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [totalElements, setTotalElements] = useState(0);
  const itemsPerPage = 20;

  // UI 상태
  const [selectedParticipant, setSelectedParticipant] = useState<ParticipationResponse | null>(null);
  const [detailDialogOpen, setDetailDialogOpen] = useState(false);

  // 데이터 로드
  const loadParticipants = async () => {
    try {
      setLoading(true);
      setError('');

      const response = await getParticipants({
        eventId,
        storeVisited: storeVisitedFilter,
        page: currentPage - 1, // API는 0부터 시작
        size: itemsPerPage,
        sort: ['createdAt,DESC'],
      });

      if (response.success && response.data) {
        setParticipants(response.data.content);
        setTotalPages(response.data.totalPages);
        setTotalElements(response.data.totalElements);
      } else {
        setError(response.message || '참여자 목록을 불러오는데 실패했습니다.');
      }
    } catch (err: any) {
      console.error('참여자 목록 로드 오류:', err);
      setError(err.response?.data?.message || '참여자 목록을 불러오는데 실패했습니다.');
    } finally {
      setLoading(false);
    }
  };

  // 초기 로드 및 필터 변경 시 재로드
  useEffect(() => {
    loadParticipants();
  }, [eventId, currentPage, storeVisitedFilter]);

  // 클라이언트 사이드 필터링 (검색어, 당첨 여부)
  const filteredParticipants = participants.filter((participant) => {
    const matchesSearch =
      searchTerm === '' ||
      participant.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      participant.phoneNumber.includes(searchTerm) ||
      participant.email?.toLowerCase().includes(searchTerm.toLowerCase());

    const matchesStatus =
      statusFilter === 'all' ||
      (statusFilter === 'winner' && participant.isWinner) ||
      (statusFilter === 'waiting' && !participant.isWinner);

    return matchesSearch && matchesStatus;
  });

  // 통계 계산
  const stats = {
    total: totalElements,
    waiting: participants.filter((p) => !p.isWinner).length,
    winner: participants.filter((p) => p.isWinner).length,
  };

  const getStatusText = (isWinner: boolean) => {
    return isWinner ? '당첨' : '당첨 대기';
  };

  const getStatusColor = (isWinner: boolean) => {
    return isWinner ? 'success' : 'default';
  };

  const handleParticipantClick = (participant: ParticipationResponse) => {
    setSelectedParticipant(participant);
    setDetailDialogOpen(true);
  };

  const handleDrawClick = () => {
    router.push(`/events/${eventId}/draw`);
  };

  const handleDownloadClick = () => {
    alert('엑셀 다운로드 기능은 추후 구현됩니다');
  };

  const handlePageChange = (_: React.ChangeEvent<unknown>, page: number) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: { xs: 4, sm: 10 } }}>
      <Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 8 }, px: { xs: 2, sm: 8, md: 10 } }}>
        {/* Page Header */}
        <Box sx={{ mb: { xs: 4, sm: 8 } }}>
          <Typography variant="h4" sx={{ fontWeight: 700, fontSize: { xs: '1.5rem', sm: '2rem' }, mb: 2 }}>
            👥 참여자 목록
          </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>
            이벤트에 참여한 사용자들의 정보를 확인하고 관리하세요
          </Typography>
        </Box>

        {/* Error Alert */}
        {error && (
          <Alert severity="error" sx={{ mb: { xs: 3, sm: 6 } }} icon={<ErrorIcon />} onClose={() => setError('')}>
            {error}
          </Alert>
        )}

        {/* Statistics Cards */}
        <Grid container spacing={{ xs: 1, sm: 6 }} sx={{ mb: { xs: 4, sm: 10 } }}>
          <Grid item xs={4} md={4}>
            <Card
              elevation={0}
              sx={{
                borderRadius: { xs: 2, sm: 4 },
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
              }}
            >
              <CardContent sx={{ textAlign: 'center', py: { xs: 1.5, sm: 6 }, px: { xs: 0.5, sm: 4 } }}>
                <People sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
                <Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5rem', sm: '0.75rem' }, lineHeight: 1.2 }}>
                  전체 참여자
                </Typography>
                <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.875rem', sm: '1.75rem' } }}>
                  {loading ? '...' : stats.total}명
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={4} md={4}>
            <Card
              elevation={0}
              sx={{
                borderRadius: { xs: 2, sm: 4 },
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                background: `linear-gradient(135deg, ${colors.yellow} 0%, #FCD34D 100%)`,
              }}
            >
              <CardContent sx={{ textAlign: 'center', py: { xs: 1.5, sm: 6 }, px: { xs: 0.5, sm: 4 } }}>
                <AccessTime sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
                <Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5rem', sm: '0.75rem' }, lineHeight: 1.2 }}>
                  대기중
                </Typography>
                <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.875rem', sm: '1.75rem' } }}>
                  {loading ? '...' : stats.waiting}명
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={4} md={4}>
            <Card
              elevation={0}
              sx={{
                borderRadius: { xs: 2, sm: 4 },
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                background: `linear-gradient(135deg, ${colors.mint} 0%, #6EE7B7 100%)`,
              }}
            >
              <CardContent sx={{ textAlign: 'center', py: { xs: 1.5, sm: 6 }, px: { xs: 0.5, sm: 4 } }}>
                <TrendingUp sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
                <Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5rem', sm: '0.75rem' }, lineHeight: 1.2 }}>
                  당첨자
                </Typography>
                <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.875rem', sm: '1.75rem' } }}>
                  {loading ? '...' : stats.winner}명
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        </Grid>

        {/* Search Section */}
        <Box sx={{ mb: { xs: 3, sm: 6 } }}>
          <TextField
            fullWidth
            placeholder="이름, 전화번호 또는 이메일 검색..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Search sx={{ fontSize: { xs: 18, sm: 24 } }} />
                </InputAdornment>
              ),
            }}
            sx={{
              '& .MuiOutlinedInput-root': {
                borderRadius: 3,
                bgcolor: 'white',
                fontSize: { xs: '0.75rem', sm: '1rem' },
              },
              '& .MuiOutlinedInput-input': {
                padding: { xs: '8px 14px', sm: '16.5px 14px' },
              },
            }}
            disabled={loading}
          />
        </Box>

        {/* Filters */}
        <Box sx={{ mb: { xs: 4, sm: 8 } }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1.5, sm: 3 }, flexWrap: 'wrap' }}>
            <FilterList sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.pink }} />
            <FormControl sx={{ flex: 1, minWidth: { xs: 100, sm: 160 } }}>
              <InputLabel sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>매장 방문</InputLabel>
              <Select
                value={storeVisitedFilter === undefined ? 'all' : storeVisitedFilter ? 'visited' : 'not_visited'}
                label="매장 방문"
                onChange={(e) => {
                  const value = e.target.value;
                  setStoreVisitedFilter(
                    value === 'all' ? undefined : value === 'visited' ? true : false
                  );
                  setCurrentPage(1); // 필터 변경 시 첫 페이지로
                }}
                sx={{
                  borderRadius: 2,
                  fontSize: { xs: '0.75rem', sm: '1rem' },
                  '& .MuiSelect-select': {
                    padding: { xs: '8px 14px', sm: '16.5px 14px' },
                  },
                }}
                disabled={loading}
              >
                <MenuItem value="all" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>전체</MenuItem>
                <MenuItem value="visited" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>방문</MenuItem>
                <MenuItem value="not_visited" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>미방문</MenuItem>
              </Select>
            </FormControl>
            <FormControl sx={{ flex: 1, minWidth: { xs: 90, sm: 140 } }}>
              <InputLabel sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>상태</InputLabel>
              <Select
                value={statusFilter}
                label="상태"
                onChange={(e) => setStatusFilter(e.target.value as StatusType)}
                sx={{
                  borderRadius: 2,
                  fontSize: { xs: '0.75rem', sm: '1rem' },
                  '& .MuiSelect-select': {
                    padding: { xs: '8px 14px', sm: '16.5px 14px' },
                  },
                }}
                disabled={loading}
              >
                <MenuItem value="all" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>전체</MenuItem>
                <MenuItem value="waiting" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>당첨 대기</MenuItem>
                <MenuItem value="winner" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>당첨</MenuItem>
              </Select>
            </FormControl>
          </Box>
        </Box>

        {/* Total Count & Drawing Button */}
        <Box sx={{ mb: { xs: 3, sm: 6 } }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: { xs: 2, sm: 4 } }}>
            <Typography variant="h5" sx={{ fontWeight: 700, fontSize: { xs: '0.875rem', sm: '1.5rem' } }}>
              총 <span style={{ color: colors.pink }}>{filteredParticipants.length}</span>명 표시
            </Typography>
            <Box sx={{ display: 'flex', gap: { xs: 1.5, sm: 3 } }}>
              <Button
                variant="outlined"
                startIcon={<Download sx={{ fontSize: { xs: 16, sm: 20 } }} />}
                onClick={handleDownloadClick}
                disabled={loading}
                sx={{
                  borderRadius: 3,
                  px: { xs: 1.5, sm: 4 },
                  py: { xs: 0.75, sm: 1.5 },
                  fontSize: { xs: '0.7rem', sm: '0.875rem' },
                  borderColor: colors.blue,
                  color: colors.blue,
                  '&:hover': {
                    borderColor: colors.blue,
                    bgcolor: `${colors.blue}10`,
                  },
                }}
              >
                <Box component="span" sx={{ display: { xs: 'none', sm: 'inline' } }}>
                  엑셀 다운로드
                </Box>
                <Box component="span" sx={{ display: { xs: 'inline', sm: 'none' } }}>
                  엑셀
                </Box>
              </Button>
              <Button
                variant="contained"
                startIcon={<Casino sx={{ fontSize: { xs: 16, sm: 20 } }} />}
                onClick={handleDrawClick}
                disabled={loading}
                sx={{
                  borderRadius: 3,
                  px: { xs: 1.5, sm: 4 },
                  py: { xs: 0.75, sm: 1.5 },
                  fontSize: { xs: '0.7rem', sm: '0.875rem' },
                  background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
                  '&:hover': {
                    background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
                    opacity: 0.9,
                  },
                }}
              >
                <Box component="span" sx={{ display: { xs: 'none', sm: 'inline' } }}>
                  당첨자 추첨
                </Box>
                <Box component="span" sx={{ display: { xs: 'inline', sm: 'none' } }}>
                  추첨
                </Box>
              </Button>
            </Box>
          </Box>
        </Box>

        {/* Loading State */}
        {loading && (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 16 }}>
            <CircularProgress size={60} />
          </Box>
        )}

        {/* Empty State */}
        {!loading && filteredParticipants.length === 0 && (
          <Box sx={{ textAlign: 'center', py: 16 }}>
            <Person sx={{ fontSize: 80, color: colors.gray[300], mb: 3 }} />
            <Typography variant="h6" color="text.secondary" sx={{ fontWeight: 600 }}>
              {searchTerm || statusFilter !== 'all' || storeVisitedFilter !== undefined
                ? '검색 결과가 없습니다'
                : '아직 참여자가 없습니다'}
            </Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
              {searchTerm || statusFilter !== 'all' || storeVisitedFilter !== undefined
                ? '다른 검색어나 필터를 사용해보세요'
                : '첫 번째 참여자를 기다리고 있습니다'}
            </Typography>
          </Box>
        )}

        {/* Participant List */}
        {!loading && filteredParticipants.length > 0 && (
          <>
            <Box sx={{ mb: { xs: 4, sm: 10 } }}>
              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {filteredParticipants.map((participant) => (
                  <Card
                    key={participant.participantId}
                    elevation={0}
                    sx={{
                      cursor: 'pointer',
                      borderRadius: 4,
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                      transition: 'all 0.2s ease',
                      '&:hover': {
                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                        transform: 'translateY(-4px)',
                      },
                    }}
                    onClick={() => handleParticipantClick(participant)}
                  >
                    <CardContent sx={{ p: { xs: 3, sm: 5 } }}>
                      {/* Header */}
                      <Box
                        sx={{
                          display: 'flex',
                          alignItems: 'flex-start',
                          justifyContent: 'space-between',
                          mb: { xs: 2, sm: 4 },
                          flexWrap: { xs: 'wrap', sm: 'nowrap' },
                          gap: { xs: 2, sm: 0 },
                        }}
                      >
                        <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 } }}>
                          <Box
                            sx={{
                              width: { xs: 48, sm: 56 },
                              height: { xs: 48, sm: 56 },
                              borderRadius: '50%',
                              bgcolor: colors.purpleLight,
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                            }}
                          >
                            <Person sx={{ fontSize: { xs: 28, sm: 32 }, color: colors.purple }} />
                          </Box>
                          <Box>
                            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block', fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
                              #{participant.participantId}
                            </Typography>
                            <Typography variant="h6" sx={{ fontWeight: 700, mb: { xs: 0.5, sm: 1 }, fontSize: { xs: '0.875rem', sm: '1.25rem' } }}>
                              {participant.name}
                            </Typography>
                            <Typography variant="body1" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>
                              {participant.phoneNumber}
                            </Typography>
                          </Box>
                        </Box>
                        <Chip
                          label={getStatusText(participant.isWinner)}
                          color={getStatusColor(participant.isWinner) as any}
                          size="medium"
                          sx={{ fontWeight: 600, px: { xs: 1.5, sm: 2 }, py: { xs: 2, sm: 2.5 }, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
                        />
                      </Box>

                      {/* Info */}
                      <Box
                        sx={{
                          borderTop: '1px solid',
                          borderColor: colors.gray[100],
                          pt: { xs: 2, sm: 4 },
                          display: 'flex',
                          flexDirection: 'column',
                          gap: { xs: 1.5, sm: 2 },
                        }}
                      >
                        {participant.channel && (
                          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
                            <Typography variant="body1" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>
                              참여 경로
                            </Typography>
                            <Chip
                              label={participant.channel}
                              size="small"
                              sx={{
                                bgcolor: colors.purpleLight,
                                color: colors.purple,
                                fontWeight: 600,
                                fontSize: { xs: '0.625rem', sm: '0.75rem' },
                              }}
                            />
                          </Box>
                        )}
                        <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
                          <Typography variant="body1" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>
                            참여 일시
                          </Typography>
                          <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.75rem', sm: '1rem' }, textAlign: 'right' }}>
                            {new Date(participant.participatedAt).toLocaleString('ko-KR')}
                          </Typography>
                        </Box>
                        {participant.storeVisited && (
                          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
                            <Typography variant="body1" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '1rem' } }}>
                              매장 방문
                            </Typography>
                            <Chip label="방문" size="small" color="success" sx={{ fontSize: { xs: '0.625rem', sm: '0.75rem' } }} />
                          </Box>
                        )}
                      </Box>
                    </CardContent>
                  </Card>
                ))}
              </Box>
            </Box>

            {/* Pagination */}
            {totalPages > 1 && (
              <Box sx={{ display: 'flex', justifyContent: 'center', mb: { xs: 4, sm: 10 } }}>
                <Pagination
                  count={totalPages}
                  page={currentPage}
                  onChange={handlePageChange}
                  color="primary"
                  size="large"
                  sx={{
                    '& .MuiPaginationItem-root': {
                      fontSize: { xs: '0.75rem', sm: '1rem' },
                      fontWeight: 600,
                      minWidth: { xs: '26px', sm: '32px' },
                      height: { xs: '26px', sm: '32px' },
                      margin: { xs: '0 2px', sm: '0 4px' },
                    },
                    '& .MuiPaginationItem-icon': {
                      fontSize: { xs: '1rem', sm: '1.5rem' },
                    },
                  }}
                />
              </Box>
            )}
          </>
        )}

        {/* Participant Detail Dialog */}
        <Dialog
          open={detailDialogOpen}
          onClose={() => setDetailDialogOpen(false)}
          maxWidth="sm"
          fullWidth
          PaperProps={{
            sx: {
              borderRadius: 4,
            },
          }}
        >
          <DialogTitle sx={{ p: 5, pb: 3 }}>
            <Typography variant="h5" sx={{ fontWeight: 700 }}>
              참여자 상세 정보
            </Typography>
          </DialogTitle>
          <DialogContent dividers sx={{ p: 5 }}>
            {selectedParticipant && (
              <Box>
                <Box sx={{ mb: 4, textAlign: 'center' }}>
                  <Box
                    sx={{
                      width: 80,
                      height: 80,
                      borderRadius: '50%',
                      bgcolor: colors.purpleLight,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      margin: '0 auto',
                      mb: 3,
                    }}
                  >
                    <Person sx={{ fontSize: { xs: 32, sm: 40 }, color: colors.purple }} />
                  </Box>
                  <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
                    {selectedParticipant.name}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    #{selectedParticipant.participantId}
                  </Typography>
                </Box>

                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  <Box
                    sx={{
                      p: 3,
                      bgcolor: colors.gray[100],
                      borderRadius: 3,
                    }}
                  >
                    <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
                      전화번호
                    </Typography>
                    <Typography variant="body1" sx={{ fontWeight: 600 }}>
                      {selectedParticipant.phoneNumber}
                    </Typography>
                  </Box>

                  {selectedParticipant.email && (
                    <Box
                      sx={{
                        p: 3,
                        bgcolor: colors.gray[100],
                        borderRadius: 3,
                      }}
                    >
                      <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
                        이메일
                      </Typography>
                      <Typography variant="body1" sx={{ fontWeight: 600 }}>
                        {selectedParticipant.email}
                      </Typography>
                    </Box>
                  )}

                  {selectedParticipant.channel && (
                    <Box
                      sx={{
                        p: 3,
                        bgcolor: colors.gray[100],
                        borderRadius: 3,
                      }}
                    >
                      <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
                        참여 경로
                      </Typography>
                      <Typography variant="body1" sx={{ fontWeight: 600 }}>
                        {selectedParticipant.channel}
                      </Typography>
                    </Box>
                  )}

                  <Box
                    sx={{
                      p: 3,
                      bgcolor: colors.gray[100],
                      borderRadius: 3,
                    }}
                  >
                    <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
                      참여 일시
                    </Typography>
                    <Typography variant="body1" sx={{ fontWeight: 600 }}>
                      {new Date(selectedParticipant.participatedAt).toLocaleString('ko-KR')}
                    </Typography>
                  </Box>

                  <Box
                    sx={{
                      p: 3,
                      bgcolor: colors.gray[100],
                      borderRadius: 3,
                    }}
                  >
                    <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
                      당첨 여부
                    </Typography>
                    <Chip
                      label={getStatusText(selectedParticipant.isWinner)}
                      color={getStatusColor(selectedParticipant.isWinner) as any}
                      size="medium"
                      sx={{ fontWeight: 600 }}
                    />
                  </Box>

                  {selectedParticipant.storeVisited && (
                    <Box
                      sx={{
                        p: 3,
                        bgcolor: colors.gray[100],
                        borderRadius: 3,
                      }}
                    >
                      <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
                        매장 방문
                      </Typography>
                      <Chip label="방문 완료" color="success" sx={{ fontWeight: 600 }} />
                    </Box>
                  )}

                  {selectedParticipant.bonusEntries > 0 && (
                    <Box
                      sx={{
                        p: 3,
                        bgcolor: colors.gray[100],
                        borderRadius: 3,
                      }}
                    >
                      <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
                        보너스 응모권
                      </Typography>
                      <Typography variant="body1" sx={{ fontWeight: 600 }}>
                        {selectedParticipant.bonusEntries}개
                      </Typography>
                    </Box>
                  )}
                </Box>
              </Box>
            )}
          </DialogContent>
          <DialogActions sx={{ p: 5, pt: 3 }}>
            <Button
              onClick={() => setDetailDialogOpen(false)}
              variant="contained"
              fullWidth
              sx={{
                borderRadius: 3,
                py: 1.5,
                background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
              }}
            >
              확인
            </Button>
          </DialogActions>
        </Dialog>
      </Container>
    </Box>
  );
}
