import React from 'react';
import { View, ScrollView } from 'react-native';
import { useRouter } from 'expo-router';
import { AppContainer, MyText, tw, MyTouchableOpacity, ProfileImage, colors } from 'common-ui';
import TabLayoutWrapper from '@/components/TabLayoutWrapper';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';
import NextOrderGlimpse from '@/components/NextOrderGlimpse';
import { useAuth } from '@/src/contexts/AuthContext';

export default function Me() {
  const router = useRouter();
  const { logout } = useAuth();

  const menuSections = [
    {
      title: 'Shopping & Activity',
      items: [
        {
          title: 'My Orders',
          icon: 'receipt-outline',
          color: colors.brand600,
          onPress: () => router.push('/(drawer)/(tabs)/me/my-orders'),
          subtitle: 'Orders history & tracking'
        },
        {
          title: 'My Cart',
          icon: 'cart-outline',
          color: '#10B981',
          onPress: () => router.push('/(drawer)/(tabs)/home/cart'),
          subtitle: 'Items ready for checkout'
        },
        {
          title: 'Coupons',
          icon: 'ticket-outline',
          color: '#8B5CF6',
          onPress: () => router.push('/(drawer)/(tabs)/me/coupons'),
          subtitle: 'View active offers & rewards'
        },
      ]
    },
    {
      title: 'Saved Information',
      items: [
        {
          title: 'Addresses',
          icon: 'location-outline',
          color: '#F59E0B',
          onPress: () => router.push('/(drawer)/(tabs)/me/addresses'),
          subtitle: 'Manage delivery locations'
        },
        {
          title: 'Profile Settings',
          icon: 'person-outline',
          color: '#3B82F6',
          onPress: () => router.push('/(drawer)/(tabs)/me/edit-profile'),
          subtitle: 'Update your personal details'
        },
      ]
    },
    {
      title: 'Support',
      items: [
        {
          title: 'Help & Complaints',
          icon: 'chatbubble-ellipses-outline',
          color: '#EF4444',
          onPress: () => router.push('/(drawer)/(tabs)/me/complaints'),
          subtitle: 'Talk to our customer care'
        },
      ]
    }
  ];

  return (
    <TabLayoutWrapper>
      <View style={tw`flex-1 bg-gray-50`}>
        <ScrollView
          style={tw`flex-1`}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={tw`pb-8`}
        >
          {/* Minimal Header Section */}
          <View style={tw`px-6 pt-8 pb-10 flex-row items-center justify-between`}>
            <View>
              <MyText style={tw`text-3xl font-extrabold text-gray-900 tracking-tight`}>
                My Account
              </MyText>
              <MyText style={tw`text-gray-400 text-sm mt-1`}>
                Manage your freshyo experience
              </MyText>
            </View>
            <MyTouchableOpacity
              style={tw`bg-gray-100 p-3 rounded-2xl`}
              onPress={() => router.push('/(drawer)/(tabs)/me/edit-profile')}
            >
              <Ionicons name="settings-outline" size={22} color="#1F2937" />
            </MyTouchableOpacity>
          </View>

          {/* Upcoming Order Glimpse */}
          <NextOrderGlimpse />

          {/* Menu Sections */}
          <View style={tw`px-6`}>
            {menuSections.map((section, sIndex) => (
              <View key={sIndex} style={tw`mb-8`}>
                <MyText style={tw`text-sm font-bold text-gray-400 uppercase tracking-[2px] mb-4 px-2`}>
                  {section.title}
                </MyText>
                <View style={tw`bg-white rounded-[32px] shadow-sm border border-gray-100 overflow-hidden`}>
                  {section.items.map((item, iIndex) => (
                    <MyTouchableOpacity
                      key={iIndex}
                      onPress={item.onPress}
                      style={tw`flex-row items-center p-4.5 ${iIndex !== section.items.length - 1 ? 'border-b border-gray-50' : ''}`}
                    >
                      <View style={[tw`w-12 h-12 rounded-2xl items-center justify-center mr-4`, { backgroundColor: `${item.color}15` }]}>
                        <Ionicons name={item.icon as any} size={24} color={item.color} />
                      </View>
                      <View style={tw`flex-1`}>
                        <MyText style={tw`text-base font-semibold text-gray-800`}>{item.title}</MyText>
                        <MyText style={tw`text-xs text-gray-400 mt-0.5`}>{item.subtitle}</MyText>
                      </View>
                      <View style={tw`bg-gray-50 w-8 h-8 rounded-full items-center justify-center`}>
                        <Ionicons name="chevron-forward" size={16} color="#94A3B8" />
                      </View>
                    </MyTouchableOpacity>
                  ))}
                </View>
              </View>
            ))}

            {/* Footer / Logout */}
            <MyTouchableOpacity
              style={tw`flex-row items-center justify-center p-5 bg-white rounded-[24px] border border-red-50 shadow-sm mt-2`}
              onPress={() => logout()}
            >
              <Ionicons name="log-out-outline" size={22} color="#F43F5E" style={tw`mr-2`} />
              <MyText style={tw`text-rose-500 font-bold text-base`}>Log Out from Freshyo</MyText>
            </MyTouchableOpacity>

            <MyText style={tw`text-center text-gray-300 text-[10px] mt-12 uppercase tracking-[3px]`}>
              Version 1.2.0 • Freshyo App
            </MyText>
          </View>
        </ScrollView>
      </View>
    </TabLayoutWrapper>
  );
}