client/packages/settings/src/pages/profile.tsx

import MDInput from "@tensamin/markdown/input";
import { useMTP } from "@tensamin/mtp";
import { mtp } from "@tensamin/shared/data";
import { useStorage } from "@tensamin/storage/context";
import { Avatar, AvatarFallback, AvatarImage, Button, cn, Input, useIsMobile } from "@tensamin/ui";
import { useUser, type User } from "@tensamin/user/context";
import { Check } from "lucide-react";
import { useEffect, useRef, useState } from "react";

async function prepImage(file: File, size = 300, quality = 0.8): Promise<string> {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement("canvas");
  canvas.width = size; canvas.height = size;
  const context = canvas.getContext("2d");
  if (!context) throw new Error("Could not get canvas context");
  const scale = Math.max(size / bitmap.width, size / bitmap.height);
  const width = bitmap.width * scale;
  const height = bitmap.height * scale;
  context.drawImage(bitmap, (size - width) / 2, (size - height) / 2, width, height);
  return canvas.toDataURL("image/webp", quality);
}

export default function Page() {
  const { get } = useUser();
  const { load } = useStorage();
  const { send } = useMTP();
  const isMobile = useIsMobile();
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [draftUser, setDraftUser] = useState<Partial<User>>({});
  const [errorMessage, setErrorMessage] = useState("");
  const [saveSucceeded, setSaveSucceeded] = useState(false);
  const avatarUploadRef = useRef<HTMLInputElement>(null);
  const draftInitializedRef = useRef(false);
  const effectiveAvatar = draftUser.Avatar === "none" ? undefined : draftUser.Avatar;
  const updateDraftUser = (updater: (previous: Partial<User>) => Partial<User>) => {
    setSaveSucceeded(false); setErrorMessage(""); setDraftUser(updater);
  };
  useEffect(() => { void (async () => setCurrentUser(await get(await load("user_id"))))(); }, [get, load]);
  useEffect(() => {
    if (!currentUser || draftInitializedRef.current) return;
    setDraftUser(currentUser); draftInitializedRef.current = true;
  }, [currentUser]);
  async function handleAvatarUpload(file: File) {
    const avatar = await prepImage(file);
    updateDraftUser((previous) => ({ ...previous, avatar }));
    if (avatarUploadRef.current) avatarUploadRef.current.value = "";
  }
  if (!currentUser) return <p>Loading...</p>;
  return <>
    <input ref={avatarUploadRef} hidden onChange={(event) => event.target.files?.[0] && handleAvatarUpload(event.target.files[0])} type="file" />
    <div className={cn("flex flex-col gap-5", isMobile ? "w-full" : "w-80")}>
      <div className="flex items-center gap-3"><Avatar className="size-14"><AvatarImage src={effectiveAvatar} /><AvatarFallback className="text-2xl">{draftUser.Display?.slice(0, 2).toUpperCase() || currentUser.Display.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar><div className="flex flex-col gap-1"><p>Avatar</p><div className="flex gap-1"><Button onClick={() => avatarUploadRef.current?.click()}>Upload avatar</Button><Button onClick={() => updateDraftUser((previous) => ({ ...previous, avatar: "none" }))} variant="destructive" disabled={effectiveAvatar === undefined}>Remove</Button></div><p className="text-sm text-muted-foreground">GIFs are supported in decentralised mode or with Tensamin Premium.<br />Maximum file size is 16mb.</p></div></div>
      <Input className="w-full" onChange={(event) => updateDraftUser((previous) => ({ ...previous, display: event.target.value }))} placeholder="Display Name" value={draftUser.Display || ""} />
      <Input className="w-full" onChange={(event) => updateDraftUser((previous) => ({ ...previous, username: event.target.value }))} placeholder="Username" value={draftUser.Username || ""} />
      <MDInput styled paddingY="4px" paddingX="10px" fontSize=".875rem" placeholder="About Me" setValue={(value) => updateDraftUser((previous) => ({ ...previous, about: value }))} value={draftUser.About || ""} />
      <Button onClick={async () => {
        const { Avatar, ...draftUsersWithoutAvatar } = draftUser;
        const payload = { ...draftUsersWithoutAvatar, ...(typeof Avatar === "string" ? { avatar: Avatar.startsWith("data:") ? (Avatar.split(",", 2)[1] ?? "") : Avatar } : {}) };
        const validation = mtp.ChangeUserData.request.safeParse(payload);
        if (!validation.success) { setSaveSucceeded(false); setErrorMessage(validation.error.issues[0]?.message ?? "Invalid profile data"); return; }
        try { await send("ChangeUserData", validation.data); setSaveSucceeded(true); setErrorMessage(""); }
        catch (error) { setSaveSucceeded(false); setErrorMessage("Failed to update profile: " + error); }
      }}>{saveSucceeded ? <span className="inline-flex items-center gap-1.5"><Check className="size-4" />Saved</span> : "Save"}</Button>
      {errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
    </div>
  </>;
}