/**
 * More tab — menu grid for Properties, Email, Marketing, Analytics,
 * Documents, Calendar, AI, and Settings.
 */

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useTheme } from '../themes/ThemeProvider';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { MoreStackParamList } from '../navigation/stacks/MoreStack';

type Props = NativeStackScreenProps<MoreStackParamList, 'MoreMenu'>;

interface MenuItem {
  label: string;
  icon: string;
  screen: keyof MoreStackParamList;
  description: string;
}

const menuItems: MenuItem[] = [
  { label: 'Properties', icon: '🏘', screen: 'PropertyList', description: 'Listings & search' },
  { label: 'Email', icon: '✉️', screen: 'Inbox', description: 'Inbox & compose' },
  { label: 'Marketing', icon: '📣', screen: 'ContentCalendar', description: 'Content calendar' },
  { label: 'Staging', icon: '🪑', screen: 'Staging', description: 'Virtual staging' },
  { label: 'Video', icon: '🎬', screen: 'VideoGen', description: 'Video generation' },
  { label: 'Analytics', icon: '📊', screen: 'AnalyticsDashboard', description: 'KPIs & reports' },
  { label: 'Leaderboard', icon: '🏆', screen: 'Leaderboard', description: 'Team rankings' },
  { label: 'My Goals', icon: '🎯', screen: 'MyGoals', description: 'Pacing & targets' },
  { label: 'Documents', icon: '📄', screen: 'DocList', description: 'Files & eSign' },
  { label: 'Calendar', icon: '📅', screen: 'Calendar', description: 'Events & sync' },
  { label: 'AI Assistant', icon: '🤖', screen: 'ChatScreen', description: 'Ask anything' },
  { label: 'Settings', icon: '⚙️', screen: 'Settings', description: 'App settings' },
];

export default function MoreMenu({ navigation }: Props) {
  const { theme } = useTheme();

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: theme.colors.background }]} edges={['bottom']}>
      <ScrollView contentContainerStyle={styles.grid}>
        {menuItems.map((item) => (
          <TouchableOpacity
            key={item.screen}
            style={[styles.card, theme.shadow.sm, { backgroundColor: theme.colors.card }]}
            onPress={() => navigation.navigate(item.screen as any)}
            activeOpacity={0.7}
          >
            <Text style={styles.icon}>{item.icon}</Text>
            <Text style={[styles.label, { color: theme.colors.text }]}>{item.label}</Text>
            <Text style={[styles.description, { color: theme.colors.textSecondary }]}>
              {item.description}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 12,
    gap: 12,
  },
  card: {
    width: '47%',
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
  },
  icon: {
    fontSize: 32,
    marginBottom: 8,
  },
  label: {
    fontSize: 15,
    fontWeight: '600',
    marginBottom: 4,
  },
  description: {
    fontSize: 12,
    textAlign: 'center',
  },
});