import React, { useState } from 'react';
import { Image, Modal, Pressable, Text, View } from 'react-native';
import { X } from 'lucide-react-native';

import { toolWidgetStyles } from './toolWidgetStyles';

export type ImageGridItem = {
  label?: string;
  url: string;
};

/**
 * Grid + lightbox for media-producing tools (screenshots, generated images).
 * send_image intentionally keeps its richer dedicated gallery in ToolCallSummary.
 */
export function ImageGrid({ images }: { images: ImageGridItem[] }) {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  if (images.length === 0) return null;

  const active = activeIndex != null ? images[activeIndex] : null;
  const isSingle = images.length === 1;

  return (
    <View>
      {isSingle ? (
        <ImageCell
          image={images[0]}
          onPress={() => setActiveIndex(0)}
          imageStyle={toolWidgetStyles.imageGridSingleImage}
          tileStyle={toolWidgetStyles.imageGridSingle}
        />
      ) : (
        <View style={toolWidgetStyles.imageGrid}>
          {images.map((image, index) => (
            <ImageCell
              image={image}
              imageStyle={toolWidgetStyles.imageGridTileImage}
              key={`${image.url}-${index}`}
              onPress={() => setActiveIndex(index)}
              tileStyle={toolWidgetStyles.imageGridTile}
            />
          ))}
        </View>
      )}

      <Modal
        animationType="fade"
        onRequestClose={() => setActiveIndex(null)}
        transparent
        visible={active !== null}
      >
        <Pressable onPress={() => setActiveIndex(null)} style={toolWidgetStyles.imageLightboxBackdrop}>
          {active ? (
            <Image
              accessibilityLabel={active.label || undefined}
              accessibilityRole="image"
              resizeMode="contain"
              source={{ uri: active.url }}
              style={toolWidgetStyles.imageLightboxImage}
            />
          ) : null}
          <Pressable
            accessibilityLabel="Close"
            accessibilityRole="button"
            onPress={() => setActiveIndex(null)}
            style={toolWidgetStyles.imageLightboxClose}
          >
            <X color="#FFFFFF" size={22} strokeWidth={2.2} />
          </Pressable>
        </Pressable>
      </Modal>
    </View>
  );
}

function ImageCell({
  image,
  imageStyle,
  onPress,
  tileStyle,
}: {
  image: ImageGridItem;
  imageStyle: object;
  onPress: () => void;
  tileStyle: object;
}) {
  return (
    <View>
      <Pressable
        accessibilityLabel={image.label ? `Open ${image.label}` : 'Open image'}
        accessibilityRole="button"
        onPress={onPress}
        style={tileStyle}
      >
        <Image
          accessibilityLabel={image.label || undefined}
          accessibilityRole="image"
          resizeMode="cover"
          source={{ uri: image.url }}
          style={imageStyle}
        />
      </Pressable>
      {image.label ? (
        <Text numberOfLines={1} style={toolWidgetStyles.imageGridCaption}>{image.label}</Text>
      ) : null}
    </View>
  );
}