import { ReactNode, useEffect } from 'react';
import { Pressable, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native-safe-area-context';
import { colors, shadows, spacing } from '../../constants/theme';
import { MenuHeaderButton } from '../navigation/MenuHeaderButton';
import { useOptionalMenu } from '../../context/MenuContext';
import { setAppNavigator } from '../../navigation/appNavigation';
import type { AppStackParamList } from '../../navigation/types';
import { Icon } from './Icon';
import { SubscriptionExpiredBanner } from '../subscription/SubscriptionExpiredBanner';

type Props = {
  title: string;
  subtitle?: string;
  children: ReactNode;
  footer?: ReactNode;
  onRefresh?: () => void;
  refreshing?: boolean;
  actions?: ReactNode;
  hideSubscriptionBanner?: boolean;
};

export function ScreenLayout({
  title,
  subtitle,
  children,
  footer,
  onRefresh,
  refreshing,
  actions,
  hideSubscriptionBanner,
}: Props) {
  const menu = useOptionalMenu();
  const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>();
  const canGoBack = navigation.canGoBack();

  useEffect(() => {
    if (!menu) return;
    setAppNavigator(navigation);
  }, [menu, navigation]);

  return (
    <SafeAreaView style={styles.safe} edges={['top', 'bottom']}>
      <View style={styles.header}>
        {menu ? <MenuHeaderButton /> : canGoBack ? (
          <Pressable onPress={() => navigation.goBack()} style={styles.backBtn} hitSlop={8}>
            <Icon name="back" color={colors.primary} />
          </Pressable>
        ) : null}
        <View style={styles.headerText}>
          <Text style={styles.title}>{title}</Text>
          {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
        </View>
        {actions ? <View style={styles.actions}>{actions}</View> : null}
      </View>
      <ScrollView
        contentContainerStyle={styles.content}
        refreshControl={
          onRefresh ? (
            <RefreshControl refreshing={!!refreshing} onRefresh={onRefresh} tintColor={colors.primary} />
          ) : undefined
        }
      >
        <SubscriptionExpiredBanner hidden={hideSubscriptionBanner} />
        {children}
      </ScrollView>
      {footer}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.background },
  header: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.md,
    paddingTop: spacing.sm,
    paddingBottom: spacing.sm,
    backgroundColor: colors.surface,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
    ...shadows.navbar,
  },
  backBtn: {
    marginRight: spacing.xs,
    marginTop: 2,
    padding: spacing.xs,
  },
  headerText: { flex: 1, marginLeft: 4 },
  title: { fontSize: 22, fontWeight: '700', color: colors.text },
  subtitle: { fontSize: 14, color: colors.textMuted, marginTop: 4, lineHeight: 20 },
  actions: { marginLeft: spacing.sm },
  content: { padding: spacing.md, paddingBottom: spacing.xl },
});