); } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

); } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }; // file: app/components/ui/context-menu.tsx import * as React from "react"; import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"; import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; import { cn } from "~/lib/utils"; function ContextMenu({ ...props }: React.ComponentProps) { return ; } function ContextMenuTrigger({ ...props }: React.ComponentProps) { return ; } function ContextMenuGroup({ ...props }: React.ComponentProps) { return ; } function ContextMenuPortal({ ...props }: React.ComponentProps) { return ; } function ContextMenuSub({ ...props }: React.ComponentProps) { return ; } function ContextMenuRadioGroup({ ...props }: React.ComponentProps) { return ; } function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( {children} ); } function ContextMenuSubContent({ className, ...props }: React.ComponentProps) { return ( ); } function ContextMenuContent({ className, ...props }: React.ComponentProps) { return ( ); } function ContextMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps & { inset?: boolean; variant?: "default" | "destructive"; }) { return ( ); } function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) { return ( {children} ); } function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( ); } function ContextMenuSeparator({ className, ...props }: React.ComponentProps) { return ( ); } function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) { return ( ); } export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, }; // file: app/components/ui/dialog.tsx import * as DialogPrimitive from "@radix-ui/react-dialog"; import { XIcon } from "lucide-react"; import * as React from "react"; import { cn } from "~/lib/utils"; function Dialog({ ...props }: React.ComponentProps) { return ; } function DialogTrigger({ ...props }: React.ComponentProps) { return ; } function DialogPortal({ ...props }: React.ComponentProps) { return ; } function DialogClose({ ...props }: React.ComponentProps) { return ; } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ); } function DialogContent({ className, children, ...props }: React.ComponentProps) { return ( {children} Close ); } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ); } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ); } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, }; // file: app/components/ui/dropdown-menu.tsx import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; import * as React from "react"; import { cn } from "~/lib/utils"; function DropdownMenu({ ...props }: React.ComponentProps) { return ; } function DropdownMenuPortal({ ...props }: React.ComponentProps) { return ; } function DropdownMenuTrigger({ ...props }: React.ComponentProps) { return ; } function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps) { return ( ); } function DropdownMenuGroup({ ...props }: React.ComponentProps) { return ; } function DropdownMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps & { inset?: boolean; variant?: "default" | "destructive"; }) { return ( ); } function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) { return ( {children} ); } function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) { return ; } function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( ); } function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { return ( ); } function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) { return ( ); } function DropdownMenuSub({ ...props }: React.ComponentProps) { return ; } function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( {children} ); } function DropdownMenuSubContent({ className, ...props }: React.ComponentProps) { return ( ); } export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, }; // file: app/components/ui/form.tsx import * as LabelPrimitive from "@radix-ui/react-label"; import { Slot } from "@radix-ui/react-slot"; import * as React from "react"; import { Controller, FormProvider, useFormContext, useFormState, type ControllerProps, type FieldPath, type FieldValues, } from "react-hook-form"; import { Label } from "~/components/ui/label"; import { cn } from "~/lib/utils"; const Form = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { name: TName; }; const FormFieldContext = React.createContext({} as FormFieldContextValue); const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { return ( ); }; const useFormField = () => { const fieldContext = React.useContext(FormFieldContext); const itemContext = React.useContext(FormItemContext); const { getFieldState } = useFormContext(); const formState = useFormState({ name: fieldContext.name }); const fieldState = getFieldState(fieldContext.name, formState); if (!fieldContext) { throw new Error("useFormField should be used within "); } const { id } = itemContext; return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, }; }; type FormItemContextValue = { id: string; }; const FormItemContext = React.createContext({} as FormItemContextValue); function FormItem({ className, ...props }: React.ComponentProps<"div">) { const id = React.useId(); return (

); } function FormLabel({ className, required, ...props }: React.ComponentProps & { required?: boolean }) { const { error, formItemId } = useFormField(); return (

{required && *}

); } function FormControl({ ...props }: React.ComponentProps) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return ( ); } function FormDescription({ className, ...props }: React.ComponentProps<"p">) { const { formDescriptionId } = useFormField(); return (

); } function FormMessage({ className, ...props }: React.ComponentProps<"p">) { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message ?? "") : props.children; if (!body) { return null; } return (

{body}

); } export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField }; // file: app/components/ui/icon-upload-field.tsx import { ImagePlus, RotateCcw, XCircle } from "lucide-react"; import React, { useCallback } from "react"; import type { ControllerRenderProps, FieldError } from "react-hook-form"; import { Button } from "./button"; // Props for our custom field component interface IconUploadFieldProps { field: ControllerRenderProps; // field.value can be File | string (URL) | null | undefined error?: FieldError; accept?: string; previewContainerClassName?: string; defaultPreview?: string; // Visual fallback URL if field.value is initially undefined formDefaultValue?: string | null | undefined; // The actual RHF default value for this field } export function IconUploadField({ field, error, accept = "image/*", previewContainerClassName = "w-24 h-24 rounded-full", defaultPreview, formDefaultValue, // New prop }: IconUploadFieldProps) { const [previewUrl, setPreviewUrl] = React.useState(null); const fileInputRef = React.useRef(null); React.useEffect(() => { let objectUrlToRevoke: string | null = null; if (field.value instanceof File) { objectUrlToRevoke = URL.createObjectURL(field.value); setPreviewUrl(objectUrlToRevoke); } else if (typeof field.value === "string" && field.value) { setPreviewUrl(field.value); } else if (field.value === null) { setPreviewUrl(null); } else if (field.value === undefined && defaultPreview) { // Show visual default prop if field value is undefined setPreviewUrl(defaultPreview); } else { setPreviewUrl(null); } return () => { if (objectUrlToRevoke) { URL.revokeObjectURL(objectUrlToRevoke); } }; }, [field.value, defaultPreview]); const handleFileChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; field.onChange(file || undefined); if (event.target) { event.target.value = ""; } }; const handleRemoveImage = useCallback( (e: React.MouseEvent) => { e.preventDefault(); field.onChange(null); // Set RHF value to null if (fileInputRef.current) { fileInputRef.current.value = ""; // Clear the native file input } }, [field], ); const handleResetToDefault = useCallback( (e: React.MouseEvent) => { e.preventDefault(); // The button's visibility logic ensures formDefaultValue is relevant. // This will set RHF value to string (URL), null, or undefined, as per formDefaultValue. field.onChange(undefined); if (fileInputRef.current) { fileInputRef.current.value = ""; // Clear the native file input } }, [field, formDefaultValue], ); const triggerFileInput = useCallback(() => { fileInputRef.current?.click(); }, []); // Visibility for the "Remove" button: show if there's a File or a URL string in field.value const showRemoveButton = (!!field.value && (field.value instanceof File || typeof field.value === "string")) || (formDefaultValue && field.value === undefined); // Visibility for the "Reset to Default" button const canReset = typeof formDefaultValue !== "undefined"; // Was a formDefaultValue prop provided? // Is current value different from the formDefaultValue? // (A File object is always different from a URL string/null/undefined default) const isDifferentFromDefault = (field.value instanceof File || (field.value !== formDefaultValue && field.value !== undefined)) && formDefaultValue; const showResetButton = canReset && isDifferentFromDefault; return (

{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); triggerFileInput(); } }} role="button" tabIndex={0} aria-label={previewUrl ? "Change icon" : "Upload icon"} aria-invalid={!!error} aria-describedby={error ? `${field.name}-error` : undefined} > {previewUrl ? ( Icon preview

) : ( )}

{/* Optional: A separate button to trigger file input, if needed. */} {/* */} {showRemoveButton && ( )} {showResetButton && ( )}

); } // file: app/components/ui/input.tsx import * as React from "react"; import { cn } from "~/lib/utils"; function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( ); } export { Input }; // file: app/components/ui/label.tsx "use client"; import * as React from "react"; import * as LabelPrimitive from "@radix-ui/react-label"; import { cn } from "~/lib/utils"; function Label({ className, ...props }: React.ComponentProps) { return ( ); } export { Label }; // file: app/components/ui/scroll-area.tsx import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; import * as React from "react"; import { cn } from "~/lib/utils"; function ScrollArea({ className, children, scrollbarSize, viewportRef, ...props }: React.ComponentProps & { scrollbarSize?: "default" | "narrow" | "none"; viewportRef?: React.Ref; }) { return ( {children} ); } function ScrollBar({ className, orientation = "vertical", size = "default", ...props }: React.ComponentProps & { size?: "default" | "narrow" | "none"; }) { const classes = { vertical: { className: "h-full border-l border-l-transparent", size: { default: "w-2.5", narrow: "w-1.5", none: "hidden", }, }, horizontal: { className: "flex-col border-t border-t-transparent", size: { default: "h-2.5", narrow: "h-1.5", none: "hidden", }, }, }; return ( ); } export { ScrollArea, ScrollBar }; // file: app/components/ui/select.tsx import * as React from "react"; import * as SelectPrimitive from "@radix-ui/react-select"; import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { cn } from "~/lib/utils"; function Select({ ...props }: React.ComponentProps) { return ; } function SelectGroup({ ...props }: React.ComponentProps) { return ; } function SelectValue({ ...props }: React.ComponentProps) { return ; } function SelectTrigger({ className, size = "default", children, ...props }: React.ComponentProps & { size?: "sm" | "default"; }) { return ( {children} ); } function SelectContent({ className, children, position = "popper", ...props }: React.ComponentProps) { return ( {children} ); } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ); } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ); } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ); } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ); } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, }; // file: app/components/ui/separator.tsx import * as React from "react"; import * as SeparatorPrimitive from "@radix-ui/react-separator"; import { cn } from "~/lib/utils"; function Separator({ className, orientation = "horizontal", decorative = true, ...props }: React.ComponentProps) { return ( ); } export { Separator }; // file: app/components/ui/tabs.tsx import * as React from "react"; import * as TabsPrimitive from "@radix-ui/react-tabs"; import { cn } from "~/lib/utils"; function Tabs({ className, ...props }: React.ComponentProps) { return ; } function TabsList({ className, ...props }: React.ComponentProps) { return ( ); } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ); } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ); } export { Tabs, TabsList, TabsTrigger, TabsContent }; // file: app/components/ui/textarea.tsx import * as React from "react"; import { cn } from "~/lib/utils"; function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { return (

);
}

export { Textarea };

// file: app/components/ui/tooltip.tsx
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";

import { cn } from "~/lib/utils";

function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
    return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
}

function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
    return (
        <TooltipProvider>
            <TooltipPrimitive.Root data-slot="tooltip" {...props} />
        </TooltipProvider>
    );
}

function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}

