import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator, Alert, Linking } from 'react-native';
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
import { documentService, Document } from '@/services/api';
import { getApiUrl } from '@/config/api.config';

export default function DocumentsScreen() {
  const [documents, setDocuments] = useState<Document[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadDocuments();
  }, []);

  const loadDocuments = async () => {
    try {
      setLoading(true);
      setError(null);
      const docs = await documentService.getAll();
      setDocuments(docs);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Erreur lors du chargement des documents');
    } finally {
      setLoading(false);
    }
  };

  const handleDocumentPress = async (document: Document) => {
    const pdfUrl = `${getApiUrl().replace('/api', '')}${document.url_fichier}`;
    
    Alert.alert(
      document.titre,
      `${document.description || 'Document aéronautique officiel'}\n\nAuteur: ${document.auteur || 'Non spécifié'}\nTaille: ${formatFileSize(document.taille_fichier)}\nDate: ${document.date_publication ? new Date(document.date_publication).toLocaleDateString('fr-FR') : 'Non spécifiée'}`,
      [
        { text: 'Annuler', style: 'cancel' },
        { 
          text: 'Ouvrir PDF', 
          onPress: async () => {
            try {
              const supported = await Linking.canOpenURL(pdfUrl);
              if (supported) {
                await Linking.openURL(pdfUrl);
              } else {
                Alert.alert('Erreur', 'Impossible d\'ouvrir le PDF. Vérifiez que vous avez une application PDF installée.');
              }
            } catch (error) {
              Alert.alert('Erreur', 'Impossible d\'ouvrir le PDF. URL: ' + pdfUrl);
            }
          }
        },
        {
          text: 'Informations',
          onPress: () => {
            Alert.alert('Informations', `URL: ${pdfUrl}\n\nCe document provient des archives officielles de la Direction Générale de l'Aviation Civile du Sénégal.`);
          }
        }
      ]
    );
  };

  const getCategoryIcon = (categorie: string) => {
    switch (categorie) {
      case 'technique': return '🔧';
      case 'administratif': return '📋';
      case 'historique': return '📚';
      case 'statistique': return '📊';
      default: return '📄';
    }
  };

  const getDocumentTypeInfo = (titre: string) => {
    if (titre.includes('approche aux instruments')) {
      return { icon: '🛬', type: 'Approche', color: '#e74c3c' };
    } else if (titre.includes('vol aux instruments')) {
      return { icon: '✈️', type: 'Vol IFR', color: '#3498db' };
    } else if (titre.includes('Plan d\'approche')) {
      return { icon: '📐', type: 'Plan', color: '#9b59b6' };
    } else if (titre.includes('RNP')) {
      return { icon: '🎯', type: 'RNP', color: '#e67e22' };
    }
    return { icon: '📄', type: 'Document', color: '#95a5a6' };
  };

  const getCategoryColor = (categorie: string) => {
    switch (categorie) {
      case 'technique': return '#e74c3c';
      case 'administratif': return '#3498db';
      case 'historique': return '#f39c12';
      case 'statistique': return '#27ae60';
      default: return '#95a5a6';
    }
  };

  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'pdf': return '📄';
      case 'word': return '📝';
      case 'excel': return '📊';
      case 'image': return '🖼️';
      case 'video': return '🎥';
      case 'audio': return '🎵';
      default: return '📄';
    }
  };

  const formatFileSize = (bytes?: number) => {
    if (!bytes) return 'Taille inconnue';
    const sizes = ['Octets', 'Ko', 'Mo', 'Go'];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
  };

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#3498db" />
        <ThemedText style={styles.loadingText}>Chargement des documents...</ThemedText>
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.errorContainer}>
        <ThemedText style={styles.errorText}>Erreur: {error}</ThemedText>
        <TouchableOpacity style={styles.retryButton} onPress={loadDocuments}>
          <Text style={styles.retryButtonText}>Réessayer</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <ScrollView style={styles.container}>
      <ThemedView style={styles.header}>
        <ThemedText style={styles.title}>Documents Aéronautiques Officiels</ThemedText>
        <ThemedText style={styles.subtitle}>
          {documents.length} document{documents.length > 1 ? 's' : ''} PDF réel{documents.length > 1 ? 's' : ''} de la DGAC Sénégal
        </ThemedText>
      </ThemedView>

      {documents.length === 0 ? (
        <View style={styles.emptyContainer}>
          <Text style={styles.emptyIcon}>📄</Text>
          <ThemedText style={styles.emptyText}>Aucun document disponible</ThemedText>
        </View>
      ) : (
        <View style={styles.documentsList}>
          {documents.map((document) => {
            const docTypeInfo = getDocumentTypeInfo(document.titre);
            const categoryColor = getCategoryColor(document.categorie || 'autre');
            
            return (
              <TouchableOpacity
                key={document.id}
                style={styles.documentCard}
                onPress={() => handleDocumentPress(document)}
              >
                <View style={styles.documentHeader}>
                  <View style={[styles.documentIconContainer, { backgroundColor: docTypeInfo.color }]}>
                    <Text style={styles.documentIcon}>{docTypeInfo.icon}</Text>
                  </View>
                  <View style={styles.documentInfo}>
                    <ThemedText style={styles.documentTitle} numberOfLines={2}>
                      {document.titre}
                    </ThemedText>
                    <View style={styles.documentMeta}>
                      <View style={[styles.categoryBadge, { backgroundColor: categoryColor }]}>
                        <Text style={styles.categoryBadgeText}>
                          {getCategoryIcon(document.categorie || 'autre')} {document.categorie || 'autre'}
                        </Text>
                      </View>
                      <View style={styles.typeBadge}>
                        <Text style={styles.typeBadgeText}>{docTypeInfo.type}</Text>
                      </View>
                    </View>
                  </View>
                </View>

              {document.description && (
                <ThemedText style={styles.documentDescription} numberOfLines={2}>
                  {document.description}
                </ThemedText>
              )}

                <View style={styles.documentDetails}>
                  <View style={styles.detailRow}>
                    <View style={styles.detailItem}>
                      <Text style={styles.detailIcon}>👤</Text>
                      <ThemedText style={styles.detailValue} numberOfLines={1}>
                        {document.auteur || 'Non spécifié'}
                      </ThemedText>
                    </View>
                    <View style={styles.detailItem}>
                      <Text style={styles.detailIcon}>📏</Text>
                      <ThemedText style={styles.detailValue}>
                        {formatFileSize(document.taille_fichier)}
                      </ThemedText>
                    </View>
                  </View>
                  {document.date_publication && (
                    <View style={styles.detailRow}>
                      <View style={styles.detailItem}>
                        <Text style={styles.detailIcon}>📅</Text>
                        <ThemedText style={styles.detailValue}>
                          {new Date(document.date_publication).toLocaleDateString('fr-FR')}
                        </ThemedText>
                      </View>
                    </View>
                  )}
                </View>

                <View style={styles.documentFooter}>
                  <Text style={styles.pdfIndicator}>📄 Document PDF Aéronautique</Text>
                  <View style={styles.viewButton}>
                    <Text style={styles.viewButtonText}>Consulter</Text>
                  </View>
                </View>
              </TouchableOpacity>
            );
          })}
        </View>
      )}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 20,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: '#666',
  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  errorText: {
    fontSize: 16,
    color: '#e74c3c',
    textAlign: 'center',
    marginBottom: 20,
  },
  retryButton: {
    backgroundColor: '#3498db',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  retryButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40,
  },
  emptyIcon: {
    fontSize: 64,
    marginBottom: 20,
  },
  emptyText: {
    fontSize: 18,
    color: '#666',
    textAlign: 'center',
  },
  documentsList: {
    padding: 15,
  },
  documentCard: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 15,
    marginBottom: 15,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5,
  },
  documentHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  documentIcon: {
    fontSize: 24,
    marginRight: 12,
  },
  documentIconContainer: {
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  documentInfo: {
    flex: 1,
  },
  documentMeta: {
    flexDirection: 'row',
    marginTop: 8,
    gap: 8,
  },
  categoryBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  categoryBadgeText: {
    color: 'white',
    fontSize: 12,
    fontWeight: '600',
  },
  typeBadge: {
    backgroundColor: '#ecf0f1',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  typeBadgeText: {
    color: '#2c3e50',
    fontSize: 12,
    fontWeight: '600',
  },
  documentTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  documentCategory: {
    fontSize: 14,
    color: '#666',
  },
  documentBadge: {
    backgroundColor: '#3498db',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  badgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  documentDescription: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    lineHeight: 20,
  },
  documentDetails: {
    marginTop: 10,
  },
  detailRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  detailItem: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  detailIcon: {
    fontSize: 14,
    marginRight: 6,
  },
  detailLabel: {
    fontSize: 12,
    color: '#999',
    marginRight: 5,
  },
  detailValue: {
    fontSize: 12,
    color: '#333',
    fontWeight: '500',
    flex: 1,
  },
  documentFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#ecf0f1',
  },
  pdfIndicator: {
    fontSize: 12,
    color: '#7f8c8d',
    fontStyle: 'italic',
  },
  viewButton: {
    backgroundColor: '#3498db',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 15,
  },
  viewButtonText: {
    color: 'white',
    fontSize: 12,
    fontWeight: '600',
  },
});