/*
 * File: ProfileCard.tsx
 * Description: Profile card component displaying user information
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { theme } from '../../../theme/theme';
import { UserProfile } from '../../../shared/types';

/**
 * ProfileCardProps Interface
 * 
 * Purpose: Defines the props required by the ProfileCard component
 * 
 * Props:
 * - profile: User profile data to display
 * - onPress: Callback function when card is pressed
 */
interface ProfileCardProps {
  profile: UserProfile;
  onPress: () => void;
}

/**
 * ProfileCard Component
 * 
 * Purpose: Displays user profile information in a card format
 * 
 * Features:
 * - Profile picture display
 * - User name and credentials
 * - Department and role information
 * - Contact information
 * - Interactive card design
 */
export const ProfileCard: React.FC<ProfileCardProps> = ({ profile, onPress }) => {
  /**
   * formatCredentials Function
   * 
   * Purpose: Format credentials array into a readable string
   * 
   * @returns Formatted credentials string
   */
  const formatCredentials = (): string => {
    return profile.credentials.join(', ');
  };

  /**
   * formatSpecialties Function
   * 
   * Purpose: Format specialties array into a readable string
   * 
   * @returns Formatted specialties string
   */
  const formatSpecialties = (): string => {
    return profile.specialties.slice(0, 2).join(', ');
  };



  return (
    <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.7}>
      {/* Profile picture and basic info */}
      <View style={styles.header}>
        <View style={styles.imageContainer}>
          {profile.profilePicture ? (
            <Image
              source={require('../../../assets/images/default-avatar.png')}
              style={styles.profileImage}
              resizeMode="cover"
              onError={(error) => {
                console.log('Profile image loading error:', error.nativeEvent.error);
              }}
            />
          ) : (
            <View style={styles.fallbackAvatar}>
              <Text style={styles.fallbackText}>
                {profile.firstName.charAt(0)}{profile.lastName.charAt(0)}
              </Text>
            </View>
          )}
        </View>
        
        <View style={styles.basicInfo}>
          <Text style={styles.name}>
            {profile.firstName} {profile.lastName}
          </Text>
          <Text style={styles.credentials}>{formatCredentials()}</Text>
          <Text style={styles.specialties}>{formatSpecialties()}</Text>
        </View>
        
        <View style={styles.editIcon}>
          <Text style={styles.editText}>Edit</Text>
        </View>
      </View>
      
      {/* Department and role information */}
      <View style={styles.infoSection}>
        <View style={styles.infoRow}>
          <Text style={styles.infoLabel}>Department:</Text>
          <Text style={styles.infoValue}>{profile.department}</Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={styles.infoLabel}>Role:</Text>
          <Text style={styles.infoValue}>
            {profile.role.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={styles.infoLabel}>Experience:</Text>
          <Text style={styles.infoValue}>{profile.yearsOfExperience} years</Text>
        </View>
      </View>
      
      {/* Contact information */}
      <View style={styles.contactSection}>
        <View style={styles.contactRow}>
          <Text style={styles.contactLabel}>Email:</Text>
          <Text style={styles.contactValue} numberOfLines={1}>
            {profile.email}
          </Text>
        </View>
        
        <View style={styles.contactRow}>
          <Text style={styles.contactLabel}>Phone:</Text>
          <Text style={styles.contactValue}>{profile.phoneNumber}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

// ============================================================================
// STYLES SECTION
// ============================================================================

const styles = StyleSheet.create({
  // Main container for the profile card
  container: {
    backgroundColor: theme.colors.background,
    borderRadius: theme.borderRadius.large,
    padding: theme.spacing.lg,
    marginVertical: theme.spacing.md,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    borderColor: theme.colors.border,
    borderWidth: 1,
  },
  
  // Header section with profile picture and basic info
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: theme.spacing.md,
  },
  
  // Profile image container
  imageContainer: {
    marginRight: theme.spacing.md,
  },
  
  // Profile image styling
  profileImage: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: theme.colors.backgroundAlt,
    borderWidth: 2,
    borderColor: theme.colors.border,
  },
  
  // Basic information section
  basicInfo: {
    flex: 1,
  },
  
  // User name styling
  name: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.xs,
  },
  
  // Credentials styling
  credentials: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.primary,
    marginBottom: theme.spacing.xs,
  },
  
  // Specialties styling
  specialties: {
    fontSize: theme.typography.fontSize.bodySmall,
    color: theme.colors.textSecondary,
  },
  
  // Edit icon/text styling
  editIcon: {
    paddingHorizontal: theme.spacing.sm,
    paddingVertical: theme.spacing.xs,
    backgroundColor: theme.colors.primary,
    borderRadius: theme.borderRadius.small,
  },
  
  // Edit text styling
  editText: {
    fontSize: theme.typography.fontSize.bodySmall,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.background,
  },
  
  // Information section styling
  infoSection: {
    marginBottom: theme.spacing.md,
    paddingTop: theme.spacing.md,
    borderTopColor: theme.colors.border,
    borderTopWidth: 1,
  },
  
  // Information row styling
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing.sm,
  },
  
  // Information label styling
  infoLabel: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textSecondary,
  },
  
  // Information value styling
  infoValue: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textPrimary,
    textAlign: 'right',
    flex: 1,
  },
  
  // Contact section styling
  contactSection: {
    paddingTop: theme.spacing.md,
    borderTopColor: theme.colors.border,
    borderTopWidth: 1,
  },
  
  // Contact row styling
  contactRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing.sm,
  },
  
  // Contact label styling
  contactLabel: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textSecondary,
  },
  
  // Contact value styling
  contactValue: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textPrimary,
    textAlign: 'right',
    flex: 1,
  },
  
  // Fallback avatar styling
  fallbackAvatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: theme.colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: theme.colors.border,
  },
  
  // Fallback text styling
  fallbackText: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.background,
    textAlign: 'center',
  },
});

/*
 * End of File: ProfileCard.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */