import React, { useEffect, useState, useCallback } from 'react';
import { View, Text, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TouchableOpacity, useColorScheme } from 'react-native';
import { Colors } from '@/constants/theme';
import { useAuthStore } from '@/store/authStore';
import api from '@/services/api';
import StatCard from '@/components/common/StatCard';
import BookingItem from '@/components/booking/BookingItem';
import { useRouter, useNavigation, useFocusEffect } from 'expo-router';
import Animated, { FadeInDown, FadeIn } from 'react-native-reanimated';
import { Ionicons } from '@expo/vector-icons';

import ClientDashboard from '@/components/dashboard/ClientDashboard';
import StaffDashboard from '@/components/staff/StaffDashboard';

export default function DashboardSwitcher() {
  const { user_type } = useAuthStore();
  
  if (user_type === 4) {
    return <StaffDashboard />;
  }
  
  return <ClientDashboard />;
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  loaderContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  welcomeSection: { 
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 24, 
    paddingTop: 10,
    paddingBottom: 20
  },
  greeting: { fontSize: 26, fontWeight: '800', letterSpacing: -0.5 },
  subtitle: { fontSize: 15, marginTop: 4, fontWeight: '400' },
  avatarCircle: {
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center'
  },
  statsGrid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', paddingHorizontal: 20 },
  sectionHeader: { 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    paddingHorizontal: 24, 
    marginTop: 15,
    marginBottom: 15 
  },
  sectionTitle: { fontSize: 20, fontWeight: '700', letterSpacing: -0.5 },
  seeAll: { fontSize: 14, fontWeight: '600' },
  bookingsList: { paddingHorizontal: 20 },
  emptyContainer: { padding: 40, alignItems: 'center', justifyContent: 'center' },
  emptyText: { fontSize: 16, textAlign: 'center' },
});