import React from 'react';
import { StyleSheet, TouchableOpacity, Linking } from 'react-native';
import { SearchResult } from '@/types/feed';
import { ThemedText } from './themed-text';
import { ThemedView } from './themed-view';
import { Colors, Spacing } from '@/constants/theme';
import { useColorScheme } from 'react-native';

interface ArticleCardProps {
  result: SearchResult;
  onPress?: (result: SearchResult) => void;
}

export function ArticleCard({ result, onPress }: ArticleCardProps) {
  const scheme = useColorScheme();
  const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];

  const handlePress = () => {
    if (onPress) {
      onPress(result);
    } else if (result.link) {
      Linking.openURL(result.link);
    }
  };

  const formatDate = (date?: Date) => {
    if (!date) return '';
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    
    if (days === 0) {
      const hours = Math.floor(diff / (1000 * 60 * 60));
      return hours === 0 ? 'Just now' : `${hours}h ago`;
    } else if (days === 1) {
      return 'Yesterday';
    } else if (days < 7) {
      return `${days}d ago`;
    } else {
      return date.toLocaleDateString();
    }
  };

  return (
    <TouchableOpacity
      style={[styles.container, { backgroundColor: colors.background }]}
      onPress={handlePress}
      activeOpacity={0.7}
    >
      <ThemedView style={styles.content}>
        <ThemedText type="smallBold" style={styles.title} numberOfLines={2}>
          {result.title}
        </ThemedText>
        
        {result.snippet && (
          <ThemedText type="small" style={styles.snippet} numberOfLines={2}>
            {result.snippet}
          </ThemedText>
        )}
        
        <ThemedView style={styles.metaRow}>
          {result.feedTitle && (
            <ThemedText type="small" style={styles.feedTitle} numberOfLines={1}>
              {result.feedTitle}
            </ThemedText>
          )}
          {result.published && (
            <ThemedText type="small" style={styles.date}>
              {formatDate(result.published)}
            </ThemedText>
          )}
        </ThemedView>
        
        {result.type === 'feed' && (
          <ThemedView style={styles.feedBadge}>
            <ThemedText type="small" style={styles.feedBadgeText}>
              Feed
            </ThemedText>
          </ThemedView>
        )}
      </ThemedView>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: Spacing.three,
    padding: Spacing.three,
    marginBottom: Spacing.two,
    borderWidth: 1,
    borderColor: '#e5e5ea',
  },
  content: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    marginBottom: Spacing.one,
  },
  snippet: {
    fontSize: 14,
    color: '#8e8e93',
    marginBottom: Spacing.two,
    lineHeight: 20,
  },
  metaRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.two,
  },
  feedTitle: {
    color: '#007AFF',
    flex: 1,
  },
  date: {
    color: '#8e8e93',
    fontSize: 12,
  },
  feedBadge: {
    alignSelf: 'flex-start',
    paddingHorizontal: Spacing.two,
    paddingVertical: Spacing.one,
    backgroundColor: '#007AFF20',
    borderRadius: Spacing.one,
    marginTop: Spacing.two,
  },
  feedBadgeText: {
    color: '#007AFF',
    fontSize: 11,
    fontWeight: '600',
    textTransform: 'uppercase',
  },
});
