import React, {
  ChangeEvent,
  ChangeEventHandler,
  FormEventHandler,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import classNames from 'classnames';
import { Box, Text, IconButton, Input, Avatar, Button, Overlay, OverlayBackdrop, OverlayCenter, Modal, Dialog, Header, config, Spinner, color, toRem } from 'folds';
import { Icon, Icons } from '../../../components/icons';
import { HexColorPicker } from 'react-colorful';
import FocusTrap from 'focus-trap-react';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { UserProfile, useUserProfile } from '../../../hooks/useUserProfile';
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
import { UserAvatar } from '../../../components/user-avatar';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { useAuthenticatedMediaUrl } from '../../../hooks/useAuthenticatedMediaUrl';
import { getTextShadowColor } from '../../../utils/common';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useFilePicker } from '../../../hooks/useFilePicker';
import { useObjectURL } from '../../../hooks/useObjectURL';
import { stopPropagation } from '../../../utils/keyboard';
import { ImageEditor } from '../../../components/image-editor';
import { ModalWide } from '../../../styles/Modal.css';
import { createUploadAtom, UploadSuccess } from '../../../state/upload';
import { CompactUploadCardRenderer } from '../../../components/upload-card';
import { useCapabilities } from '../../../hooks/useCapabilities';
import { useUserColorPreference } from '../../../hooks/useUserColor';
import { useUserBanner } from '../../../hooks/useUserBanner';
import { useUserPresence } from '../../../hooks/useUserPresence';
import { useTheme, ThemeKind } from '../../../hooks/useTheme';
import { AvatarPresence, PresenceBadge } from '../../../components/presence';
import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
import colorMXID, { getColorMXIDValue } from '../../../../util/colorMXID';
import { getCurrentAccessToken } from '../../../utils/auth';
import {
  ColorPreference,
  hasColorPreference,
  resolveColorForTheme,
} from '../../../utils/profileFields';

/**
 * Banner upload component for user's profile banner (MSC4427 via MSC4133).
 */
