import React, { useCallback } from "react";
import {
  Alert,
  Dimensions,
  Image,
  Modal,
  Pressable,
  ScrollView,
  Text,
  View,
} from "react-native";
import { cacheDirectory, writeAsStringAsync } from "expo-file-system/legacy";
import * as Sharing from "expo-sharing";

/** Apple-style share icon (square with upward arrow) */
function ShareIcon({ size = 18, color = "#fff" }: { size?: number; color?: string }) {
  const boxSize = size * 0.7;
  const arrowWidth = 2;
  return (
    <View style={{ width: size, height: size, alignItems: "center", justifyContent: "flex-end" }}>
      {/* Arrow shaft + head */}
      <View
        style={{
          position: "absolute",
          top: 0,
          width: arrowWidth,
          height: size * 0.65,
          backgroundColor: color,
          borderRadius: 1,
        }}
      />
      <View
        style={{
          position: "absolute",
          top: 0,
          width: 0,
          height: 0,
          borderLeftWidth: size * 0.22,
          borderRightWidth: size * 0.22,
          borderBottomWidth: size * 0.25,
          borderLeftColor: "transparent",
          borderRightColor: "transparent",
          borderBottomColor: color,
          transform: [{ translateY: -size * 0.12 }],
        }}
      />
      {/* Open box (3 sides) */}
      <View
        style={{
          width: boxSize,
          height: boxSize * 0.7,
          borderWidth: arrowWidth,
          borderTopWidth: 0,
          borderColor: color,
          borderRadius: 2,
        }}
      />
    </View>
  );
}

interface ImageViewerProps {
  visible: boolean;
  imageBase64: string;
  onClose: () => void;
}

export function ImageViewer({ visible, imageBase64, onClose }: ImageViewerProps) {
  const { width, height } = Dimensions.get("window");

  const handleShare = useCallback(async () => {
    try {
      const fileUri = `${cacheDirectory}pailot-screenshot-${Date.now()}.png`;
      await writeAsStringAsync(fileUri, imageBase64, {
        encoding: "base64",
      });
      if (!(await Sharing.isAvailableAsync())) {
        Alert.alert("Sharing not available on this device");
        return;
      }
      await Sharing.shareAsync(fileUri, { mimeType: "image/png" });
    } catch (err: any) {
      if (err?.message?.includes("User did not share")) return;
      Alert.alert("Share Error", err?.message ?? String(err));
    }
  }, [imageBase64]);

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.95)" }}>
        {/* Top bar: share + close */}
        <View
          style={{
            position: "absolute",
            top: 60,
            right: 20,
            zIndex: 10,
            flexDirection: "row",
            gap: 12,
          }}
        >
          <Pressable
            onPress={handleShare}
            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
            style={{
              width: 40,
              height: 40,
              borderRadius: 20,
              backgroundColor: "rgba(255,255,255,0.15)",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <ShareIcon size={20} color="#fff" />
          </Pressable>
          <Pressable
            onPress={onClose}
            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
            style={{
              width: 40,
              height: 40,
              borderRadius: 20,
              backgroundColor: "rgba(255,255,255,0.15)",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Text style={{ color: "#fff", fontSize: 20, fontWeight: "600" }}>
              ✕
            </Text>
          </Pressable>
        </View>

        {/* Zoomable image */}
        <ScrollView
          maximumZoomScale={5}
          minimumZoomScale={1}
          centerContent
          contentContainerStyle={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
          }}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
        >
          <Image
            source={{ uri: `data:image/png;base64,${imageBase64}` }}
            style={{ width, height: height * 0.85 }}
            resizeMode="contain"
          />
        </ScrollView>
      </View>
    </Modal>
  );
}