'use client';

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
import { Box } from '@/ui/Box';
import { IconButton } from '@/ui/IconButton';
import { Image } from '@/ui/Image';
import { Text } from '@/ui/Text';

export interface MediaViewerModalProps {
  isOpen: boolean;
  onClose: () => void;
  src?: string;
  alt?: string;
  title?: string;
  onNext?: () => void;
  onPrev?: () => void;
}

export function MediaViewerModal({
  isOpen,
  onClose,
  src,
  alt = 'Media viewer',
  title,
  onNext,
  onPrev,
}: MediaViewerModalProps) {
  return (
    <AnimatePresence>
      {isOpen && (
        <Box
          position="fixed"
          inset="0"
          zIndex={100}
          display="flex"
          alignItems="center"
          justifyContent="center"
          p={{ base: 4, md: 8 }}
        >
          {/* Backdrop with frosted blur */}
          <Box
            as={motion.div}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2, ease: 'easeOut' }}
            position="absolute"
            inset="0"
            bg="bg-black/80"
            blur="md"
            onClick={onClose}
          />

          {/* Content Container */}
          <Box
            as={motion.div}
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
            position="relative"
            zIndex={10}
            w="full"
            maxWidth="6xl"
            maxHeight="full"
            display="flex"
            flexDirection="col"
          >
            {/* Header */}
            <Box
              display="flex"
              alignItems="center"
              justifyContent="between"
              mb={4}
              color="text-white"
            >
              <Box>
                {title && (
                  <Text size="lg" weight="semibold" color="text-white">
                    {title}
                  </Text>
                )}
              </Box>
              <Box display="flex" gap={2}>
                <IconButton
                  icon={Download}
                  variant="secondary"
                  size="sm"
                  onClick={() => src && window.open(src, '_blank')}
                  color="text-white"
                  backgroundColor="bg-white/10"
                />
                <IconButton
                  icon={X}
                  variant="secondary"
                  size="sm"
                  onClick={onClose}
                  color="text-white"
                  backgroundColor="bg-white/10"
                />
              </Box>
            </Box>

            {/* Image Area */}
            <Box
              position="relative"
              display="flex"
              alignItems="center"
              justifyContent="center"
              bg="bg-black/40"
              rounded="xl"
              overflow="hidden"
              border
              borderColor="border-white/10"
              flexGrow={1}
              minHeight="0"
            >
              {src ? (
                <Image
                  src={src}
                  alt={alt}
                  objectFit="contain"
                  fullWidth
                  fullHeight
                />
              ) : (
                <Box p={20}>
                  <Text color="text-gray-500">No image selected</Text>
                </Box>
              )}

              {/* Navigation Controls */}
              {onPrev && (
                <Box position="absolute" left="4" top="1/2" translateY="-1/2">
                  <IconButton
                    icon={ChevronLeft}
                    variant="secondary"
                    onClick={onPrev}
                    color="text-white"
                    backgroundColor="bg-black/50"
                  />
                </Box>
              )}
              {onNext && (
                <Box position="absolute" right="4" top="1/2" translateY="-1/2">
                  <IconButton
                    icon={ChevronRight}
                    variant="secondary"
                    onClick={onNext}
                    color="text-white"
                    backgroundColor="bg-black/50"
                  />
                </Box>
              )}
            </Box>

            {/* Footer / Info */}
            <Box mt={4} display="flex" justifyContent="center">
              <Text size="xs" color="text-gray-400" uppercase letterSpacing="widest">
                Precision Racing Media Viewer
              </Text>
            </Box>
          </Box>
        </Box>
      )}
    </AnimatePresence>
  );
}