import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Modal,
  Alert,
  RefreshControl,
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../src/constants/colors';
import { api } from '../../src/services/api';
import { format } from 'date-fns';

export default function ActivityScreen() {
  const [activities, setActivities] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [newActivity, setNewActivity] = useState({
    exercise_name: '',
    duration_minutes: '',
    sets: '',
    reps: '',
    weight_kg: '',
    rpe: '',
    calories_burned: '',
    notes: '',
  });

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

  const loadActivities = async () => {
    try {
      const data = await api.getActivities();
      setActivities(data);
    } catch (error) {
      console.error('Error loading activities:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const onRefresh = async () => {
    setRefreshing(true);
    await loadActivities();
    setRefreshing(false);
  };

  const handleLogActivity = async () => {
    if (!newActivity.exercise_name || !newActivity.duration_minutes) {
      Alert.alert('Error', 'Please enter exercise name and duration');
      return;
    }

    try {
      await api.logActivity({
        ...newActivity,
        duration_minutes: parseInt(newActivity.duration_minutes),
        sets: newActivity.sets ? parseInt(newActivity.sets) : null,
        reps: newActivity.reps ? parseInt(newActivity.reps) : null,
        weight_kg: newActivity.weight_kg ? parseFloat(newActivity.weight_kg) : null,
        rpe: newActivity.rpe ? parseInt(newActivity.rpe) : null,
        calories_burned: newActivity.calories_burned ? parseInt(newActivity.calories_burned) : null,
      });
      
      setShowModal(false);
      setNewActivity({
        exercise_name: '',
        duration_minutes: '',
        sets: '',
        reps: '',
        weight_kg: '',
        rpe: '',
        calories_burned: '',
        notes: '',
      });
      loadActivities();
    } catch (error) {
      Alert.alert('Error', 'Failed to log activity');
    }
  };

  const quickExercises = [
    'Running', 'Walking', 'Cycling', 'Weight Training',
    'Yoga', 'Swimming', 'HIIT', 'Stretching',
  ];

  const getTotalCaloriesBurned = () => {
    return activities.reduce((sum, a) => sum + (a.calories_burned || 0), 0);
  };

  if (isLoading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={colors.primary} />
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <View style={styles.header}>
        <Text style={styles.title}>Activity</Text>
        <TouchableOpacity
          style={styles.addButton}
          onPress={() => setShowModal(true)}
        >
          <Ionicons name="add" size={24} color={colors.text} />
        </TouchableOpacity>
      </View>

      {/* Summary Card */}
      <View style={styles.summaryCard}>
        <View style={styles.summaryItem}>
          <Ionicons name="fitness" size={24} color={colors.secondary} />
          <Text style={styles.summaryNumber}>{activities.length}</Text>
          <Text style={styles.summaryLabel}>Total Workouts</Text>
        </View>
        <View style={styles.summaryDivider} />
        <View style={styles.summaryItem}>
          <Ionicons name="flame" size={24} color={colors.error} />
          <Text style={styles.summaryNumber}>{getTotalCaloriesBurned()}</Text>
          <Text style={styles.summaryLabel}>Calories Burned</Text>
        </View>
      </View>

      <ScrollView
        style={styles.content}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={colors.primary}
          />
        }
      >
        {activities.length === 0 ? (
          <View style={styles.emptyState}>
            <Ionicons name="barbell-outline" size={64} color={colors.textMuted} />
            <Text style={styles.emptyText}>No activities logged yet</Text>
            <Text style={styles.emptySubtext}>Tap + to log your workout</Text>
          </View>
        ) : (
          activities.map((activity) => (
            <View key={activity.id} style={styles.activityCard}>
              <View style={styles.activityIcon}>
                <Ionicons name="barbell" size={24} color={colors.secondary} />
              </View>
              <View style={styles.activityInfo}>
                <Text style={styles.activityName}>{activity.exercise_name}</Text>
                <View style={styles.activityMeta}>
                  <Text style={styles.activityMetaText}>
                    {activity.duration_minutes} min
                  </Text>
                  {activity.sets && activity.reps && (
                    <Text style={styles.activityMetaText}>
                      {activity.sets}x{activity.reps}
                    </Text>
                  )}
                  {activity.weight_kg && (
                    <Text style={styles.activityMetaText}>
                      {activity.weight_kg}kg
                    </Text>
                  )}
                  {activity.rpe && (
                    <Text style={styles.activityRPE}>RPE {activity.rpe}</Text>
                  )}
                </View>
                <Text style={styles.activityDate}>
                  {format(new Date(activity.created_at), 'MMM d, h:mm a')}
                </Text>
              </View>
              {activity.calories_burned && (
                <View style={styles.activityCalories}>
                  <Text style={styles.caloriesNumber}>{activity.calories_burned}</Text>
                  <Text style={styles.caloriesLabel}>kcal</Text>
                </View>
              )}
            </View>
          ))
        )}
      </ScrollView>

      {/* Add Activity Modal */}
      <Modal visible={showModal} animationType="slide" transparent>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.modalOverlay}
        >
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>Log Activity</Text>
              <TouchableOpacity onPress={() => setShowModal(false)}>
                <Ionicons name="close" size={24} color={colors.text} />
              </TouchableOpacity>
            </View>

            <ScrollView style={styles.modalScroll}>
              {/* Quick Select */}
              <Text style={styles.sectionLabel}>Quick Select</Text>
              <View style={styles.quickSelectGrid}>
                {quickExercises.map((exercise) => (
                  <TouchableOpacity
                    key={exercise}
                    style={[
                      styles.quickSelectButton,
                      newActivity.exercise_name === exercise && styles.quickSelectActive,
                    ]}
                    onPress={() => setNewActivity({ ...newActivity, exercise_name: exercise })}
                  >
                    <Text
                      style={[
                        styles.quickSelectText,
                        newActivity.exercise_name === exercise && styles.quickSelectTextActive,
                      ]}
                    >
                      {exercise}
                    </Text>
                  </TouchableOpacity>
                ))}
              </View>

              {/* Custom Exercise Name */}
              <TextInput
                style={styles.input}
                placeholder="Or enter exercise name *"
                placeholderTextColor={colors.textMuted}
                value={newActivity.exercise_name}
                onChangeText={(text) => setNewActivity({ ...newActivity, exercise_name: text })}
              />

              {/* Duration and Calories */}
              <View style={styles.inputRow}>
                <View style={styles.halfInput}>
                  <Text style={styles.inputLabel}>Duration (min) *</Text>
                  <TextInput
                    style={styles.input}
                    placeholder="0"
                    placeholderTextColor={colors.textMuted}
                    keyboardType="numeric"
                    value={newActivity.duration_minutes}
                    onChangeText={(text) => setNewActivity({ ...newActivity, duration_minutes: text })}
                  />
                </View>
                <View style={styles.halfInput}>
                  <Text style={styles.inputLabel}>Calories Burned</Text>
                  <TextInput
                    style={styles.input}
                    placeholder="0"
                    placeholderTextColor={colors.textMuted}
                    keyboardType="numeric"
                    value={newActivity.calories_burned}
                    onChangeText={(text) => setNewActivity({ ...newActivity, calories_burned: text })}
                  />
                </View>
              </View>

              {/* Sets, Reps, Weight */}
              <View style={styles.inputRow}>
                <View style={styles.thirdInput}>
                  <Text style={styles.inputLabel}>Sets</Text>
                  <TextInput
                    style={styles.input}
                    placeholder="0"
                    placeholderTextColor={colors.textMuted}
                    keyboardType="numeric"
                    value={newActivity.sets}
                    onChangeText={(text) => setNewActivity({ ...newActivity, sets: text })}
                  />
                </View>
                <View style={styles.thirdInput}>
                  <Text style={styles.inputLabel}>Reps</Text>
                  <TextInput
                    style={styles.input}
                    placeholder="0"
                    placeholderTextColor={colors.textMuted}
                    keyboardType="numeric"
                    value={newActivity.reps}
                    onChangeText={(text) => setNewActivity({ ...newActivity, reps: text })}
                  />
                </View>
                <View style={styles.thirdInput}>
                  <Text style={styles.inputLabel}>Weight (kg)</Text>
                  <TextInput
                    style={styles.input}
                    placeholder="0"
                    placeholderTextColor={colors.textMuted}
                    keyboardType="numeric"
                    value={newActivity.weight_kg}
                    onChangeText={(text) => setNewActivity({ ...newActivity, weight_kg: text })}
                  />
                </View>
              </View>

              {/* RPE */}
              <Text style={styles.inputLabel}>RPE (1-10)</Text>
              <View style={styles.rpeRow}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => (
                  <TouchableOpacity
                    key={num}
                    style={[
                      styles.rpeButton,
                      newActivity.rpe === num.toString() && styles.rpeButtonActive,
                    ]}
                    onPress={() => setNewActivity({ ...newActivity, rpe: num.toString() })}
                  >
                    <Text
                      style={[
                        styles.rpeText,
                        newActivity.rpe === num.toString() && styles.rpeTextActive,
                      ]}
                    >
                      {num}
                    </Text>
                  </TouchableOpacity>
                ))}
              </View>

              {/* Notes */}
              <TextInput
                style={[styles.input, styles.textArea]}
                placeholder="Notes (optional)"
                placeholderTextColor={colors.textMuted}
                multiline
                numberOfLines={2}
                value={newActivity.notes}
                onChangeText={(text) => setNewActivity({ ...newActivity, notes: text })}
              />
            </ScrollView>

            <TouchableOpacity style={styles.submitButton} onPress={handleLogActivity}>
              <Text style={styles.submitButtonText}>Log Activity</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  loadingContainer: {
    flex: 1,
    backgroundColor: colors.background,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    paddingBottom: 12,
  },
  title: {
    fontSize: 28,
    fontWeight: '700',
    color: colors.text,
  },
  addButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  summaryCard: {
    flexDirection: 'row',
    backgroundColor: colors.backgroundCard,
    marginHorizontal: 20,
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
  },
  summaryItem: {
    flex: 1,
    alignItems: 'center',
  },
  summaryNumber: {
    fontSize: 28,
    fontWeight: '700',
    color: colors.text,
    marginTop: 4,
  },
  summaryLabel: {
    fontSize: 12,
    color: colors.textSecondary,
    marginTop: 4,
  },
  summaryDivider: {
    width: 1,
    backgroundColor: colors.border,
    marginHorizontal: 16,
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  emptyState: {
    alignItems: 'center',
    paddingTop: 60,
  },
  emptyText: {
    fontSize: 18,
    fontWeight: '600',
    color: colors.text,
    marginTop: 16,
  },
  emptySubtext: {
    fontSize: 14,
    color: colors.textSecondary,
    marginTop: 4,
  },
  activityCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.backgroundCard,
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  activityIcon: {
    width: 48,
    height: 48,
    borderRadius: 12,
    backgroundColor: 'rgba(29, 185, 84, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  activityInfo: {
    flex: 1,
  },
  activityName: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text,
  },
  activityMeta: {
    flexDirection: 'row',
    gap: 8,
    marginTop: 4,
    flexWrap: 'wrap',
  },
  activityMetaText: {
    fontSize: 12,
    color: colors.textSecondary,
    backgroundColor: colors.background,
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  activityRPE: {
    fontSize: 12,
    color: colors.primary,
    fontWeight: '600',
  },
  activityDate: {
    fontSize: 11,
    color: colors.textMuted,
    marginTop: 4,
  },
  activityCalories: {
    alignItems: 'center',
  },
  caloriesNumber: {
    fontSize: 20,
    fontWeight: '700',
    color: colors.error,
  },
  caloriesLabel: {
    fontSize: 10,
    color: colors.textMuted,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.7)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: colors.backgroundLight,
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 20,
    maxHeight: '90%',
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: colors.text,
  },
  modalScroll: {
    maxHeight: 450,
  },
  sectionLabel: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.textSecondary,
    marginBottom: 8,
  },
  quickSelectGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    marginBottom: 16,
  },
  quickSelectButton: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    backgroundColor: colors.backgroundCard,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: colors.border,
  },
  quickSelectActive: {
    backgroundColor: 'rgba(255, 107, 53, 0.1)',
    borderColor: colors.primary,
  },
  quickSelectText: {
    fontSize: 13,
    color: colors.textMuted,
  },
  quickSelectTextActive: {
    color: colors.primary,
    fontWeight: '600',
  },
  input: {
    backgroundColor: colors.backgroundCard,
    borderRadius: 8,
    padding: 14,
    fontSize: 16,
    color: colors.text,
    marginBottom: 12,
    borderWidth: 1,
    borderColor: colors.border,
  },
  textArea: {
    height: 60,
    textAlignVertical: 'top',
  },
  inputRow: {
    flexDirection: 'row',
    gap: 12,
  },
  halfInput: {
    flex: 1,
  },
  thirdInput: {
    flex: 1,
  },
  inputLabel: {
    fontSize: 12,
    color: colors.textMuted,
    marginBottom: 4,
  },
  rpeRow: {
    flexDirection: 'row',
    gap: 4,
    marginBottom: 16,
  },
  rpeButton: {
    flex: 1,
    paddingVertical: 10,
    backgroundColor: colors.backgroundCard,
    borderRadius: 6,
    alignItems: 'center',
  },
  rpeButtonActive: {
    backgroundColor: colors.primary,
  },
  rpeText: {
    fontSize: 12,
    color: colors.textMuted,
    fontWeight: '600',
  },
  rpeTextActive: {
    color: colors.text,
  },
  submitButton: {
    backgroundColor: colors.primary,
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 12,
  },
  submitButtonText: {
    color: colors.text,
    fontSize: 16,
    fontWeight: '700',
  },
});