import React from 'react';
import { ActivityIndicator, Image, Text, TextInput, TouchableOpacity, View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { colors, radius } from '../theme/colors';

export function Button({
  title, onPress, variant = 'primary', loading, disabled, style,
}: {
  title: string; onPress?: () => void; variant?: 'primary' | 'secondary' | 'danger' | 'gold'; loading?: boolean; disabled?: boolean; style?: ViewStyle;
}) {
  if (variant === 'primary') {
    return (
      <TouchableOpacity onPress={onPress} disabled={disabled || loading} activeOpacity={0.85} style={[style]}>
        <LinearGradient colors={[colors.purple, colors.violet, colors.magenta]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={s.btnGrad}>
          {loading ? <ActivityIndicator color="#fff" /> : <Text style={s.btnText}>{title}</Text>}
        </LinearGradient>
      </TouchableOpacity>
    );
  }
  const bg = variant === 'danger' ? colors.danger : variant === 'gold' ? colors.gold : 'rgba(255,255,255,0.10)';
  const fg = variant === 'gold' ? '#3A2A00' : '#fff';
  return (
    <TouchableOpacity onPress={onPress} disabled={disabled || loading} style={[s.btn, { backgroundColor: bg }, style]}>
      {loading ? <ActivityIndicator color={fg} /> : <Text style={[s.btnText, { color: fg }]}>{title}</Text>}
    </TouchableOpacity>
  );
}

export function Input(props: React.ComponentProps<typeof TextInput> & { containerStyle?: ViewStyle }) {
  return (
    <TextInput
      placeholderTextColor="rgba(185,179,208,0.6)"
      {...props}
      style={[s.input, props.style, props.containerStyle]}
    />
  );
}

export function Card({ children, style }: { children: React.ReactNode; style?: ViewStyle }) {
  return <View style={[s.card, style]}>{children}</View>;
}

export function Badge({ text, color = colors.purple, textColor }: { text: string; color?: string; textColor?: string }) {
  return (
    <View style={{ backgroundColor: `${color}33`, borderRadius: radius.full, paddingHorizontal: 8, paddingVertical: 2, borderColor: `${color}66`, borderWidth: 1 }}>
      <Text style={{ color: textColor ?? color, fontSize: 9, fontWeight: '700', textTransform: 'uppercase' }}>{text}</Text>
    </View>
  );
}

export function Avatar({ name, url, size = 44, frameUrl, online }: { name: string; url?: string | null; size?: number; frameUrl?: string | null; online?: boolean }) {
  const initials = (name || '?').split(' ').map((p) => p[0]).slice(0, 2).join('').toUpperCase();
  return (
    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
      {frameUrl ? (
        <Image source={{ uri: frameUrl }} style={{ position: 'absolute', width: size * 1.16, height: size * 1.16 }} resizeMode="contain" />
      ) : null}
      <View style={{ width: size, height: size, borderRadius: size / 2, overflow: 'hidden', backgroundColor: colors.violet, justifyContent: 'center', alignItems: 'center' }}>
        {url ? <Image source={{ uri: url }} style={{ width: size, height: size }} /> : <Text style={{ color: '#fff', fontWeight: '700', fontSize: size * 0.34 }}>{initials}</Text>}
      </View>
      {online ? (
        <View style={{ position: 'absolute', bottom: 0, right: 0, width: size * 0.26, height: size * 0.26, borderRadius: size, backgroundColor: colors.success, borderWidth: 2, borderColor: colors.dark }} />
      ) : null}
    </View>
  );
}

export function Skeleton({ width, height, style }: { width?: number | `${number}%`; height?: number; style?: ViewStyle }) {
  return <View style={[{ width: width ?? '100%', height: height ?? 16, borderRadius: radius.sm, backgroundColor: 'rgba(255,255,255,0.06)' }, style]} />;
}

export function Empty({ icon, title, subtitle }: { icon?: string; title: string; subtitle?: string }) {
  return (
    <View style={{ alignItems: 'center', paddingVertical: 40, paddingHorizontal: 24 }}>
      <Text style={{ fontSize: 40 }}>{icon ?? ' Empty'.trim() || '✨'}</Text>
      <Text style={{ color: '#fff', fontWeight: '700', marginTop: 10, fontSize: 15 }}>{title}</Text>
      {subtitle ? <Text style={{ color: colors.muted, fontSize: 12, textAlign: 'center', marginTop: 4 }}>{subtitle}</Text> : null}
    </View>
  );
}

export function Row({ label, value, valueColor }: { label: string; value: string; valueColor?: string }) {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8 }}>
      <Text style={{ color: colors.muted, fontSize: 13 }}>{label}</Text>
      <Text style={{ color: valueColor ?? '#fff', fontSize: 13, fontWeight: '600' }}>{value}</Text>
    </View>
  );
}

const s = StyleSheet.create({
  btn: { paddingVertical: 13, borderRadius: radius.md, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },
  btnGrad: { paddingVertical: 13, borderRadius: radius.md, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },
  btnText: { color: '#fff', fontWeight: '700', fontSize: 14 },
  input: {
    backgroundColor: 'rgba(255,255,255,0.05)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.10)',
    borderRadius: radius.md,
    paddingHorizontal: 14,
    paddingVertical: 12,
    color: '#fff',
    fontSize: 14,
  } as TextStyle,
  card: {
    backgroundColor: 'rgba(27,23,48,0.85)',
    borderRadius: radius.lg,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    padding: 14,
  },
});