import React, { useEffect, useState } from 'react';

import { createPortal } from 'react-dom';

import { X } from '@phosphor-icons/react';

import { motion, AnimatePresence } from 'framer-motion';

import { MistOrb } from './mist';

const MistImageModal = ({ src, alt, onClose }) => {

const [dimensions, setDimensions] = useState(null);

useEffect(() => {

if (src) document.body.style.overflow = 'hidden';

else document.body.style.overflow = '';

const handleKeyDown = (e) => {

if (e.key === 'Escape') onClose();

};

if (src) window.addEventListener('keydown', handleKeyDown);

return () => {

document.body.style.overflow = '';

window.removeEventListener('keydown', handleKeyDown);

};

}, [src, onClose]);

const handleImageLoad = (e) => {

setDimensions({

width: e.target.naturalWidth,

height: e.target.naturalHeight,

});

};

const showAlt =

alt &&

![

'Project Detail',

'Enlarged Content',

'Intel Imagery',

'Full size image',

].includes(alt);

return createPortal(

<AnimatePresence>

{src && (

<motion.div

className="fixed inset-0 z-[1000] flex items-center justify-center bg-[#DFE5E3]/60 backdrop-blur-sm p-2 md:p-4"

onClick={onClose}

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

transition={{ duration: 0.2 }}

>

<div

className="absolute inset-0 pointer-events-none"

style={{

background:

'radial-gradient(900px 600px at 85% -10%, rgba(255,255,255,0.8) 0%, transparent 55%), radial-gradient(700px 500px at 5% 105%, rgba(210,219,216,0.8) 0%, transparent 50%)',

}}

/>

<motion.div

className="relative w-full h-full max-w-[85vw] max-h-[85vh] flex flex-col"

onClick={(e) => e.stopPropagation()}

initial={{ opacity: 0, scale: 0.98, filter: 'blur(6px)' }}

animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}

exit={{ opacity: 0, scale: 0.98, filter: 'blur(6px)' }}

transition={{ duration: 0.4, ease: 'easeOut' }}

>

<div className="flex items-center justify-between bg-white/80 backdrop-blur-md p-2 md:p-3 rounded-t-2xl shadow-[0_18px_50px_rgba(60,72,69,0.18)]">

<div className="flex items-center gap-3">

<MistOrb size={18} />

<span className="font-ibm-plex-mono lowercase text-[10px] tracking-[0.26em] text-[#5C6B67]">

image viewer · seen through fog

</span>

</div>

<div className="flex items-center gap-2">

<span className="hidden md:inline font-ibm-plex-mono lowercase text-[9px] tracking-[0.2em] text-[#8A9894] mr-2">

press esc to wake

</span>

<button

onClick={onClose}

className="flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#E5EBE9]/80 text-[#5C6B67] hover:bg-[#5F837B] hover:text-white transition-colors"

>

<X size={16} weight="light" />

</button>

</div>

</div>

<div className="relative flex-1 min-h-0 bg-white/70 backdrop-blur-md rounded-b-2xl overflow-hidden flex items-center justify-center">

<div

aria-hidden="true"

className="absolute top-0 left-0 right-0 h-px"

style={{

background:

'linear-gradient(90deg, transparent, rgba(60,72,69,0.14), transparent)',

}}

/>

<img

src={src}

alt={alt}

onLoad={handleImageLoad}

style={{ maxWidth: '100%', maxHeight: '100%' }}

className="w-auto h-auto object-contain block shadow-[0_18px_50px_rgba(60,72,69,0.18)] select-none"

/>

</div>

<div className="mt-3 flex justify-between items-center px-2">

<span className="font-ibm-plex-mono lowercase text-sm tracking-[0.18em] text-[#5C6B67] truncate max-w-[50vw]">

{showAlt ? alt : 'an unnamed drift'}

</span>

<span className="font-ibm-plex-mono lowercase text-sm tracking-[0.18em] text-[#5C6B67] text-right">

{dimensions

? `${dimensions.width} × ${dimensions.height} px`

: 'measuring…'}

</span>

</div>

</motion.div>

</motion.div>

)}

</AnimatePresence>,

document.body,

);

};

export default MistImageModal;