/**
 * Games Screen (GameForge)
 * Game development projects and team channels
 */

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';
import { theme } from '../theme';

export default function GamesScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>GameForge Projects</Text>
        <TouchableOpacity style={styles.addButton}>
          <Text style={styles.addIcon}>➕</Text>
        </TouchableOpacity>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        {/* Project Card */}
        <View style={styles.projectCard}>
          <View style={styles.projectHeader}>
            <Text style={styles.projectIcon}>🎮</Text>
            <View style={styles.projectInfo}>
              <Text style={styles.projectName}>Project Phoenix</Text>
              <Text style={styles.projectMeta}>5 members • 3 online</Text>
            </View>
          </View>
          
          <View style={styles.channels}>
            {['#general', '#dev', '#art', '#test'].map(channel => (
              <TouchableOpacity key={channel} style={styles.channelButton}>
                <Text style={styles.channelText}>{channel}</Text>
              </TouchableOpacity>
            ))}
          </View>

          <View style={styles.notification}>
            <Text style={styles.notificationDot}>🔴</Text>
            <Text style={styles.notificationText}>Build failed 2m ago</Text>
          </View>
        </View>

        {/* Another Project */}
        <View style={styles.projectCard}>
          <View style={styles.projectHeader}>
            <Text style={styles.projectIcon}>🎮</Text>
            <View style={styles.projectInfo}>
              <Text style={styles.projectName}>Indie Shooter</Text>
              <Text style={styles.projectMeta}>2 members • 1 online</Text>
            </View>
          </View>
          
          <View style={styles.channels}>
            {['#general', '#dev'].map(channel => (
              <TouchableOpacity key={channel} style={styles.channelButton}>
                <Text style={styles.channelText}>{channel}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* Team Status */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>TEAM STATUS</Text>
          <View style={styles.teamList}>
            {[
              { name: 'sarah.aethex', role: 'Developer', online: true },
              { name: 'mike.aethex', role: 'Artist', online: true },
              { name: 'alex.aethex', role: 'Designer', online: false },
            ].map(member => (
              <View key={member.name} style={styles.teamMember}>
                <View style={[styles.memberDot, { backgroundColor: member.online ? theme.colors.online : theme.colors.offline }]} />
                <Text style={styles.memberName}>{member.name}</Text>
                <Text style={styles.memberRole}>({member.role})</Text>
              </View>
            ))}
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.md,
  },
  headerTitle: {
    fontSize: theme.typography.fontSize.xxl,
    fontWeight: theme.typography.fontWeight.bold,
    color: theme.colors.text,
  },
  addButton: {
    width: theme.layout.touchTarget,
    height: theme.layout.touchTarget,
    justifyContent: 'center',
    alignItems: 'center',
  },
  addIcon: {
    fontSize: 24,
  },
  content: {
    padding: theme.spacing.md,
  },
  projectCard: {
    backgroundColor: theme.colors.card,
    borderRadius: theme.borderRadius.lg,
    padding: theme.spacing.lg,
    marginBottom: theme.spacing.md,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.05)',
  },
  projectHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: theme.spacing.md,
  },
  projectIcon: {
    fontSize: 32,
    marginRight: theme.spacing.md,
  },
  projectInfo: {
    flex: 1,
  },
  projectName: {
    fontSize: theme.typography.fontSize.lg,
    fontWeight: theme.typography.fontWeight.semibold,
    color: theme.colors.text,
    marginBottom: 4,
  },
  projectMeta: {
    fontSize: theme.typography.fontSize.sm,
    color: theme.colors.textSecondary,
  },
  channels: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: theme.spacing.md,
  },
  channelButton: {
    backgroundColor: theme.colors.backgroundSecondary,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    borderRadius: theme.borderRadius.base,
    marginRight: theme.spacing.sm,
    marginBottom: theme.spacing.sm,
  },
  channelText: {
    fontSize: theme.typography.fontSize.sm,
    color: theme.colors.textSecondary,
  },
  notification: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    padding: theme.spacing.sm,
    borderRadius: theme.borderRadius.base,
  },
  notificationDot: {
    fontSize: 12,
    marginRight: theme.spacing.sm,
  },
  notificationText: {
    fontSize: theme.typography.fontSize.sm,
    color: theme.colors.error,
  },
  section: {
    marginTop: theme.spacing.lg,
  },
  sectionTitle: {
    fontSize: theme.typography.fontSize.sm,
    fontWeight: theme.typography.fontWeight.semibold,
    color: theme.colors.textTertiary,
    marginBottom: theme.spacing.md,
    letterSpacing: 0.5,
  },
  teamList: {
    backgroundColor: theme.colors.card,
    borderRadius: theme.borderRadius.lg,
    padding: theme.spacing.md,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.05)',
  },
  teamMember: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: theme.spacing.sm,
  },
  memberDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginRight: theme.spacing.sm,
  },
  memberName: {
    fontSize: theme.typography.fontSize.base,
    color: theme.colors.text,
    marginRight: theme.spacing.sm,
  },
  memberRole: {
    fontSize: theme.typography.fontSize.sm,
    color: theme.colors.textSecondary,
  },
});
