// src/components/dashboard/events/EventReviewsModal.tsx
'use client';

import React, { useState, useEffect } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  Box,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  TextField,
  InputAdornment,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Chip,
  Typography,
  Button,
  TablePagination,
  Avatar,
  Stack,
  IconButton,
  Tooltip,
  Alert,
  Rating,
  Divider,
} from '@mui/material';
import { AppLoader } from '@/components/core/app-loader';
import {
  Search as SearchIcon,
  Download as DownloadIcon,
  Close as CloseIcon,
  Star as StarIcon,
  Person as PersonIcon,
  Visibility as VisibilityIcon,
  VisibilityOff as VisibilityOffIcon,
} from '@mui/icons-material';
import { format } from 'date-fns';
import { fetchEventReviews, exportReviewsToCSV, EventReview, ReviewFilters } from '@/services/event-reviews.service';

interface EventReviewsModalProps {
  open: boolean;
  onClose: () => void;
  eventId: string;
  eventName: string;
}

const EventReviewsModal: React.FC<EventReviewsModalProps> = ({
  open,
  onClose,
  eventId,
  eventName,
}) => {
  const [reviews, setReviews] = useState<EventReview[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [ratingFilter, setRatingFilter] = useState<string>('');
  const [anonymousFilter, setAnonymousFilter] = useState<string>('');
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [totalCount, setTotalCount] = useState(0);
  const [statistics, setStatistics] = useState<any>(null);

  const fetchReviews = async () => {
    if (!eventId) return;

    setLoading(true);
    setError(null);
    
    try {
      const filters: ReviewFilters = {
        skip: page * rowsPerPage,
        limit: rowsPerPage,
        eventId: eventId,
      };

      if (searchQuery.trim()) {
        filters.search = searchQuery.trim();
      }

      if (ratingFilter) {
        filters.rating = parseInt(ratingFilter);
      }

      if (anonymousFilter) {
        filters.isAnonymous = anonymousFilter === 'true';
      }

      const response = await fetchEventReviews(filters);
      setReviews(response.data.reviews);
      setTotalCount(response.data.pagination.totalCount);
      setStatistics(response.data.statistics);
    } catch (err: any) {
      console.error('Error fetching reviews:', err);
      setError(err.message || 'Failed to fetch reviews');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (open && eventId) {
      fetchReviews();
    }
  }, [open, eventId, page, rowsPerPage]);

  useEffect(() => {
    // Reset page when filters change
    setPage(0);
  }, [searchQuery, ratingFilter, anonymousFilter]);

  useEffect(() => {
    // Fetch data when filters change
    if (open && eventId) {
      fetchReviews();
    }
  }, [searchQuery, ratingFilter, anonymousFilter]);

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(event.target.value);
  };

  const handleRatingFilterChange = (event: any) => {
    setRatingFilter(event.target.value);
  };

  const handleAnonymousFilterChange = (event: any) => {
    setAnonymousFilter(event.target.value);
  };

  const handleChangePage = (event: unknown, newPage: number) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const handleExport = () => {
    exportReviewsToCSV(reviews, eventName);
  };

  const getInitials = (name: string) => {
    return name
      .split(' ')
      .map(word => word.charAt(0))
      .join('')
      .toUpperCase()
      .slice(0, 2);
  };

  const getRatingColor = (rating: number) => {
    if (rating >= 4) return 'success';
    if (rating >= 3) return 'warning';
    return 'error';
  };

  return (
    <Dialog 
      open={open} 
      onClose={onClose} 
      maxWidth="xl" 
      fullWidth
      PaperProps={{
        sx: { height: '90vh', maxHeight: '900px' }
      }}
    >
      <DialogTitle>
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <Typography variant="h6" component="div">
            Event Reviews - {eventName}
          </Typography>
          <IconButton onClick={onClose} size="small">
            <CloseIcon />
          </IconButton>
        </Box>
      </DialogTitle>
      
      <DialogContent sx={{ position: 'relative', minHeight: 400 }}>
        <Box sx={{ mb: 3 }}>
          {/* Statistics */}
          {statistics && (
            <Box sx={{ mb: 3, p: 2, bgcolor: 'background.paper', borderRadius: 2 }}>
              <Typography variant="h6" gutterBottom>Review Statistics</Typography>
              <Stack direction="row" spacing={4} alignItems="center">
                <Box>
                  <Typography variant="body2" color="text.secondary">Average Rating</Typography>
                  <Stack direction="row" alignItems="center" spacing={1}>
                    <Rating value={statistics.averageRating} precision={0.1} readOnly size="small" />
                    <Typography variant="h6">{statistics.averageRating.toFixed(1)}</Typography>
                  </Stack>
                </Box>
                <Box>
                  <Typography variant="body2" color="text.secondary">Total Reviews</Typography>
                  <Typography variant="h6">{statistics.totalReviews}</Typography>
                </Box>
                <Box>
                  <Typography variant="body2" color="text.secondary">Rating Distribution</Typography>
                  <Stack direction="row" spacing={1}>
                    {[5, 4, 3, 2, 1].map((rating) => (
                      <Box key={rating} textAlign="center">
                        <Typography variant="caption">{rating}</Typography>
                        <Typography variant="body2">
                          {statistics.ratingDistribution[rating] || 0}
                        </Typography>
                      </Box>
                    ))}
                  </Stack>
                </Box>
              </Stack>
            </Box>
          )}

          {/* Filters Row */}
          <Box display="flex" gap={2} mb={2} flexWrap="wrap" alignItems="center">
            <TextField
              placeholder="Search by reviewer name or review content"
              value={searchQuery}
              onChange={handleSearchChange}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                ),
              }}
              sx={{ minWidth: 300, flex: 1 }}
              size="small"
            />
            
            <FormControl size="small" sx={{ minWidth: 120 }}>
              <InputLabel>Rating</InputLabel>
              <Select
                value={ratingFilter}
                onChange={handleRatingFilterChange}
                label="Rating"
              >
                <MenuItem value="">All</MenuItem>
                <MenuItem value="5">5 Stars</MenuItem>
                <MenuItem value="4">4 Stars</MenuItem>
                <MenuItem value="3">3 Stars</MenuItem>
                <MenuItem value="2">2 Stars</MenuItem>
                <MenuItem value="1">1 Star</MenuItem>
              </Select>
            </FormControl>

            {/* <FormControl size="small" sx={{ minWidth: 120 }}>
              <InputLabel>Type</InputLabel>
              <Select
                value={anonymousFilter}
                onChange={handleAnonymousFilterChange}
                label="Type"
              >
                <MenuItem value="">All</MenuItem>
                <MenuItem value="false">Named</MenuItem>
                <MenuItem value="true">Anonymous</MenuItem>
              </Select>
            </FormControl> */}

            {/* <Button
              variant="outlined"
              startIcon={<DownloadIcon />}
              onClick={handleExport}
              disabled={reviews.length === 0}
            >
              Export CSV
            </Button> */}
          </Box>
        </Box>

        {loading && <AppLoader fill size="lg" />}

        {error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
          </Alert>
        )}

        {!loading && !error && (
          <TableContainer component={Paper} sx={{ maxHeight: 400 }}>
            <Table stickyHeader>
              <TableHead>
                <TableRow>
                  <TableCell>Reviewer</TableCell>
                  <TableCell>Rating</TableCell>
                  <TableCell>Review</TableCell>
                  <TableCell>Event Details</TableCell>
                  <TableCell>Review Date</TableCell>
                  <TableCell>Type</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {reviews.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={6} align="center" sx={{ py: 4 }}>
                      <Stack alignItems="center" spacing={2}>
                        <StarIcon color="disabled" sx={{ fontSize: 48 }} />
                        <Typography color="text.secondary">
                          No reviews found
                        </Typography>
                      </Stack>
                    </TableCell>
                  </TableRow>
                ) : (
                  reviews.map((review) => (
                    <TableRow key={review._id} hover>
                      <TableCell>
                        <Box display="flex" alignItems="center" gap={2}>
                          <Avatar 
                            sx={{ 
                              width: 40, 
                              height: 40,
                              cursor: review.user.imageUrl ? 'pointer' : 'default',
                              transition: 'transform 0.2s ease-in-out',
                              '&:hover': review.user.imageUrl ? {
                                transform: 'scale(1.1)',
                                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
                              } : {}
                            }}
                            src={review.user.imageUrl || undefined}
                            onClick={() => {
                              if (review.user.imageUrl) {
                                window.open(review.user.imageUrl, '_blank');
                              }
                            }}
                          >
                            {getInitials(review.user.name)}
                          </Avatar>
                          <Box>
                            <Typography variant="body2" fontWeight="medium">
                              {review.user.name}
                            </Typography>
                            {review.user.email && (
                              <Typography variant="caption" color="text.secondary">
                                {review.user.email}
                              </Typography>
                            )}
                          </Box>
                        </Box>
                      </TableCell>
                      
                      <TableCell>
                        <Box display="flex" alignItems="center" gap={1}>
                          <Rating value={review.rating} readOnly size="small" />
                          <Chip 
                            label={review.rating} 
                            size="small" 
                            color={getRatingColor(review.rating) as any}
                          />
                        </Box>
                      </TableCell>
                      
                      <TableCell>
                        <Typography variant="body2" sx={{ maxWidth: 300 }}>
                          {review.review}
                        </Typography>
                      </TableCell>
                      
                      <TableCell>
                        <Box>
                          <Typography variant="body2" fontWeight="medium">
                            {review.event.eventName}
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            {format(new Date(review.event.eventDate), 'MMM dd, yyyy')}
                          </Typography>
                        </Box>
                      </TableCell>
                      
                      <TableCell>
                        <Box>
                          <Typography variant="body2">
                            {format(new Date(review.createdAt), 'MMM dd, yyyy')}
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            {format(new Date(review.createdAt), 'hh:mm a')}
                          </Typography>
                        </Box>
                      </TableCell>
                      
                      <TableCell>
                        <Chip
                          icon={review.isAnonymous ? <VisibilityOffIcon /> : <VisibilityIcon />}
                          label={review.isAnonymous ? 'Anonymous' : 'Named'}
                          size="small"
                          color={review.isAnonymous ? 'default' : 'primary'}
                        />
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </TableContainer>
        )}

        {/* Pagination */}
        {!loading && !error && reviews.length > 0 && (
          <TablePagination
            rowsPerPageOptions={[5, 10, 25, 50]}
            component="div"
            count={totalCount}
            rowsPerPage={rowsPerPage}
            page={page}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage}
          />
        )}
      </DialogContent>
    </Dialog>
  );
};

export default EventReviewsModal;