function TooltipContent({
    className,
    sideOffset = 0,
    children,
    ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
    return (
        <TooltipPrimitive.Portal>
            <TooltipPrimitive.Content
                data-slot="tooltip-content"
                sideOffset={sideOffset}
                className={cn(
                    "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
                    className,
                )}
                {...props}
            >
                {children}
                <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
            </TooltipPrimitive.Content>
        </TooltipPrimitive.Portal>
    );
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

// file: app/components/user-avatar.tsx
import type { PartialUser } from "~/lib/api/types";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";

interface UserAvatarProps {
    user: PartialUser | undefined;
}

export default function UserAvatar({ user, ...props }: UserAvatarProps & React.ComponentProps<typeof Avatar>) {
    return (
        <Avatar {...props}>
            <AvatarImage src={user?.avatarUrl} />
            <AvatarFallback className="text-muted-foreground">{user?.username?.[0]}</AvatarFallback>
        </Avatar>
    );
}

// file: app/components/user-context-menu.tsx
import { IdCard, Mail } from "lucide-react";
import { useNavigate } from "react-router";
import { createChannel } from "~/lib/api/client/user";
import type { UserId } from "~/lib/api/types";
import { useUsersStore } from "~/stores/users-store";
import {
    ContextMenu,
    ContextMenuContent,
    ContextMenuItem,
    ContextMenuSeparator,
    ContextMenuTrigger,
} from "./ui/context-menu";

interface UserContextMenuProps {
    userId: UserId;
    children: React.ReactNode;
}

export default function UserContextMenu({ userId, children }: UserContextMenuProps) {
    const currentUser = useUsersStore((state) => state.getCurrentUser());
    const navigate = useNavigate();

const onMessage = async () => {
        const reponse = await createChannel([userId]);

navigate(`/app/@me/channels/${reponse.id}`);
    };

const onCopyId = () => {
        navigator.clipboard.writeText(userId);
    };

return (
        <>
            <ContextMenu>
                <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
                <ContextMenuContent>
                    {currentUser?.id !== userId && (
                        <>
                            <ContextMenuItem asChild onClick={onMessage}>
                                <div className="flex justify-between gap-2">
                                    Message
                                    <Mail />
                                </div>
                            </ContextMenuItem>
                            <ContextMenuSeparator />
                        </>
                    )}
                    <ContextMenuItem asChild onClick={onCopyId}>
                        <div className="flex justify-between gap-2">
                            Copy ID
                            <IdCard />
                        </div>
                    </ContextMenuItem>
                </ContextMenuContent>
            </ContextMenu>
        </>
    );
}

// file: app/components/visible-trigger.tsx
import { useEffect, useRef } from "react";

interface VisibleTriggerProps {
    onVisible: () => void | Promise<void>;
    options?: IntersectionObserverInit;
    triggerOnce?: boolean;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
}

/**
 * A component that calls a function when it becomes visible in the viewport
 * or a specified scrollable container.
 */
export default function VisibleTrigger({
    onVisible, // Function to call when the element becomes visible
    options = {}, // Optional: IntersectionObserver options (root, rootMargin, threshold)
    triggerOnce = true, // Optional: If true, trigger only the first time it becomes visible
    children,
    style,
    ...props
}: VisibleTriggerProps & React.ComponentProps<"div">) {
    const elementRef = useRef(null); // Ref to attach to the DOM element we want to observe

useEffect(() => {
        const element = elementRef.current;

// Only proceed if we have the DOM element and the function to call
        if (!element) {
            return;
        }

// Default IntersectionObserver options
        const defaultOptions = {
            root: null, // default is the viewport
            rootMargin: "0px", // No margin by default
            threshold: 0, // Trigger as soon as any part of the element is visible
        };

// Merge provided options with defaults
        const observerOptions = { ...defaultOptions, ...options };

// Create the Intersection Observer instance
        const observer = new IntersectionObserver(
            (entries) => {
                const entry = entries[0]; // Assuming only one target element

// If the element is intersecting (visible)...
                if (entry.isIntersecting) {
                    // console.log('VisibleTrigger: Element is intersecting.', entry);

// Call the provided function
                    onVisible();

// If triggerOnce is true, stop observing this element immediately
                    if (triggerOnce) {
                        // console.log('VisibleTrigger: Triggered once, disconnecting observer.');
                        observer.disconnect(); // Disconnect stops all observations by this instance
                    }
                } else {
                    // console.log('VisibleTrigger: Element is NOT intersecting.', entry);
                }
            },
            observerOptions, // Pass the options to the observer
        );

// Start observing the element
        // console.log('VisibleTrigger: Starting observation.', element);
        observer.observe(element);

// Cleanup function: Disconnect the observer when the component unmounts
        // or when the effect dependencies change.
        return () => {
            // console.log('VisibleTrigger: Cleaning up observer.');
            if (observer) {
                // Calling disconnect multiple times is safe.
                observer.disconnect();
            }
        };

// Effect dependencies:
        // - elementRef: Need the DOM element reference.
        // - onVisible: If the function prop changes, we need a new observer with the new function.
        // - options: If observer options change, we need a new observer.
        // - triggerOnce: If triggerOnce changes, the logic inside the observer callback changes,
        //                so we need a new observer instance.
    }, [elementRef, onVisible, options, triggerOnce]);

// Render a div that we will attach the ref to.
    // Ensure it has some minimal dimension if no children are provided,
    // so the observer can detect its presence.
    return (
        <div ref={elementRef} style={{ minHeight: children ? "auto" : "1px", ...style }} {...props}>
            {children} {/* Render any children passed to the component */}
        </div>
    );
}

// file: app/hooks/use-fetch-user.ts
import { useQuery } from "@tanstack/react-query";
import { getUser } from "~/lib/api/client/user";
import type { UserId } from "~/lib/api/types";
import { useUsersStore } from "~/stores/users-store";

async function fetchCurrentUser() {
    const { setCurrentUserId, addUser } = useUsersStore.getState();

const user = await import("~/lib/api/client/user").then((m) => m.default.me());
    setCurrentUserId(user.id);
    addUser(user);

return null;
}

export const useFetchCurrentUser = () => {
    const query = useQuery({
        queryKey: ["users", "@me"],
        queryFn: fetchCurrentUser,
    });

return query;
};

export const useFetchUser = (userId: UserId) => {
    const query = useQuery({
        queryKey: ["users", userId],
        queryFn: async () => {
            if (useUsersStore.getState().users[userId]) {
                return null;
            }

const response = await getUser(userId);

useUsersStore.getState().addUser(response);

return null;
        },
    });

return query;
};

export const useFetchUsers = (userIds: UserId[]) => {
    const query = useQuery({
        queryKey: ["users", ...userIds],
        queryFn: async () => {
            const userIdsToFetch = userIds.filter((userId) => !useUsersStore.getState().users[userId]);

if (userIdsToFetch.length === 0) {
                return null;
            }

const response = await Promise.all(userIds.map(getUser));

for (const user of response) {
                useUsersStore.getState().addUser(user);
            }

return null;
        },
    });

return query;
};

// file: app/hooks/use-origin.ts
import React from "react";

export const useOrigin = () => {
    const [isMounted, setIsMounted] = React.useState(false);

React.useEffect(() => {
        setIsMounted(true);
    }, []);

const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";

if (!isMounted) {
        return "";
    }

return origin;
};

// file: app/lib/api/client/auth.ts
import axios from "../http-client";
import type { FullUser } from "../types";

interface RegisterRequest {
    email: string;
    username: string;
    displayName?: string;
    password: string;
}

interface LoginRequest {
    username: string;
    password: string;
}

interface LoginResponse {
    user: FullUser;
    token: string;
}

export async function register(request: RegisterRequest) {
    await axios.post("/auth/register", request);
}

export async function login(request: LoginRequest) {
    const response = await axios.post("/auth/login", request);

return response.data as LoginResponse;
}

export default {
    register,
    login,
};

// file: app/lib/api/client/channel.ts
import axios from "../http-client";
import { messageSchema, type ChannelId, type Uuid } from "../types";

export async function paginatedMessages(channelId: ChannelId, limit: number, before: ChannelId | undefined) {
    const response = await axios.get(`/channels/${channelId}/messages`, {
        params: {
            limit,
            before,
        },
    });

return (response.data as unknown[]).map((value) => messageSchema.parse(value));
}

export async function sendMessage(channelId: ChannelId, content: string, attachments?: Uuid[]) {
    const response = await axios.post(`/channels/${channelId}/messages`, {
        content,
        attachments,
    });

return messageSchema.parse(response.data);
}

export default {
    paginatedMessages,
    sendMessage,
};

// file: app/lib/api/client/file.ts
import axios from "../http-client";

export async function uploadFile(file: File) {
    const formData = new FormData();
    formData.append("files", file);

const response = await axios.postForm(`/files`, formData);

return response.data as string[];
}

export async function uploadFiles(file: File[]) {
    const formData = new FormData();
    for (const f of file) {
        formData.append("files", f);
    }

const response = await axios.postForm(`/files`, formData);

return response.data as string[];
}

export default {
    uploadFile,
    uploadFiles,
};

// file: app/lib/api/client/server.ts
import axios from "../http-client";
import type { ChannelId, ChannelType, Server, ServerChannel, ServerId, ServerInvite } from "../types";

interface CreateServerRequest {
    name: string;
    iconId?: string;
}

interface CreateServerChannelRequest {
    name: string;
    type: ChannelType;
}

export async function list() {
    const response = await axios.get("/servers");

return response.data as Server[];
}

export async function create(request: CreateServerRequest) {
    const response = await axios.post("/servers", request);

return response.data as Server;
}

export async function get(serverId: ServerId) {
    const response = await axios.get(`/servers/${serverId}`);

return response.data as Server;
}

export async function deleteServer(serverId: ServerId) {
    const response = await axios.delete(`/servers/${serverId}`);

return response.data as Server;
}

export async function listChannels(serverId: ServerId) {
    const response = await axios.get(`/servers/${serverId}/channels`);

return response.data as ServerChannel[];
}

export async function createChannel(serverId: ServerId, request: CreateServerChannelRequest) {
    const response = await axios.post(`/servers/${serverId}/channels`, request);

return response.data as ServerChannel;
}

export async function getChannel(serverId: ServerId, channelId: ChannelId) {
    const response = await axios.get(`/servers/${serverId}/channels/${channelId}`);

return response.data as ServerChannel;
}

export async function deleteChannel(serverId: ServerId, channelId: ChannelId) {
    const response = await axios.delete(`/servers/${serverId}/channels/${channelId}`);

return response.data as ServerChannel;
}

export async function createInvite(serverId: ServerId) {
    const response = await axios.post(`/servers/${serverId}/invites`);

return response.data as ServerInvite;
}

export async function getInvite(inviteCode: string) {
    const response = await axios.get(`/invites/${inviteCode}`);

return response.data as Server;
}

export default {
    create,
    list,
    listChannels,
    get,
    deleteServer,
    createChannel,
    getChannel,
    deleteChannel,
    createInvite,
    getInvite,
};

// file: app/lib/api/client/user.ts
import axios from "../http-client";
import type { FullUser, PartialUser, RecipientChannel, UserId, Uuid } from "../types";

export async function me() {
    const response = await axios.get("/users/@me");

return response.data as FullUser;
}

export async function getUser(userId: UserId) {
    const response = await axios.get(`/users/${userId}`);

return response.data as PartialUser;
}

export async function channels() {
    const response = await axios.get("/users/@me/channels");

return response.data as RecipientChannel[];
}

export async function createChannel(recipients: UserId[]) {
    const response = await axios.post("/users/@me/channels", {
        recipients,
    });

return response.data as RecipientChannel;
}

interface PatchUserRequest {
    displayName?: string | null;
    avatarId?: Uuid | null;
}

export async function patchUser(request: PatchUserRequest) {
    const response = await axios.patch(`/users/@me`, request);

return response.data as FullUser;
}

export default {
    me,
    channels,
    createChannel,
    getUser,
    patchUser,
};

// file: app/lib/api/http-client.ts
import axios from "axios";
import { useTokenStore } from "~/stores/token-store";
import { API_URL } from "../consts";

axios.interceptors.request.use(
    (config) => {
        const token = useTokenStore.getState().token;

if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }

return config;
    },
    (error) => {
        return Promise.reject(error);
    },
);

axios.defaults.baseURL = API_URL;
axios.defaults.headers.common["Content-Type"] = "application/json";

export default axios;

// file: app/lib/api/types.ts
import { z } from "zod";

export type TypeToZod<T> = {
    [K in keyof T]: T[K] extends ReadonlyArray<infer E> | undefined // 1. Handle Arrays (including arrays of objects, optional or required)
        ? undefined extends T[K]
            ? E extends object
                ? z.ZodOptional<z.ZodArray<z.ZodObject<TypeToZod<E>>>>
                : z.ZodOptional<z.ZodArray<z.ZodType<Exclude<E, null | undefined>>>>
            : E extends object
              ? z.ZodArray<z.ZodObject<TypeToZod<E>>>
              : z.ZodArray<z.ZodType<Exclude<E, null | undefined>>>
        : // 2. Handle Primitives
          T[K] extends string | number | boolean | Date | null | undefined
          ? undefined extends T[K]
              ? z.ZodOptional<z.ZodType<Exclude<T[K], undefined | null>>>
              : z.ZodType<T[K]>
          : // 3. Handle Objects (required or optional, but not arrays)
            T[K] extends object | undefined
            ? undefined extends T[K]
                ? z.ZodOptional<z.ZodObject<TypeToZod<NonNullable<T[K]>>>>
                : T[K] extends object
                  ? z.ZodObject<TypeToZod<T[K]>>
                  : z.ZodUnknown // Fallback for unexpected required non-object/non-primitive types
            : // 4. Fallback for any other types
              z.ZodUnknown;
};

export const createZodObject = <T>(obj: TypeToZod<T>) => {
    return z.object(obj);
};

export type Uuid = string;

export type UserId = Uuid;
export type ServerId = Uuid;
export type ChannelId = Uuid;
export type MessageId = Uuid;

export interface FullUser {
    id: UserId;
    avatarUrl?: string;
    username: string;
    displayName?: string;
    email: string;
    bot: boolean;
    system: boolean;
    settings: unknown;
}

export interface Server {
    id: ServerId;
    name: string;
    iconUrl?: string;
    ownerId: UserId;
}

export enum ChannelType {
    SERVER_TEXT = "server_text",
    SERVER_VOICE = "server_voice",
    SERVER_CATEGORY = "server_category",

DIRECT_MESSAGE = "direct_message",
    GROUP = "group",
}

export interface Message {
    id: MessageId;
    channelId: ChannelId;
    authorId: UserId;
    content: string;
    createdAt: Date;
    attachments: UploadedFile[];
}

export interface UploadedFile {
    id: Uuid;
    filename: string;
    contentType: string;
    size: number;
    url: string;
}

export const uploadFileSchema = createZodObject<UploadedFile>({
    id: z.string(),
    filename: z.string(),
    contentType: z.string(),
    size: z.number(),
    url: z.string(),
});

export const messageSchema = createZodObject<Message>({
    id: z.string(),
    channelId: z.string(),
    authorId: z.string(),
    content: z.string(),
    createdAt: z.coerce.date(),
    attachments: z.array(uploadFileSchema),
});

export interface Channel {
    id: ChannelId;
    name: string;
    type: ChannelType;
    lastMessageId?: MessageId;
}

export interface ServerChannel {
    id: ChannelId;
    name: string;
    type: ChannelType;
    lastMessageId?: MessageId;
    serverId: ServerId;
    parentId?: ChannelId;
}

export interface ServerInvite {
    code: string;
    serverId: ServerId;
    inviterId?: UserId;
    expiresAt?: string;
}

export interface RecipientChannel {
    id: ChannelId;
    name: string;
    type: ChannelType;
    lastMessageId?: MessageId;
    recipients: UserId[];
}

export interface PartialUser {
    id: ChannelId;
    username: string;
    displayName?: string;
    avatarUrl?: string;
    bot: boolean;
    system: boolean;
}

// file: app/lib/consts.ts
export const API_URL = "http://localhost:12345/api/v1";

// file: app/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

export function getFirstLetters(str: string, n: number): string {
    return str
        .split(/\s+/)
        .slice(0, n)
        .map((word) => word[0] || "")
        .join("");
}

export function formatFileSize(bytes: number, decimals = 2): string {
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
}

export function createPrefixedLogger(prefix: string, styles?: string[]) {
    const result: Record<string, (...args: unknown[]) => void> = {};

const methods = ["log", "trace", "debug", "info", "warn", "error"] as const;

for (const methodName of methods) {
        const originalMethod = console[methodName].bind(console);

result[methodName] = (...args: unknown[]) => {
            if (typeof args[0] === "string") {
                originalMethod(`${prefix} ${args[0]}`, ...(styles || []), ...args.slice(1));
            } else {
                originalMethod(prefix, styles, ...args);
            }
        };
    }

return result;
}

// file: app/lib/websocket/gateway/client.ts
import type { ChannelId, ServerId, UserId } from "~/lib/api/types";
import { createPrefixedLogger } from "~/lib/utils";
import {
    type ClientMessage,
    ClientMessageType,
    ConnectionState,
    ErrorCode,
    type EventData,
    EventType,
    type ServerMessage,
    ServerMessageType,
} from "./types";

export type GatewayEvents = {
    [K in EventType]: (data: Extract<EventData, { type: K }>["data"]) => void;
};

export type ControlEvents = {
    stateChange: (state: ConnectionState) => void;
    error: (error: Error, code?: ErrorCode) => void;
    authenticated: (userId: UserId, sessionKey: string) => void;
};

export interface GatewayClientOptions {
    reconnect?: boolean;
    reconnectDelay?: number;
    maxReconnectAttempts?: number;
}

export class GatewayClient {
    private socket: WebSocket | null = null;
    private state: ConnectionState = ConnectionState.DISCONNECTED;
    private url: string;
    private token: string | null = null;
    private sessionKey: string | null = null;
    private userId: string | null = null;
    private reconnectAttempts = 0;
    private reconnectTimeout: NodeJS.Timeout | null = null;
    private eventHandlers: Partial<ControlEvents> = {};
    private serverEventHandlers: Partial<GatewayEvents> = {};
    private options: Required<GatewayClientOptions>;
    private closeInitiatedByClient = false;

private connectionLock = false;

constructor(url: string, options: GatewayClientOptions = {}) {
        this.url = url;
        this.options = {
            reconnect: options.reconnect ?? true,
            reconnectDelay: options.reconnectDelay ?? 5000,
            maxReconnectAttempts: options.maxReconnectAttempts ?? 10,
        };
    }

// Public methods
    public connect(token: string): void {
        logger.log("Connecting to %s", this.url);

if (this.connectionLock) {
            logger.warn("Connection already in progress");
            return;
        }

if (this.token === token) {
            logger.warn("Token is the same as the current token");
            return;
        }

this.connectionLock = true;

if (this.state !== ConnectionState.DISCONNECTED) {
            this.disconnect();
        }

this.token = token;
        this.closeInitiatedByClient = false;
        this.reconnectAttempts = 0;
        this.connectToWebSocket();
    }

public disconnect(): void {
        logger.log("Disconnecting");

this.closeInitiatedByClient = true;
        this.cleanupSocket();
        this.setState(ConnectionState.DISCONNECTED);

this.connectionLock = false;
    }

public updateVoiceState(serverId: ServerId, channelId: ChannelId): void {
        this.sendMessage({
            type: ClientMessageType.VOICE_STATE_UPDATE,
            data: { serverId, channelId },
        });
    }

public requestVoiceStates(serverId: ServerId): void {
        this.sendMessage({
            type: ClientMessageType.REQUEST_VOICE_STATES,
            data: { serverId },
        });
    }

public onEvent<K extends keyof GatewayEvents>(event: K | string, handler: GatewayEvents[K]): void {
        this.serverEventHandlers[event as K] = handler;
    }

public offEvent<K extends keyof GatewayEvents>(event: K): void {
        delete this.serverEventHandlers[event];
    }

public onControl<K extends keyof ControlEvents>(event: K, handler: ControlEvents[K]): void {
        this.eventHandlers[event] = handler;
    }

public offControl<K extends keyof ControlEvents>(event: K): void {
        delete this.eventHandlers[event];
    }

public get connectionState(): ConnectionState {
        return this.state;
    }

public get currentUserId(): UserId | null {
        return this.userId;
    }

public get currentSessionKey(): string | null {
        return this.sessionKey;
    }

// Private methods
    private connectToWebSocket(): void {
        this.setState(ConnectionState.CONNECTING);

try {
            this.socket = new WebSocket(this.url);

this.socket.onopen = this.onSocketOpen.bind(this);
            this.socket.onmessage = this.onSocketMessage.bind(this);
            this.socket.onerror = this.onSocketError.bind(this);
            this.socket.onclose = this.onSocketClose.bind(this);
        } catch (error) {
            this.emitError(new Error("Failed to create WebSocket connection", { cause: error }));
            this.setState(ConnectionState.ERROR);
        }
    }

private onSocketOpen(): void {
        this.connectionLock = false;

logger.log("Socket opened");
        this.setState(ConnectionState.AUTHENTICATING);

if (this.token) {
            this.sendMessage({
                type: ClientMessageType.AUTHENTICATE,
                data: { token: this.token },
            });
        } else {
            this.emitError(new Error("No authentication token provided"));
            this.disconnect();
        }
    }

private onSocketMessage(event: MessageEvent): void {
        try {
            const message = JSON.parse(event.data) as ServerMessage;
            this.handleServerMessage(message);
        } catch (error) {
            this.emitError(
                new Error("Failed to parse WebSocket message", {
                    cause: error,
                }),
            );
        }
    }

private onSocketError(event: Event): void {
        this.connectionLock = false;
        logger.log("Socket error: %s", event);

this.emitError(new Error("WebSocket error occurred"));
    }

private onSocketClose(event: CloseEvent): void {
        logger.log("Socket closed: %s", event);

this.connectionLock = false;

if (
            this.options.reconnect &&
            !this.closeInitiatedByClient &&
            this.reconnectAttempts < this.options.maxReconnectAttempts
        ) {
            logger.log(
                "Reconnecting in %d seconds (%d/%d)",
                this.options.reconnectDelay / 1000,
                this.reconnectAttempts + 1,
                this.options.maxReconnectAttempts,
            );
            this.reconnectAttempts++;

this.reconnectTimeout = setTimeout(() => {
                if (this.token) {
                    this.connectToWebSocket();
                }
            }, this.options.reconnectDelay);
        } else {
            this.setState(ConnectionState.DISCONNECTED);
        }
    }

private handleServerMessage(message: ServerMessage): void {
        logger.log("Received message: ", message);

switch (message.type) {
            case ServerMessageType.AUTHENTICATE_ACCEPTED:
                this.userId = message.data.userId;
                this.sessionKey = message.data.sessionKey;
                this.setState(ConnectionState.CONNECTED);
                this.emitControl("authenticated", message.data.userId, message.data.sessionKey);
                break;

case ServerMessageType.AUTHENTICATE_DENIED:
                this.emitError(new Error("Authentication denied"));
                this.disconnect();
                break;

case ServerMessageType.ERROR:
                this.emitError(new Error(`Server error: ${message.data.code}`), message.data.code);
                break;

case ServerMessageType.EVENT:
                this.handleEventMessage(message.data.event);
                break;

default:
                console.warn("Unhandled server message type:", message);
        }
    }

private handleEventMessage(event: EventData): void {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.emitEvent(event.type, event.data as any);
    }

private sendMessage(message: ClientMessage): void {
        logger.log("Sending message: %o", message);

if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(JSON.stringify(message));
        } else {
            this.emitError(new Error("Cannot send message: socket not connected"));
        }
    }

private setState(state: ConnectionState): void {
        if (this.state !== state) {
            logger.log("State changed to %s", state);

this.state = state;
            this.emitControl("stateChange", state);
        }
    }

private emitError(error: Error, code?: ErrorCode): void {
        logger.error("Error: %s", error, error.cause);

this.setState(ConnectionState.ERROR);
        this.emitControl("error", error, code);
    }

private emitControl<K extends keyof ControlEvents>(event: K, ...args: Parameters<ControlEvents[K]>): void {
        const handler = this.eventHandlers[event];
        if (handler) {
            // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
            (handler as Function)(...args);
        }
    }

private emitEvent<K extends keyof GatewayEvents>(event: K, ...args: Parameters<GatewayEvents[K]>): void {
        const handler = this.serverEventHandlers[event];
        if (handler) {
            // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
            (handler as Function)(...args);
        }
    }

private cleanupSocket(): void {
        logger.log("Cleaning up socket");

if (this.reconnectTimeout) {
            clearTimeout(this.reconnectTimeout);
            this.reconnectTimeout = null;
        }

if (this.socket) {
            // Remove all event listeners
            this.socket.onopen = null;
            this.socket.onmessage = null;
            this.socket.onerror = null;
            this.socket.onclose = null;

// Close the connection if it's still open
            if (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING) {
                this.socket.close();
            }

this.socket = null;
        }

this.sessionKey = null;
        this.userId = null;
    }
}

