import { StyleSheet } from 'react-native';
import { COLORS } from './colors';

export const getThemeStyles = (isDark: boolean) => {
  const theme = isDark ? COLORS.DARK : COLORS.LIGHT;
  
  return StyleSheet.create({
    container: { backgroundColor: theme.background, flex: 1 },
    text: { color: theme.text },
    card: { backgroundColor: theme.card },
    input: { 
      backgroundColor: theme.inputBackground,
      color: theme.inputText,
      borderColor: theme.inputBorder,
      borderWidth: 1,
      padding: 15,
      borderRadius: 12,
      fontSize: 16,
    },
    subtitle: { color: theme.subtitle },
    tokenBox: { backgroundColor: theme.tokenBox },
    
    // Dynamic brand color styles
    headerTitle: {
      color: theme.brand,
      fontSize: 36,
      fontWeight: '800',
      textAlign: 'center',
      marginBottom: 5,
    },
    button: {
      backgroundColor: theme.brand,
      padding: 18,
      borderRadius: 12,
      alignItems: 'center',
      marginTop: 35,
      marginBottom: 10,
      shadowColor: theme.brand,
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.3,
      shadowRadius: 8,
    },
    avatar: {
      width: 60,
      height: 60,
      borderRadius: 30,
      backgroundColor: theme.brand,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 15,
    },
    linkText: {
      color: theme.brand,
      fontWeight: '600',
    },
    buttonText: {
      color: isDark ? COLORS.LIGHT.brand : '#ffffff',
      fontSize: 18,
      fontWeight: 'bold',
    }
  });
};

export const commonStyles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    justifyContent: 'center',
    padding: 25,
    paddingTop: 60,
    paddingBottom: 40,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    padding: 25,
  },
  logoContainer: {
    alignItems: 'center',
    marginBottom: 20,
  },
  logo: {
    width: 100,
    height: 100,
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 30,
    textAlign: 'center',
  },
  form: {
    padding: 25,
    borderRadius: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 10,
    elevation: 5,
  },
  label: {
    fontSize: 14,
    marginBottom: 8,
    marginTop: 15,
    fontWeight: '600',
  },
  buttonDisabled: {
    opacity: 0.7,
  },
  card: {
    padding: 25,
    borderRadius: 20,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
  },
  userInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  avatarText: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  value: {
    fontSize: 18,
    fontWeight: '600',
  },
  tokenBox: {
    padding: 15,
    borderRadius: 10,
    marginTop: 10,
  },
  token: {
    fontSize: 12,
    color: '#718096',
    fontFamily: 'Courier',
    marginTop: 5,
  },
  logoutButton: {
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 12,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#e2e8f0',
  },
  logoutText: {
    color: '#e53e3e',
    fontSize: 16,
    fontWeight: '600',
  },
  tosContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 15,
  },
  tosText: {
    marginLeft: 10,
    fontSize: 14,
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
});

export const homeStyles = StyleSheet.create({
  listContent: {
    padding: 16,
    paddingBottom: 100, // Space for FAB
  },
  docCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    borderWidth: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  docIcon: {
    marginRight: 16,
  },
  docInfo: {
    flex: 1,
  },
  docName: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4,
  },
  docDate: {
    fontSize: 12,
  },
  deleteBtn: {
    padding: 8,
  },
  fab: {
    position: 'absolute',
    bottom: 24,
    right: 24,
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 4.65,
    elevation: 8,
  },
  loadingOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.7)',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1000,
  },
});