"use strict";

import { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView } from 'react-native';
import { fontFamilies } from '../../styles/fonts';
import { Ionicons } from '@expo/vector-icons';
import { useI18n } from '../../hooks/useI18n';
import { useThemeStyles } from '../../hooks/useThemeStyles';
import { useColorScheme } from '../../hooks/use-color-scheme';
import { darkenColor } from '../../utils/colorUtils';
import { useOxy } from '../../context/OxyContext';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const KarmaCenterScreen = ({
  theme,
  navigate,
  goBack
}) => {
  // Use useOxy() hook for OxyContext values
  const {
    user,
    oxyServices,
    isAuthenticated
  } = useOxy();
  const {
    t
  } = useI18n();
  const [karmaTotal, setKarmaTotal] = useState(null);
  const [karmaHistory, setKarmaHistory] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const colorScheme = useColorScheme();
  const themeStyles = useThemeStyles(theme || 'light', colorScheme);
  // Override primaryColor for Karma screens (purple instead of blue)
  const primaryColor = '#d169e5';

  // Icon colors from theme
  const iconLeaderboard = themeStyles.colors.iconPayments;
  const iconRules = themeStyles.colors.iconSecurity;
  const iconAbout = themeStyles.colors.iconPayments;
  const iconRewards = themeStyles.colors.iconStorage;
  const iconFAQ = themeStyles.colors.iconPersonalInfo;
  useEffect(() => {
    if (!user) return;
    setIsLoading(true);
    setError(null);
    Promise.all([oxyServices.getUserKarmaTotal(user.id), oxyServices.getUserKarmaHistory(user.id, 20, 0)]).then(([totalRes, historyRes]) => {
      setKarmaTotal(totalRes.total);
      setKarmaHistory(Array.isArray(historyRes.history) ? historyRes.history : []);
    }).catch(err => {
      setError(err.message || 'Failed to load karma data');
    }).finally(() => setIsLoading(false));
  }, [user]);
  if (!isAuthenticated) {
    return /*#__PURE__*/_jsx(View, {
      style: [styles.container, {
        backgroundColor: themeStyles.backgroundColor
      }],
      children: /*#__PURE__*/_jsx(Text, {
        style: [styles.message, {
          color: themeStyles.textColor
        }],
        children: t('common.status.notSignedIn') || 'Not signed in'
      })
    });
  }
  if (isLoading) {
    return /*#__PURE__*/_jsx(View, {
      style: [styles.container, {
        backgroundColor: themeStyles.backgroundColor,
        justifyContent: 'center'
      }],
      children: /*#__PURE__*/_jsx(ActivityIndicator, {
        size: "large",
        color: primaryColor
      })
    });
  }
  return /*#__PURE__*/_jsx(View, {
    style: [styles.container, {
      backgroundColor: themeStyles.backgroundColor
    }],
    children: /*#__PURE__*/_jsxs(ScrollView, {
      style: styles.scrollView,
      contentContainerStyle: styles.scrollContainer,
      children: [/*#__PURE__*/_jsxs(View, {
        style: styles.walletHeader,
        children: [/*#__PURE__*/_jsx(Text, {
          style: [styles.karmaAmount, {
            color: primaryColor
          }],
          children: karmaTotal ?? 0
        }), /*#__PURE__*/_jsx(Text, {
          style: [styles.karmaLabel, {
            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888'
          }],
          children: t('karma.center.balance') || 'Karma Balance'
        }), /*#__PURE__*/_jsxs(View, {
          style: styles.actionContainer,
          children: [/*#__PURE__*/_jsxs(View, {
            style: styles.actionRow,
            children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
              style: styles.actionIconWrapper,
              onPress: () => navigate && navigate('KarmaLeaderboard'),
              children: [/*#__PURE__*/_jsx(View, {
                style: [styles.actionIcon, {
                  backgroundColor: iconLeaderboard
                }],
                children: /*#__PURE__*/_jsx(Ionicons, {
                  name: "trophy-outline",
                  size: 28,
                  color: darkenColor(iconLeaderboard)
                })
              }), /*#__PURE__*/_jsx(Text, {
                style: styles.actionLabel,
                children: t('karma.center.actions.leaderboard') || 'Leaderboard'
              })]
            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
              style: styles.actionIconWrapper,
              onPress: () => navigate && navigate('KarmaRules'),
              children: [/*#__PURE__*/_jsx(View, {
                style: [styles.actionIcon, {
                  backgroundColor: iconRules
                }],
                children: /*#__PURE__*/_jsx(Ionicons, {
                  name: "document-text-outline",
                  size: 28,
                  color: darkenColor(iconRules)
                })
              }), /*#__PURE__*/_jsx(Text, {
                style: styles.actionLabel,
                children: t('karma.center.actions.rules') || 'Rules'
              })]
            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
              style: styles.actionIconWrapper,
              onPress: () => navigate && navigate('AboutKarma'),
              children: [/*#__PURE__*/_jsx(View, {
                style: [styles.actionIcon, {
                  backgroundColor: iconAbout
                }],
                children: /*#__PURE__*/_jsx(Ionicons, {
                  name: "star-outline",
                  size: 28,
                  color: darkenColor(iconAbout)
                })
              }), /*#__PURE__*/_jsx(Text, {
                style: styles.actionLabel,
                children: t('karma.center.actions.about') || 'About'
              })]
            })]
          }), /*#__PURE__*/_jsxs(View, {
            style: styles.actionRow,
            children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
              style: styles.actionIconWrapper,
              onPress: () => navigate && navigate('KarmaRewards'),
              children: [/*#__PURE__*/_jsx(View, {
                style: [styles.actionIcon, {
                  backgroundColor: iconRewards
                }],
                children: /*#__PURE__*/_jsx(Ionicons, {
                  name: "gift-outline",
                  size: 28,
                  color: darkenColor(iconRewards)
                })
              }), /*#__PURE__*/_jsx(Text, {
                style: styles.actionLabel,
                children: t('karma.center.actions.rewards') || 'Rewards'
              })]
            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
              style: styles.actionIconWrapper,
              onPress: () => navigate && navigate('KarmaFAQ'),
              children: [/*#__PURE__*/_jsx(View, {
                style: [styles.actionIcon, {
                  backgroundColor: iconFAQ
                }],
                children: /*#__PURE__*/_jsx(Ionicons, {
                  name: "help-circle-outline",
                  size: 28,
                  color: darkenColor(iconFAQ)
                })
              }), /*#__PURE__*/_jsx(Text, {
                style: styles.actionLabel,
                children: t('karma.center.actions.faq') || 'FAQ'
              })]
            })]
          })]
        }), /*#__PURE__*/_jsx(Text, {
          style: styles.infoText,
          children: t('karma.center.info') || 'Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'
        })]
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.sectionTitle, {
          color: themeStyles.textColor
        }],
        children: t('karma.center.history') || 'Karma History'
      }), /*#__PURE__*/_jsx(View, {
        style: styles.historyContainer,
        children: karmaHistory.length === 0 ? /*#__PURE__*/_jsx(Text, {
          style: {
            color: themeStyles.textColor,
            textAlign: 'center',
            marginTop: 16
          },
          children: t('karma.center.noHistory') || 'No karma history yet.'
        }) : karmaHistory.map(entry => /*#__PURE__*/_jsxs(View, {
          style: [styles.historyItem, {
            borderColor: themeStyles.borderColor
          }],
          children: [/*#__PURE__*/_jsxs(Text, {
            style: [styles.historyPoints, {
              color: entry.points > 0 ? primaryColor : '#D32F2F'
            }],
            children: [entry.points > 0 ? '+' : '', entry.points]
          }), /*#__PURE__*/_jsx(Text, {
            style: [styles.historyDesc, {
              color: themeStyles.textColor
            }],
            children: entry.reason || t('karma.center.noDescription') || 'No description'
          }), /*#__PURE__*/_jsx(Text, {
            style: [styles.historyDate, {
              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888'
            }],
            children: entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''
          })]
        }, entry.id))
      }), error && /*#__PURE__*/_jsx(Text, {
        style: {
          color: '#D32F2F',
          marginTop: 16,
          textAlign: 'center'
        },
        children: error
      })]
    })
  });
};
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  scrollView: {
    flex: 1
  },
  scrollContainer: {
    padding: 0,
    alignItems: 'center'
  },
  walletHeader: {
    alignItems: 'center',
    paddingTop: 36,
    paddingBottom: 24,
    width: '100%',
    backgroundColor: 'transparent'
  },
  karmaLabel: {
    fontSize: 16,
    marginBottom: 18,
    fontFamily: fontFamilies.phudu
  },
  karmaAmount: {
    fontSize: 48,
    fontWeight: 'bold',
    marginBottom: 4,
    fontFamily: fontFamilies.phudu
  },
  actionContainer: {
    marginBottom: 18,
    gap: 8
  },
  actionRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 2
  },
  actionIconWrapper: {
    alignItems: 'center',
    width: 72
  },
  actionIcon: {
    width: 56,
    height: 56,
    borderRadius: 28,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 6
  },
  actionIconText: {
    fontSize: 28
  },
  actionLabel: {
    fontSize: 10,
    color: '#888'
  },
  infoText: {
    fontSize: 13,
    color: '#888',
    textAlign: 'center',
    marginTop: 8,
    marginBottom: 8,
    maxWidth: 320
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 12,
    marginTop: 8,
    alignSelf: 'flex-start',
    marginLeft: 24
  },
  historyContainer: {
    borderRadius: 15,
    overflow: 'hidden',
    marginBottom: 20,
    width: '100%',
    paddingHorizontal: 12
  },
  historyItem: {
    padding: 14,
    borderBottomWidth: 1
  },
  historyPoints: {
    fontSize: 16,
    fontWeight: '700'
  },
  historyDesc: {
    fontSize: 15,
    marginTop: 2
  },
  historyDate: {
    fontSize: 13,
    marginTop: 2
  },
  message: {
    fontSize: 16,
    textAlign: 'center',
    marginTop: 24
  }
});
export default KarmaCenterScreen;
//# sourceMappingURL=KarmaCenterScreen.js.map