import React from 'react';
import { StyleSheet, Text, View, ScrollView, Platform } from 'react-native';
import {
  GestureHandlerRootView,
  Clickable,
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback,
  TouchableNativeFeedback,
} from 'react-native-gesture-handler';
import { COLORS } from '../../../common';

function SectionHeader({ children }: { children: string }) {
  return <Text style={styles.sectionHeader}>{children}</Text>;
}

function Label({ children }: { children: string }) {
  return <Text style={styles.label}>{children}</Text>;
}

function ComparisonRow({
  before,
  after,
}: {
  before: React.ReactNode;
  after: React.ReactNode;
}) {
  return (
    <View style={styles.comparisonRow}>
      <View style={styles.comparisonColumn}>
        <Text style={styles.comparisonLabel}>Before</Text>
        {before}
      </View>
      <View style={styles.comparisonColumn}>
        <Text style={styles.comparisonLabel}>After</Text>
        {after}
      </View>
    </View>
  );
}

function ButtonContent({ text, color }: { text: string; color: string }) {
  return (
    <View style={[styles.button, { backgroundColor: color }]}>
      <Text style={styles.buttonText}>{text}</Text>
    </View>
  );
}

export default function ClickableTouchableMigrationExample() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        {/* TouchableOpacity → Clickable */}
        <View style={styles.section}>
          <SectionHeader>TouchableOpacity → Clickable</SectionHeader>
          <Label>Uses activeOpacity to dim the component on press.</Label>
          <ComparisonRow
            before={
              <TouchableOpacity
                onPress={() => console.log('TouchableOpacity pressed')}>
                <ButtonContent text="TouchableOpacity" color={COLORS.NAVY} />
              </TouchableOpacity>
            }
            after={
              <Clickable
                activeOpacity={0.2}
                onPress={() => console.log('Clickable (opacity) pressed')}>
                <ButtonContent text="Clickable" color={COLORS.NAVY} />
              </Clickable>
            }
          />
        </View>

        {/* TouchableHighlight → Clickable */}
        <View style={styles.section}>
          <SectionHeader>TouchableHighlight → Clickable</SectionHeader>
          <Label>
            Uses underlayColor and activeUnderlayOpacity to show a colored
            underlay on press.
          </Label>
          <ComparisonRow
            before={
              <TouchableHighlight
                // underlayColor={COLORS.KINDA_BLUE}
                onPress={() => console.log('TouchableHighlight pressed')}>
                <ButtonContent
                  text="TouchableHighlight"
                  color={COLORS.WEB_BLUE}
                />
              </TouchableHighlight>
            }
            after={
              <Clickable
                // underlayColor={COLORS.KINDA_BLUE}
                activeUnderlayOpacity={1}
                onPress={() => console.log('Clickable (highlight) pressed')}>
                <ButtonContent text="Clickable" color={COLORS.WEB_BLUE} />
              </Clickable>
            }
          />
        </View>

        {/* TouchableWithoutFeedback → Clickable */}
        <View style={styles.section}>
          <SectionHeader>TouchableWithoutFeedback → Clickable</SectionHeader>
          <Label>No visual feedback — just handles press events.</Label>
          <ComparisonRow
            before={
              <TouchableWithoutFeedback
                onPress={() => console.log('TouchableWithoutFeedback pressed')}>
                <ButtonContent
                  text="WithoutFeedback"
                  color={COLORS.DARK_GREEN}
                />
              </TouchableWithoutFeedback>
            }
            after={
              <Clickable
                onPress={() => console.log('Clickable (no feedback) pressed')}>
                <ButtonContent text="Clickable" color={COLORS.DARK_GREEN} />
              </Clickable>
            }
          />
        </View>

        {/* TouchableNativeFeedback → Clickable (Android only) */}
        {Platform.OS === 'android' && (
          <View style={styles.section}>
            <SectionHeader>TouchableNativeFeedback → Clickable</SectionHeader>
            <Label>
              Uses androidRipple to show the native ripple effect (Android
              only).
            </Label>
            <ComparisonRow
              before={
                <TouchableNativeFeedback
                  // background={TouchableNativeFeedback.Ripple('#aaa', false)}
                  onPress={() =>
                    console.log('TouchableNativeFeedback pressed')
                  }>
                  <ButtonContent text="NativeFeedback" color={COLORS.ANDROID} />
                </TouchableNativeFeedback>
              }
              after={
                <Clickable
                  androidRipple={{
                    foreground: true,
                  }}
                  onPress={() => console.log('Clickable (ripple) pressed')}>
                  <ButtonContent text="Clickable" color={COLORS.ANDROID} />
                </Clickable>
              }
            />
          </View>
        )}
      </ScrollView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 40,
  },
  section: {
    padding: 20,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ccc',
  },
  sectionHeader: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  label: {
    fontSize: 13,
    color: '#666',
    marginBottom: 12,
  },
  comparisonRow: {
    flexDirection: 'row',
    gap: 12,
  },
  comparisonColumn: {
    flex: 1,
    alignItems: 'center',
  },
  comparisonLabel: {
    fontSize: 12,
    fontWeight: '600',
    color: '#999',
    marginBottom: 8,
    textTransform: 'uppercase',
  },
  button: {
    width: '100%',
    height: 50,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 13,
    fontWeight: '600',
  },
});

<Touchable
  ...
  activeOpacity={0.2}/>

<Touchable
  ...
  activeUnderlayOpacity={1}/>

<Touchable ... />

<Touchable
  ...
  androidRipple={{
    foreground: true,
  }}/>