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

interface StandardHeaderProps {
  title?: string;
  showBack?: boolean;
  showSearch?: boolean;
  onSearchPress?: () => void;
  rightAction?: "notificationsSettings" | "companyInfo" | "edit";
  onRightActionPress?: () => void;
  right?: React.ReactNode;
}

export function StandardHeader({
  title,
  showBack,
  showSearch,
  onSearchPress,
  rightAction,
  onRightActionPress,
  right,
}: 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";

  const iconColor = isDark ? "#f1f5f9" : "#0f172a";

  return (
    <View className="px-5 pt-4 pb-2 bg-background">
      {!title ? (
        <View className="flex-row items-center justify-between">
          <View className="flex-row items-center gap-3">
            <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-[12px] font-sans-bold">
                Welcome back,
              </Text>
              <Text variant="h4" className="text-foreground font-sans-bold ">
                {user?.firstName + " " + user?.lastName || "User"}
              </Text>
            </View>
          </View>

          <View className="flex-row items-center gap-2">
          {showSearch && (
            <Pressable
              className="rounded-full p-2.5 border border-border"
              onPress={onSearchPress}
            >
              <Search color={iconColor} size={18} strokeWidth={2} />
            </Pressable>
          )}
          <Pressable
            className="rounded-full p-2.5 border border-border"
            onPress={() => nav.go("notifications/index")}
          >
            <Bell color={iconColor} size={20} strokeWidth={2} />
          </Pressable>
        </View>
        </View>
      ) : (
        <View className="flex-row items-center justify-between relative">
          <View className="flex-row items-center">
            {showBack && (
              <Pressable
                onPress={() => nav.back()}
                className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
              >
                <ArrowLeft color={iconColor} size={20} />
              </Pressable>
            )}
          </View>

          <View className="absolute left-0 right-0 items-center pointer-events-none">
            <Text
              numberOfLines={1}
              className="text-foreground text-[17px] font-sans-bold"
            >
              {title}
            </Text>
          </View>

          <View className="flex-row items-center gap-2">
            {showSearch && (
              <Pressable
                className="rounded-full p-2.5 border border-border"
                onPress={onSearchPress}
              >
                <Search color={iconColor} size={18} strokeWidth={2} />
              </Pressable>
            )}

            {right ? (
              right
            ) : rightAction === "notificationsSettings" ? (
              <Pressable
                className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
                onPress={() =>
                  onRightActionPress
                    ? onRightActionPress()
                    : nav.go("notifications/settings")
                }
              >
                <Settings color={iconColor} size={18} />
              </Pressable>
            ) : rightAction === "companyInfo" ? (
              <Pressable
                className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
                onPress={() =>
                  onRightActionPress
                    ? onRightActionPress()
                    : nav.go("company-details")
                }
              >
                <Info color={iconColor} size={18} />
              </Pressable>
            ) : rightAction === "edit" ? (
              <Pressable
                className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
                onPress={onRightActionPress}
              >
                <Edit color={iconColor} size={18} />
              </Pressable>
            ) : null}
          </View>
        </View>
      )}
    </View>
  );
}