import React, {useState} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import LinearGradientDemoCAPI from './rnt/LinearGradientDemo-CAPI';
import DemoApp from './demo/App';

type Screen = 'home' | 'capi' | 'demo';

const BackButton: React.FC<{onPress: () => void}> = ({onPress}) => (
  <TouchableOpacity style={styles.backButton} onPress={onPress}>
    <Text style={styles.backButtonText}>‹ 返回首页</Text>
  </TouchableOpacity>
);

const Home = () => {
  const [screen, setScreen] = useState<Screen>('home');

  if (screen === 'capi') {
    return (
      <View style={styles.flex}>
        <BackButton onPress={() => setScreen('home')} />
        <LinearGradientDemoCAPI />
      </View>
    );
  }

  if (screen === 'demo') {
    return (
      <View style={styles.flex}>
        <BackButton onPress={() => setScreen('home')} />
        <DemoApp />
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        backgroundColor="#ffffff00"
        barStyle={'dark-content'}
        translucent={true}
      />
      <Text style={styles.title}>react-native-linear-gradient</Text>
      <Text style={styles.subtitle}>选择要查看的 Demo 页面</Text>
      <TouchableOpacity
        style={styles.menuItem}
        activeOpacity={0.7}
        onPress={() => setScreen('capi')}
      >
        <Text style={styles.menuTitle}>RNT Demo</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.menuItem}
        activeOpacity={0.7}
        onPress={() => setScreen('demo')}
      >
        <Text style={styles.menuTitle}>上游库 Demo</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default Home;

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  container: {
    backgroundColor: '#fff',
    flex: 1,
    padding: 24,
  },
  title: {
    color: '#333',
    fontSize: 22,
    fontWeight: '700',
    marginTop: 24,
    textAlign: 'center',
  },
  subtitle: {
    color: '#888',
    fontSize: 14,
    marginBottom: 24,
    marginTop: 8,
    textAlign: 'center',
  },
  menuItem: {
    backgroundColor: '#f2f4f7',
    borderRadius: 12,
    marginBottom: 16,
    padding: 16,
  },
  menuTitle: {
    color: '#333',
    fontSize: 17,
    fontWeight: '600',
    marginBottom: 4,
  },
  menuDesc: {
    color: '#888',
    fontSize: 12,
  },
  backButton: {
    backgroundColor: 'rgba(255,255,255,0.92)',
    borderRadius: 16,
    elevation: 3,
    left: 12,
    paddingHorizontal: 14,
    paddingVertical: 8,
    position: 'absolute',
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 1},
    shadowOpacity: 0.15,
    shadowRadius: 3,
    top: 44,
    zIndex: 10,
  },
  backButtonText: {
    color: '#333',
    fontSize: 14,
    fontWeight: '600',
  },
});