function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTMLDivElement>; nameRef: React.RefObject<HTMLDivElement> }) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const userId = mx.getUserId()!;
  const profile = useUserProfile(userId);
  const presence = useUserPresence(userId);
  const [userBanner, setUserBanner, loading] = useUserBanner();
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string>();
  const [hoveredArea, setHoveredArea] = useState<string | null>(null);
  const [bannerBlobUrl, setBannerBlobUrl] = useState<string>();
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  // Helper to sync Matrix client's user object with server after avatar changes
  const syncUserAvatar = useCallback(async () => {
    try {
      const updatedProfile = await mx.getProfileInfo(userId);
      const user = mx.getUser(userId);
      if (user) {
        // Manually sync avatar URL to trigger UserEvent.AvatarUrl listeners
        if (updatedProfile.avatar_url !== user.avatarUrl) {
          user.setAvatarUrl(updatedProfile.avatar_url || '');
        }
        // Manually sync display name to trigger UserEvent.DisplayName listeners
        if (updatedProfile.displayname !== user.displayName) {
          user.setDisplayName(updatedProfile.displayname || '');
        }
      }
      setRefreshTrigger((prev) => prev + 1);
    } catch (err) {
      console.error('Failed to sync user profile:', err);
    }
  }, [mx, userId]);

  const avatarUrl = profile.avatarUrl
    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
    : undefined;

  // Larger avatar URL for the blurred cover fallback
  const avatarCoverUrl = profile.avatarUrl
    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication) ?? undefined
    : undefined;
  const authenticatedCoverUrl = useAuthenticatedMediaUrl(avatarCoverUrl, useAuthentication);

  const theme = useTheme();
  const [colorPreference, setColorPreference, colorLoading] = useUserColorPreference();
  const [localOnDark, setLocalOnDark] = useState('#ffd9f5');
  const [localOnLight, setLocalOnLight] = useState('#440000');
  const [savingColor, setSavingColor] = useState(false);
  const [colorError, setColorError] = useState<string>();

  useEffect(() => {
    if (colorPreference?.on_dark) setLocalOnDark(colorPreference.on_dark);
    if (colorPreference?.on_light) setLocalOnLight(colorPreference.on_light);
  }, [colorPreference]);

  const handleColorSave = async () => {
    setSavingColor(true);
    setColorError(undefined);
    try {
      await setColorPreference({ on_dark: localOnDark, on_light: localOnLight });
    } catch (e) {
      setColorError('Failed to save colors. Your server may not support profile fields (MSC4133).');
    }
    setSavingColor(false);
  };

  const handleColorRemove = async () => {
    setSavingColor(true);
    setColorError(undefined);
    try {
      await setColorPreference(undefined);
      setLocalOnDark('#ffd9f5');
      setLocalOnLight('#440000');
    } catch (e) {
      setColorError('Failed to remove colors');
    }
    setSavingColor(false);
  };

  const [isEditingName, setIsEditingName] = useState(false);
  const [editedName, setEditedName] = useState(profile.displayName || '');
  const [savingName, setSavingName] = useState(false);

  const [isEditingStatus, setIsEditingStatus] = useState(false);
  const [editedStatus, setEditedStatus] = useState(presence?.status || '');
  const [savingStatus, setSavingStatus] = useState(false);

  // Update edited name when profile changes
  useEffect(() => {
    if (!isEditingName) {
      setEditedName(profile.displayName || '');
    }
  }, [profile.displayName, isEditingName]);

  // Update edited status when presence changes
  useEffect(() => {
    if (!isEditingStatus) {
      setEditedStatus(presence?.status || '');
    }
  }, [presence?.status, isEditingStatus]);

  const handleAvatarClick = () => {
    pickAvatarFile('image/*');
  };

  const handleNameSave = async () => {
    if (!editedName.trim() || savingName) return;
    setSavingName(true);
    try {
      await mx.setDisplayName(editedName);
      setIsEditingName(false);
      // Force refresh to update name display
      setTimeout(() => syncUserAvatar(), 100);
    } catch (err) {
      console.error('Failed to update name:', err);
    }
    setSavingName(false);
  };

  const handleNameKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleNameSave();
    } else if (e.key === 'Escape') {
      setEditedName(profile.displayName || '');
      setIsEditingName(false);
    }
  };

  const handleStatusSave = async () => {
    if (savingStatus) return;
    setSavingStatus(true);
    try {
      await mx.setPresence({
        presence: presence?.presence || 'online',
        status_msg: editedStatus || undefined,
      });
      setIsEditingStatus(false);
      // Force refresh to update status display
      setTimeout(() => setRefreshTrigger((prev) => prev + 1), 100);
    } catch (err) {
      console.error('Failed to update status:', err);
    }
    setSavingStatus(false);
  };

  const handleStatusKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleStatusSave();
    } else if (e.key === 'Escape') {
      setEditedStatus(presence?.status || '');
      setIsEditingStatus(false);
    }
  };

  const handleRemoveStatus = async () => {
    if (savingStatus) return;
    setSavingStatus(true);
    try {
      await mx.setPresence({
        presence: presence?.presence || 'online',
        status_msg: undefined,
      });
      setEditedStatus('');
      setIsEditingStatus(false);
      // Force refresh to update UI
      setTimeout(() => setRefreshTrigger((prev) => prev + 1), 100);
    } catch (err) {
      console.error('Failed to remove status:', err);
    }
    setSavingStatus(false);
  };

  const handleRemoveAvatar = async () => {
    try {
      await mx.setAvatarUrl('');
      // Sync user object to propagate changes throughout app
      await syncUserAvatar();
    } catch (err) {
      console.error('Failed to remove avatar:', err);
    }
  };

  // Load banner as blob URL
  useEffect(() => {
    let blobUrl: string | undefined;

    const loadBanner = async () => {
      if (!userBanner) {
        setBannerBlobUrl(undefined);
        return;
      }

      const bannerHttpUrl = mxcUrlToHttp(mx, userBanner, useAuthentication);
      if (!bannerHttpUrl) {
        setBannerBlobUrl(undefined);
        return;
      }

      // Always use current session's token to avoid stale tokens during account switches
      const accessToken = getCurrentAccessToken();
      const headers: HeadersInit = {};
      if (useAuthentication && accessToken) {
        headers.Authorization = `Bearer ${accessToken}`;
      }

      try {
        const response = await fetch(bannerHttpUrl, { headers });
        if (!response.ok) {
          console.warn('Failed to fetch banner preview:', response.status);
          setBannerBlobUrl(undefined);
          return;
        }

        const blob = await response.blob();
        blobUrl = URL.createObjectURL(blob);
        setBannerBlobUrl(blobUrl);
      } catch (err) {
        console.error('Error loading banner preview:', err);
        setBannerBlobUrl(undefined);
      }
    };

    loadBanner();

    return () => {
      if (blobUrl) {
        URL.revokeObjectURL(blobUrl);
      }
    };
  }, [mx, useAuthentication, userBanner, refreshTrigger]);

  const [imageFile, setImageFile] = useState<File>();
  const imageFileURL = useObjectURL(imageFile);
  const uploadAtom = useMemo(() => {
    if (imageFile) return createUploadAtom(imageFile);
    return undefined;
  }, [imageFile]);

  const pickFile = useFilePicker(setImageFile, false);

  // Avatar-specific upload
  const [avatarFile, setAvatarFile] = useState<File>();
  const avatarUploadAtom = useMemo(() => {
    if (avatarFile) return createUploadAtom(avatarFile);
    return undefined;
  }, [avatarFile]);
  const pickAvatarFile = useFilePicker(setAvatarFile, false);

  // Warn before leaving when an upload or save is in progress
  useEffect(() => {
    if (!imageFile && !avatarFile && !saving) return undefined;
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = '';
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [imageFile, avatarFile, saving]);

  const handleRemoveUpload = useCallback(() => {
    setImageFile(undefined);
  }, []);

  const handleUploaded = useCallback(
    async (upload: UploadSuccess) => {
      const { mxc } = upload;
      console.log('[ProfileBanner] Banner image uploaded, MXC:', mxc);
      setSaving(true);
      setError(undefined);
      try {
        console.log('[ProfileBanner] Calling setUserBanner...');
        await setUserBanner(mxc);
        console.log('[ProfileBanner] setUserBanner completed successfully');
        handleRemoveUpload();
        // Sync user object to propagate changes throughout app
        await syncUserAvatar();
      } catch (e: any) {
        const errorMsg = e?.message || 'Unknown error';
        console.error('[ProfileBanner] setUserBanner failed:', e);
        setError(`Failed to save banner: ${errorMsg}`);
      }
      setSaving(false);
    },
    [setUserBanner, handleRemoveUpload, syncUserAvatar]
  );

  const handleAvatarUploaded = useCallback(
    async (upload: UploadSuccess) => {
      setSaving(true);
      setError(undefined);
      try {
        await mx.setAvatarUrl(upload.mxc);
        const userId = mx.getUserId();
        if (userId) {
          const user = mx.getUser(userId);
          if (user && user.avatarUrl !== upload.mxc) {
            user.setAvatarUrl(upload.mxc);
          }
        }
        setAvatarFile(undefined);
        await syncUserAvatar();
      } catch (e: any) {
        setError(`Failed to save avatar: ${e?.message || 'Unknown error'}`);
      }
      setSaving(false);
    },
    [mx, syncUserAvatar]
  );

  const handleRemoveBanner = async () => {
    setSaving(true);
    setError(undefined);
    try {
      await setUserBanner(undefined);
      // Sync user object to propagate changes throughout app
      await syncUserAvatar();
    } catch (e) {
      setError('Failed to remove banner.');
    }
    setSaving(false);
  };

  const previewPreference: ColorPreference = { on_dark: localOnDark, on_light: localOnLight };
  const previewProfileColor =
    resolveColorForTheme(previewPreference, theme.kind) || getColorMXIDValue(userId, theme.kind === ThemeKind.Dark);
  const previewTextShadow = `0 1px 4px ${getTextShadowColor(previewProfileColor)}`;
  const hasSavedColors = hasColorPreference(colorPreference);

  return (
    <Box direction="Column" gap="300">
      <Box
        direction="Column"
        style={{
          border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
          borderRadius: toRem(8),
          width: toRem(340),
          overflow: 'hidden',
          position: 'relative',
        }}
      >
          {/* Banner/Cover wrapper - provides positioning context so status bubble is not inside the button */}
          <Box
            style={{
              position: 'relative',
              height: toRem(140),
              width: '100%',
            }}
          >
            <Box
              as="button"
              onClick={() => pickFile('image/*')}
              onMouseEnter={() => setHoveredArea('banner')}
              onMouseLeave={() => setHoveredArea(null)}
              style={{
                position: 'absolute',
                inset: 0,
                width: '100%',
                height: '100%',
                overflow: 'hidden',
                cursor: 'pointer',
                border: 'none',
                padding: 0,
                backgroundColor: bannerBlobUrl ? 'transparent' : colorMXID(userId),
                filter: bannerBlobUrl || authenticatedCoverUrl ? 'none' : 'brightness(50%)',
                display: 'flex',
                alignItems: 'center',
              }}
            >
              {bannerBlobUrl ? (
                <img
                  src={bannerBlobUrl}
                  alt="Banner"
                  draggable="false"
                  style={{
                    height: '100%',
                    width: '100%',
                    objectFit: 'cover',
                  }}
                />
              ) : (
                authenticatedCoverUrl && (
                  <img
                    src={authenticatedCoverUrl}
                    alt="Cover"
                    draggable="false"
                    style={{
                      height: '100%',
                      width: '100%',
                      objectFit: 'cover',
                      filter: 'blur(16px)',
                      transform: 'scale(2)',
                    }}
                  />
                )
              )}
              {/* Banner hover overlay - right side action bar */}
              {hoveredArea === 'banner' && (
                <Box
                  style={{
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    bottom: 0,
                    display: 'flex',
                    alignItems: 'center',
                    padding: `0 ${toRem(12)}`,
                    background: 'linear-gradient(to left, rgba(0,0,0,0.6), transparent)',
                    gap: toRem(8),
                  }}
                >
                  <Box
                    style={{
                      backgroundColor: color.Surface.Container,
                      borderRadius: toRem(16),
                      padding: toRem(8),
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <Icon size="100" src={Icons.Pencil} />
                  </Box>
                  {userBanner && (
                    <Box
                      as="button"
                      onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        handleRemoveBanner();
                      }}
                      style={{
                        backgroundColor: color.Critical.Main,
                        borderRadius: toRem(16),
                        padding: toRem(8),
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        cursor: 'pointer',
                        border: 'none',
                      }}
                    >
                      <Icon size="100" src={Icons.Cross} fill="white" />
                    </Box>
                  )}
                </Box>
              )}
            </Box>
          </Box>

          {/* Avatar Container - matches UserHeroAvatarContainer height */}
          <Box
            style={{
              position: 'relative',
              height: toRem(29),
            }}
          >
            {/* Avatar - centered */}
            <Box
              style={{
                position: 'absolute',
                left: '50%',
                top: 0,
                transform: 'translate(-50%, -50%)',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: toRem(8),
              }}
              onMouseEnter={() => setHoveredArea('avatar')}
              onMouseLeave={() => setHoveredArea(null)}
            >
              <Box
                as="button"
                onClick={handleAvatarClick}
                style={{
                  backgroundColor: color.Surface.Container,
                  border: 'none',
                  padding: 0,
                  cursor: 'pointer',
                  borderRadius: '50%',
                }}
              >
                <AvatarPresence
                  badge={
                    presence && (
                      <PresenceBadge presence={presence.presence} status={presence.status} />
                    )
                  }
                >
                  <Avatar
                    size="500"
                    style={{
                      width: toRem(72),
                      height: toRem(72),
                      outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
                    }}
                  >
                    <UserAvatar
                      userId={userId}
                      src={avatarUrl}
                      alt={userId}
                      renderFallback={() => <Icon size="500" src={Icons.User} filled />}
                    />
                  </Avatar>
                </AvatarPresence>
              </Box>
              {/* Avatar action icons - shown on hover */}
              {hoveredArea === 'avatar' && (
                <Box
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: toRem(4),
                    backgroundColor: color.Surface.Container,
                    borderRadius: toRem(16),
                    padding: `${toRem(4)} ${toRem(8)}`,
                    border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
                    marginTop: toRem(4),
                  }}
                >
                  <Box
                    as="button"
                    onClick={handleAvatarClick}
                    style={{
                      background: 'none',
                      border: 'none',
                      padding: toRem(4),
                      cursor: 'pointer',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: toRem(8),
                    }}
                  >
                    <Icon size="50" src={Icons.Pencil} />
                  </Box>
                  {avatarUrl && (
                    <Box
                      as="button"
                      onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        handleRemoveAvatar();
                      }}
                      style={{
                        backgroundColor: color.Critical.Main,
                        borderRadius: toRem(8),
                        padding: toRem(4),
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        border: 'none',
                        cursor: 'pointer',
                      }}
                    >
                      <Icon size="50" src={Icons.Cross} fill="white" />
                    </Box>
                  )}
                </Box>
              )}
            </Box>
          </Box>

          {/* Profile Info Section */}
          <Box
            direction="Column"
            gap="200"
            alignItems="Center"
            style={{
              padding: config.space.S400,
              paddingTop: `calc(${config.space.S400} + ${toRem(36)})`,
              marginTop: toRem(-36),
              textAlign: 'center',
            }}
          >
            {/* Display Name */}
            <Box style={{ width: '100%' }}>
              {isEditingName ? (
                <Input
                  autoFocus
                  value={editedName}
                  onChange={(e) => setEditedName(e.target.value)}
                  onKeyDown={handleNameKeyDown}
                  onBlur={handleNameSave}
                  variant="Background"
                  size="400"
                  disabled={savingName}
                  style={{
                    width: '100%',
                    fontSize: 'var(--token.font-size.H400)',
                    fontWeight: 'var(--token.font-weight.H400)',
                    padding: `${toRem(4)} ${toRem(8)}`,
                    textAlign: 'center',
                  }}
                />
              ) : (
                <Box
                  as="button"
                  onClick={() => {
                    setEditedName(profile.displayName || getMxIdLocalPart(userId) || userId);
                    setIsEditingName(true);
                  }}
                  onMouseEnter={() => setHoveredArea('name')}
                  onMouseLeave={() => setHoveredArea(null)}
                  style={{
                    width: '100%',
                    border: 'none',
                    background: 'none',
                    cursor: 'pointer',
                    padding: `${toRem(4)} ${toRem(8)}`,
                    position: 'relative',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    lineHeight: 1.2,
                  }}
                >
                  <Text
                    size="H4"
                    className={classNames(BreakWord, LineClamp3)}
                    title={profile.displayName || getMxIdLocalPart(userId)}
                    style={{
                      color: previewProfileColor,
                      textShadow: previewTextShadow,
                      textAlign: 'center',
                      maxWidth: '100%',
                    }}
                  >
                    {profile.displayName || getMxIdLocalPart(userId) || userId}
                  </Text>
                  {hoveredArea === 'name' && (
                    <Box
                      style={{
                        position: 'absolute',
                        top: '50%',
                        right: 0,
                        transform: 'translateY(-50%)',
                        backgroundColor: color.Surface.Container,
                        borderRadius: toRem(20),
                        padding: toRem(6),
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        pointerEvents: 'none',
                        border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                      }}
                    >
                      <Icon size="50" src={Icons.Pencil} />
                    </Box>
                  )}
                </Box>
              )}
            </Box>
            
            {/* Username */}
            <Text
              size="T200"
              className={BreakWord}
              title={userId}
              style={{ color: previewProfileColor, textShadow: previewTextShadow }}
            >
              {userId}
            </Text>
            
            {/* Status Pill - Editable */}
            <Box
              onMouseEnter={() => setHoveredArea('status')}
              onMouseLeave={() => setHoveredArea(null)}
              style={{
                backgroundColor: color.Surface.Container,
                border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                padding: `${toRem(6)} ${toRem(10)}`,
                borderRadius: toRem(16),
                maxWidth: toRem(250),
                cursor: 'pointer',
              }}
            >
              {isEditingStatus ? (
                <Input
                  style={{ width: toRem(150), minWidth: toRem(100), textAlign: 'center' }}
                  variant="Background"
                  size="300"
                  autoFocus
                  value={editedStatus}
                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
                    setEditedStatus(e.target.value)
                  }
                  onKeyDown={handleStatusKeyDown}
                  onBlur={handleStatusSave}
                  disabled={savingStatus}
                  placeholder="Set a custom status..."
                />
              ) : (
                <Box
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: toRem(4),
                    justifyContent: 'center',
                  }}
                >
                  <Box
                    as="button"
                    onClick={() => {
                      setEditedStatus(presence?.status || '');
                      setIsEditingStatus(true);
                    }}
                    style={{
                      background: 'none',
                      border: 'none',
                      padding: 0,
                      cursor: 'pointer',
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <Text
                      size="T300"
                      className={BreakWord}
                      style={{
                        fontStyle: presence?.status ? 'normal' : 'italic',
                      }}
                    >
                      {presence?.status || 'Click to set a custom status...'}</Text>
                  </Box>
                  {presence?.status && hoveredArea === 'status' && (
                    <>
                      <Icon size="50" src={Icons.Pencil} />
                      <Box
                        as="button"
                        onClick={(e) => {
                          e.preventDefault();
                          e.stopPropagation();
                          handleRemoveStatus();
                        }}
                        style={{
                          backgroundColor: color.Critical.Main,
                          borderRadius: toRem(8),
                          padding: toRem(2),
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          cursor: 'pointer',
                          border: 'none',
                        }}
                      >
                        <Icon size="50" src={Icons.Cross} fill="white" />
                      </Box>
                    </>
                  )}
                </Box>
              )}
            </Box>
            
            {/* Chips Row - Placeholder chips */}
            <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
              <Box
                style={{
                  backgroundColor: color.Surface.Container,
                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                  padding: `${toRem(4)} ${toRem(8)}`,
                  borderRadius: toRem(16),
                }}
              >
                <Text size="B300">ruv.wtf</Text>
              </Box>
              <Box
                style={{
                  backgroundColor: color.Surface.Container,
                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                  padding: `${toRem(4)} ${toRem(8)}`,
                  borderRadius: toRem(16),
                }}
              >
                <Text size="B300">Share</Text>
              </Box>
              <Box
                style={{
                  backgroundColor: color.Surface.Container,
                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                  padding: `${toRem(4)} ${toRem(8)}`,
                  borderRadius: toRem(16),
                }}
              >
                <Text size="B300">Admin</Text>
              </Box>
            </Box>
          </Box>
        </Box>

      {/* MSC4522 username colors */}
      <Box
        direction="Column"
        gap="300"
        style={{
          padding: config.space.S300,
          border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
          borderRadius: toRem(8),
          width: '100%',
        }}
      >
        <Text size="H6">Username colors</Text>
        <Text size="T200" style={{ opacity: 0.8 }}>
          Set how your name appears on dark and light themes (MSC4522). Other clients that support this
          spec will see your chosen colors.
        </Text>

        <Box gap="400" wrap="Wrap">
          <Box direction="Column" gap="200">
            <Text size="T300">On dark themes</Text>
            <Text size="T200" style={{ opacity: 0.7 }}>Bright colors work best</Text>
            <HexColorPicker color={localOnDark} onChange={(c) => { setLocalOnDark(c); setColorError(undefined); }} />
            <Input
              size="300"
              variant="Secondary"
              style={{ width: toRem(120) }}
              value={localOnDark}
              onChange={(e) => {
                setLocalOnDark(e.target.value);
                setColorError(undefined);
              }}
            />
            <Box
              style={{
                width: toRem(48),
                height: toRem(48),
                borderRadius: toRem(8),
                backgroundColor: localOnDark,
                border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
              }}
            />
          </Box>

          <Box direction="Column" gap="200">
            <Text size="T300">On light themes</Text>
            <Text size="T200" style={{ opacity: 0.7 }}>Darker colors work best</Text>
            <HexColorPicker color={localOnLight} onChange={(c) => { setLocalOnLight(c); setColorError(undefined); }} />
            <Input
              size="300"
              variant="Secondary"
              style={{ width: toRem(120) }}
              value={localOnLight}
              onChange={(e) => {
                setLocalOnLight(e.target.value);
                setColorError(undefined);
              }}
            />
            <Box
              style={{
                width: toRem(48),
                height: toRem(48),
                borderRadius: toRem(8),
                backgroundColor: localOnLight,
                border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
              }}
            />
          </Box>
        </Box>

        <Box gap="200" alignItems="Center" wrap="Wrap">
          <Button
            size="300"
            variant="Primary"
            fill="Solid"
            radii="300"
            onClick={handleColorSave}
            disabled={savingColor || colorLoading}
          >
            <Text size="B300">{savingColor ? 'Saving...' : 'Save colors'}</Text>
          </Button>
          {hasSavedColors && (
            <Button
              size="300"
              variant="Critical"
              fill="Soft"
              radii="300"
              onClick={handleColorRemove}
              disabled={savingColor}
            >
              <Text size="B300">Remove colors</Text>
            </Button>
          )}
        </Box>

        {colorError && (
          <Text size="T200" style={{ color: color.Critical.Main }}>{colorError}</Text>
        )}
      </Box>

      {uploadAtom && (
        <Box gap="200" direction="Column" style={{ width: '100%' }}>
          <CompactUploadCardRenderer
            uploadAtom={uploadAtom}
            onRemove={handleRemoveUpload}
            onComplete={handleUploaded}
          />
        </Box>
      )}
      {avatarUploadAtom && (
        <Box gap="200" direction="Column" style={{ width: '100%' }}>
          <CompactUploadCardRenderer
            uploadAtom={avatarUploadAtom}
            onRemove={() => setAvatarFile(undefined)}
            onComplete={handleAvatarUploaded}
          />
        </Box>
      )}
      {saving && (
        <Box gap="200" alignItems="Center">
          <Spinner size="100" variant="Secondary" />
          <Text size="T200">Saving to server…</Text>
        </Box>
      )}
      {error && (
        <Text size="T200" style={{ color: color.Critical.Main }}>{error}</Text>
      )}
    </Box>
  );
}

export function Profile() {
  const mx = useMatrixClient();
  const userId = mx.getUserId()!;
  const avatarRef = useRef<HTMLDivElement>(null);
  const nameRef = useRef<HTMLDivElement>(null);

  return (
    <ProfileBanner avatarRef={avatarRef} nameRef={nameRef} />
  );
}