import React from 'react';
import { useNavigation } from '@react-navigation/native';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Ionicons } from '@expo/vector-icons';
import { COLORS } from '../../constants/colors';

const MenuScreen = () => {
  const navigation = useNavigation();

  const menuSections = [
    {
      title: 'Karz',
      items: [
        { id: 1, title: 'Karz sargyt', icon: 'cash', description: 'Karz almak üçin sargytlar' },
        { id: 2, title: 'Karzyň galyndysy', icon: 'stats-chart', description: 'Karzyň galyndylary' },
        { id: 3, title: 'Karzyň ýapylandygy barada güwanamalar', icon: 'document-text', description: 'Güwanama al' },
      ],
    },
    {
      title: 'Kartlar',
      items: [
        { id: 4, title: 'Täze kart açmak', icon: 'add-circle', description: 'Täze kart aç' },
        { id: 5, title: 'Kart hereketleri', icon: 'swap-horizontal', description: 'Hereketler' },
        { id: 6, title: 'Kart rekwizitler', icon: 'information-circle', description: 'Rekwizitler' },
        { id: 7, title: 'Kart galyndylary', icon: 'wallet', description: 'Galyndylary' },
        { id: 8, title: 'Kart pin bukjalar', icon: 'key', description: 'Pin bukjalar' },
      ],
    },
    // {
    //   title: 'Halkara tölegler',
    //   items: [
    //     { id: 9, title: 'Visa/Master tölegleri (talyplar üçin)', icon: 'logo-usd', description: 'Visa/Master' },
    //     { id: 10, title: 'Sber tölegler (talyplar üçin)', icon: 'globe', description: 'Sber tölegler' },
    //   ],
    // },
  ];

  const handleMenuItemPress = (item) => {
    if (item.id === 1) {
      navigation.navigate('LoanOrders');
    } else if (item.id === 2) {
      navigation.navigate('LoanRemainingOrders');
    } else if (item.id === 3) {
      navigation.navigate('LoanPaidOffLetterOrders');
    } else if (item.id === 4) {
      navigation.navigate('CardOrders');
    } else if (item.id === 5) {
      navigation.navigate('CardTransactionOrders');
    } else if (item.id === 6) {
      navigation.navigate('CardRequisiteOrders');
    } else if (item.id === 7) {
      navigation.navigate('CardBalanceOrders');
    } else if (item.id === 8) {
      navigation.navigate('CardPinOrders');
    } else {
      console.log('Menu item pressed:', item.title);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" />
      
      <View style={styles.header}>
        <Text style={styles.headerTitle}>Hyzmatlar</Text>
      </View>

      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        {menuSections.map((section, sectionIndex) => (
          <View key={sectionIndex} style={styles.section}>
            <Text style={styles.sectionTitle}>{section.title}</Text>
            <View style={styles.sectionContent}>
              {section.items.map((item, itemIndex) => (
                <TouchableOpacity
                  key={item.id}
                  style={[
                    styles.menuItem,
                    itemIndex === section.items.length - 1 && styles.lastMenuItem,
                  ]}
                  onPress={() => handleMenuItemPress(item)}
                >
                  <View style={styles.menuItemLeft}>
                    <View style={styles.menuItemIcon}>
                      <Ionicons name={item.icon} size={24} color={COLORS.primary} />
                    </View>
                    <View style={styles.menuItemTextContainer}>
                      <Text style={styles.menuItemTitle}>{item.title}</Text>
                      <Text style={styles.menuItemDescription}>{item.description}</Text>
                    </View>
                  </View>
                  <Ionicons name="chevron-forward" size={20} color={COLORS.gray[400]} />
                </TouchableOpacity>
              ))}
            </View>
          </View>
        ))}
        
        <View style={styles.bottomSpacing} />
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.backgroundSecondary,
  },
  header: {
    paddingHorizontal: 24,
    paddingTop: 16,
    paddingBottom: 24,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.gray[200],
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: COLORS.textPrimary,
  },
  scrollView: {
    flex: 1,
  },
  section: {
    marginTop: 24,
    marginHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: COLORS.textPrimary,
    marginBottom: 12,
    paddingHorizontal: 4,
  },
  sectionContent: {
    backgroundColor: COLORS.white,
    borderRadius: 12,
    overflow: 'hidden',
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.gray[200],
  },
  lastMenuItem: {
    borderBottomWidth: 0,
  },
  menuItemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  menuItemIcon: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: COLORS.backgroundSecondary,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 16,
  },
  menuItemTextContainer: {
    flex: 1,
  },
  menuItemTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: COLORS.textPrimary,
    marginBottom: 4,
  },
  menuItemDescription: {
    fontSize: 14,
    color: COLORS.textSecondary,
    lineHeight: 18,
  },
  bottomSpacing: {
    height: 24,
  },
});

export default MenuScreen;