import { useState, useMemo } from 'react';
import { View, Text, ScrollView, Image, ActivityIndicator, StyleSheet, SafeAreaView, TouchableOpacity, FlatList } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useQuery } from '@tanstack/react-query';
import { useArticle, useOutlet } from '@/hooks/useApi';
import { useLanguage } from '@/contexts/LanguageContext';
import ArticleCard from '@/components/ArticleCard';
import LanguageModal from '@/components/LanguageModal';
import CommentsDrawer from '@/components/CommentsDrawer';
import { API_BASE_URL } from '@/lib/config';

export default function ArticleScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
  const { language, setLanguage } = useLanguage();
  const [imageLoaded, setImageLoaded] = useState(false);
  const [showLanguage, setShowLanguage] = useState(false);
  const [showComments, setShowComments] = useState(false);

  const { data: article, isLoading, error } = useArticle(id || '', language, true);

  // Get outlet data from article
  const articleData = article as any;
  const outletId = articleData?.outletId || articleData?.outlet_id;
  const { data: outlet } = useOutlet(outletId || '', language);

  // Fetch latest articles for the feed
  // TODO: Re-enable when news-api has a compatible feed endpoint
  const { data: latestArticles } = useQuery({
    queryKey: ['/api/feed', { limit: 20, exclude: id }],
    queryFn: async () => {
      const response = await fetch(`${API_BASE_URL}/api/v1/${language}/articles/latest?limit=20`);
      return response.json();
    },
    enabled: false, // Disabled until API structure matches frontend expectations
  });

  // Clean and process body content
  const cleanedBody = useMemo(() => {
    if (!article || !(article as any).body) return '';

    const body = (article as any).body;
    // Remove "originally published" line
    const pattern = /^\s*(?:This article was\s+)?originally published\s+(?:at|on)\s+\S+\.?\s*(?:\r?\n){1,2}/i;
    const cleaned = body.replace(pattern, '').trimStart();

    // Truncate at 3000 characters but complete the sentence
    if (cleaned.length <= 3000) return cleaned;

    const truncatePoint = 3000;
    const afterTruncate = cleaned.substring(truncatePoint);
    const sentenceEndMatch = afterTruncate.match(/[.!?](?:\s|$)/);

    if (sentenceEndMatch && sentenceEndMatch.index !== undefined) {
      const endIndex = truncatePoint + sentenceEndMatch.index + 1;
      return cleaned.substring(0, endIndex);
    }

    return cleaned.substring(0, 3000);
  }, [article]);

  const getInitials = (name: string) => {
    return name
      .split(' ')
      .map(word => word[0])
      .join('')
      .toUpperCase()
      .slice(0, 2);
  };

  // Parse body content for rendering
  const parseBodyContent = (text: string) => {
    const lines = text.split('\n');
    const elements: Array<{ type: 'subtitle' | 'paragraph', content: string, key: string }> = [];
    let currentParagraph: string[] = [];
    let keyIndex = 0;

    const flushParagraph = () => {
      if (currentParagraph.length > 0) {
        const paragraphText = currentParagraph.join('\n').trim();
        if (paragraphText) {
          elements.push({
            type: 'paragraph',
            content: paragraphText,
            key: `p-${keyIndex++}`
          });
        }
        currentParagraph = [];
      }
    };

    lines.forEach((line) => {
      const trimmedLine = line.trim();

      // Check for subtitle patterns
      const fullLineSubtitle = trimmedLine.match(/^\*\*(.*?)\*\*$/);
      const prefixedSubtitle = trimmedLine.match(/^\s*\*\*(.+?)\*\*\s*(.*)$/);

      if (fullLineSubtitle && trimmedLine === `**${fullLineSubtitle[1]}**`) {
        flushParagraph();
        elements.push({
          type: 'subtitle',
          content: fullLineSubtitle[1],
          key: `subtitle-${keyIndex++}`
        });
      } else if (prefixedSubtitle && prefixedSubtitle[2].trim() !== '') {
        flushParagraph();
        elements.push({
          type: 'subtitle',
          content: prefixedSubtitle[1],
          key: `subtitle-${keyIndex++}`
        });
        if (prefixedSubtitle[2].trim()) {
          currentParagraph.push(prefixedSubtitle[2].trim());
        }
      } else if (trimmedLine === '') {
        flushParagraph();
      } else {
        currentParagraph.push(line);
      }
    });

    flushParagraph();
    return elements;
  };

  if (isLoading) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#007AFF" />
          <Text style={styles.text}>Loading...</Text>
        </View>
      </SafeAreaView>
    );
  }

  if (error || !article) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>Article not found</Text>
          <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
            <Text style={styles.backButtonText}>Go Back</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }

  const bodyElements = articleData.subtopics && articleData.subtopics.length > 0
    ? null
    : parseBodyContent(cleanedBody);

  const outletData = outlet as any;
  const outletName = outletData?.name || articleData?.outletName || 'Unknown Outlet';

  return (
    <SafeAreaView style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          {outletData?.avatar ? (
            <Image
              source={{ uri: outletData.avatar }}
              style={styles.outletAvatar}
            />
          ) : (
            <View style={[styles.avatarFallback, styles.outletAvatar]}>
              <Text style={styles.avatarText}>{getInitials(outletName)}</Text>
            </View>
          )}
          <View style={styles.outletInfo}>
            <Image
              source={require('@/assets/images/sapiens-logo.png')}
              style={styles.miniLogo}
              resizeMode="contain"
            />
            <Text style={styles.outletName} numberOfLines={1}>{outletName}</Text>
          </View>
        </View>
        <View style={styles.headerRight}>
          <TouchableOpacity style={styles.iconButton} onPress={() => setShowLanguage(true)}>
            <Ionicons name="settings-outline" size={18} color="#333" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.iconButton}>
            <Ionicons name="person-circle-outline" size={20} color="#333" />
          </TouchableOpacity>
        </View>
      </View>

      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        {/* Hero Image */}
        {articleData.thumbnail && (
          <View style={styles.heroContainer}>
            <Image
              source={{ uri: articleData.thumbnail }}
              style={[styles.heroImage, !imageLoaded && styles.heroImageHidden]}
              resizeMode="cover"
              onLoad={() => setImageLoaded(true)}
            />
            {!imageLoaded && (
              <View style={styles.imagePlaceholder}>
                <ActivityIndicator size="large" color="#007AFF" />
              </View>
            )}
            {articleData.category && (
              <View style={styles.categoryBadge}>
                <Text style={styles.categoryText}>{articleData.category}</Text>
              </View>
            )}
            {articleData.timeAgo && (
              <View style={styles.timeContainer}>
                <Text style={styles.timeText}>{articleData.timeAgo}</Text>
              </View>
            )}
          </View>
        )}

        {/* Article Content Card */}
        <View style={styles.contentCard}>
          {/* Title */}
          <Text style={styles.title}>{articleData.title}</Text>

          {/* Summary */}
          {articleData.summary && (
            <Text style={styles.summary}>{articleData.summary}</Text>
          )}

          {/* Body - Subtopics or Parsed Content */}
          <View style={styles.body}>
            {articleData.subtopics && articleData.subtopics.length > 0 ? (
              articleData.subtopics.map((topic: any, index: number) => (
                <View key={index} style={styles.subtopicSection}>
                  <Text style={styles.subtitle}>{topic.title}</Text>
                  {Array.isArray(topic.content) ? (
                    topic.content.map((paragraph: string, pIndex: number) => (
                      <Text key={pIndex} style={styles.paragraph}>
                        {paragraph}
                      </Text>
                    ))
                  ) : (
                    <Text style={styles.paragraph}>{topic.content}</Text>
                  )}
                </View>
              ))
            ) : (
              bodyElements?.map((element) => (
                element.type === 'subtitle' ? (
                  <Text key={element.key} style={styles.subtitle}>
                    {element.content}
                  </Text>
                ) : (
                  <Text key={element.key} style={styles.paragraph}>
                    {element.content}
                  </Text>
                )
              ))
            )}
          </View>
        </View>

        {/* Latest Articles Feed */}
        {latestArticles?.items && latestArticles.items.length > 0 && (
          <View style={styles.feedContainer}>
            <Text style={styles.feedTitle}>Latest Articles</Text>
            {latestArticles.items
              .filter((item: any) => item.newsId && item.newsId !== id)
              .slice(0, 10)
              .map((item: any) => (
                <View key={item.newsId} style={styles.feedItemWrapper}>
                  <ArticleCard
                    id={item.newsId}
                    title={item.title}
                    summary={item.summary}
                    thumbnail={item.thumbnail}
                    publishedAt={new Date(item.publishedAt)}
                    timeAgo={item.timeAgo}
                    outletName={item.outletName}
                    category={item.category}
                    onClick={(newsId) => {
                      router.push(`/article/${newsId}`);
                    }}
                    isAd={item.isAd || false}
                    tags={item.tags || []}
                  />
                </View>
              ))}
          </View>
        )}
      </ScrollView>

      {/* Footer Action Bar */}
      <View style={styles.footer}>
        <TouchableOpacity style={styles.footerButton} onPress={() => router.back()}>
          <Ionicons name="chevron-back" size={24} color="#333" />
        </TouchableOpacity>

        <View style={styles.footerActions}>
          <TouchableOpacity style={styles.actionButton} onPress={() => setShowComments(true)}>
            <Ionicons name="chatbubble-outline" size={22} color="#333" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionButton}>
            <Ionicons name="share-outline" size={22} color="#333" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionButton}>
            <Ionicons name="bookmark-outline" size={22} color="#333" />
          </TouchableOpacity>
        </View>

        <TouchableOpacity style={styles.footerButton}>
          <Ionicons name="chevron-forward" size={24} color="#999" />
        </TouchableOpacity>
      </View>

      {/* Language Modal */}
      <LanguageModal
        visible={showLanguage}
        onClose={() => setShowLanguage(false)}
        currentLanguage={language}
        onSelectLanguage={setLanguage}
      />

      {/* Comments Drawer */}
      <CommentsDrawer
        articleId={id || ''}
        isOpen={showComments}
        onClose={() => setShowComments(false)}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
    paddingVertical: 12,
    paddingHorizontal: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    gap: 12,
  },
  outletAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
  },
  avatarFallback: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#e0e0e0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
  },
  outletInfo: {
    flexDirection: 'column',
    alignItems: 'flex-start',
    gap: 3,
    flex: 1,
  },
  miniLogo: {
    height: 10,
    width: 90,
    resizeMode: 'contain',
    marginLeft: 0,
  },
  outletName: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000',
    maxWidth: 150,
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  iconButton: {
    padding: 8,
  },
  scrollView: {
    flex: 1,
  },
  heroContainer: {
    position: 'relative',
    width: '100%',
    aspectRatio: 16 / 9,
    backgroundColor: '#e0e0e0',
  },
  heroImage: {
    width: '100%',
    height: '100%',
  },
  heroImageHidden: {
    opacity: 0,
  },
  imagePlaceholder: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e0e0e0',
  },
  categoryBadge: {
    position: 'absolute',
    top: 16,
    left: 16,
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
  },
  categoryText: {
    fontSize: 12,
    fontWeight: '600',
    color: '#333',
  },
  timeContainer: {
    position: 'absolute',
    bottom: 12,
    left: 12,
  },
  timeText: {
    fontSize: 12,
    color: '#fff',
    fontWeight: '600',
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: { width: 0, height: 1 },
    textShadowRadius: 3,
  },
  contentCard: {
    backgroundColor: '#fff',
    marginTop: 16,
    marginHorizontal: 16,
    marginBottom: 24,
    padding: 20,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000',
    marginBottom: 12,
    lineHeight: 32,
  },
  summary: {
    fontSize: 16,
    color: '#666',
    marginBottom: 20,
    lineHeight: 24,
  },
  body: {
    marginBottom: 16,
  },
  subtopicSection: {
    marginBottom: 20,
  },
  subtitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#000',
    marginTop: 20,
    marginBottom: 12,
  },
  paragraph: {
    fontSize: 16,
    color: '#333',
    lineHeight: 26,
    marginBottom: 16,
  },
  feedContainer: {
    marginTop: 32,
    marginHorizontal: 16,
    marginBottom: 32,
  },
  feedTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000',
    marginBottom: 16,
  },
  feedItemWrapper: {
    marginBottom: 12,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 14,
    color: '#666',
    marginTop: 10,
  },
  errorText: {
    fontSize: 16,
    color: 'red',
    fontWeight: 'bold',
    marginBottom: 16,
  },
  backButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  backButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  footer: {
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
    paddingVertical: 8,
    paddingHorizontal: 8,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  footerButton: {
    padding: 8,
    width: 40,
    alignItems: 'center',
  },
  footerActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  actionButton: {
    padding: 8,
    width: 36,
    height: 36,
    alignItems: 'center',
    justifyContent: 'center',
  },
});