import React, { useState, createContext, useContext, useRef } from 'react';
import { View, TouchableOpacity, StyleSheet, PanResponder } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Sidebar, NavItem } from './Sidebar';
import { Colors, Spacing } from '@/constants/theme';

interface AppShellContextType {
  openSidebar: () => void;
}

const AppShellContext = createContext<AppShellContextType>({ openSidebar: () => {} });

export function useAppShell() {
  return useContext(AppShellContext);
}

interface AppShellProps {
  children: React.ReactNode;
  items: NavItem[];
  role: 'tenant' | 'landlord';
}

// How far from the left edge (px) the swipe zone is active
const SWIPE_ZONE = 30;
// Minimum horizontal distance to trigger open
const SWIPE_THRESHOLD = 50;

export function AppShell({ children, items, role }: AppShellProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const swipeStartX = useRef(0);
  const swipeStartY = useRef(0);

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: (evt) => {
        // Only capture touches that start within the left edge zone
        swipeStartX.current = evt.nativeEvent.pageX;
        swipeStartY.current = evt.nativeEvent.pageY;
        return evt.nativeEvent.pageX <= SWIPE_ZONE;
      },
      onMoveShouldSetPanResponder: (evt, gestureState) => {
        // Confirm it's a horizontal swipe rightward from the edge
        return (
          swipeStartX.current <= SWIPE_ZONE &&
          gestureState.dx > 10 &&
          Math.abs(gestureState.dx) > Math.abs(gestureState.dy)
        );
      },
      onPanResponderRelease: (_, gestureState) => {
        if (gestureState.dx >= SWIPE_THRESHOLD) {
          setSidebarOpen(true);
        }
      },
    })
  ).current;

  return (
    <AppShellContext.Provider value={{ openSidebar: () => setSidebarOpen(true) }}>
      <View style={styles.container} {...panResponder.panHandlers}>
        {children}
        <Sidebar
          visible={sidebarOpen}
          onClose={() => setSidebarOpen(false)}
          items={items}
          role={role}
        />
      </View>
    </AppShellContext.Provider>
  );
}

/** Drop-in hamburger button for screen headers */
export function HamburgerButton() {
  const { openSidebar } = useAppShell();
  return (
    <TouchableOpacity onPress={openSidebar} style={styles.hamburger} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
      <Ionicons name="menu" size={26} color={Colors.textInverse} />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  hamburger: { padding: Spacing.xs },
});