import Alert from '@mui/material/Alert'
import Box from '@mui/material/Box'
import Paper from '@mui/material/Paper'
import Rating from '@mui/material/Rating'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { useQuery } from '@tanstack/react-query'
import { Star } from 'lucide-react'
import { fetchPublicProductReviews } from '@/entities/review/api/reviews-api'
import type { PublicProductReviewItem } from '@/entities/review/api/reviews-api'
import { reviewsCountRu } from '@/shared/lib/reviews-count-ru'
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent.lazy'
import { UserAvatar } from '@/shared/ui/UserAvatar'

function ReviewItem({ rv }: { rv: PublicProductReviewItem }) {
  const body = typeof rv.text === 'string' && rv.text.trim() ? rv.text.trim() : null
  return (
    <Paper variant="outlined" sx={{ p: 1.5, borderRadius: 2 }}>
      <Stack spacing={0.75}>
        <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
          <UserAvatar userId={rv.authorId} avatarUrl={rv.authorAvatar} avatarStyle={rv.authorAvatarStyle} size={32} />
          <Box sx={{ flexGrow: 1 }}>
            <Typography sx={{ fontWeight: 700 }}>{rv.authorDisplay}</Typography>
          </Box>
          <Typography variant="caption" color="text.secondary">
            {new Date(rv.createdAt).toLocaleString('ru-RU')}
          </Typography>
        </Stack>
        <Rating
          value={rv.rating}
          readOnly
          size="small"
          icon={<Star fontSize="inherit" />}
          emptyIcon={<Star fontSize="inherit" />}
        />
        {body ? (
          <Box sx={{ color: 'text.secondary' }}>
            <RichTextMessageContent value={body} tone="review" />
          </Box>
        ) : (
          <Typography variant="caption" color="text.secondary">
            Без текстового комментария.
          </Typography>
        )}
        {rv.imageUrl && (
          <Box
            sx={{
              width: 140,
              height: 140,
              borderRadius: 1.5,
              border: 1,
              borderColor: 'divider',
              overflow: 'hidden',
            }}
          >
            <OptimizedImage
              src={rv.imageUrl}
              alt="Фото к отзыву"
              widths={[320, 640]}
              sizes="140px"
              sx={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
            />
          </Box>
        )}
      </Stack>
    </Paper>
  )
}

export function ProductReviewsList({ productId }: { productId: string }) {
  const reviewsQuery = useQuery({
    queryKey: ['products', 'public', productId, 'reviews', { page: 1, pageSize: 30 }],
    queryFn: () => fetchPublicProductReviews(productId, { page: 1, pageSize: 30 }),
    enabled: Boolean(productId),
  })

  if (reviewsQuery.isLoading) return <Typography color="text.secondary">Загрузка отзывов…</Typography>
  if (reviewsQuery.isError) return <Alert severity="warning">Не удалось загрузить отзывы.</Alert>
  if (reviewsQuery.data && reviewsQuery.data.total === 0) {
    return (
      <Box sx={{ py: 3 }}>
        <Typography variant="h6" color="text.secondary" sx={{ mb: 1 }}>
          Отзывов пока нет
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 400 }}>
          Будьте первым, кто оставит отзыв на этот товар. Ваше мнение поможет улучшить качество наших изделий.
        </Typography>
      </Box>
    )
  }
  if (!reviewsQuery.data || reviewsQuery.data.items.length === 0) return null

  return (
    <Stack spacing={1.25}>
      {reviewsQuery.data.items.map((rv) => (
        <ReviewItem key={rv.id} rv={rv} />
      ))}
      {reviewsQuery.data.total > reviewsQuery.data.items.length && (
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
          Всего {reviewsCountRu(reviewsQuery.data.total)} — ниже показаны последние {reviewsQuery.data.items.length}.
        </Typography>
      )}
    </Stack>
  )
}
