import React, { useState, useEffect } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Sidebar } from './Sidebar';
import { TopBar } from './TopBar';
import { colors } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

interface AppShellProps {
  children: React.ReactNode;
  activeRoute: string;
  onNavigate: (route: string) => void;
  title: string;
  subtitle?: string;
}

export function AppShell({ children, activeRoute, onNavigate, title, subtitle }: AppShellProps) {
  const responsive = useResponsive();
  const { isPhone, isDesktop } = responsive;
  const insets = useSafeAreaInsets();
  const [sidebarCollapsed, setSidebarCollapsed] = useState(!isPhone);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    if (!isPhone) setMobileMenuOpen(false);
    setSidebarCollapsed(!isPhone);
  }, [isPhone]);

  if (isPhone) {
    return (
      <View style={[styles.mobileContainer, { paddingTop: insets.top }]}>
        <TopBar
          title={title}
          subtitle={subtitle}
          showMenuButton
          onMenuToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
        />
        {mobileMenuOpen && (
          <>
            <TouchableOpacity
              style={styles.mobileBackdrop}
              activeOpacity={1}
              onPress={() => setMobileMenuOpen(false)}
            />
            <View style={[styles.mobileSidebar, { top: insets.top }]}>
              <Sidebar
                activeRoute={activeRoute}
                collapsed={false}
                onToggle={() => setMobileMenuOpen(false)}
                onNavigate={(route) => {
                  onNavigate(route);
                  setMobileMenuOpen(false);
                }}
                onLogout={() => setMobileMenuOpen(false)}
              />
            </View>
          </>
        )}
        <View style={styles.mobileContent}>
          {children}
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Sidebar
        activeRoute={activeRoute}
        collapsed={sidebarCollapsed}
        onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
        onNavigate={onNavigate}
      />
      <View style={styles.main}>
        <TopBar
          title={title}
          subtitle={subtitle}
          showMenuButton={false}
        />
        <View style={styles.content}>
          {children}
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: colors.background,
  },
  main: {
    flex: 1,
    flexDirection: 'column',
    overflow: 'hidden',
  },
  content: {
    flex: 1,
    overflow: 'hidden',
  },
  mobileContainer: {
    flex: 1,
    backgroundColor: colors.background,
  },
  mobileBackdrop: {
    ...StyleSheet.absoluteFill,
    backgroundColor: 'rgba(0,0,0,0.5)',
    zIndex: 50,
  },
  mobileSidebar: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: 280,
    zIndex: 51,
  },
  mobileContent: {
    flex: 1,
  },
});