import React, { useState, useCallback } from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  TouchableOpacity,
  Image,
} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation, useRoute } from '@react-navigation/native';
import { Header } from '../../components/common/Header';
import { AnimatedCard } from '../../components/ui/AnimatedCard';
import { EmptyState } from '../../components/ui/EmptyState';
import { useToast } from '../../context/ToastContext';
import { useResponsive } from '../../hooks/useResponsive';
import { mediaService } from '../../services/mediaService';
import { JobMedia } from '../../types';
import { colors, spacing, radii } from '../../theme';

const MEDIA_TYPES = ['BEFORE', 'DURING', 'AFTER'] as const;

export default function JobMediaScreen() {
  const navigation = useNavigation<any>();
  const route = useRoute<any>();
  const { jobId } = route.params;
  const { toast } = useToast();
  const { isPhone, contentPadding, cardColumns, gutter, fontSize } = useResponsive();
  const [media, setMedia] = useState<JobMedia[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  const loadMedia = async () => {
    try {
      const data = await mediaService.list(jobId);
      setMedia(data);
    } catch (error) {
      console.error('Failed to load media:', error);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    loadMedia();
  }, [jobId]);

  React.useEffect(() => {
    loadMedia();
  }, [jobId]);

  const pickImage = async (mediaType: 'BEFORE' | 'DURING' | 'AFTER') => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      toast('Camera permission required', 'error');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ['images'],
      quality: 0.8,
    });

    if (!result.canceled && result.assets[0]) {
      setUploading(true);
      try {
        const formData = new FormData();
        formData.append('photo', {
          uri: result.assets[0].uri,
          type: 'image/jpeg',
          name: `photo_${Date.now()}.jpg`,
        } as any);
        formData.append('media_type', mediaType);

        await mediaService.upload(jobId, formData);
        toast('Photo uploaded successfully', 'success');
        loadMedia();
      } catch (error: any) {
        toast(error.response?.data?.error || 'Upload failed', 'error');
      } finally {
        setUploading(false);
      }
    }
  };

  const imageHeight = isPhone ? 200 : 250;

  return (
    <View style={styles.container}>
      <Header
        title="Job Photos"
        subtitle={`${media.length} photos`}
        onBack={() => navigation.goBack()}
      />

      <View style={[styles.uploadSection, { flexDirection: isPhone ? 'column' : 'row', paddingHorizontal: contentPadding, paddingVertical: spacing.md, gap: spacing.sm }]}>
        {MEDIA_TYPES.map((type) => (
          <TouchableOpacity
            key={type}
            style={[styles.uploadBtn, uploading && styles.uploadBtnDisabled, !isPhone && { flex: 1 }]}
            onPress={() => pickImage(type)}
            disabled={uploading}
            activeOpacity={0.7}
          >
            <Ionicons name="camera" size={18} color={colors.white} />
            <Text style={[styles.uploadBtnText, { fontSize: fontSize.body }]}>{type}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <FlatList
        data={media}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item, index }) => (
          <AnimatedCard delay={index * 80} style={[styles.mediaCard, { marginBottom: spacing.md, marginHorizontal: contentPadding, padding: 0 }]}>
            <Image source={{ uri: item.file_url }} style={[styles.image, { height: imageHeight }]} />
            <View style={[styles.mediaInfo, { padding: spacing.md }]}>
              <View style={styles.mediaTypeContainer}>
                <Ionicons name="image-outline" size={14} color={colors.primary[600]} />
                <Text style={[styles.mediaType, { fontSize: fontSize.body }]}>{item.media_type}</Text>
              </View>
              <Text style={[styles.mediaTime, { fontSize: fontSize.caption, marginTop: spacing.xs }]}>
                {new Date(item.uploaded_at).toLocaleString()}
              </Text>
            </View>
          </AnimatedCard>
        )}
        contentContainerStyle={{ paddingVertical: spacing.md, paddingBottom: 32 }}
        showsVerticalScrollIndicator={false}
        refreshControl={
          <View /> // placeholder - using parent refresh
        }
        ListEmptyComponent={
          <EmptyState
            icon="camera-outline"
            title="No photos yet"
            description="Take a photo using one of the buttons above"
          />
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  uploadSection: {},
  uploadBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing.sm,
    backgroundColor: colors.primary[600],
    borderRadius: radii.full,
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
  },
  uploadBtnDisabled: {
    opacity: 0.5,
  },
  uploadBtnText: {
    color: colors.white,
    fontWeight: '600',
  },
  mediaCard: {
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    backgroundColor: colors.gray[100],
  },
  mediaInfo: {},
  mediaTypeContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
  },
  mediaType: {
    fontWeight: '600',
    color: colors.primary[600],
  },
  mediaTime: {
    color: colors.gray[400],
  },
});