import { View, Image, Pressable, useColorScheme } from "react-native";
import { Text } from "@/components/ui/text";
import { ArrowLeft, Bell, Settings, Info } from "@/lib/icons";
import { ShadowWrapper } from "@/components/ShadowWrapper";
import { useAuthStore } from "@/lib/auth-store";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";

interface StandardHeaderProps {
  title?: string;
  showBack?: boolean;
  rightAction?: "notificationsSettings" | "companyInfo";
}

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

  // 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={() => nav.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={() => nav.go("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 ">
            <Text variant="h4" className="text-foreground font-semibold">
              {title}
            </Text>
          </View>
        )}
      </View>

      {!title && (
        <Pressable
          className="rounded-full p-2.5 border border-border"
          onPress={() => nav.go("notifications/index")}
        >
          <Bell
            color={isDark ? "#f1f5f9" : "#0f172a"}
            size={20}
            strokeWidth={2}
          />
        </Pressable>
      )}

      {title && (
        <View className="w-10 items-end">
          {rightAction === "notificationsSettings" ? (
            <Pressable
              className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
              onPress={() => nav.go("notifications/settings")}
            >
              <Settings color={isDark ? "#f1f5f9" : "#0f172a"} size={18} />
            </Pressable>
          ) : rightAction === "companyInfo" ? (
            <Pressable
              className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
              onPress={() => nav.go("company-details")}
            >
              <Info color={isDark ? "#f1f5f9" : "#0f172a"} size={18} />
            </Pressable>
          ) : (
            <View className="w-0" />
          )}
        </View>
      )}
    </View>
  );
}