const logger = createPrefixedLogger("%cGateway WS%c:", ["color: red; font-weight: bold;", ""]);

// file: app/lib/websocket/gateway/types.ts
import type {
    Channel,
    ChannelId,
    Message,
    MessageId,
    PartialUser,
    Server,
    ServerChannel,
    ServerId,
    UserId,
} from "~/lib/api/types";

export enum ServerMessageType {
    AUTHENTICATE_ACCEPTED = "AUTHENTICATE_ACCEPTED",
    AUTHENTICATE_DENIED = "AUTHENTICATE_DENIED",
    EVENT = "EVENT",
    ERROR = "ERROR",
}

export enum ClientMessageType {
    AUTHENTICATE = "AUTHENTICATE",
    VOICE_STATE_UPDATE = "VOICE_STATE_UPDATE",
    REQUEST_VOICE_STATES = "REQUEST_VOICE_STATES",
}

// Error codes from the server
export enum ErrorCode {
    AUTHENTICATION_FAILED = "AUTHENTICATION_FAILED",
    TOKEN_GENERATION_FAILED = "TOKEN_GENERATION_FAILED",
}

// Event types from the server
export enum EventType {
    ADD_SERVER = "ADD_SERVER",
    REMOVE_SERVER = "REMOVE_SERVER",

ADD_DM_CHANNEL = "ADD_DM_CHANNEL",
    REMOVE_DM_CHANNEL = "REMOVE_DM_CHANNEL",

ADD_SERVER_CHANNEL = "ADD_SERVER_CHANNEL",
    REMOVE_SERVER_CHANNEL = "REMOVE_SERVER_CHANNEL",

ADD_USER = "ADD_USER",
    REMOVE_USER = "REMOVE_USER",

ADD_SERVER_MEMBER = "ADD_SERVER_MEMBER",
    REMOVE_SERVER_MEMBER = "REMOVE_SERVER_MEMBER",

ADD_MESSAGE = "ADD_MESSAGE",
    REMOVE_MESSAGE = "REMOVE_MESSAGE",

VOICE_CHANNEL_CONNECTED = "VOICE_CHANNEL_CONNECTED",
    VOICE_CHANNEL_DISCONNECTED = "VOICE_CHANNEL_DISCONNECTED",

VOICE_SERVER_UPDATE = "VOICE_SERVER_UPDATE",
}

