import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {TVTouchable as TouchableOpacity} from '../common/TVTouchable';
import Switch from 'react-native/Libraries/Components/Switch/Switch';
import {InstalledAddon} from '../../api/addonTypes';
import {colors, typography} from '../../utils/colors';
import {IS_TV} from '../../utils/tv';
import Badge from '../common/Badge';

interface Props {
  addon: InstalledAddon;
  onRemove: () => void;
  onToggle: (enabled: boolean) => void;
}

export default function AddonCard({addon, onRemove, onToggle}: Props) {
  const {manifest} = addon;

  const resources = manifest.resources.map(r =>
    typeof r === 'string' ? r : r.name,
  );

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        {manifest.logo ? (
          <Image
            style={styles.logo}
            source={{uri: manifest.logo}}
            resizeMode="contain"
          />
        ) : (
          <View style={[styles.logo, styles.logoPlaceholder]}>
            <Text style={styles.logoText}>{manifest.name[0]}</Text>
          </View>
        )}
        <View style={styles.titleBlock}>
          <Text style={styles.name} numberOfLines={1}>
            {manifest.name}
          </Text>
          <Text style={styles.version}>v{manifest.version}</Text>
        </View>
        <Switch
          value={addon.enabled}
          onValueChange={onToggle}
          trackColor={{false: colors.border, true: colors.primary + '80'}}
          thumbColor={addon.enabled ? colors.primary : colors.textMuted}
        />
      </View>

      {manifest.description && (
        <Text style={styles.description} numberOfLines={2}>
          {manifest.description}
        </Text>
      )}

      <View style={styles.badges}>
        {manifest.types.map(t => (
          <Badge key={t} label={t} variant="primary" style={styles.badge} />
        ))}
        {resources.map(r => (
          <Badge key={r} label={r} variant="info" style={styles.badge} />
        ))}
      </View>

      <TouchableOpacity style={styles.removeBtn} onPress={onRemove} focusable={IS_TV || undefined}>
        <Text style={styles.removeBtnText}>Remove</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.surface,
    borderRadius: 12,
    padding: 14,
    marginBottom: 10,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    marginBottom: 10,
  },
  logo: {width: 40, height: 40, borderRadius: 8},
  logoPlaceholder: {
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoText: {color: colors.textPrimary, fontWeight: '700', fontSize: 18},
  titleBlock: {flex: 1},
  name: {...typography.subtitle, color: colors.textPrimary},
  version: {...typography.caption, color: colors.textMuted},
  description: {
    ...typography.body,
    color: colors.textSecondary,
    marginBottom: 10,
  },
  badges: {flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginBottom: 10},
  badge: {marginRight: 0},
  removeBtn: {alignSelf: 'flex-end'},
  removeBtnText: {...typography.caption, color: colors.error},
});