import ImageUser from "@/components/imageNew";
import Skeleton from "@/components/skeleton";
import Text from "@/components/Text";
import { ConstEnv } from "@/constants/ConstEnv";
import { isImageFile } from "@/constants/FileExtensions";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system';
import { startActivityAsync } from 'expo-intent-launcher';
import * as Sharing from 'expo-sharing';
import { useState } from "react";
import { Modal, Platform, Pressable, SafeAreaView, ScrollView, View } from "react-native";
import ImageViewing from "react-native-image-viewing";
import * as mime from 'react-native-mime-types';
import Toast from "react-native-toast-message";

export type CommentFile = {
   id: string
   name: string
   extension: string
   idStorage: string
}

export type CommentItem = {
   id: string
   comment: string
   createdAt: string
   idUser: string
   img: string
   username: string
   isEdited: boolean
   updatedAt: string
   files: CommentFile[]
}

type Props = {
   data: CommentItem[]
   loading: boolean
   myId: string
   canInteract: boolean
   onLongPress: (id: string, comment: string, files: CommentFile[]) => void
}

function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
   if (isImageFile(ext)) return 'image-outline'
   if (ext === 'pdf') return 'file-pdf-box'
   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
   return 'file-outline'
}

function getFileColor(ext: string): string {
   if (isImageFile(ext)) return '#339AF0'
   if (ext === 'pdf') return '#F03E3E'
   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
   return '#868E96'
}

function FileCard({ file, colors, onPress }: { file: CommentFile; colors: any; onPress: () => void }) {
   const ext = file.extension.toLowerCase()
   return (
      <Pressable
         onPress={onPress}
         style={({ pressed }) => [Styles.fileCard, {
            borderColor: colors.icon + '18',
            backgroundColor: pressed ? colors.icon + '10' : 'transparent'
         }]}
      >
         <View style={[Styles.sectionIconBox, { backgroundColor: getFileColor(ext) + '20' }]}>
            <MaterialCommunityIcons name={getFileIcon(ext)} size={18} color={getFileColor(ext)} />
         </View>
         <View style={Styles.flex1}>
            <Text style={Styles.textDefault} numberOfLines={1}>{file.name}</Text>
            <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
         </View>
      </Pressable>
   )
}