// Client message types
export interface AuthenticateMessage {
    type: ClientMessageType.AUTHENTICATE;
    data: {
        token: string;
    };
}

export interface VoiceStateUpdateMessage {
    type: ClientMessageType.VOICE_STATE_UPDATE;
    data: {
        serverId: ServerId;
        channelId: ChannelId;
    };
}

export interface RequestVoiceStatesMessage {
    type: ClientMessageType.REQUEST_VOICE_STATES;
    data: {
        serverId: ServerId;
    };
}

export type ClientMessage = AuthenticateMessage | VoiceStateUpdateMessage | RequestVoiceStatesMessage;

// Server message types
export interface AuthenticateAcceptedMessage {
    type: ServerMessageType.AUTHENTICATE_ACCEPTED;
    data: {
        userId: UserId;
        sessionKey: string;
    };
}

export interface AuthenticateDeniedMessage {
    type: ServerMessageType.AUTHENTICATE_DENIED;
}

export interface ErrorMessage {
    type: ServerMessageType.ERROR;
    data: {
        code: ErrorCode;
    };
}

// Event message types
export interface AddServerEvent {
    type: EventType.ADD_SERVER;
    data: {
        server: Server;
    };
}

export interface RemoveServerEvent {
    type: EventType.REMOVE_SERVER;
    data: {
        serverId: ServerId;
    };
}

export interface AddDmChannelEvent {
    type: EventType.ADD_DM_CHANNEL;
    data: {
        channel: Channel;
        recipients: UserId[];
    };
}

export interface RemoveDmChannelEvent {
    type: EventType.REMOVE_DM_CHANNEL;
    data: {
        channelId: ChannelId;
    };
}

export interface AddServerChannelEvent {
    type: EventType.ADD_SERVER_CHANNEL;
    data: {
        channel: ServerChannel;
    };
}

export interface RemoveServerChannelEvent {
    type: EventType.REMOVE_SERVER_CHANNEL;
    data: {
        serverId: ServerId;
        channelId: ChannelId;
    };
}

export interface AddUserEvent {
    type: EventType.ADD_USER;
    data: {
        user: PartialUser;
    };
}

export interface RemoveUserEvent {
    type: EventType.REMOVE_USER;
    data: {
        userId: UserId;
    };
}

export interface AddServerMemberEvent {
    type: EventType.ADD_SERVER_MEMBER;
    data: {
        serverId: ServerId;
        user: PartialUser;
    };
}

export interface RemoveServerMemberEvent {
    type: EventType.REMOVE_SERVER_MEMBER;
    data: {
        serverId: ServerId;
        userId: UserId;
    };
}

export interface AddMessageEvent {
    type: EventType.ADD_MESSAGE;
    data: {
        channelId: ChannelId;
        message: Message;
    };
}

export interface RemoveMessageEvent {
    type: EventType.REMOVE_MESSAGE;
    data: {
        channelId: ChannelId;
        messageId: MessageId;
    };
}

export interface VoiceChannelConnectedEvent {
    type: EventType.VOICE_CHANNEL_CONNECTED;
    data: {
        serverId: ServerId;
        channelId: ChannelId;
        userId: UserId;
    };
}

export interface VoiceChannelDisconnectedEvent {
    type: EventType.VOICE_CHANNEL_DISCONNECTED;
    data: {
        serverId: ServerId;
        channelId: ChannelId;
        userId: UserId;
    };
}

export interface VoiceServerUpdateEvent {
    type: EventType.VOICE_SERVER_UPDATE;
    data: {
        serverId: ServerId;
        channelId: ChannelId;
        token: string;
    };
}

export interface EventMessage {
    type: ServerMessageType.EVENT;
    data: {
        event: EventData;
    };
}

export type ServerMessage = AuthenticateAcceptedMessage | AuthenticateDeniedMessage | EventMessage | ErrorMessage;

// Connection states
export enum ConnectionState {
    DISCONNECTED = "DISCONNECTED",
    CONNECTING = "CONNECTING",
    AUTHENTICATING = "AUTHENTICATING",
    CONNECTED = "CONNECTED",
    ERROR = "ERROR",
}

// file: app/lib/websocket/voice/client.ts
import { createPrefixedLogger } from "~/lib/utils";
import { ClientMessageType, ConnectionState, ServerMessageType, type ClientMessage, type ServerMessage } from "./types";

export class WebRTCClient {
    private socket: WebSocket | null = null;
    private peerConnection: RTCPeerConnection | null = null;

private onStateChange: (state: ConnectionState) => void;
    private onError: (error: Error) => void;
    private onRemoteStream: (stream: MediaStream) => void;

private state: ConnectionState = ConnectionState.DISCONNECTED;
    private url: string;

private connectionLock = false;
    private disconnectPromise: Promise<void> | null = null;
    private disconnectResolve: (() => void) | null = null;

constructor(
        url: string,
        onStateChange: (state: ConnectionState) => void,
        onError: (error: Error) => void,
        onRemoteStream: (stream: MediaStream) => void,
    ) {
        this.url = url;
        this.onStateChange = onStateChange;
        this.onError = onError;
        this.onRemoteStream = onRemoteStream;
    }

public connect = async (token: string) => {
        if (this.connectionLock) {
            warn("WebRTC: Connection already in progress");
            return;
        }

this.connectionLock = true;

if (this.state !== ConnectionState.DISCONNECTED && this.state !== ConnectionState.ERROR) {
            this.disconnect();
        }

if (this.disconnectPromise) {
            warn("WebRTC: Waiting for previous disconnect to complete");
            try {
                await this.disconnectPromise;
            } catch (error) {
                console.error("WebRTC: Previous disconnect failed:", error);
            }
        }

log("Connecting to %s", this.url);

try {
            this.setState(ConnectionState.CONNECTING);

this.socket = new WebSocket(this.url);

this.socket.onopen = () => {
                log("Socket opened");

this.connectionLock = false;

this.setState(ConnectionState.AUTHENTICATING);
                this.sendMessage({
                    type: ClientMessageType.AUTHENTICATE,
                    data: { token },
                });
            };

this.socket.onmessage = this.handleServerMessage;

this.socket.onerror = (event) => {
                this.handleError(new Error("WebSocket error occurred", { cause: event }));
            };

this.socket.onclose = (e) => {
                log("Socket closed", e);
                this.cleanupResources();
                if (this.state !== ConnectionState.ERROR) {
                    this.setState(ConnectionState.DISCONNECTED);
                }

if (this.disconnectResolve) {
                    this.disconnectResolve();
                    this.disconnectResolve = null;
                    this.disconnectPromise = null;
                }
            };
        } catch (error) {
            this.handleError(error instanceof Error ? error : new Error("Unknown error"));
        }
    };

public disconnect = (): void => {
        if (this.state === ConnectionState.DISCONNECTED) {
            return;
        }

this.setState(ConnectionState.DISCONNECTING);
        this.connectionLock = false;

if (this.socket && this.socket.readyState !== WebSocket.CLOSED) {
            // If we're already waiting for a disconnect, cancel it
            if (this.disconnectPromise) {
                this.disconnectResolve = null;
                this.disconnectPromise = null;
            }

this.disconnectPromise = new Promise((resolve) => {
                this.disconnectResolve = resolve;
            });

const onSocketClose = () => {
                this.socket?.removeEventListener("close", onSocketClose);
                this.disconnectResolve?.();
                this.disconnectResolve = null;
                this.disconnectPromise = null;
            };

this.socket.addEventListener("close", onSocketClose);

if (this.socket.readyState !== WebSocket.CLOSING) {
                this.socket.close(1000, "WebRTC: Cleaning up resources");
            }
        } else {
            this.cleanupResources();
            this.setState(ConnectionState.DISCONNECTED);
        }
    };

public createOffer = async (localStream?: MediaStream): Promise<void> => {
        if (this.state !== ConnectionState.CONNECTED) {
            this.handleError(new Error("Cannot create offer: not connected"));
            return;
        }

try {
            // Create RTCPeerConnection with standard configuration
            const configuration: RTCConfiguration = {
                iceServers: [],
            };

this.peerConnection = new RTCPeerConnection(configuration);

// Add local stream tracks if provided
            if (localStream) {
                localStream.getTracks().forEach((track) => {
                    this.peerConnection!.addTrack(track, localStream);
                });
            }

// Handle ICE candidates
            this.peerConnection.onicecandidate = (event) => {
                if (event.candidate === null) {
                    // ICE gathering completed
                }
            };

// Handle remote stream
            this.peerConnection.ontrack = (event) => {
                const [remoteStream] = event.streams;
                if (remoteStream) {
                    this.onRemoteStream(remoteStream);
                }
            };

// Create offer and set local description
            const offer = await this.peerConnection.createOffer();
            await this.peerConnection.setLocalDescription(offer);

// Send offer to server
            if (this.peerConnection.localDescription) {
                this.sendMessage({
                    type: ClientMessageType.SDP_OFFER,
                    data: {
                        sdp: this.peerConnection.localDescription,
                    },
                });
            }
        } catch (error) {
            this.handleError(error instanceof Error ? error : new Error("Error creating WebRTC offer"));
        }
    };

private handleServerMessage = async (event: MessageEvent): Promise<void> => {
        try {
            const message: ServerMessage = JSON.parse(event.data);

log("Received message: %o", message);

switch (message.type) {
                case ServerMessageType.AUTHENTICATE_ACCEPTED:
                    this.setState(ConnectionState.CONNECTED);
                    break;

case ServerMessageType.AUTHENTICATE_DENIED:
                    this.handleError(new Error("Authentication failed"));
                    break;

case ServerMessageType.SDP_ANSWER:
                    await this.handleSdpAnswer(message.data.sdp);
                    break;

default:
                    warn("Unhandled message type:", message);
            }
        } catch (error) {
            this.handleError(error instanceof Error ? error : new Error("Failed to process message"));
        }
    };

private handleSdpAnswer = async (sdp: RTCSessionDescription): Promise<void> => {
        log("Received SDP answer: %o", sdp);

if (!this.peerConnection) {
            this.handleError(new Error("No peer connection established"));
            return;
        }

try {
            await this.peerConnection.setRemoteDescription(sdp);
        } catch (error) {
            this.handleError(error instanceof Error ? error : new Error("Error setting remote description"));
        }
    };

private sendMessage = (message: ClientMessage): void => {
        log("Sending message: %o", message);

if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(JSON.stringify(message));
        } else {
            this.handleError(new Error("Cannot send message: socket not connected"));
        }
    };

