import { useEffect, useState, Component } from "react";
import type { ReactNode } from "react";
import { Stack, router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { View, Text, ScrollView } from "react-native";
import "../global.css";
import { Colors } from "@/constants/theme";
import { useSettings } from "@/hooks/useSettings";

// Catch JS errors in release mode and show them on-screen instead of
// silently crashing to desktop. Remove once the crash is identified.
class CrashBoundary extends Component<
  { children: ReactNode },
  { error: Error | null }
> {
  state = { error: null };
  static getDerivedStateFromError(e: Error) {
    return { error: e };
  }
  render() {
    const { error } = this.state;
    if (error) {
      return (
        <View style={{ flex: 1, backgroundColor: "#0f1117", padding: 20, paddingTop: 60 }}>
          <Text style={{ color: "#ef4444", fontSize: 16, fontWeight: "700", marginBottom: 12 }}>
            CRASH — copie ce texte
          </Text>
          <ScrollView>
            <Text style={{ color: "#fff", fontSize: 11, fontFamily: "monospace" }}>
              {String(error)}{"\n\n"}{(error as any).stack}
            </Text>
          </ScrollView>
        </View>
      );
    }
    return this.props.children;
  }
}

export default function RootLayout() {
  const { settings, ready } = useSettings();
  const [jsError, setJsError] = useState<string | null>(null);

  useEffect(() => {
    const prev = (ErrorUtils as any).getGlobalHandler();
    (ErrorUtils as any).setGlobalHandler((e: Error, isFatal: boolean) => {
      if (isFatal) setJsError(`${String(e)}\n\n${(e as any).stack ?? ""}`);
      prev?.(e, isFatal);
    });
    return () => (ErrorUtils as any).setGlobalHandler(prev);
  }, []);

  useEffect(() => {
    if (!ready) return;
    if (!settings.onboardingDone) {
      router.replace("/onboarding");
    }
  }, [ready, settings.onboardingDone]);

  if (jsError) {
    return (
      <View style={{ flex: 1, backgroundColor: "#0f1117", padding: 20, paddingTop: 60 }}>
        <Text style={{ color: "#ef4444", fontSize: 16, fontWeight: "700", marginBottom: 12 }}>
          FATAL JS ERROR — copie ce texte
        </Text>
        <ScrollView>
          <Text style={{ color: "#fff", fontSize: 11, fontFamily: "monospace" }}>
            {jsError}
          </Text>
        </ScrollView>
      </View>
    );
  }

  return (
    <CrashBoundary>
      <GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
        <StatusBar style="light" />
        <Stack
          screenOptions={{
            headerStyle: { backgroundColor: Colors.surface },
            headerTintColor: Colors.text1,
            headerTitleStyle: { color: Colors.text1 },
            contentStyle: { backgroundColor: Colors.bg },
            animation: "slide_from_right",
          }}
        >
          <Stack.Screen name="index" options={{ title: "SheetHappens" }} />
          <Stack.Screen name="new" options={{ title: "New Incident", presentation: "modal" }} />
          <Stack.Screen name="incident/[id]" options={{ title: "Incident" }} />
          <Stack.Screen name="settings" options={{ title: "Settings" }} />
          <Stack.Screen name="onboarding" options={{ headerShown: false }} />
        </Stack>
      </GestureHandlerRootView>
    </CrashBoundary>
  );
}
