import React, {useState} from 'react';
import {
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors, typography} from '../../utils/colors';
import {IS_TV} from '../../utils/tv';

interface Props {
  visible: boolean;
  onDismiss: () => void;
  onBrowseAddons: () => void;
}

const SECTIONS = [
  {
    icon: 'puzzle-outline',
    title: '1. Install Addons',
    body: 'Addons are community sources that provide movie & TV show catalogs and streams. Go to the Addons tab and browse or install one (like Torrentio) to get started.',
  },
  {
    icon: 'play-circle-outline',
    title: '2. Find & Play',
    body: 'Tap any title to see its details, then go to the Streams tab. Tap the play button next to any stream to start watching.',
  },
  {
    icon: 'clock-plus-outline',
    title: '3. Watch Later (Download)',
    body: 'On the Streams tab, tap the clock icon next to a torrent stream to download it in the background. When the checkmark turns green, it\'s ready. Find all your downloads in Library \u2192 Downloads.',
  },
  {
    icon: 'lightning-bolt',
    title: '4. Debrid (Optional)',
    body: 'Services like Real-Debrid turn torrent streams into instant direct links — no waiting. Add your API key in Settings for faster playback.',
  },
];

/** Button with explicit focus highlight for TV (native highlight doesn't work in Modals) */
function FocusButton({style, focusedStyle, onPress, hasTVPreferredFocus, children}: {
  style: any; focusedStyle: any; onPress: () => void;
  hasTVPreferredFocus?: boolean; children: React.ReactNode;
}) {
  const [focused, setFocused] = useState(false);
  return (
    <TouchableOpacity
      style={[style, focused && focusedStyle]}
      onPress={onPress}
      activeOpacity={0.8}
      focusable={IS_TV || undefined}
      hasTVPreferredFocus={hasTVPreferredFocus}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}>
      {children}
    </TouchableOpacity>
  );
}

export default function HelpModal({visible, onDismiss, onBrowseAddons}: Props) {
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      statusBarTranslucent
      onRequestClose={onDismiss}>
      <View style={styles.overlay}>
        <View style={styles.card}>
          <Text style={styles.title}>How StreamVault Works</Text>

          <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
            {SECTIONS.map(s => (
              <View key={s.title} style={styles.section}>
                <View style={styles.sectionHeader}>
                  <Icon name={s.icon} size={20} color={colors.primary} />
                  <Text style={styles.sectionTitle}>{s.title}</Text>
                </View>
                <Text style={styles.sectionBody}>{s.body}</Text>
              </View>
            ))}
          </ScrollView>

          <View style={styles.actions}>
            <FocusButton
              style={styles.browseBtn}
              focusedStyle={styles.browseBtnFocused}
              onPress={() => {
                onDismiss();
                onBrowseAddons();
              }}
              hasTVPreferredFocus={IS_TV || undefined}>
              <Icon name="puzzle-outline" size={16} color="#fff" />
              <Text style={styles.browseBtnText}>Browse Addons</Text>
            </FocusButton>

            <FocusButton
              style={styles.dismissBtn}
              focusedStyle={styles.dismissBtnFocused}
              onPress={onDismiss}>
              <Text style={styles.dismissBtnText}>Got it</Text>
            </FocusButton>
          </View>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.75)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
  },
  card: {
    width: '100%',
    maxWidth: 400,
    backgroundColor: colors.surface,
    borderRadius: 16,
    padding: 24,
    maxHeight: '80%',
  },
  title: {
    ...typography.title,
    color: colors.textPrimary,
    textAlign: 'center',
    marginBottom: 20,
  },
  scroll: {marginBottom: 20},
  section: {
    marginBottom: 18,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 6,
  },
  sectionTitle: {
    ...typography.subtitle,
    color: colors.textPrimary,
  },
  sectionBody: {
    ...typography.body,
    color: colors.textSecondary,
    lineHeight: 21,
    paddingLeft: 28,
  },
  actions: {
    flexDirection: 'row',
    gap: 10,
  },
  browseBtn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    backgroundColor: colors.primary,
    paddingVertical: 12,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: 'transparent',
  },
  browseBtnFocused: {
    borderColor: '#fff',
    backgroundColor: colors.primaryLight,
  },
  browseBtnText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '700',
  },
  dismissBtn: {
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 10,
    backgroundColor: colors.surfaceLight,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 2,
    borderColor: 'transparent',
  },
  dismissBtnFocused: {
    borderColor: '#fff',
    backgroundColor: colors.surfaceHighlight,
  },
  dismissBtnText: {
    color: colors.textSecondary,
    fontSize: 14,
    fontWeight: '600',
  },
});