private setState = (state: ConnectionState): void => {
        log("State changed to %s", state);

this.state = state;
        this.onStateChange(state);
    };

private handleError = (error: Error): void => {
        log("Error: %s", error.message);

this.setState(ConnectionState.ERROR);
        this.onError(error);
    };

private cleanupResources = (): void => {
        log("Cleaning up resources");

if (this.peerConnection) {
            this.peerConnection.close();
            this.peerConnection = null;
        }

if (this.socket) {
            this.socket.close(1000, "WebRTC: Cleaning up resources");
            this.socket = null;
        }
    };
}

const { log, warn } = createPrefixedLogger("%cWebRTC WS%c:", ["color: blue; font-weight: bold;", ""]);

// file: app/lib/websocket/voice/types.ts
export enum ConnectionState {
    DISCONNECTED = "DISCONNECTED",
    DISCONNECTING = "DISCONNECTING",
    CONNECTING = "CONNECTING",
    AUTHENTICATING = "AUTHENTICATING",
    CONNECTED = "CONNECTED",
    ERROR = "ERROR",
}

export enum ServerMessageType {
    AUTHENTICATE_ACCEPTED = "AUTHENTICATE_ACCEPTED",
    AUTHENTICATE_DENIED = "AUTHENTICATE_DENIED",
    SDP_ANSWER = "SDP_ANSWER",
}

export type ServerMessage =
    | { type: ServerMessageType.AUTHENTICATE_ACCEPTED }
    | { type: ServerMessageType.AUTHENTICATE_DENIED }
    | {
          type: ServerMessageType.SDP_ANSWER;
          data: {
              sdp: RTCSessionDescription;
          };
      };

export enum ClientMessageType {
    AUTHENTICATE = "AUTHENTICATE",
    SDP_OFFER = "SDP_OFFER",
}

export type ClientMessage =
    | { type: ClientMessageType.AUTHENTICATE; data: { token: string } }
    | {
          type: ClientMessageType.SDP_OFFER;
          data: {
              sdp: RTCSessionDescription;
          };
      };

// file: app/root.tsx
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";

import { ThemeProvider } from "~/components/theme/theme-provider";
import type { Route } from "./+types/root";

import "./app.css";

export const links: Route.LinksFunction = () => [
    { rel: "preconnect", href: "https://fonts.googleapis.com" },
    {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        crossOrigin: "anonymous",
    },
    {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
    },
];

export default function App() {
    return (
        <ThemeProvider defaultTheme="system" storageKey="ui-theme">
            <Outlet />
        </ThemeProvider>
    );
}

export function Layout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <head>
                <meta charSet="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <Meta />
                <Links />
            </head>
            <body>
                {children}
                <ScrollRestoration />
                <Scripts />
            </body>
        </html>
    );
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
    let message = "Oops!";
    let details = "An unexpected error occurred.";
    let stack: string | undefined;

if (isRouteErrorResponse(error)) {
        message = error.status === 404 ? "404" : "Error";
        details = error.status === 404 ? "The requested page could not be found." : error.statusText || details;
    } else if (import.meta.env.DEV && error && error instanceof Error) {
        details = error.message;
        stack = error.stack;
    }

return (
        <main className="pt-16 p-4 container mx-auto">
            <h1>{message}</h1>
            <p>{details}</p>
            {stack && (
                <pre className="w-full p-4 overflow-x-auto">
                    <code>{stack}</code>
                </pre>
            )}
        </main>
    );
}

// file: app/routes/app/current-user-provider.tsx
import { useFetchCurrentUser } from "~/hooks/use-fetch-user";

interface WrapperProps {
    children: React.ReactNode;
}

export default function CurrentUserProvider({ children }: WrapperProps) {
    useFetchCurrentUser();

return <>{children}</>;
}

// file: app/routes/app/index.tsx
import { redirect } from "react-router";

export function clientLoader() {
    return redirect("/app/@me");
}

export default function Index() {
    return null;
}

// file: app/routes/app/invite.tsx
import { redirect } from "react-router";
import type { Route } from "./+types/invite";

export async function clientLoader({ params }: Route.ClientLoaderArgs) {
    const inviteCode = params.inviteCode;

try {
        const response = await import("~/lib/api/client/server").then((m) => m.default.getInvite(inviteCode));

return redirect(`/app/server/${response.id}`);
    } catch {
        return redirect("/app/@me");
    }
}

export default function Index() {
    return null;
}

// file: app/routes/app/layout.tsx
import { useQuery } from "@tanstack/react-query";
import { Outlet } from "react-router";
import AppLayout from "~/components/app-layout";
import { useServerListStore } from "~/stores/server-list-store";

async function fetchServers() {
    const { addServers } = useServerListStore.getState();

const newServers = await import("~/lib/api/client/server").then((m) => m.default.list());
    addServers(newServers);

return null;
}

export default function Layout() {
    useQuery({
        queryKey: ["servers"],
        queryFn: fetchServers,
    });

return (
        <AppLayout>
            <Outlet />
        </AppLayout>
    );
}

// file: app/routes/app/me/channel.tsx
import type { Route } from ".react-router/types/app/routes/app/me/+types/channel";
import { Check } from "lucide-react";
import { useShallow } from "zustand/react/shallow";
import ChannelArea from "~/components/channel-area";
import { Badge } from "~/components/ui/badge";
import { useFetchUsers } from "~/hooks/use-fetch-user";
import { usePrivateChannelsStore } from "~/stores/private-channels-store";
import { useUsersStore } from "~/stores/users-store";

export default function Channel({ params }: Route.ComponentProps) {
    const channelId = params.channelId;
    const currentUserId = useUsersStore((state) => state.currentUserId);

const nativeChannel = usePrivateChannelsStore(useShallow((state) => state.channels[channelId]));

const recipients = nativeChannel?.recipients?.filter((recipient) => recipient !== currentUserId) || [];

useFetchUsers(recipients);

const recipientsUsers =
        useUsersStore(useShallow((state) => recipients.map((recipient) => state.users[recipient]).filter(Boolean))) ||
        [];

if (!nativeChannel) return null;

const renderSystemBadge = recipientsUsers.some((recipient) => recipient.system) && recipients.length === 1;

const channel = {
        ...nativeChannel,
        name: (
            <>
                <div className="flex items-center gap-2">
                    <div>
                        {recipientsUsers.map((recipient) => recipient.displayName || recipient.username).join(", ")}
                    </div>
                    {renderSystemBadge && (
                        <Badge variant="default">
                            {" "}
                            <Check />
                            System
                        </Badge>
                    )}
                </div>
            </>
        ),
    };

return (
        <>
            <ChannelArea channel={channel} />
        </>
    );
}

// file: app/routes/app/me/index.tsx
export default function Index() {
    return (
        <>
            {/* <div className="h-full">
                <div className="size-full relative">
                    <div className="absolute bottom-0 w-full max-h-1/2">
                        <div className="p-2">
                            <TextBox value={""}
                                onChange={(m) => { }}
                                placeholder="Type your message here..."
                                // Example of custom styling:
                                // wrapperClassName="bg-gray-700 border-gray-600 rounded-lg"
                                // inputClassName="text-lg"
                                aria-label="Message input" />
                        </div>
                    </div>
                </div>
            </div> */}
        </>
    );
}

// file: app/routes/app/me/layout.tsx
import { useQuery } from "@tanstack/react-query";
import React from "react";
import { Outlet } from "react-router";
import { useShallow } from "zustand/react/shallow";
import PrivateChannelListItem from "~/components/custom-ui/private-channel-list-item";
import { ScrollArea } from "~/components/ui/scroll-area";
import { usePrivateChannelsStore } from "~/stores/private-channels-store";

async function fetchPrivateChannels() {
    const { addChannels } = usePrivateChannelsStore.getState();

const channels = await import("~/lib/api/client/user").then((m) => m.default.channels());
    addChannels(channels);

return null;
}

function ListComponent() {
    const channels = Object.values(usePrivateChannelsStore(useShallow((state) => state.channels)));
    const sortedChannels = React.useMemo(
        () => channels.sort((a, b) => ((a.lastMessageId ?? a.id) < (b.lastMessageId ?? b.id) ? 1 : -1)),
        [channels],
    );

useQuery({
        queryKey: ["channels", "@me"],
        queryFn: fetchPrivateChannels,
    });

return (
        <div className="h-full flex flex-col">
            <div className="w-full min-h-12">
                <div className="border-b-2 h-full flex items-center justify-center">Private Messages</div>
            </div>

<ScrollArea className="overflow-auto" scrollbarSize="narrow">
                <div className="p-2 flex flex-col gap-1 h-full">
                    {sortedChannels.map((channel) => (
                        <React.Fragment key={channel.id}>
                            <PrivateChannelListItem channel={channel} />
                        </React.Fragment>
                    ))}
                </div>
            </ScrollArea>
        </div>
    );
}

