import { ActivityIndicator, View } from "react-native";
import { Chat, OverlayProvider, useCreateChatClient } from "stream-chat-expo";
import { useUser } from "@/providers/UserProvider";
import { Text } from "react-native";
import { useThemeColor } from "@/hooks/useThemeColor";
import { useColorScheme } from "@/hooks/useColorScheme";
import { useMemo } from "react";
import type { DeepPartial, Theme } from "stream-chat-expo";

export default function ChatProvider({ children }: { children: React.ReactNode }) {
  const user = useUser();
  const colorScheme = useColorScheme();

  // Theme-aware colors
  const backgroundColor = useThemeColor({ light: "#f8fafc", dark: "#111827" }, "background");
  const textColor = useThemeColor({ light: "#1f2937", dark: "#f9fafb" }, "text");

  // Aggressive Stream Chat theme to force correct backgrounds
  const streamChatTheme: DeepPartial<Theme> = useMemo(
    () => ({
      colors: {
        // Force ALL background-related colors to match page background
        white: backgroundColor,
        white_snow: backgroundColor,
        white_smoke: backgroundColor,
        grey_whisper: backgroundColor,
        // Keep text colors appropriate
        black: colorScheme === "dark" ? "#f9fafb" : "#1f2937",
        grey: colorScheme === "dark" ? "#9ca3af" : "#6b7280",
        grey_gainsboro: colorScheme === "dark" ? "#4b5563" : "#9ca3af",

        // Accent colors
        accent_blue: "#3b82f6",
        accent_green: "#10b981",
        accent_red: "#ef4444",

        // Overlays
        overlay: colorScheme === "dark" ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)",
        // Border colors
        border: colorScheme === "dark" ? "#374151" : "#e5e7eb",
      },

      // Force channel list backgrounds
      channelListMessenger: {
        flatList: {
          backgroundColor: backgroundColor,
        },
        flatListContent: {
          backgroundColor: backgroundColor,
        },
        container: {
          backgroundColor: backgroundColor,
        },
      },

      // Force channel preview backgrounds
      channelPreview: {
        container: {
          backgroundColor: backgroundColor,
        },
        title: {
          color: colorScheme === "dark" ? "#f9fafb" : "#1f2937",
        },
        message: {
          color: colorScheme === "dark" ? "#9ca3af" : "#6b7280",
        },
        date: {
          color: colorScheme === "dark" ? "#6b7280" : "#9ca3af",
        },
      },

      // Force message backgrounds
      messageSimple: {
        content: {
          container: {
            backgroundColor: backgroundColor,
          },
        },
      },

      // Force input backgrounds
      messageInput: {
        container: {
          backgroundColor: backgroundColor,
          borderTopColor: colorScheme === "dark" ? "#374151" : "#e5e7eb",
        },
      },
    }),
    [colorScheme, backgroundColor]
  );

  const client = useCreateChatClient({
    apiKey: process.env.EXPO_PUBLIC_STREAM_CHAT_API_KEY as string,
    options: { timeout: 5000 },
    tokenOrProvider: user.streamToken,
    userData: {
      id: user.id,
      name: user.name ?? "",
    },
  });

  if (!user.streamToken) {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor,
        }}
      >
        <Text style={{ color: textColor }}>Chat Indisponible</Text>
      </View>
    );
  }

  if (!client) {
    return <ActivityIndicator />;
  }

  return (
    <OverlayProvider value={{ style: streamChatTheme }}>
      <Chat client={client}>{children}</Chat>
    </OverlayProvider>
  );
}
