import { View, Image, Pressable, useColorScheme } from "react-native";
import { Text } from "@/components/ui/text";
import {
  ArrowLeft,
  Bell,
  Settings,
  Info,
  DraftingCompass as EditIcon,
} from "@/lib/icons";
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" | "edit";
  onRightActionPress?: () => void;
  right?: React.ReactNode;
}

export function StandardHeader({
  title,
  showBack,
  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 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={iconColor} 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={iconColor} size={20} strokeWidth={2} />
        </Pressable>
      )}

      {title && (
        <View className="w-10 items-end">
          {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}
            >
              <EditIcon color={iconColor} size={18} />
            </Pressable>
          ) : (
            <View className="w-0" />
          )}
        </View>
      )}
    </View>
  );
}
