info-target-mobile/screens/profile/ui/ProfileScreen.tsx

import { useTheme } from '@/components/ThemeContext';
import { useGlobalRefresh } from '@/components/ui/RefreshContext';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'expo-router';
import {
  Award,
  Bell,
  BookAIcon,
  ChevronRight,
  HandCoins,
  Megaphone,
  Package,
  Settings,
  User,
  Users,
} from 'lucide-react-native';
import { useTranslation } from 'react-i18next';
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RefreshControl } from 'react-native-gesture-handler';
import { user_api } from '../lib/api';

export default function Profile() {
  const router = useRouter();
  const { onRefresh, refreshing } = useGlobalRefresh();
  const { isDark } = useTheme();
  const { t } = useTranslation();

  const { data: me, isLoading } = useQuery({
    queryKey: ['get_me'],
    queryFn: () => user_api.getMe(),
  });

  const sections = [
    {
      title: 'Shaxsiy',
      items: [
        { icon: User, label: "Shaxsiy ma'lumotlar", route: '/profile/personal-info' },
        { icon: Users, label: 'Xodimlar', route: '/profile/employees' },
        { icon: Bell, label: 'Bildirishnomalar', route: '/profile/notification' },
      ],
    },
    {
      title: 'Faoliyat',
      items: [
        { icon: Megaphone, label: "E'lonlar", route: '/profile/my-ads' },
        { icon: Award, label: 'Bonuslar', route: '/profile/bonuses' },
        { icon: Package, label: 'Xizmatlar', route: '/profile/products' },
        ...(me?.data.data.can_create_referral
          ? [
              {
                icon: HandCoins,
                label: 'Refferallarim',
                route: '/profile/my-referrals',
              },
            ]
          : []),
      ],
    },
    {
      title: 'Sozlamalar',
      items: [
        { icon: Settings, label: 'Sozlamalar', route: '/profile/settings' },
        { icon: BookAIcon, label: "Foydalanish qo'lanmasi", route: '/profile/manual' },
      ],
    },
  ];

  return (
    <ScrollView
      style={[styles.content, isDark ? styles.darkBg : styles.lightBg]}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          colors={['#3b82f6']}
          tintColor="#3b82f6"
        />
      }
    >
      {sections.map((section, index) => (
        <View key={index} style={styles.section}>
          <Text style={[styles.sectionTitle, isDark ? styles.darkSubText : styles.lightSubText]}>
            {t(section.title)}
          </Text>

          <View style={styles.sectionContent}>
            {section.items.map((item, idx) => (
              <TouchableOpacity
                key={idx}
                style={[styles.card, isDark ? styles.darkCard : styles.lightCard]}
                onPress={() => router.push(item.route as any)}
                activeOpacity={0.7}
              >
                <View
                  style={[styles.iconContainer, isDark ? styles.darkIconBg : styles.lightIconBg]}
                >
                  <item.icon size={24} color="#3b82f6" />
                </View>

                <Text style={[styles.cardLabel, isDark ? styles.darkText : styles.lightText]}>
                  {t(item.label)}
                </Text>

                <ChevronRight size={20} color={isDark ? '#64748b' : '#94a3b8'} />
              </TouchableOpacity>
            ))}
          </View>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    marginBottom: 50,
  },

  darkBg: {
    backgroundColor: '#0f172a',
  },
  lightBg: {
    backgroundColor: '#f8fafc',
  },

  section: {
    marginBottom: 4,
    paddingTop: 16,
  },

  sectionTitle: {
    fontSize: 12,
    fontWeight: '700',
    textTransform: 'uppercase',
    letterSpacing: 1,
    paddingHorizontal: 20,
    marginBottom: 12,
  },

  darkSubText: {
    color: '#64748b',
  },
  lightSubText: {
    color: '#64748b',
  },

  sectionContent: {
    paddingHorizontal: 16,
    gap: 10,
  },

  card: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 14,
    padding: 16,
    gap: 14,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 2,
  },

  darkCard: {
    backgroundColor: '#1e293b',
    borderWidth: 1,
    borderColor: '#334155',
  },
  lightCard: {
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: '#f1f5f9',
  },

  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },

  darkIconBg: {
    backgroundColor: 'rgba(59, 130, 246, 0.15)',
  },
  lightIconBg: {
    backgroundColor: 'rgba(59, 130, 246, 0.1)',
  },

  cardLabel: {
    flex: 1,
    fontSize: 16,
    fontWeight: '600',
    letterSpacing: 0.2,
  },

  darkText: {
    color: '#f1f5f9',
  },
  lightText: {
    color: '#0f172a',
  },
});