Untitled

import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Search, Clock, Bookmark, ChevronRight } from 'lucide-react-native';

interface HistoryItem {
  id: string;
  problem: string;
  answer: string;
  topic: string;
  difficulty: 'Easy' | 'Medium' | 'Hard';
  timestamp: string;
  isBookmarked: boolean;
}

const mockHistory: HistoryItem[] = [
  {
    id: '1',
    problem: '2x + 5 = 13',
    answer: 'x = 4',
    topic: 'Linear Equations',
    difficulty: 'Easy',
    timestamp: '2 hours ago',
    isBookmarked: true,
  },
  {
    id: '2',
    problem: '∫x²dx',
    answer: 'x³/3 + C',
    topic: 'Integration',
    difficulty: 'Hard',
    timestamp: '1 day ago',
    isBookmarked: false,
  },
  {
    id: '3',
    problem: 'Area of circle r=5',
    answer: '25π ≈ 78.54',
    topic: 'Geometry',
    difficulty: 'Medium',
    timestamp: '2 days ago',
    isBookmarked: true,
  },
  {
    id: '4',
    problem: '(x + 3)² = 25',
    answer: 'x = 2 or x = -8',
    topic: 'Quadratic Equations',
    difficulty: 'Medium',
    timestamp: '3 days ago',
    isBookmarked: false,
  },
  {
    id: '5',
    problem: 'sin(π/4)',
    answer: '√2/2 ≈ 0.707',
    topic: 'Trigonometry',
    difficulty: 'Medium',
    timestamp: '1 week ago',
    isBookmarked: true,
  },
];

export default function HistoryScreen() {
  const [searchQuery, setSearchQuery] = useState('');
  const [filter, setFilter] = useState<'all' | 'bookmarked'>('all');

  const filteredHistory = mockHistory.filter(item => {
    const matchesSearch = item.problem.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         item.topic.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesFilter = filter === 'all' || (filter === 'bookmarked' && item.isBookmarked);
    return matchesSearch && matchesFilter;
  });

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case 'Easy': return '#10B981';
      case 'Medium': return '#F59E0B';
      case 'Hard': return '#EF4444';
      default: return '#6B7280';
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>Problem History</Text>
        <Text style={styles.headerSubtitle}>Review your solved problems</Text>
      </View>

      <View style={styles.searchContainer}>
        <View style={styles.searchBar}>
          <Search size={20} color="#6B7280" />
          <TextInput
            style={styles.searchInput}
            placeholder="Search problems or topics..."
            value={searchQuery}
            onChangeText={setSearchQuery}
            placeholderTextColor="#9CA3AF"
          />
        </View>
      </View>

      <View style={styles.filterContainer}>
        <TouchableOpacity
          style={[styles.filterButton, filter === 'all' && styles.filterButtonActive]}
          onPress={() => setFilter('all')}>
          <Text style={[styles.filterText, filter === 'all' && styles.filterTextActive]}>
            All Problems
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.filterButton, filter === 'bookmarked' && styles.filterButtonActive]}
          onPress={() => setFilter('bookmarked')}>
          <Bookmark size={16} color={filter === 'bookmarked' ? 'white' : '#6B7280'} />
          <Text style={[styles.filterText, filter === 'bookmarked' && styles.filterTextActive]}>
            Bookmarked
          </Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.historyList} showsVerticalScrollIndicator={false}>
        {filteredHistory.map((item) => (
          <TouchableOpacity key={item.id} style={styles.historyCard}>
            <View style={styles.cardHeader}>
              <View style={styles.cardHeaderLeft}>
                <Text style={styles.topicText}>{item.topic}</Text>
                <View style={styles.cardMeta}>
                  <Clock size={14} color="#9CA3AF" />
                  <Text style={styles.timestampText}>{item.timestamp}</Text>
                </View>
              </View>
              <View style={styles.cardHeaderRight}>
                {item.isBookmarked && (
                  <View style={styles.bookmarkIcon}>
                    <Bookmark size={16} color="#F59E0B" fill="#F59E0B" />
                  </View>
                )}
                <View style={[styles.difficultyBadge, { backgroundColor: getDifficultyColor(item.difficulty) + '20' }]}>
                  <Text style={[styles.difficultyText, { color: getDifficultyColor(item.difficulty) }]}>
                    {item.difficulty}
                  </Text>
                </View>
              </View>
            </View>

            <View style={styles.cardContent}>
              <Text style={styles.problemText}>{item.problem}</Text>
              <Text style={styles.answerText}>= {item.answer}</Text>
            </View>

            <View style={styles.cardFooter}>
              <Text style={styles.viewSolutionText}>View step-by-step solution</Text>
              <ChevronRight size={16} color="#9CA3AF" />
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8FAFC',
  },
  header: {
    padding: 20,
    paddingBottom: 10,
  },
  headerTitle: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#1F2937',
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 16,
    color: '#6B7280',
    lineHeight: 24,
  },
  searchContainer: {
    paddingHorizontal: 20,
    marginBottom: 16,
  },
  searchBar: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 12,
    borderRadius: 12,
    gap: 12,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: '#1F2937',
  },
  filterContainer: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    marginBottom: 20,
    gap: 12,
  },
  filterButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: '#F3F4F6',
    gap: 6,
  },
  filterButtonActive: {
    backgroundColor: '#3B82F6',
  },
  filterText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#6B7280',
  },
  filterTextActive: {
    color: 'white',
  },
  historyList: {
    flex: 1,
    paddingHorizontal: 20,
  },
  historyCard: {
    backgroundColor: 'white',
    borderRadius: 16,
    padding: 20,
    marginBottom: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 16,
  },
  cardHeaderLeft: {
    flex: 1,
  },
  topicText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#3B82F6',
    marginBottom: 4,
  },
  cardMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  timestampText: {
    fontSize: 12,
    color: '#9CA3AF',
  },
  cardHeaderRight: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  bookmarkIcon: {
    padding: 4,
  },
  difficultyBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 8,
  },
  difficultyText: {
    fontSize: 12,
    fontWeight: '600',
  },
  cardContent: {
    marginBottom: 16,
  },
  problemText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1F2937',
    fontFamily: 'monospace',
    marginBottom: 8,
  },
  answerText: {
    fontSize: 16,
    color: '#059669',
    fontWeight: '600',
    fontFamily: 'monospace',
  },
  cardFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: '#F3F4F6',
  },
  viewSolutionText: {
    fontSize: 14,
    color: '#6B7280',
    fontWeight: '500',
  },
});