import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { ScreenContainer } from '../../components/layout/ScreenContainer';
import { AnimatedCard } from '../../components/ui/AnimatedCard';
import { useResponsive } from '../../hooks/useResponsive';
import { colors, spacing, radii } from '../../theme';

interface AdminCard {
  title: string;
  description: string;
  icon: keyof typeof Ionicons.glyphMap;
  route: string;
  color: string;
  bgColor: string;
}

const adminCards: AdminCard[] = [
  { title: 'Users', description: 'Manage users and roles', icon: 'people-outline', route: 'UserList', color: colors.primary[600], bgColor: colors.primary[50] },
  { title: 'Roles & Permissions', description: 'View roles and permissions', icon: 'shield-checkmark-outline', route: 'RoleList', color: colors.success[600], bgColor: colors.success[50] },
  { title: 'Geofences', description: 'Manage geofence zones', icon: 'location-outline', route: 'GeofenceList', color: colors.warning[600], bgColor: colors.warning[50] },
  { title: 'Reports', description: 'View job reports and stats', icon: 'bar-chart-outline', route: 'Report', color: colors.info[600], bgColor: colors.info[50] },
  { title: 'Audit Log', description: 'View system activity', icon: 'document-text-outline', route: 'AuditLog', color: colors.danger[600], bgColor: colors.danger[50] },
];

export default function AdminHomeScreen() {
  const navigation = useNavigation<any>();
  const { contentPadding, cardColumns, gutter, fontSize } = useResponsive();

  const numColumns = cardColumns < 2 ? 2 : cardColumns;
  const cardWidth = numColumns === 2 ? '48%' : '31%';

  return (
    <ScreenContainer
      title="Admin"
      subtitle="Administration panel"
      scroll={true}
      contentPadding={contentPadding}
    >
      <View style={[styles.grid, { gap: gutter }]}>
        {adminCards.map((card, index) => (
          <AnimatedCard
            key={card.route}
            delay={index * 60}
            style={[styles.card, { width: cardWidth }]}
          >
            <TouchableOpacity
              onPress={() => navigation.navigate(card.route)}
              activeOpacity={0.7}
              style={styles.cardInner}
            >
              <View style={{ backgroundColor: card.bgColor, width: 48, height: 48, borderRadius: radii.lg, justifyContent: 'center', alignItems: 'center', marginBottom: spacing.md }}>
                <Ionicons name={card.icon} size={24} color={card.color} />
              </View>
              <Text style={[styles.cardTitle, { fontSize: fontSize.body }]}>{card.title}</Text>
              <Text style={[styles.cardDesc, { fontSize: fontSize.caption, marginTop: spacing.xs }]}>{card.description}</Text>
              <Ionicons name="chevron-forward" size={16} color={colors.gray[300]} style={{ marginTop: spacing.sm }} />
            </TouchableOpacity>
          </AnimatedCard>
        ))}
      </View>
    </ScreenContainer>
  );
}

const styles = StyleSheet.create({
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  card: {
    alignItems: 'stretch',
  },
  cardInner: {
    alignItems: 'center',
  },
  cardTitle: {
    fontWeight: '600',
    color: colors.gray[900],
    textAlign: 'center',
  },
  cardDesc: {
    color: colors.gray[500],
    textAlign: 'center',
  },
});