export const handle = {
    listComponent: <ListComponent />,
};

export default function Layout() {
    return (
        <>
            <Outlet />
        </>
    );
}

// file: app/routes/app/providers.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Outlet, redirect } from "react-router";
import { GatewayWebSocketConnectionManager } from "~/components/manager/gateway-websocket-connection-manager";
import { WebRTCConnectionManager } from "~/components/manager/webrtc-connection-manager";
import ModalProvider from "~/components/providers/modal-provider";
import { useTokenStore } from "~/stores/token-store";
import CurrentUserProvider from "./current-user-provider";

export async function clientLoader() {
    const token = useTokenStore.getState().token;

if (!token) {
        return redirect("/login");
    }
}

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
            staleTime: Infinity,
            refetchInterval: Infinity,
            refetchOnReconnect: false,
            refetchOnMount: false,
        },
    },
});

export default function Layout() {
    return (
        <QueryClientProvider client={queryClient}>
            <>
                <CurrentUserProvider>
                    <ModalProvider />
                    <GatewayWebSocketConnectionManager />
                    <WebRTCConnectionManager />
                    <Outlet />
                </CurrentUserProvider>
            </>
        </QueryClientProvider>
    );
}

// file: app/routes/app/server/channel.tsx
import { useNavigate } from "react-router";
import { useShallow } from "zustand/react/shallow";
import ChannelArea from "~/components/channel-area";
import { useServerChannelsStore } from "~/stores/server-channels-store";
import type { Route } from "./+types/channel";

export default function Channel({ params: { serverId, channelId } }: Route.ComponentProps) {
    const navigate = useNavigate();
    const channel = useServerChannelsStore(useShallow((state) => state.channels[serverId][channelId]));

if (!channel) {
        setTimeout(() => navigate(`/app/server/${serverId}`), 0);
        return null;
    }

return (
        <>
            <ChannelArea channel={channel} />
        </>
    );
}

// file: app/routes/app/server/index.tsx
export default function Index() {
    return (
        <>
            {/* <div className="h-full">
                <div className="size-full relative">
                    <div className="absolute bottom-0 w-full max-h-1/2">
                        <div className="p-2">
                            <TextBox value={""}
                                onChange={(m) => { }}
                                placeholder="Type your message here..."
                                // Example of custom styling:
                                // wrapperClassName="bg-gray-700 border-gray-600 rounded-lg"
                                // inputClassName="text-lg"
                                aria-label="Message input" />
                        </div>
                    </div>
                </div>
            </div> */}
        </>
    );
}

// file: app/routes/app/server/layout.tsx
import { useQuery } from "@tanstack/react-query";
import React from "react";
import { Outlet, useNavigate, useParams } from "react-router";
import { useShallow } from "zustand/react/shallow";
import ServerChannelListItem from "~/components/custom-ui/channel-list-item";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { ScrollArea } from "~/components/ui/scroll-area";
import { listChannels } from "~/lib/api/client/server";
import type { ServerId } from "~/lib/api/types";
import { useGatewayStore } from "~/stores/gateway-store";
import { ModalType, useModalStore } from "~/stores/modal-store";
import { useServerChannelsStore } from "~/stores/server-channels-store";
import { useServerListStore } from "~/stores/server-list-store";
import { useUsersStore } from "~/stores/users-store";
import type { Route } from "../server/+types/layout";

async function fetchServerChannels(serverId: ServerId) {
    const { addChannels } = useServerChannelsStore.getState();

const channels = await listChannels(serverId);
    addChannels(channels);

useGatewayStore.getState().requestVoiceStates(serverId as ServerId);

return null;
}

function ListComponent() {
    const serverId = useParams<{ serverId: ServerId }>().serverId!;

useQuery({
        queryKey: ["channels", serverId],
        queryFn: async () => fetchServerChannels(serverId),
    });

const currentUserId = useUsersStore((state) => state.currentUserId);
    const onOpen = useModalStore((state) => state.onOpen);

const server = useServerListStore(useShallow((state) => state.servers[serverId] || null));

const channels = Array.from(
        Object.values(useServerChannelsStore(useShallow((state) => state.channels[serverId] || {}))),
    );

if (!server) {
        return null;
    }

return (
        <div className="h-full flex flex-col">
            <div className="w-full min-h-12">
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <div className="border-b-2 h-full flex items-center justify-center cursor-pointer">
                            {server?.name}
                        </div>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                        <DropdownMenuItem
                            onClick={() =>
                                onOpen(ModalType.CREATE_SERVER_INVITE, {
                                    serverId,
                                })
                            }
                        >
                            Create invite
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            onClick={() =>
                                onOpen(ModalType.CREATE_SERVER_CHANNEL, {
                                    serverId,
                                })
                            }
                        >
                            Create channel
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        {currentUserId === server.ownerId && (
                            <DropdownMenuItem
                                variant="destructive"
                                onClick={() =>
                                    onOpen(ModalType.DELETE_SERVER_CONFIRM, {
                                        serverId,
                                    })
                                }
                            >
                                Delete
                            </DropdownMenuItem>
                        )}
                        {currentUserId !== server.ownerId && (
                            <DropdownMenuItem variant="destructive">Leave</DropdownMenuItem>
                        )}
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>

<ScrollArea className="overflow-auto" scrollbarSize="narrow">
                <div className="p-2 flex flex-col gap-1 h-full">
                    {channels
                        .sort((a, b) => ((a.lastMessageId ?? a.id) < (b.lastMessageId ?? b.id) ? 1 : -1))
                        .map((channel) => (
                            <React.Fragment key={channel.id}>
                                <ServerChannelListItem channel={channel} />
                            </React.Fragment>
                        ))}
                </div>
            </ScrollArea>
        </div>
    );
}

export const handle = {
    listComponent: <ListComponent />,
};

export default function Layout({ params: { serverId } }: Route.ComponentProps) {
    const server = useServerListStore(useShallow((state) => state.servers[serverId!] || null));
    const navigate = useNavigate();

if (!server) {
        setTimeout(() => navigate("/app/@me"), 0);
        return null;
    }

return (
        <>
            <Outlet />
        </>
    );
}

// file: app/routes/app/settings.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import { LogOutIcon, UserIcon } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "~/components/ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { IconUploadField } from "~/components/ui/icon-upload-field";
import { Input } from "~/components/ui/input";
import file from "~/lib/api/client/file";
import { patchUser } from "~/lib/api/client/user";
import { useTokenStore } from "~/stores/token-store";
import { useUsersStore } from "~/stores/users-store";

const schema = z.object({
    displayName: z.string().min(1).max(32).optional().nullable(),
    avatar: z.instanceof(File).optional().nullable(),
});

