import React, {useCallback, useEffect, useRef, useState} from 'react';
import {
  ActivityIndicator,
  Animated,
  DeviceEventEmitter,
  Dimensions,
  FlatList,
  Linking,
  Modal,
  PanResponder,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity as RNTouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {TVTouchable as TouchableOpacity} from '../components/common/TVTouchable';
import Video, {OnLoadData, OnProgressData} from 'react-native-video';
import {RouteProp, useNavigation, useRoute} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {RootStackParamList} from '../navigation/types';
import {SubtitleTrack} from '../api/addonTypes';
import {addonManager} from '../api/addonManager';
import {colors} from '../utils/colors';
import {IS_TV, TVKeys} from '../utils/tv';
import {formatEpisodeLabel} from '../utils/formatters';
import {fetchAndParseSubtitles, findActiveCue, SubtitleCue} from '../utils/subtitleParser';

type Nav = StackNavigationProp<RootStackParamList>;
type Route = RouteProp<RootStackParamList, 'Player'>;

const {width: SW, height: SH} = Dimensions.get('window');
const HIDE_CONTROLS_DELAY = 4000;

const SPEEDS = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];

/** Subtitle row with explicit focus highlight for TV (native highlight doesn't work in Modals) */
function SubRow({isOff, isActive, label, onPress}: {
  isOff: boolean; isActive: boolean; label: string; onPress: () => void;
}) {
  const [focused, setFocused] = useState(false);
  // On TV use RNTouchableOpacity directly — TVTouchable + FlatList inside Modal
  // can't receive focus on Fire TV
  const Btn = IS_TV ? RNTouchableOpacity : TouchableOpacity;
  return (
    <Btn
      style={[
        styles.subRow,
        isActive && styles.subRowActive,
        focused && styles.subRowFocused,
      ]}
      focusable={true}
      hasTVPreferredFocus={isActive && IS_TV ? true : undefined}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      onPress={onPress}>
      <Icon
        name={isOff ? 'closed-caption-outline' : 'closed-caption'}
        size={20}
        color={focused ? '#fff' : isActive ? colors.primary : colors.textSecondary}
      />
      <View style={styles.subRowInfo}>
        <Text style={[styles.subLang, isActive && {color: colors.primary}, focused && {color: '#fff'}]}>
          {label}
        </Text>
      </View>
      {isActive && <Icon name="check" size={18} color={focused ? '#fff' : colors.primary} />}
    </Btn>
  );
}

