import React, {
  ChangeEvent,
  ChangeEventHandler,
  FormEventHandler,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import classNames from 'classnames';
import {
  Box,
  Text,
  IconButton,
  Icon,
  Icons,
  Input,
  Avatar,
  Button,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Modal,
  Dialog,
  Header,
  config,
  Spinner,
  color,
  toRem,
} from 'folds';
import { HexColorPicker, RgbaColorPicker, RgbaColor } 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 { nameInitials, getContrastingTextColor, stripAlphaFromColor, 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 { HexColorPickerPopOut } from '../../../components/HexColorPickerPopOut';
import { AngleSelector } from '../../../components/AngleSelector';
import { useUserColor, useOtherUserColor } from '../../../hooks/useUserColor';
import { useUserBanner, useOtherUserBanner } from '../../../hooks/useUserBanner';
import { useUserProfileStyle } from '../../../hooks/useUserProfileStyle';
import { useUserPresence } from '../../../hooks/useUserPresence';
import { AvatarPresence, PresenceBadge } from '../../../components/presence';
import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
import colorMXID from '../../../../util/colorMXID';
import {
  extractMetadataFromImage,
  embedMetadataInImage,
  detectImageFormat,
  getMimeType,
  getExtension,
  ImageMetadata,
} from '../../../utils/imageMetadata';

/**
 * Banner upload component for user's profile banner
 * Stored in avatar image metadata, visible to other Paarrot users
 */
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 [userColor, setUserColor] = useUserColor();
  const [localColor, setLocalColor] = useState(userColor ?? '#3b82f6');
  const [savingColor, setSavingColor] = useState(false);
  const [colorError, setColorError] = useState<string>();

  useEffect(() => {
    if (userColor) {
      setLocalColor(userColor);
    }
  }, [userColor]);

  const handleColorSave = async () => {
    setSavingColor(true);
    setColorError(undefined);
    try {
      await setUserColor(localColor);
      // Sync user object to propagate changes throughout app
      await syncUserAvatar();
    } catch (e) {
      setColorError('Failed to save color');
    }
    setSavingColor(false);
  };

  const handleColorRemove = async () => {
    setSavingColor(true);
    setColorError(undefined);
    try {
      await setUserColor(undefined);
    } catch (e) {
      setColorError('Failed to remove color');
    }
    setSavingColor(false);
  };

  // Profile style settings (border color and gradient)
  const [profileStyle, setProfileStyle, styleLoading] = useUserProfileStyle();
  // Initialize with transparent alpha so saved values show in preview until user edits
  const [localBorderColor, setLocalBorderColor] = useState<RgbaColor>({ r: 59, g: 130, b: 246, a: 0 });
  const [localGradientStart, setLocalGradientStart] = useState<RgbaColor>({ r: 0, g: 0, b: 0, a: 0 });
  const [localGradientStop, setLocalGradientStop] = useState<RgbaColor>({ r: 0, g: 0, b: 0, a: 0 });
  const [localGradientDirection, setLocalGradientDirection] = useState(180); // degrees (180 = top to bottom)
  const [savingStyle, setSavingStyle] = useState(false);
  const [styleError, setStyleError] = useState<string>();
  // Track if user has started editing (to show local values in preview)
  const [editingBorder, setEditingBorder] = useState(false);
  const [editingGradient, setEditingGradient] = useState(false);

  // Helper to convert RGBA to hex with alpha (#RRGGBBAA)
  const rgbaToHex = (rgba: RgbaColor): string => {
    const r = rgba.r.toString(16).padStart(2, '0');
    const g = rgba.g.toString(16).padStart(2, '0');
    const b = rgba.b.toString(16).padStart(2, '0');
    const a = Math.round(rgba.a * 255).toString(16).padStart(2, '0');
    return `#${r}${g}${b}${a}`;
  };

  // Helper to convert hex with alpha to RGBA
  const hexToRgba = (hex: string): RgbaColor => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
    if (result) {
      return {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
        a: result[4] ? parseInt(result[4], 16) / 255 : 1,
      };
    }
    return { r: 59, g: 130, b: 246, a: 1 };
  };

  // Helper to parse degrees from direction string (e.g., "180deg" -> 180)
  const parseDirectionDegrees = (direction: string): number => {
    const degMatch = direction.match(/^(\d+)deg$/i);
    if (degMatch) return parseInt(degMatch[1], 10);
    // Fallback for legacy "to X" format
    const keywordMap: Record<string, number> = {
      'to top': 0,
      'to top right': 45,
      'to right': 90,
      'to bottom right': 135,
      'to bottom': 180,
      'to bottom left': 225,
      'to left': 270,
      'to top left': 315,
    };
    return keywordMap[direction.toLowerCase()] ?? 180;
  };

  // Sync local style state with loaded profile style
  useEffect(() => {
    if (profileStyle.avatarBorderColor) {
      setLocalBorderColor(hexToRgba(profileStyle.avatarBorderColor));
    }
    if (profileStyle.gradient) {
      setLocalGradientStart(hexToRgba(profileStyle.gradient.startColor));
      setLocalGradientStop(hexToRgba(profileStyle.gradient.stopColor));
      setLocalGradientDirection(parseDirectionDegrees(profileStyle.gradient.direction));
    }
  }, [profileStyle]);

  const handleBorderColorSave = async () => {
    setSavingStyle(true);
    setStyleError(undefined);
    try {
      await setProfileStyle({ avatarBorderColor: rgbaToHex(localBorderColor) });
      await syncUserAvatar();
      setEditingBorder(false);
    } catch (e) {
      setStyleError('Failed to save border color');
    }
    setSavingStyle(false);
  };

  const handleBorderColorRemove = async () => {
    setSavingStyle(true);
    setStyleError(undefined);
    try {
      await setProfileStyle({ avatarBorderColor: undefined });
      await syncUserAvatar();
      setEditingBorder(false);
      setLocalBorderColor({ r: 59, g: 130, b: 246, a: 0 });
    } catch (e) {
      setStyleError('Failed to remove border color');
    }
    setSavingStyle(false);
  };

  const handleGradientSave = async () => {
    setSavingStyle(true);
    setStyleError(undefined);
    try {
      await setProfileStyle({
        gradient: {
          direction: `${localGradientDirection}deg`,
          startColor: rgbaToHex(localGradientStart),
          stopColor: rgbaToHex(localGradientStop),
        },
      });
      await syncUserAvatar();
      setEditingGradient(false);
    } catch (e) {
      setStyleError('Failed to save gradient');
    }
    setSavingStyle(false);
  };

  const handleGradientRemove = async () => {
    setSavingStyle(true);
    setStyleError(undefined);
    try {
      await setProfileStyle({ gradient: undefined });
      await syncUserAvatar();
      setEditingGradient(false);
      setLocalGradientStart({ r: 0, g: 0, b: 0, a: 0 });
      setLocalGradientStop({ r: 0, g: 0, b: 0, a: 0 });
      setLocalGradientDirection(180);
    } catch (e) {
      setStyleError('Failed to remove gradient');
    }
    setSavingStyle(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;
      }

      const accessToken = mx.getAccessToken();
      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 {
        // Fetch the raw uploaded image so we can embed existing banner/color metadata
        const httpUrl = mxcUrlToHttp(mx, upload.mxc, useAuthentication);
        if (!httpUrl) throw new Error('Could not resolve uploaded avatar URL');

        const accessToken = mx.getAccessToken();
        const response = await fetch(httpUrl, {
          headers: accessToken && useAuthentication ? { Authorization: `Bearer ${accessToken}` } : undefined,
        });
        if (!response.ok) throw new Error('Failed to fetch uploaded avatar');
        const avatarData = await response.arrayBuffer();

        const format = detectImageFormat(avatarData);
        if (format === 'unknown') throw new Error('Unsupported avatar image format');

        // Re-embed the existing banner URL and profile color into the new avatar
        const metadata: ImageMetadata = {
          banner: userBanner,
          color: userColor,
        };
        const modifiedData = embedMetadataInImage(avatarData, metadata);
        if (!modifiedData) throw new Error('Failed to embed metadata in avatar');

        const mimeType = getMimeType(format);
        const extension = getExtension(format);
        const blob = new Blob([modifiedData], { type: mimeType });
        const uploadResponse = await mx.uploadContent(blob, { name: `avatar.${extension}`, type: mimeType });

        await mx.setAvatarUrl(uploadResponse.content_uri);

        const userId = mx.getUserId();
        if (userId) {
          const user = mx.getUser(userId);
          if (user && user.avatarUrl !== uploadResponse.content_uri) {
            user.setAvatarUrl(uploadResponse.content_uri);
          }
        }

        setAvatarFile(undefined);
        await syncUserAvatar();
      } catch (e: any) {
        setError(`Failed to save avatar: ${e?.message || 'Unknown error'}`);
      }
      setSaving(false);
    },
    [mx, useAuthentication, userBanner, userColor, 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);
  };

  // Build gradient CSS for preview (shows local editing values when user is editing,
  // otherwise falls back to saved profile style)
  const previewGradient = editingGradient
    ? `linear-gradient(${localGradientDirection}deg, ${rgbaToHex(localGradientStart)}, ${rgbaToHex(localGradientStop)})`
    : profileStyle.gradient
      ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
      : undefined;

  // Build border color for preview (shows local editing value when user is editing,
  // otherwise falls back to saved profile style)
  const previewBorderColor = editingBorder
    ? rgbaToHex(localBorderColor)
    : profileStyle.avatarBorderColor;

  const previewPillBgColor = previewBorderColor ? stripAlphaFromColor(previewBorderColor) : undefined;
  const previewProfileColor = previewBorderColor ? stripAlphaFromColor(previewBorderColor) : (userColor || colorMXID(userId));

  const previewTextShadow = `0 1px 4px ${getTextShadowColor(previewProfileColor)}`;

  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: previewBorderColor || color.Surface.Container,
                  border: 'none',
                  padding: 0,
                  cursor: 'pointer',
                  borderRadius: '50%',
                }}
              >
                <AvatarPresence
                  badgeBackgroundColor={previewBorderColor}
                  badge={
                    presence && (
                      <PresenceBadge presence={presence.presence} status={presence.status} />
                    )
                  }
                >
                  <Avatar
                    size="500"
                    style={{
                      width: toRem(72),
                      height: toRem(72),
                      outline: previewBorderColor
                        ? `${toRem(4)} solid ${previewBorderColor}`
                        : `${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 - matches UserRoomProfile gradient section */}
          <Box
            direction="Column"
            gap="400"
            alignItems="Center"
            style={{
              padding: config.space.S400,
              paddingTop: `calc(${config.space.S400} + ${toRem(36)})`,
              marginTop: toRem(-36),
              background: previewGradient,
              textAlign: 'center',
            }}
          >
            {/* Display Name with Color Picker */}
            <Box alignItems="Center" gap="200" justifyContent="Center">
              <HexColorPickerPopOut
                picker={
                  <Box direction="Column" gap="200">
                    <HexColorPicker color={localColor} onChange={setLocalColor} />
                    <Box gap="100" alignItems="Center">
                      <Input
                        size="300"
                        variant="Secondary"
                        style={{ width: toRem(100) }}
                        value={localColor}
                        onChange={(e) => {
                          setLocalColor(e.target.value);
                          setColorError(undefined);
                        }}
                      />
                      <Button
                        size="300"
                        variant="Primary"
                        fill="Solid"
                        radii="300"
                        onClick={handleColorSave}
                        disabled={savingColor}
                      >
                        <Text size="B300">{savingColor ? 'Saving...' : 'Save'}</Text>
                      </Button>
                    </Box>
                    {colorError && (
                      <Text size="T200" style={{ color: color.Critical.Main }}>
                        {colorError}
                      </Text>
                    )}
                  </Box>
                }
                onRemove={userColor ? handleColorRemove : undefined}
              >
                {(onOpen) => (
                  <Box
                    as="button"
                    onClick={onOpen}
                    disabled={savingColor}
                    style={{
                      width: toRem(24),
                      height: toRem(24),
                      borderRadius: toRem(6),
                      backgroundColor: userColor ?? localColor,
                      border: 'none',
                      cursor: 'pointer',
                      flexShrink: 0,
                    }}
                  />
                )}
              </HexColorPickerPopOut>
              {isEditingName ? (
                <Input
                  autoFocus
                  value={editedName}
                  onChange={(e) => setEditedName(e.target.value)}
                  onKeyDown={handleNameKeyDown}
                  onBlur={handleNameSave}
                  variant="Background"
                  size="400"
                  disabled={savingName}
                  style={{
                    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={{
                    border: 'none',
                    background: 'none',
                    cursor: 'pointer',
                    padding: `${toRem(4)} ${toRem(8)}`,
                    margin: `${toRem(-4)} ${toRem(-8)}`,
                    position: 'relative',
                  }}
                >
                  <Text
                    size="H4"
                    className={classNames(BreakWord, LineClamp3)}
                    title={profile.displayName || getMxIdLocalPart(userId)}
                    style={{ color: previewProfileColor, textShadow: previewTextShadow }}
                  >
                    {profile.displayName || getMxIdLocalPart(userId) || userId}
                  </Text>
                  {hoveredArea === 'name' && (
                    <Box
                      style={{
                        position: 'absolute',
                        top: 0,
                        right: toRem(-32),
                        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: previewPillBgColor || color.Surface.Container,
                border: previewPillBgColor ? 'none' : `${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',
                        color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                      }}
                    >
                      {presence?.status || 'Click to set a custom status...'}</Text>
                  </Box>
                  {presence?.status && hoveredArea === 'status' && (
                    <>
                      <Icon size="50" src={Icons.Pencil} style={{ color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined }} />
                      <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: previewPillBgColor || color.Surface.Container,
                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                  padding: `${toRem(4)} ${toRem(8)}`,
                  borderRadius: toRem(16),
                }}
              >
                <Text 
                  size="B300" 
                  style={{
                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                  }}
                >
                  ruv.wtf
                </Text>
              </Box>
              <Box
                style={{
                  backgroundColor: previewPillBgColor || color.Surface.Container,
                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                  padding: `${toRem(4)} ${toRem(8)}`,
                  borderRadius: toRem(16),
                }}
              >
                <Text 
                  size="B300"
                  style={{
                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                  }}
                >
                  Share
                </Text>
              </Box>
              <Box
                style={{
                  backgroundColor: previewPillBgColor || color.Surface.Container,
                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                  padding: `${toRem(4)} ${toRem(8)}`,
                  borderRadius: toRem(16),
                }}
              >
                <Text 
                  size="B300"
                  style={{
                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                  }}
                >
                  Admin
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>

      {/* Profile Style Settings */}
      <Box
        direction="Column"
        gap="200"
        style={{
          padding: config.space.S300,
          border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
          borderRadius: toRem(8),
          width: '100%',
        }}
      >
        <Text size="H6">Profile Style</Text>
        
        {/* Avatar Border Color */}
        <Box direction="Column" gap="100">
          <Text size="T300">Avatar Border Color</Text>
          <Box gap="200" alignItems="Center" wrap="Wrap">
            <RgbaColorPicker color={localBorderColor} onChange={(c) => { setLocalBorderColor(c); setEditingBorder(true); }} />
            <Box direction="Column" gap="100">
              <Text size="T200" style={{ opacity: 0.7 }}>
                Preview: {rgbaToHex(localBorderColor)}
              </Text>
              <Box
                style={{
                  width: toRem(48),
                  height: toRem(48),
                  borderRadius: '50%',
                  border: `${toRem(4)} solid ${rgbaToHex(localBorderColor)}`,
                  backgroundColor: color.Surface.Container,
                }}
              />
              <Box gap="100">
                <Button
                  size="300"
                  variant="Primary"
                  fill="Solid"
                  radii="300"
                  onClick={handleBorderColorSave}
                  disabled={savingStyle}
                >
                  <Text size="B300">Save</Text>
                </Button>
                {profileStyle.avatarBorderColor && (
                  <Button
                    size="300"
                    variant="Critical"
                    fill="Soft"
                    radii="300"
                    onClick={handleBorderColorRemove}
                    disabled={savingStyle}
                  >
                    <Text size="B300">Remove</Text>
                  </Button>
                )}
              </Box>
            </Box>
          </Box>
        </Box>

        {/* Profile Gradient */}
        <Box direction="Column" gap="100">
          <Text size="T300">Profile Card Gradient</Text>
          <Box gap="200" alignItems="Start" wrap="Wrap">
            <Box direction="Column" gap="100">
              <Text size="T200">Start Color</Text>
              <RgbaColorPicker color={localGradientStart} onChange={(c) => { setLocalGradientStart(c); setEditingGradient(true); }} />
            </Box>
            <Box direction="Column" gap="100">
              <Text size="T200">End Color</Text>
              <RgbaColorPicker color={localGradientStop} onChange={(c) => { setLocalGradientStop(c); setEditingGradient(true); }} />
            </Box>
            <Box direction="Column" gap="100">
              <Text size="T200">Direction</Text>
              <AngleSelector
                value={localGradientDirection}
                onChange={(deg) => { setLocalGradientDirection(deg); setEditingGradient(true); }}
              />
              <Box
                style={{
                  width: toRem(100),
                  height: toRem(60),
                  borderRadius: toRem(8),
                  background: `linear-gradient(${localGradientDirection}deg, ${rgbaToHex(localGradientStart)}, ${rgbaToHex(localGradientStop)})`,
                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                }}
              />
              <Box gap="100">
                <Button
                  size="300"
                  variant="Primary"
                  fill="Solid"
                  radii="300"
                  onClick={handleGradientSave}
                  disabled={savingStyle}
                >
                  <Text size="B300">Save</Text>
                </Button>
                {profileStyle.gradient && (
                  <Button
                    size="300"
                    variant="Critical"
                    fill="Soft"
                    radii="300"
                    onClick={handleGradientRemove}
                    disabled={savingStyle}
                  >
                    <Text size="B300">Remove</Text>
                  </Button>
                )}
              </Box>
            </Box>
          </Box>
        </Box>

        {styleError && (
          <Text size="T200" style={{ color: color.Critical.Main }}>{styleError}</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} />
  );
}