import React, { useEffect, useRef, useState } from "react";
import {
  Dimensions,
  FlatList,
  Image,
  KeyboardAvoidingView,
  Modal,
  Platform,
  Pressable,
  Text,
  TextInput,
  View,
} from "react-native";
import { useTheme } from "../../contexts/ThemeContext";

interface ImageItem {
  uri: string;
}

interface ImageCaptionModalProps {
  visible: boolean;
  images: ImageItem[];
  onSend: (caption: string) => void;
  onCancel: () => void;
}

export function ImageCaptionModal({ visible, images, onSend, onCancel }: ImageCaptionModalProps) {
  const { colors } = useTheme();
  const [caption, setCaption] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(0);
  const inputRef = useRef<TextInput>(null);
  const { width, height } = Dimensions.get("window");

  useEffect(() => {
    if (visible) {
      setCaption("");
      setSelectedIndex(0);
      setTimeout(() => inputRef.current?.focus(), 300);
    }
  }, [visible]);

  const handleSend = () => {
    onSend(caption.trim());
    setCaption("");
  };

  const currentImage = images[selectedIndex]?.uri ?? "";
  const isMultiple = images.length > 1;

  return (
    <Modal visible={visible} animationType="slide" transparent={false} onRequestClose={onCancel}>
      <View style={{ flex: 1, backgroundColor: "#000" }}>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === "ios" ? "padding" : undefined}
          keyboardVerticalOffset={0}
        >
          {/* Top bar with cancel + count */}
          <View
            style={{
              paddingTop: 54,
              paddingHorizontal: 16,
              paddingBottom: 12,
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Pressable
              onPress={onCancel}
              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
              style={{
                paddingHorizontal: 12,
                paddingVertical: 6,
                borderRadius: 16,
                backgroundColor: "rgba(255,255,255,0.15)",
              }}
            >
              <Text style={{ color: "#fff", fontSize: 16, fontWeight: "600" }}>Cancel</Text>
            </Pressable>
            {isMultiple && (
              <Text style={{ color: "rgba(255,255,255,0.6)", fontSize: 14 }}>
                {selectedIndex + 1} / {images.length}
              </Text>
            )}
          </View>

          {/* Image preview */}
          <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Image
              source={{ uri: currentImage }}
              style={{ width, height: isMultiple ? height * 0.45 : height * 0.55 }}
              resizeMode="contain"
            />
          </View>

          {/* Thumbnail strip — only for multiple images */}
          {isMultiple && (
            <FlatList
              data={images}
              horizontal
              showsHorizontalScrollIndicator={false}
              keyExtractor={(_, i) => String(i)}
              contentContainerStyle={{ paddingHorizontal: 12, paddingVertical: 8, gap: 8 }}
              renderItem={({ item, index }) => (
                <Pressable onPress={() => setSelectedIndex(index)}>
                  <Image
                    source={{ uri: item.uri }}
                    style={{
                      width: 56,
                      height: 56,
                      borderRadius: 8,
                      borderWidth: index === selectedIndex ? 2 : 0,
                      borderColor: colors.accent,
                    }}
                    resizeMode="cover"
                  />
                </Pressable>
              )}
            />
          )}

          {/* Caption input + send */}
          <View
            style={{
              flexDirection: "row",
              alignItems: "flex-end",
              paddingHorizontal: 12,
              paddingVertical: 10,
              paddingBottom: 34,
              gap: 8,
            }}
          >
            <TextInput
              ref={inputRef}
              value={caption}
              onChangeText={setCaption}
              placeholder="Add a caption..."
              placeholderTextColor="rgba(255,255,255,0.4)"
              multiline
              maxLength={2000}
              style={{
                flex: 1,
                backgroundColor: "rgba(255,255,255,0.12)",
                borderRadius: 20,
                paddingHorizontal: 16,
                paddingVertical: 10,
                maxHeight: 100,
                color: "#fff",
                fontSize: 16,
              }}
            />
            <Pressable
              onPress={handleSend}
              style={{
                width: 44,
                height: 44,
                borderRadius: 22,
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: colors.accent,
                marginBottom: 1,
              }}
            >
              <Text style={{ fontSize: 20, fontWeight: "bold", color: "#fff" }}>{"\u2191"}</Text>
            </Pressable>
          </View>
        </KeyboardAvoidingView>
      </View>
    </Modal>
  );
}