// Note: This is a mockup based on the provided store structure
export default function Settings() {
    const setToken = useTokenStore((state) => state.setToken);
    const user = useUsersStore((state) => state.getCurrentUser());

const form = useForm<z.infer<typeof schema>>({
        resolver: zodResolver(schema),
        defaultValues: {
            displayName: user?.displayName,
            avatar: undefined,
        },
    });

const onSubmit = async (values: z.infer<typeof schema>) => {
        if (!values) return;

let avatarId: string | null | undefined = values.avatar === null ? null : undefined;
        if (values.avatar) {
            avatarId = (await file.uploadFile(values.avatar))[0];
        }

await patchUser({
            displayName:
                values.displayName === user?.displayName
                    ? undefined
                    : values.displayName === ""
                      ? null
                      : values.displayName,
            avatarId,
        });

form.control._defaultValues = {
            displayName: user?.displayName,
            avatar: undefined,
        };

form.reset();
    };

const onLogout = () => {
        setToken(undefined);
        window.location.reload();
    };

return (
        <div className="flex min-h-screen">
            {/* Sidebar */}
            <div className="w-64 border-r p-6 flex flex-col">
                <h1 className="text-2xl font-bold mb-6">Settings</h1>

<Button variant="outline" className="justify-start mb-2 w-full">
                    <UserIcon className="mr-2 h-4 w-4" />
                    Profile
                </Button>

<div className="mt-auto">
                    <Button variant="destructive" className="w-full" onClick={onLogout}>
                        <LogOutIcon className="mr-2 h-4 w-4" />
                        Logout
                    </Button>
                </div>
            </div>

{/* Main content */}
            <div className="flex-1 p-8">
                <div className="max-w-2xl mx-auto">
                    <Form {...form}>
                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                            <FormField
                                control={form.control}
                                name="avatar"
                                render={({ field, fieldState }) => (
                                    <FormItem>
                                        <FormLabel required={!schema.shape.avatar.isOptional()}>Avatar</FormLabel>
                                        <FormControl>
                                            <div className="flex flex-col items-center justify-center">
                                                <IconUploadField
                                                    defaultPreview={user?.avatarUrl}
                                                    formDefaultValue={user?.avatarUrl}
                                                    field={field}
                                                    error={fieldState.error}
                                                />
                                            </div>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="displayName"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel required={!schema.shape.displayName.isOptional()}>
                                            Display Name
                                        </FormLabel>
                                        <FormControl>
                                            <Input {...field} />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <Button type="submit" disabled={form.formState.isSubmitting}>
                                {form.formState.isSubmitting ? "Saving..." : "Save"}
                            </Button>
                        </form>
                    </Form>
                </div>
            </div>
        </div>
    );
}

// file: app/routes/auth/layout.tsx
import { Outlet } from "react-router";

export default function Layout() {
    return (
        <div className="min-h-screen min-w-screen grid place-items-center">
            <div className="min-w-md">
                <Outlet />
            </div>
        </div>
    );
}

// file: app/routes/auth/login.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import { AxiosError } from "axios";
import { useForm } from "react-hook-form";
import { Link, redirect, useNavigate } from "react-router";
import { z } from "zod";
import { useShallow } from "zustand/react/shallow";
import { PasswordInput } from "~/components/custom-ui/password-input";
import { ThemeToggle } from "~/components/theme/theme-toggle";
import { Button, buttonVariants } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import auth from "~/lib/api/client/auth";
import { useTokenStore } from "~/stores/token-store";
import { useUsersStore } from "~/stores/users-store";

const schema = z.object({
    username: z.string(),
    password: z.string().min(8),
});

export async function clientLoader() {
    const { token, setToken } = useTokenStore.getState();

if (token) {
        try {
            await import("~/lib/api/client/user").then((m) => m.default.me());

return redirect("/app/@me");
        } catch (error) {
            const axiosError = error as AxiosError;

if (axiosError.status === 401) {
                setToken(undefined);
            }
        }
    }
}

export default function Login() {
    const navigate = useNavigate();
    const setToken = useTokenStore((state) => state.setToken);
    const { setCurrentUserId, addUser } = useUsersStore(
        useShallow((state) => {
            return {
                setCurrentUserId: state.setCurrentUserId,
                addUser: state.addUser,
            };
        }),
    );

const form = useForm<z.infer<typeof schema>>({
        resolver: zodResolver(schema),
    });

async function onSubmit(values: z.infer<typeof schema>) {
        const response = await auth.login(values);

setToken(response.token);
        setCurrentUserId(response.user.id);
        addUser(response.user);

navigate("/app");
    }

return (
        <Card style={{ viewTransitionName: "auth-card-view" }}>
            <CardHeader style={{ viewTransitionName: "auth-card-header-view" }} className="relative">
                <CardTitle>Welcome back!</CardTitle>
                <CardDescription>Please sign in to continue.</CardDescription>
                <div
                    className="absolute top-0 right-0 px-6"
                    style={{
                        viewTransitionName: "auth-card-header-mode-toggle-view",
                    }}
                >
                    <ThemeToggle />
                </div>
            </CardHeader>
            <CardContent style={{ viewTransitionName: "auth-card-content-view" }}>
                <Form {...form}>
                    <form
                        onSubmit={form.handleSubmit(onSubmit)}
                        className="space-y-4"
                        style={{ viewTransitionName: "auth-form-view" }}
                    >
                        <FormField
                            control={form.control}
                            name="username"
                            render={({ field }) => (
                                <FormItem
                                    style={{
                                        viewTransitionName: "email-field-view",
                                    }}
                                >
                                    <FormLabel required>Username</FormLabel>
                                    <FormControl>
                                        <Input {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="password"
                            render={({ field }) => (
                                <FormItem
                                    style={{
                                        viewTransitionName: "password-field-view",
                                    }}
                                >
                                    <FormLabel required>Password</FormLabel>
                                    <FormControl>
                                        <PasswordInput {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <Button className="w-full" type="submit" style={{ viewTransitionName: "submit-button-view" }}>
                            Log In
                        </Button>
                    </form>
                </Form>
            </CardContent>
            <CardFooter style={{ viewTransitionName: "auth-card-footer-view" }}>
                <div className="flex items-center">
                    <span className="text-muted-foreground text-sm">Don't have an account?</span>
                    <Link
                        className={buttonVariants({
                            variant: "link",
                            size: "sm",
                        })}
                        to="/register"
                        viewTransition
                    >
                        Register
                    </Link>
                </div>
            </CardFooter>
        </Card>
    );
}

// file: app/routes/auth/register.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Link, useNavigate } from "react-router";
import { z } from "zod";
import { PasswordInput } from "~/components/custom-ui/password-input";
import { ThemeToggle } from "~/components/theme/theme-toggle";
import { Button, buttonVariants } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import auth from "~/lib/api/client/auth";

const schema = z.object({
    email: z.string().email(),
    displayName: z.string().min(1).optional(),
    username: z
        .string()
        .min(3)
        .regex(/^[a-zA-Z0-9_.]+$/),
    password: z.string().min(8),
});

export default function Register() {
    const navigate = useNavigate();

const form = useForm<z.infer<typeof schema>>({
        resolver: zodResolver(schema),
    });

async function onSubmit(values: z.infer<typeof schema>) {
        await auth.register(values);

navigate("/login");
    }

return (
        <Card style={{ viewTransitionName: "auth-card-view" }}>
            <CardHeader style={{ viewTransitionName: "auth-card-header-view" }} className="relative">
                <CardTitle>Create an account</CardTitle>
                <CardDescription>Please fill out the form below to create an account.</CardDescription>
                <div
                    className="absolute top-0 right-0 px-6"
                    style={{
                        viewTransitionName: "auth-card-header-mode-toggle-view",
                    }}
                >
                    <ThemeToggle />
                </div>
            </CardHeader>
            <CardContent style={{ viewTransitionName: "auth-card-content-view" }}>
                <Form {...form}>
                    <form
                        onSubmit={form.handleSubmit(onSubmit)}
                        className="space-y-4"
                        style={{ viewTransitionName: "auth-form-view" }}
                    >
                        <FormField
                            control={form.control}
                            name="email"
                            render={({ field }) => (
                                <FormItem
                                    style={{
                                        viewTransitionName: "email-field-view",
                                    }}
                                >
                                    <FormLabel required>Email</FormLabel>
                                    <FormControl>
                                        <Input type="email" placeholder="email@example.com" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="username"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel required>Username</FormLabel>
                                    <FormControl>
                                        <Input {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="displayName"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Display Name</FormLabel>
                                    <FormControl>
                                        <Input {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="password"
                            render={({ field }) => (
                                <FormItem
                                    style={{
                                        viewTransitionName: "password-field-view",
                                    }}
                                >
                                    <FormLabel required>Password</FormLabel>
                                    <FormControl>
                                        <PasswordInput {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <Button className="w-full" type="submit" style={{ viewTransitionName: "submit-button-view" }}>
                            Register
                        </Button>
                    </form>
                </Form>
            </CardContent>
            <CardFooter style={{ viewTransitionName: "auth-card-footer-view" }}>
                <div className="flex items-center">
                    <span className="text-muted-foreground text-sm">Already have an account?</span>
                    <Link
                        className={buttonVariants({
                            variant: "link",
                            size: "sm",
                        })}
                        to="/login"
                        viewTransition
                    >
                        Log In
                    </Link>
                </div>
            </CardFooter>
        </Card>
    );
}

// file: app/routes/index.tsx
import { redirect } from "react-router";

export function meta() {
    return [{ title: "New React Router App" }];
}

export function clientLoader() {
    return redirect("/login");
}

export default function Index() {
    return <></>;
}

// file: app/routes.ts
import { type RouteConfig, index, layout, prefix, route } from "@react-router/dev/routes";

export default [
    index("routes/index.tsx"),
    layout("routes/auth/layout.tsx", [
        route("/login", "routes/auth/login.tsx"),
        route("/register", "routes/auth/register.tsx"),
    ]),
    ...prefix("/app", [
        layout("routes/app/providers.tsx", [
            route("/settings", "routes/app/settings.tsx"),
            layout("routes/app/layout.tsx", [
                index("routes/app/index.tsx"),
                route("/invite/:inviteCode", "routes/app/invite.tsx"),
                ...prefix("/@me", [
                    layout("routes/app/me/layout.tsx", [
                        index("routes/app/me/index.tsx"),
                        route("/channels/:channelId", "routes/app/me/channel.tsx"),
                    ]),
                ]),
                ...prefix("/server/:serverId", [
                    layout("routes/app/server/layout.tsx", [
                        index("routes/app/server/index.tsx"),
                        route("/:channelId", "routes/app/server/channel.tsx"),
                    ]),
                ]),
            ]),
        ]),
    ]),
] satisfies RouteConfig;

// file: app/stores/channels-voice-state.tsx
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import type { ChannelId, UserId } from "~/lib/api/types";

interface UserVoiceState {
    deaf: boolean;
    muted: boolean;
}

interface ChannelVoiceState {
    users: Record<UserId, UserVoiceState>;
}

interface ChannelsVoiceState {
    channels: Record<ChannelId, ChannelVoiceState>;
    addUser: (channelId: ChannelId, userId: UserId, userVoiceState: UserVoiceState) => void;
    removeUser: (channelId: ChannelId, userId: UserId) => void;
    removeChannel: (channelId: ChannelId) => void;
}

export const useChannelsVoiceStateStore = create<ChannelsVoiceState>()(
    immer((set) => ({
        channels: {},
        addUser: (channelId, userId, userVoiceState) =>
            set((state) => {
                if (!state.channels[channelId]) {
                    state.channels[channelId] = {
                        users: {},
                    };
                }

state.channels[channelId].users[userId] = userVoiceState;
            }),
        removeUser: (channelId, userId) =>
            set((state) => {
                if (state.channels[channelId]) {
                    delete state.channels[channelId].users[userId];
                }
            }),
        removeChannel: (channelId) =>
            set((state) => {
                delete state.channels[channelId];
            }),
    })),
);

// file: app/stores/gateway-store.ts
import type { QueryClient } from "@tanstack/react-query";
import { create } from "zustand";
import { messageSchema, type ChannelId, type Message, type MessageId, type ServerId } from "~/lib/api/types";
import { GatewayClient } from "~/lib/websocket/gateway/client";
import { ConnectionState, EventType, type EventData, type VoiceServerUpdateEvent } from "~/lib/websocket/gateway/types";
import { useChannelsVoiceStateStore } from "./channels-voice-state";
import { usePrivateChannelsStore } from "./private-channels-store";
import { useServerChannelsStore } from "./server-channels-store";
import { useServerListStore } from "./server-list-store";
import { useUsersStore } from "./users-store";

const GATEWAY_URL = "ws://localhost:12345/gateway/ws";

const HANDLERS = {
    [EventType.ADD_SERVER]: (self: GatewayState, data: Extract<EventData, { type: EventType.ADD_SERVER }>["data"]) => {
        useServerListStore.getState().addServer(data.server);
    },

[EventType.REMOVE_SERVER]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.REMOVE_SERVER }>["data"],
    ) => {
        useServerListStore.getState().removeServer(data.serverId);
        useServerChannelsStore.getState().removeServer(data.serverId);
        useChannelsVoiceStateStore.getState().removeChannel(data.serverId);
    },

[EventType.ADD_DM_CHANNEL]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.ADD_DM_CHANNEL }>["data"],
    ) => {
        usePrivateChannelsStore.getState().addChannel({
            ...data.channel,
            recipients: data.recipients,
        });
    },

[EventType.REMOVE_DM_CHANNEL]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.REMOVE_DM_CHANNEL }>["data"],
    ) => {
        usePrivateChannelsStore.getState().removeChannel(data.channelId);
        useChannelsVoiceStateStore.getState().removeChannel(data.channelId);
    },

[EventType.ADD_SERVER_CHANNEL]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.ADD_SERVER_CHANNEL }>["data"],
    ) => {
        useServerChannelsStore.getState().addChannel(data.channel);
    },

[EventType.REMOVE_SERVER_CHANNEL]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.REMOVE_SERVER_CHANNEL }>["data"],
    ) => {
        useServerChannelsStore.getState().removeChannel(data.serverId, data.channelId);
        useChannelsVoiceStateStore.getState().removeChannel(data.serverId);
    },

[EventType.ADD_USER]: (self: GatewayState, data: Extract<EventData, { type: EventType.ADD_USER }>["data"]) => {
        useUsersStore.getState().addUser(data.user);
    },

[EventType.REMOVE_USER]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.REMOVE_USER }>["data"],
    ) => {
        useUsersStore.getState().removeUser(data.userId);
    },

[EventType.ADD_SERVER_MEMBER]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.ADD_SERVER_MEMBER }>["data"],
    ) => {
        useUsersStore.getState().addUser(data.user);
    },

[EventType.REMOVE_SERVER_MEMBER]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.REMOVE_SERVER_MEMBER }>["data"],
    ) => {
        useUsersStore.getState().removeUser(data.userId);
    },

[EventType.ADD_MESSAGE]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.ADD_MESSAGE }>["data"],
    ) => {
        const message = messageSchema.parse(data.message);

if (self.queryClient) {
            self.queryClient.setQueryData(
                ["messages", message.channelId],
                (oldData: { pages: Message[][]; pageParams: MessageId[] }) => {
                    return {
                        pages: oldData?.pages
                            ? [[message, ...oldData.pages[0]], ...oldData.pages.slice(1)]
                            : [[message]],
                        pageParams: oldData?.pageParams ?? [undefined, message.id],
                    };
                },
            );
        }
    },

[EventType.REMOVE_MESSAGE]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.REMOVE_MESSAGE }>["data"],
    ) => {
        if (self.queryClient) {
            self.queryClient.setQueryData(["messages", data.channelId], (oldData: Message[]) => {
                if (!oldData) return [];
                return oldData.filter((message: Message) => message.id !== data.messageId);
            });
        }
    },

[EventType.VOICE_CHANNEL_CONNECTED]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.VOICE_CHANNEL_CONNECTED }>["data"],
    ) => {
        useChannelsVoiceStateStore.getState().addUser(data.channelId, data.userId, {
            deaf: false,
            muted: false,
        });
    },

