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

interface ImageCaptionModalProps {
  visible: boolean;
  imageUri: string;
  onSend: (caption: string) => void;
  onCancel: () => void;
}

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

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

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

  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 */}
          <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>
          </View>

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

          {/* 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>
  );
}