import { View, Image, Pressable, useColorScheme } from "react-native";
import { Text } from "@/components/ui/text";
import { ArrowLeft, Bell } from "@/lib/icons";
import { ShadowWrapper } from "@/components/ShadowWrapper";
import { useAuthStore } from "@/lib/auth-store";
import { router } from "expo-router";

interface StandardHeaderProps {
  title?: string;
  showBack?: boolean;
}

export function StandardHeader({ title, showBack }: StandardHeaderProps) {
  const user = useAuthStore((state) => state.user);
  const colorScheme = useColorScheme();
  const isDark = colorScheme === "dark";

  // Fallback avatar if user has no profile picture
  const avatarUri =
    user?.avatar ||
    "https://ui-avatars.com/api/?name=" +
      encodeURIComponent(`${user?.firstName} ${user?.lastName}`) +
      "&background=ea580c&color=fff";

  return (
    <View className="px-5 pt-4 pb-2 flex-row justify-between items-center bg-background">
      <View className="flex-1 flex-row items-center gap-3">
        {showBack && (
          <Pressable
            onPress={() => router.back()}
            className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
          >
            <ArrowLeft color={isDark ? "#f1f5f9" : "#0f172a"} size={20} />
          </Pressable>
        )}

        {!title ? (
          <View className="flex-row items-center gap-3 ml-1">
            <View>
              <Pressable
                onPress={() => router.push("/profile")}
                className="h-[40px] w-[40px] rounded-full overflow-hidden"
              >
                <Image source={{ uri: avatarUri }} className="h-full w-full" />
              </Pressable>
            </View>
            <View>
              <Text
                variant="muted"
                className="text-[10px] uppercase tracking-widest font-bold"
              >
                Welcome back,
              </Text>
              <Text variant="h4" className="text-foreground leading-tight">
                {user?.firstName + " " + user?.lastName || "User"}
              </Text>
            </View>
          </View>
        ) : (
          <View className="flex-1 items-center mr-10">
            <Text variant="h4" className="text-foreground font-semibold">
              {title}
            </Text>
          </View>
        )}
      </View>

      {!title && (
        <ShadowWrapper level="xs">
          <Pressable className="rounded-full p-2.5 border border-border">
            <Bell
              color={isDark ? "#f1f5f9" : "#0f172a"}
              size={20}
              strokeWidth={2}
            />
          </Pressable>
        </ShadowWrapper>
      )}

      {title && <View className="w-0" />}
    </View>
  );
}