[EventType.VOICE_CHANNEL_DISCONNECTED]: (
        self: GatewayState,
        data: Extract<EventData, { type: EventType.VOICE_CHANNEL_DISCONNECTED }>["data"],
    ) => {
        useChannelsVoiceStateStore.getState().removeUser(data.channelId, data.userId);
    },
};

interface GatewayState {
    client: GatewayClient | null;
    queryClient: QueryClient | null;
    status: ConnectionState;

connect: (token: string) => void;
    disconnect: () => void;

setQueryClient: (client: QueryClient) => void;

updateVoiceState: (serverId: ServerId, channelId: ChannelId) => void;
    requestVoiceStates: (serverId: ServerId) => void;
    onVoiceServerUpdate: (handler: (event: VoiceServerUpdateEvent["data"]) => void | Promise<void>) => () => void;
}

export const useGatewayStore = create<GatewayState>()((set, get) => {
    const client = new GatewayClient(GATEWAY_URL);

const voiceHandlers = new Set<(event: VoiceServerUpdateEvent["data"]) => void>();

client.onEvent(EventType.VOICE_SERVER_UPDATE, (event) => {
        voiceHandlers.forEach((handler) => handler(event));
    });

for (const [type, handler] of Object.entries(HANDLERS)) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        client.onEvent(type, (data: any) => {
            handler(get(), data);
        });
    }

return {
        client,
        queryClient: null,
        status: ConnectionState.DISCONNECTED,

connect: (token) => {
            client.connect(token);
            set({ status: client.connectionState });

client.onControl("stateChange", (state) => {
                set({ status: state });
            });
        },

disconnect: () => {
            client.disconnect();
            set({ status: ConnectionState.DISCONNECTED });
        },

setQueryClient: (queryClient) => {
            set({ queryClient });
        },

updateVoiceState: (serverId, channelId) => {
            client.updateVoiceState(serverId, channelId);
        },

requestVoiceStates: (serverId) => {
            client.requestVoiceStates(serverId);
        },

onVoiceServerUpdate: (handler) => {
            voiceHandlers.add(handler);

return () => {
                voiceHandlers.delete(handler);
            };
        },
    };
});

// file: app/stores/modal-store.ts
import { create } from "zustand";
import type { ServerId } from "~/lib/api/types";

export enum ModalType {
    CREATE_SERVER = "CREATE_SERVER",
    CREATE_SERVER_CHANNEL = "CREATE_CHANNEL",
    CREATE_SERVER_INVITE = "CREATE_SERVER_INVITE",
    DELETE_SERVER_CONFIRM = "DELETE_SERVER_CONFIRM",
    UPDATE_PROFILE = "UPDATE_PROFILE",
}

export type CreateServerInviteModalData = {
    type: ModalType.CREATE_SERVER_INVITE;
    data: {
        serverId: ServerId;
    };
};

export type DeleteServerConfirmModalData = {
    type: ModalType.CREATE_SERVER_CHANNEL;
    data: {
        serverId: ServerId;
    };
};

export type CreateServerChannelModalData = {
    type: ModalType.CREATE_SERVER_CHANNEL;
    data: {
        serverId: ServerId;
    };
};

export type ModalData = CreateServerChannelModalData | CreateServerInviteModalData | DeleteServerConfirmModalData;

interface ModalState {
    type: ModalType | null;
    data?: ModalData["data"];
    isOpen: boolean;
    onOpen: (type: ModalType, data?: ModalData["data"]) => void;
    onClose: () => void;
}

export const useModalStore = create<ModalState>()((set) => ({
    type: null,
    data: undefined,
    isOpen: false,
    onOpen: (type, data) => set({ type, data, isOpen: true }),
    onClose: () => set({ type: null, isOpen: false }),
}));

// file: app/stores/private-channels-store.ts
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import type { ChannelId, RecipientChannel } from "~/lib/api/types";

type PrivateChannelsStore = {
    channels: Record<ChannelId, RecipientChannel>;
    addChannels: (channels: RecipientChannel[]) => void;
    addChannel: (channel: RecipientChannel) => void;
    removeChannel: (channelId: ChannelId) => void;
};

export const usePrivateChannelsStore = create<PrivateChannelsStore>()(
    immer((set) => ({
        channels: {},
        addChannels: (channels: RecipientChannel[]) =>
            set((state) => {
                for (const channel of channels) {
                    state.channels[channel.id] = channel;
                }
            }),
        addChannel: (channel: RecipientChannel) =>
            set((state) => {
                state.channels[channel.id] = {
                    ...channel,
                };
            }),
        removeChannel: (channelId: ChannelId) =>
            set((state) => {
                delete state.channels[channelId];
            }),
    })),
);

// file: app/stores/server-channels-store.ts
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import type { ChannelId, ServerChannel, ServerId } from "~/lib/api/types";

type ServerChannelsStore = {
    channels: Record<ServerId, Record<ChannelId, ServerChannel>>;
    addServer: (serverId: ServerId) => void;
    addChannel: (channel: ServerChannel) => void;
    addChannels: (channels: ServerChannel[]) => void;
    removeChannel: (serverId: ServerId, channelId: ChannelId) => void;
    removeServer: (serverId: ServerId) => void;
};

export const useServerChannelsStore = create<ServerChannelsStore>()(
    immer((set) => ({
        channels: {},
        addServer: (serverId) =>
            set((state) => {
                state.channels[serverId] = {};
            }),
        addChannel: (channel) =>
            set((state) => {
                if (state.channels[channel.serverId] === undefined) {
                    state.channels[channel.serverId] = {};
                }

state.channels[channel.serverId][channel.id] = channel;
            }),
        addChannels: (channels) =>
            set((state) => {
                for (const channel of channels) {
                    if (state.channels[channel.serverId] === undefined) {
                        state.channels[channel.serverId] = {};
                    }

state.channels[channel.serverId][channel.id] = channel;
                }
            }),
        removeChannel: (serverId, channelId) =>
            set((state) => {
                delete state.channels[serverId][channelId];
            }),
        removeServer: (serverId) =>
            set((state) => {
                delete state.channels[serverId];
            }),
    })),
);

// file: app/stores/server-list-store.ts
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import type { Server, ServerId, Uuid } from "~/lib/api/types";

type ServerListStore = {
    servers: Record<ServerId, Server>;
    addServers: (newServers: Server[]) => void;
    addServer: (server: Server) => void;
    removeServer: (serverId: Uuid) => void;
};

export const useServerListStore = create<ServerListStore>()(
    immer((set) => ({
        servers: {},
        addServers: (servers: Server[]) =>
            set((state) => {
                for (const server of servers) {
                    state.servers[server.id] = server;
                }
            }),
        addServer: (server: Server) =>
            set((state) => {
                state.servers[server.id] = server;
            }),
        removeServer: (serverId: Uuid) =>
            set((state) => {
                delete state.servers[serverId];
            }),
    })),
);

// file: app/stores/token-store.ts
import { create } from "zustand";
import { persist } from "zustand/middleware";

type TokenStore = {
    token?: string;
    setToken: (token?: string) => void;
    removeToken: () => void;
};

export const useTokenStore = create<TokenStore>()(
    persist(
        (set) => ({
            token: undefined,
            setToken: (token?: string) => set({ token }),
            removeToken: () => set({ token: undefined }),
        }),
        {
            name: "token",
        },
    ),
);

// file: app/stores/users-store.tsx
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import type { FullUser, PartialUser, UserId } from "~/lib/api/types";

type UsersStore = {
    users: Record<UserId, PartialUser>;
    currentUserId: UserId | undefined;
    addUser: (user: PartialUser) => void;
    removeUser: (userId: UserId) => void;
    setCurrentUserId: (userId: UserId) => void;
    getCurrentUser: () => FullUser | undefined;
};

export const useUsersStore = create<UsersStore>()(
    immer((set, get) => ({
        users: {},
        currentUserId: undefined,
        addUser: (user) =>
            set((state) => {
                if (user.id !== get().currentUserId) state.users[user.id] = user;
                else {
                    const currentUser = get().users[user.id];
                    if (currentUser) state.users[user.id] = { ...currentUser, ...user };
                    else state.users[user.id] = user;
                }
            }),
        removeUser: (userId) =>
            set((state) => {
                delete state.users[userId];
            }),

setCurrentUserId: (userId) =>
            set((state) => {
                state.currentUserId = userId;
            }),

getCurrentUser: () => {
            const currentUserId = get().currentUserId;
            return currentUserId ? (get().users[currentUserId] as FullUser) : undefined;
        },
    })),
);

// file: app/stores/voice-state-store.ts
import { create } from "zustand";
import { useWebRTCStore } from "./webrtc-store";

interface VoiceState {
    activeChannel: { serverId: string; channelId: string } | null;
    error: string | null;

// Actions
    joinVoiceChannel: (serverId: string, channelId: string) => void;
    leaveVoiceChannel: () => void;
    setError: (error: string) => void;
    resetError: () => void;
}

export const useVoiceStateStore = create<VoiceState>()((set, get) => {
    return {
        activeChannel: null,
        error: null,

joinVoiceChannel: (serverId, channelId) => {
            set({
                activeChannel: { serverId, channelId },
                error: null,
            });
        },

leaveVoiceChannel: () => {
            const currentState = get();
            if (currentState.activeChannel) {
                useWebRTCStore.getState().disconnect();

set({
                    activeChannel: null,
                });
            }
        },

setError: (error) => {
            set({ error });
        },

resetError: () => {
            set({ error: null });
        },
    };
});

// file: app/stores/webrtc-store.ts
import { create } from "zustand";
import { WebRTCClient } from "~/lib/websocket/voice/client";
import { ConnectionState } from "~/lib/websocket/voice/types";
import { useVoiceStateStore } from "./voice-state-store";

const VOICE_GATEWAY_URL = "ws://localhost:12345/voice/ws";

interface WebRTCState {
    client: WebRTCClient | null;
    status: ConnectionState;
    remoteStream: MediaStream | null;
    error: string | null;
    connect: (token: string) => Promise<void>;
    disconnect: () => void;
    createOffer: (localStream: MediaStream) => Promise<void>;
}

export const useWebRTCStore = create<WebRTCState>()((set) => {
    const client = new WebRTCClient(
        VOICE_GATEWAY_URL,
        (state) => set({ status: state }),
        (error) => {
            set({
                status: ConnectionState.ERROR,
                error: error.message,
            });
            useVoiceStateStore.getState().setError(error.message);
        },
        (stream) => set({ remoteStream: stream }),
    );

return {
        client,
        status: ConnectionState.DISCONNECTED,
        remoteStream: null,
        error: null,

connect: async (token) => {
            await client.connect(token);
        },

disconnect: () => {
            client.disconnect();
            set({
                status: ConnectionState.DISCONNECTED,
                remoteStream: null,
            });
        },

createOffer: async (localStream) => {
            await client.createOffer(localStream);
        },
    };
});

// file: react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
    // Config options...
    // Server-side render by default, to enable SPA mode set this to `false`
    ssr: false,
} satisfies Config;

// file: vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import babel from "vite-plugin-babel";
import tsconfigPaths from "vite-tsconfig-paths";

const ReactCompilerConfig = {
    target: "19", // '17' | '18' | '19'
};

export default defineConfig({
    plugins: [
        tailwindcss(),
        reactRouter(),
        tsconfigPaths(),
        babel({
            filter: /\.[jt]sx?$/,
            babelConfig: {
                presets: ["@babel/preset-typescript"],
                plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
            },
        }),
    ],
});