import React from 'react';
import { Image, View, Text, StyleSheet, ImageStyle, ViewStyle } from 'react-native';
import { Colors, FontSize, Spacing } from '@/constants/theme';

// Fallback to text logo if image not found
const logoSource = (() => {
  try {
    return require('@/assets/images/logo.png');
  } catch {
    return null;
  }
})();

interface LogoProps {
  size?: number;
  showName?: boolean;
  showTagline?: boolean;
  light?: boolean;         // white text variant for dark backgrounds
  style?: ViewStyle;
}

export function Logo({ size = 56, showName = true, showTagline = false, light = false, style }: LogoProps) {
  const textColor = light ? Colors.textInverse : Colors.primary;
  const taglineColor = light ? 'rgba(255,255,255,0.75)' : Colors.textSecondary;

  return (
    <View style={[styles.container, style]}>
      {logoSource ? (
        <Image
          source={logoSource}
          style={[styles.image, { width: size, height: size }] as ImageStyle}
          resizeMode="contain"
        />
      ) : (
        // Fallback circle with "R" if logo.png not placed yet
        <View style={[styles.fallback, { width: size, height: size, borderRadius: size / 2 }]}>
          <Text style={[styles.fallbackText, { fontSize: size * 0.45 }]}>R</Text>
        </View>
      )}
      {showName && (
        <Text style={[styles.name, { color: textColor }]}>ResiTrack</Text>
      )}
      {showTagline && (
        <Text style={[styles.tagline, { color: taglineColor }]}>
          Online Reservation & Tenant Monitoring
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { alignItems: 'center', gap: Spacing.xs },
  image: {},
  fallback: {
    backgroundColor: Colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  fallbackText: { fontWeight: '800', color: Colors.textInverse },
  name: { fontSize: FontSize.xxl, fontWeight: '800', letterSpacing: 0.5 },
  tagline: { fontSize: FontSize.xs, textAlign: 'center' },
});