export default function DiscussionCommentList({ data, loading, myId, canInteract, onLongPress }: Props) {
   const { colors } = useTheme()
   const [expandedIds, setExpandedIds] = useState<string[]>([])
   const [modalFiles, setModalFiles] = useState<CommentFile[]>([])
   const [modalVisible, setModalVisible] = useState(false)
   const [previewFile, setPreviewFile] = useState<CommentFile | null>(null)
   const [modalPreviewFile, setModalPreviewFile] = useState<CommentFile | null>(null)
   const [loadingOpen, setLoadingOpen] = useState(false)
   const arrSkeleton = Array.from({ length: 3 }, (_, i) => i)

   function toggleExpand(id: string) {
      setExpandedIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
   }

   async function openExternal(file: CommentFile) {
      try {
         setLoadingOpen(true)
         const remoteUrl = `${ConstEnv.url_storage}/files/${file.idStorage}`
         const fileName = `${file.name}.${file.extension}`
         const localPath = `${FileSystem.documentDirectory}/${fileName}`
         const dl = await FileSystem.downloadAsync(remoteUrl, localPath)
         if (dl.status !== 200) throw new Error('Download failed')
         const contentURL = await FileSystem.getContentUriAsync(dl.uri)
         const mimeType = mime.lookup(fileName) as string
         if (Platform.OS === 'android') {
            await startActivityAsync('android.intent.action.VIEW', { data: contentURL, flags: 1, type: mimeType })
         } else {
            await Sharing.shareAsync(localPath)
         }
      } catch {
         Toast.show({ type: 'error', text1: 'Gagal membuka file' })
      } finally {
         setLoadingOpen(false)
      }
   }

   function handleFilePress(file: CommentFile) {
      if (isImageFile(file.extension.toLowerCase())) {
         setPreviewFile(file)
      } else {
         openExternal(file)
      }
   }

   if (loading) {
      return (
         <View style={Styles.mt10}>
            {arrSkeleton.map((_, i) => (
               <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
            ))}
         </View>
      )
   }

   return (
      <>
         <View style={Styles.mt10}>
            {data.map((item, i) => (
               <Pressable
                  key={i}
                  onPress={() => toggleExpand(item.id)}
                  onLongPress={() => item.idUser === myId && canInteract && onLongPress(item.id, item.comment, item.files ?? [])}
                  style={({ pressed }) => [
                     Styles.discussionCommentCard,
                     { backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
                  ]}
               >
                  <View style={Styles.flex1}>
                     <View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.mb05]}>
                        <View style={[Styles.rowItemsCenter, { gap: 8, flex: 1, marginRight: 8 }]}>
                           <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
                           <Text style={[Styles.textMediumSemiBold, { color: colors.text }]} numberOfLines={1}>
                              {item.username}
                           </Text>
                           {item.isEdited && (
                              <Text style={[Styles.discussionEditedText, { color: colors.dimmed }]}>diedit</Text>
                           )}
                        </View>
                        <Text style={[Styles.discussionDateText, { color: colors.dimmed, flexShrink: 0 }]}>
                           {item.createdAt}
                        </Text>
                     </View>

                     {item.comment.length > 0 && (
                        <Text
                           style={[Styles.textDefault, { color: colors.text }]}
                           numberOfLines={expandedIds.includes(item.id) ? 0 : 3}
                        >
                           {item.comment}
                        </Text>
                     )}

                     {item.files?.length > 0 && (
                        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: item.comment.length > 0 ? 8 : 0 }}>
                           {(item.files.length > 2 ? item.files.slice(0, 1) : item.files).map((file, idx) => (
                              <FileCard key={idx} file={file} colors={colors} onPress={() => handleFilePress(file)} />
                           ))}
                           {item.files.length > 2 && (
                              <Pressable
                                 onPress={() => { setModalFiles(item.files); setModalVisible(true) }}
                                 style={[Styles.fileCard, { borderColor: colors.icon + '18', backgroundColor: 'transparent' }]}
                              >
                                 <View style={[Styles.sectionIconBox, { backgroundColor: '#868E96' + '20' }]}>
                                    <MaterialCommunityIcons name="folder-multiple-outline" size={18} color="#868E96" />
                                 </View>
                                 <View style={Styles.flex1}>
                                    <Text style={Styles.textDefault} numberOfLines={1}>+{item.files.length - 1} lainnya</Text>
                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>Lihat semua</Text>
                                 </View>
                              </Pressable>
                           )}
                        </View>
                     )}
                  </View>
               </Pressable>
            ))}
         </View>

         <Modal visible={modalVisible} animationType="slide" onRequestClose={() => setModalVisible(false)}>
            <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
               <View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.ph15, Styles.pv10, { borderBottomWidth: 1, borderBottomColor: colors.icon + '20' }]}>
                  <Text style={Styles.textLargeSemiBold}>Lampiran ({modalFiles.length} file)</Text>
                  <Pressable onPress={() => setModalVisible(false)}>
                     <MaterialIcons name="close" size={24} color={colors.text} />
                  </Pressable>
               </View>
               <ScrollView contentContainerStyle={[Styles.ph15, Styles.pv10, { flexDirection: 'row', flexWrap: 'wrap', gap: 8 }]}>
                  {modalFiles.map((file, idx) => (
                     <FileCard
                        key={idx} file={file} colors={colors}
                        onPress={() => {
                           if (isImageFile(file.extension.toLowerCase())) {
                              setModalPreviewFile(file)
                           } else {
                              openExternal(file)
                           }
                        }}
                     />
                  ))}
               </ScrollView>
            </SafeAreaView>
            <ImageViewing
               images={[{ uri: `${ConstEnv.url_storage}/files/${modalPreviewFile?.idStorage}` }]}
               imageIndex={0}
               visible={modalPreviewFile !== null}
               onRequestClose={() => setModalPreviewFile(null)}
               doubleTapToZoomEnabled
               HeaderComponent={() => (
                  <View style={Styles.headerModalViewImg}>
                     <Pressable onPress={() => setModalPreviewFile(null)}>
                        <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
                     </Pressable>
                     <Pressable onPress={() => modalPreviewFile && openExternal(modalPreviewFile)} disabled={loadingOpen}>
                        <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
                     </Pressable>
                  </View>
               )}
               FooterComponent={() => (
                  <View style={{ paddingBottom: 20, paddingHorizontal: 16, alignItems: 'center' }}>
                     <Text style={{ color: 'white', fontSize: 16 }}>{modalPreviewFile?.name}.{modalPreviewFile?.extension}</Text>
                  </View>
               )}
            />
         </Modal>

         <ImageViewing
            images={[{ uri: `${ConstEnv.url_storage}/files/${previewFile?.idStorage}` }]}
            imageIndex={0}
            visible={previewFile !== null}
            onRequestClose={() => setPreviewFile(null)}
            doubleTapToZoomEnabled
            HeaderComponent={() => (
               <View style={Styles.headerModalViewImg}>
                  <Pressable onPress={() => setPreviewFile(null)}>
                     <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
                  </Pressable>
                  <Pressable onPress={() => previewFile && openExternal(previewFile)} disabled={loadingOpen}>
                     <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
                  </Pressable>
               </View>
            )}
            FooterComponent={() => (
               <View style={{ paddingBottom: 20, paddingHorizontal: 16, alignItems: 'center' }}>
                  <Text style={{ color: 'white', fontSize: 16 }}>{previewFile?.name}.{previewFile?.extension}</Text>
               </View>
            )}
         />
      </>
   )
}