import { Modal, Descriptions, Tag, Grid } from 'antd';
import { CameraOutlined } from '@ant-design/icons';
import { useSignedMediaUrl } from '@/lib/media-url';
import type { Photo } from '@/types/media';

interface PhotoViewerModalProps {
  photo: Photo | null;
  open: boolean;
  onClose: () => void;
}

export default function PhotoViewerModal({ photo, open, onClose }: PhotoViewerModalProps) {
  const screens = Grid.useBreakpoint();
  const isMobile = !screens.md;

  const adminImageUrl = photo ? `/media/photos/${photo.id}/image?size=large` : null;
  const signedImageUrl = useSignedMediaUrl(adminImageUrl);

  if (!photo) return null;

  return (
    <Modal
      open={open}
      onCancel={onClose}
      footer={null}
      width={isMobile ? '95vw' : 900}
      centered
      styles={{ body: { padding: 0 } }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Image */}
        <div
          style={{
            background: '#000',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            maxHeight: '60vh',
            overflow: 'hidden',
          }}
        >
          <img
            src={signedImageUrl}
            alt={photo.title || photo.filename}
            style={{
              maxWidth: '100%',
              maxHeight: '60vh',
              objectFit: 'contain',
            }}
          />
        </div>

        {/* Info panel */}
        <div style={{ padding: '0 24px 24px' }}>
          <h3 style={{ margin: '0 0 8px' }}>
            {photo.title || photo.originalFilename || photo.filename}
          </h3>

          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
            {photo.format && <Tag>{photo.format.toUpperCase()}</Tag>}
            {photo.width && photo.height && <Tag>{photo.width}×{photo.height}</Tag>}
            {photo.orientation && <Tag>{photo.orientation === 'H' ? 'Landscape' : photo.orientation === 'V' ? 'Portrait' : 'Square'}</Tag>}
            {photo.isPublished && <Tag color="green">Published</Tag>}
          </div>

          {(photo.cameraMake || photo.cameraModel) && (
            <Descriptions size="small" column={2} bordered style={{ marginBottom: 12 }}>
              {(photo.cameraMake || photo.cameraModel) && (
                <Descriptions.Item label={<><CameraOutlined /> Camera</>}>
                  {[photo.cameraMake, photo.cameraModel].filter(Boolean).join(' ')}
                </Descriptions.Item>
              )}
              {photo.focalLength && (
                <Descriptions.Item label="Focal">{photo.focalLength}</Descriptions.Item>
              )}
              {photo.aperture && (
                <Descriptions.Item label="Aperture">{photo.aperture}</Descriptions.Item>
              )}
              {photo.shutterSpeed && (
                <Descriptions.Item label="Shutter">{photo.shutterSpeed}</Descriptions.Item>
              )}
              {photo.iso && (
                <Descriptions.Item label="ISO">{photo.iso}</Descriptions.Item>
              )}
              {photo.takenAt && (
                <Descriptions.Item label="Date">{new Date(photo.takenAt).toLocaleString()}</Descriptions.Item>
              )}
            </Descriptions>
          )}

          {photo.description && (
            <p style={{ color: '#999', fontSize: 13 }}>{photo.description}</p>
          )}
        </div>
      </div>
    </Modal>
  );
}