export default function PlayerScreen() {
  const navigation = useNavigation<Nav>();
  const route = useRoute<Route>();
  const {id, type, stream, name, season, episode} = route.params;

  const [paused, setPaused] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [buffering, setBuffering] = useState(true);
  const [showControls, setShowControls] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [speedIdx, setSpeedIdx] = useState(2); // default 1.0x

  // Subtitles
  const [subtitles, setSubtitles] = useState<SubtitleTrack[]>([]);
  const [selectedSubIdx, setSelectedSubIdx] = useState<number | null>(null); // null = off
  const [showSubPicker, setShowSubPicker] = useState(false);
  const [loadingSubs, setLoadingSubs] = useState(false);
  const [subtitleCues, setSubtitleCues] = useState<SubtitleCue[]>([]);
  const [activeSubText, setActiveSubText] = useState<string | null>(null);

  const controlsOpacity = useRef(new Animated.Value(1)).current;
  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const videoRef = useRef<Video>(null);
  const progressBarWidth = useRef(SW - 140);
  const showControlsRef = useRef(true);

  const streamUrl = stream.url ?? '';
  const epLabel = formatEpisodeLabel(season, episode);
  const title = epLabel ? `${name}  ·  ${epLabel}` : name;
  const playbackRate = SPEEDS[speedIdx];

  // Load subtitles
  useEffect(() => {
    if (!id || !type) return;
    setLoadingSubs(true);
    addonManager
      .getSubtitlesFromAll(type, id)
      .then(subs => {
        setSubtitles(subs);
        // Auto-select English if available
        const enIdx = subs.findIndex(s =>
          s.lang?.toLowerCase().startsWith('en'),
        );
        if (enIdx !== -1) setSelectedSubIdx(enIdx);
      })
      .catch(() => {})
      .finally(() => setLoadingSubs(false));
  }, [id, type]);

  // Fetch & parse selected subtitle into cues
  useEffect(() => {
    if (selectedSubIdx === null || !subtitles[selectedSubIdx]) {
      setSubtitleCues([]);
      setActiveSubText(null);
      return;
    }
    const subUrl = subtitles[selectedSubIdx].url;
    fetchAndParseSubtitles(subUrl)
      .then(cues => setSubtitleCues(cues))
      .catch(() => setSubtitleCues([]));
  }, [selectedSubIdx, subtitles]);

  const showControlsTemporarily = useCallback(() => {
    Animated.timing(controlsOpacity, {
      toValue: 1,
      duration: 180,
      useNativeDriver: true,
    }).start();
    setShowControls(true);
    showControlsRef.current = true;
    if (hideTimer.current) clearTimeout(hideTimer.current);
    hideTimer.current = setTimeout(() => {
      if (!paused) {
        Animated.timing(controlsOpacity, {
          toValue: 0,
          duration: 350,
          useNativeDriver: true,
        }).start(() => {
          setShowControls(false);
          showControlsRef.current = false;
        });
      }
    }, HIDE_CONTROLS_DELAY);
  }, [controlsOpacity, paused]);

  const toggleControls = useCallback(() => {
    if (showControls) {
      if (hideTimer.current) clearTimeout(hideTimer.current);
      Animated.timing(controlsOpacity, {
        toValue: 0,
        duration: 250,
        useNativeDriver: true,
      }).start(() => {
        setShowControls(false);
        showControlsRef.current = false;
      });
    } else {
      showControlsTemporarily();
    }
  }, [showControls, controlsOpacity, showControlsTemporarily]);

  useEffect(() => {
    showControlsTemporarily();
    return () => {
      if (hideTimer.current) clearTimeout(hideTimer.current);
    };
  }, [showControlsTemporarily]);

  // Show controls on mouse movement; handle D-pad/remote keys for TV
  useEffect(() => {
    const mouseSub = DeviceEventEmitter.addListener('mouseMove', () => {
      showControlsTemporarily();
    });
    const keySub = DeviceEventEmitter.addListener('hardwareKeyDown', (event: {keyCode: number}) => {
      const key = event?.keyCode;
      if (!key) return;

      // MENU key always toggles subtitle picker
      if (key === TVKeys.MENU) {
        setShowSubPicker(s => !s);
        showControlsTemporarily();
        return;
      }

      // Dedicated media keys always work regardless of controls visibility
      switch (key) {
        case TVKeys.PLAY_PAUSE:
        case TVKeys.MEDIA_PLAY:
        case TVKeys.MEDIA_PAUSE:
          togglePause();
          return;
        case TVKeys.REWIND:
          seek(-30);
          showControlsTemporarily();
          return;
        case TVKeys.FAST_FORWARD:
          seek(30);
          showControlsTemporarily();
          return;
      }

      // When controls are HIDDEN: D-pad controls playback directly
      // When controls are VISIBLE: let native focus system handle D-pad navigation
      if (!showControlsRef.current) {
        switch (key) {
          case TVKeys.DPAD_CENTER:
          case TVKeys.ENTER:
            togglePause();
            break;
          case TVKeys.DPAD_LEFT:
            seek(-10);
            break;
          case TVKeys.DPAD_RIGHT:
            seek(10);
            break;
        }
      }

      showControlsTemporarily();
    });
    return () => {
      mouseSub.remove();
      keySub.remove();
    };
  }, [showControlsTemporarily, togglePause, seek]);

  const togglePause = useCallback(() => {
    setPaused(p => !p);
    showControlsTemporarily();
  }, [showControlsTemporarily]);

  const seek = useCallback(
    (seconds: number) => {
      const newTime = Math.max(0, Math.min(currentTime + seconds, duration));
      videoRef.current?.seek(newTime);
      setCurrentTime(newTime);
      showControlsTemporarily();
    },
    [currentTime, duration, showControlsTemporarily],
  );

  const seekToRatio = useCallback(
    (ratio: number) => {
      const newTime = Math.max(0, Math.min(ratio * duration, duration));
      videoRef.current?.seek(newTime);
      setCurrentTime(newTime);
      showControlsTemporarily();
    },
    [duration, showControlsTemporarily],
  );

  const onLoad = useCallback((data: OnLoadData) => {
    setDuration(data.duration);
    setBuffering(false);
  }, []);

  const onProgress = useCallback(
    (data: OnProgressData) => {
      setCurrentTime(data.currentTime);
      if (subtitleCues.length > 0) {
        setActiveSubText(findActiveCue(subtitleCues, data.currentTime));
      } else {
        setActiveSubText(null);
      }
    },
    [subtitleCues],
  );

  const formatTime = (s: number): string => {
    const h = Math.floor(s / 3600);
    const m = Math.floor((s % 3600) / 60);
    const sec = Math.floor(s % 60);
    if (h > 0)
      return `${h}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
    return `${m}:${String(sec).padStart(2, '0')}`;
  };

  const progress = duration > 0 ? currentTime / duration : 0;

  const cycleSpeed = () => {
    setSpeedIdx(i => (i + 1) % SPEEDS.length);
    showControlsTemporarily();
  };

  // Progress bar pan responder
  const progressPan = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: e => {
        const ratio = Math.max(
          0,
          Math.min(e.nativeEvent.locationX / progressBarWidth.current, 1),
        );
        seekToRatio(ratio);
      },
      onPanResponderMove: e => {
        const ratio = Math.max(
          0,
          Math.min(e.nativeEvent.locationX / progressBarWidth.current, 1),
        );
        seekToRatio(ratio);
      },
    }),
  ).current;

  if (!streamUrl) {
    return (
      <View style={styles.errorContainer}>
        <Icon name="movie-off" size={64} color={colors.textMuted} />
        <Text style={styles.errorText}>No playable stream URL</Text>
        <TouchableOpacity
          style={styles.goBackBtn}
          onPress={() => navigation.goBack()}>
          <Text style={styles.goBackText}>Go Back</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <StatusBar hidden />

      {/* Video layer — sits at the bottom */}
      <Video
        ref={videoRef}
        source={{uri: streamUrl}}
        style={styles.video}
        resizeMode="contain"
        paused={paused}
        rate={playbackRate}
        onLoad={onLoad}
        onProgress={onProgress}
        onBuffer={({isBuffering}) => setBuffering(isBuffering)}
        onError={e => {
          const err = e.error;
          const msg = [
            err?.errorString,
            err?.errorException,
          ].filter(Boolean).join('\n') || 'Playback error';
          setError(msg);
        }}
        progressUpdateInterval={500}
        playInBackground={false}
        ignoreSilentSwitch="ignore"
      />

      {/* Touch capture layer — on TOP of the native video view */}
      <View
        style={styles.touchLayer}
        onStartShouldSetResponder={() => true}
        onResponderRelease={toggleControls}>

        {/* Buffering spinner */}
        {buffering && !error && (
          <View style={styles.overlay} pointerEvents="none">
            <ActivityIndicator size="large" color={colors.primary} />
            <Text style={styles.bufferingText}>Buffering…</Text>
          </View>
        )}

        {/* Error */}
        {error && (
          <View style={styles.overlay}>
            <Icon name="alert-circle-outline" size={60} color={colors.error} />
            <Text style={styles.errorOverlayText}>{error}</Text>
            <View style={styles.errorBtns}>
              <TouchableOpacity
                style={styles.retryBtn}
                onPress={() => setError(null)}>
                <Icon name="refresh" size={16} color="#fff" />
                <Text style={styles.retryText}>Retry</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.extBtn}
                onPress={() => Linking.openURL(streamUrl).catch(() => {})}>
                <Icon name="open-in-new" size={16} color={colors.textPrimary} />
                <Text style={styles.extBtnText}>External Player</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}

        {/* Custom subtitle overlay */}
        {activeSubText && (
          <View style={styles.subtitleOverlay} pointerEvents="none">
            <Text style={styles.subtitleText}>{activeSubText}</Text>
          </View>
        )}

        {/* ── Controls overlay ── */}
        <Animated.View
          style={[styles.controls, {opacity: controlsOpacity}]}
          pointerEvents={showControls ? 'box-none' : 'none'}>

          {/* TOP BAR */}
          <View style={styles.topBar}>
            <TouchableOpacity
              onPress={() => navigation.goBack()}
              style={styles.iconBtn}
              focusable={IS_TV || undefined}>
              <Icon name="arrow-left" size={28} color="#fff" />
            </TouchableOpacity>

            <View style={styles.titleBlock}>
              <Text style={styles.titleText} numberOfLines={1}>
                {title}
              </Text>
            </View>

            <View style={styles.topRight}>
              {/* Subtitle button */}
              <TouchableOpacity
                style={[
                  styles.iconBtn,
                  selectedSubIdx !== null && styles.iconBtnActive,
                ]}
                onPress={() => setShowSubPicker(true)}
                focusable={IS_TV || undefined}>
                {loadingSubs ? (
                  <ActivityIndicator size="small" color="#fff" />
                ) : (
                  <Icon
                    name="closed-caption"
                    size={24}
                    color={selectedSubIdx !== null ? colors.primary : '#fff'}
                  />
                )}
              </TouchableOpacity>

              {/* Speed */}
              <TouchableOpacity onPress={cycleSpeed} style={styles.speedBtn} focusable={IS_TV || undefined}>
                <Text style={styles.speedText}>{playbackRate}×</Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* CENTER CONTROLS */}
          <View style={styles.centerRow}>
            <TouchableOpacity onPress={() => seek(-30)} style={styles.seekBtn} focusable={IS_TV || undefined}>
              <Icon name="rewind-30" size={44} color="#fff" />
              <Text style={styles.seekLabel}>30s</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={togglePause} style={styles.playBtn} focusable={IS_TV || undefined} hasTVPreferredFocus={IS_TV || undefined}>
              <Icon
                name={paused ? 'play' : 'pause'}
                size={52}
                color="#fff"
              />
            </TouchableOpacity>

            <TouchableOpacity onPress={() => seek(30)} style={styles.seekBtn} focusable={IS_TV || undefined}>
              <Icon name="fast-forward-30" size={44} color="#fff" />
              <Text style={styles.seekLabel}>30s</Text>
            </TouchableOpacity>
          </View>

          {/* BOTTOM BAR */}
          <View style={styles.bottomBar}>
            <Text style={styles.timeText}>{formatTime(currentTime)}</Text>

            {/* Progress bar */}
            <View
              style={styles.progressTrack}
              {...progressPan.panHandlers}
              onLayout={e =>
                (progressBarWidth.current = e.nativeEvent.layout.width)
              }>
              {/* Buffer background */}
              <View style={styles.progressBg} />
              {/* Filled */}
              <View
                style={[
                  styles.progressFill,
                  {width: `${progress * 100}%`},
                ]}
              />
              {/* Knob */}
              <View
                style={[
                  styles.progressKnob,
                  {left: `${progress * 100}%`},
                ]}
              />
            </View>

            <Text style={styles.timeText}>{formatTime(duration)}</Text>
          </View>
        </Animated.View>
      </View>

      {/* ── Subtitle Picker Modal ── */}
      <Modal
        visible={showSubPicker}
        transparent
        animationType="slide"
        onRequestClose={() => setShowSubPicker(false)}>
        <TouchableWithoutFeedback onPress={() => setShowSubPicker(false)}>
          <View style={styles.subBackdrop}>
            <TouchableWithoutFeedback>
              <View style={styles.subSheet}>
                <View style={styles.subHandle} />
                <Text style={styles.subTitle}>Subtitles</Text>

                <ScrollView showsVerticalScrollIndicator={false}>
                  {[{url: '', lang: 'off', label: 'Off'} as SubtitleTrack, ...subtitles].map((item, index) => {
                    const isOff = item.lang === 'off';
                    const activeIdx = isOff ? null : index - 1;
                    const isActive = isOff
                      ? selectedSubIdx === null
                      : selectedSubIdx === activeIdx;

                    return (
                      <SubRow
                        key={index}
                        isOff={isOff}
                        isActive={isActive}
                        label={item.label || (item.lang && item.lang.toUpperCase()) || 'Unknown'}
                        onPress={() => {
                          setSelectedSubIdx(isOff ? null : activeIdx);
                          setShowSubPicker(false);
                        }}
                      />
                    );
                  })}
                </ScrollView>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: '#000'},
  video: {
    ...StyleSheet.absoluteFillObject,
  },
  touchLayer: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 1,
  },

  overlay: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.6)',
    gap: 14,
  },
  bufferingText: {color: 'rgba(255,255,255,0.8)', fontSize: 15, marginTop: 6},
  errorOverlayText: {
    color: colors.error,
    fontSize: 14,
    textAlign: 'center',
    paddingHorizontal: 40,
  },
  errorBtns: {flexDirection: 'row', gap: 12, marginTop: 6},
  retryBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: colors.primary,
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  retryText: {color: '#fff', fontWeight: '700'},
  extBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: 'rgba(255,255,255,0.12)',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
  },
  extBtnText: {color: '#fff', fontWeight: '600'},

  // Controls
  controls: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'space-between',
  },

  // Top bar
  topBar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingTop: 14,
    paddingBottom: 8,
    backgroundColor: 'rgba(0,0,0,0.4)',
    gap: 8,
  },
  iconBtn: {
    padding: 8,
    borderRadius: 8,
  },
  iconBtnActive: {
    backgroundColor: 'rgba(108,79,240,0.25)',
  },
  titleBlock: {flex: 1},
  titleText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
    textShadowColor: 'rgba(0,0,0,0.8)',
    textShadowOffset: {width: 0, height: 1},
    textShadowRadius: 4,
  },
  topRight: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  speedBtn: {
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 6,
    backgroundColor: 'rgba(255,255,255,0.15)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
  },
  speedText: {color: '#fff', fontWeight: '700', fontSize: 13},

  // Center
  centerRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 48,
  },
  seekBtn: {
    alignItems: 'center',
    gap: 2,
    padding: 8,
  },
  seekLabel: {
    color: 'rgba(255,255,255,0.6)',
    fontSize: 10,
    fontWeight: '600',
  },
  playBtn: {
    width: 76,
    height: 76,
    borderRadius: 38,
    backgroundColor: 'rgba(255,255,255,0.18)',
    borderWidth: 2,
    borderColor: 'rgba(255,255,255,0.3)',
    justifyContent: 'center',
    alignItems: 'center',
  },

  // Bottom bar
  bottomBar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingBottom: 28,
    paddingTop: 8,
    gap: 10,
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  timeText: {
    color: 'rgba(255,255,255,0.9)',
    fontSize: 13,
    fontWeight: '600',
    minWidth: 46,
    textAlign: 'center',
  },
  progressTrack: {
    flex: 1,
    height: 20,
    justifyContent: 'center',
  },
  progressBg: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: 4,
    borderRadius: 2,
    backgroundColor: 'rgba(255,255,255,0.2)',
  },
  progressFill: {
    position: 'absolute',
    left: 0,
    height: 4,
    borderRadius: 2,
    backgroundColor: colors.primary,
  },
  progressKnob: {
    position: 'absolute',
    top: 3,
    width: 14,
    height: 14,
    borderRadius: 7,
    backgroundColor: '#fff',
    marginLeft: -7,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 1},
    shadowOpacity: 0.5,
    shadowRadius: 2,
  },

  // Error / no stream
  errorContainer: {
    flex: 1,
    backgroundColor: colors.background,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
  },
  errorText: {color: colors.textSecondary, fontSize: 16},
  goBackBtn: {
    backgroundColor: colors.primary,
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  goBackText: {color: '#fff', fontWeight: '700'},

  // Subtitle overlay (custom rendering)
  subtitleOverlay: {
    position: 'absolute',
    bottom: 60,
    left: 20,
    right: 20,
    alignItems: 'center',
  },
  subtitleText: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '600',
    textAlign: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 4,
    overflow: 'hidden',
    textShadowColor: 'rgba(0, 0, 0, 0.9)',
    textShadowOffset: {width: 0, height: 1},
    textShadowRadius: 3,
  },

  // Subtitle modal
  subBackdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.6)',
    justifyContent: 'flex-end',
  },
  subSheet: {
    backgroundColor: colors.surface,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingBottom: 32,
    maxHeight: SH * 0.6,
  },
  subHandle: {
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: colors.border,
    alignSelf: 'center',
    marginVertical: 12,
  },
  subTitle: {
    color: colors.textPrimary,
    fontSize: 17,
    fontWeight: '700',
    paddingHorizontal: 20,
    marginBottom: 12,
  },
  subRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 14,
    gap: 14,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.border,
    borderWidth: 2,
    borderColor: 'transparent',
  },
  subRowActive: {
    backgroundColor: colors.primary + '18',
  },
  subRowFocused: {
    backgroundColor: colors.primary,
    borderColor: '#fff',
  },
  subRowInfo: {flex: 1},
  subLang: {
    color: colors.textPrimary,
    fontSize: 15,
    fontWeight: '500',
  },

});