import React from 'react';
import { View, Text, Modal, Image, TouchableOpacity, Share } from 'react-native';
import { X, Share2, Download } from 'lucide-react-native';

interface PreviewModalProps {
  visible: boolean;
  onClose: () => void;
  photoUri: string | null;
  recipeName: string;
}

export default function PreviewModal({
  visible,
  onClose,
  photoUri,
  recipeName,
}: PreviewModalProps) {
  const handleShare = async () => {
    if (!photoUri) return;
    try {
      await Share.share({
        url: photoUri,
        message: `Captured with CamRecipe Pro - Preset: ${recipeName}`,
      });
    } catch (error) {
      console.error('Sharing failed:', error);
    }
  };

  return (
    <Modal
      visible={visible}
      animationType="fade"
      transparent={false}
      onRequestClose={onClose}
    >
      <View className="flex-1 bg-black justify-between py-6 px-4">
        {/* Top bar */}
        <View className="flex-row justify-between items-center px-2">
          <Text className="text-zinc-500 font-mono text-xs">PRESET: {recipeName.toUpperCase()}</Text>
          <TouchableOpacity
            onPress={onClose}
            className="w-8 h-8 rounded-full bg-zinc-900 flex items-center justify-center"
            activeOpacity={0.7}
          >
            <X size={18} color="#ffffff" />
          </TouchableOpacity>
        </View>

        {/* Image display */}
        <View className="flex-1 justify-center items-center my-4">
          {photoUri ? (
            <Image
              source={{ uri: photoUri }}
              className="w-full aspect-[3/4] max-h-[75vh] rounded-lg border border-zinc-800"
              resizeMode="contain"
            />
          ) : (
            <Text className="text-zinc-400 font-mono text-sm">NO IMAGE CAPTURED</Text>
          )}
        </View>

        {/* Bottom bar */}
        <View className="flex-row justify-around items-center px-4">
          <TouchableOpacity
            onPress={handleShare}
            disabled={!photoUri}
            className="flex-row items-center space-x-2 bg-zinc-900 border border-zinc-800 px-6 py-3 rounded-full"
            activeOpacity={0.7}
          >
            <Share2 size={16} color="#f59e0b" />
            <Text className="text-white font-mono text-xs font-bold">SHARE</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={onClose}
            className="flex-row items-center space-x-2 bg-amber-500 px-6 py-3 rounded-full"
            activeOpacity={0.7}
          >
            <Download size={16} color="#000000" />
            <Text className="text-black font-mono text-xs font-bold">DONE</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}