import { Box, Button, color, config, Text, toRem } from 'folds';
import { Icon, Icons } from '../icons';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { UserHero, UserHeroName } from './UserHero';
import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { usePowerLevels } from '../../hooks/usePowerLevels';
import { useRoom } from '../../hooks/useRoom';
import { useUserPresence } from '../../hooks/useUserPresence';
import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
import { PowerChip } from './PowerChip';
import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { useMembership } from '../../hooks/useMembership';
import { Membership } from '../../../types/matrix/room';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
import { CreatorChip } from './CreatorChip';
import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
import { DirectCreateSearchParams } from '../../pages/paths';
import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
import classNames from 'classnames';
import { BreakWord, LineClamp3 } from '../../styles/Text.css';
import colorMXID, { getColorMXIDValue } from '../../../util/colorMXID';
import { useOtherUserColor } from '../../hooks/useUserColor';

type UserRoomProfileProps = {
  userId: string;
};
export function UserRoomProfile({ userId }: UserRoomProfileProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const navigate = useNavigate();
  const closeUserRoomProfile = useCloseUserRoomProfile();
  const ignoredUsers = useIgnoredUsers();
  const ignored = ignoredUsers.includes(userId);

  const room = useRoom();
  const powerLevels = usePowerLevels(room);
  const creators = useRoomCreators(room);

  const permissions = useRoomPermissions(creators, powerLevels);
  const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);

  const myUserId = mx.getSafeUserId();
  const creator = creators.has(userId);

  const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
  const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
  const canUnban = permissions.action('ban', myUserId);
  const canInvite = permissions.action('invite', myUserId);

  const member = room.getMember(userId);
  const membership = useMembership(room, userId);

  const server = getMxIdServer(userId);
  const displayName = getMemberDisplayName(room, userId);
  const avatarMxc = getMemberAvatarMxc(room, userId);
  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;

  const presence = useUserPresence(userId);
  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
  const userColor = useOtherUserColor(userId, avatarMxc);

  // Build gradient CSS if configured
  const gradientStyle = profileStyle.gradient
    ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
    : undefined;

  const handleMessage = () => {
    closeUserRoomProfile();
    const directSearchParam: DirectCreateSearchParams = {
      userId,
    };
    navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
  };

  const hasBottomContent =
    ignored ||
    (!!member && membership === Membership.Ban) ||
    (!!member && membership === Membership.Leave && !!member.events.member && member.events.member.getSender() !== userId) ||
    (!!member && membership === Membership.Invite) ||
    (canInvite && membership === Membership.Leave) ||
    (canKickUser && membership === Membership.Join) ||
    (canBanUser && membership !== Membership.Ban);

  // Use userColor for text, or fall back to colorMXID
  const profileColor = userColor ? userColor : getColorMXIDValue(userId);
  const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
  
  // Use avatarBorderColor for pill background only if it has visible alpha (not fully transparent)
  const hasVisibleBorder = profileStyle.avatarBorderColor && !profileStyle.avatarBorderColor.endsWith('00');
  const pillBgColor = hasVisibleBorder ? stripAlphaFromColor(profileStyle.avatarBorderColor!) : undefined;

  console.log('[UserRoomProfile]', {
    userId,
    avatarMxc,
    userColor,
    profileStyle,
    profileColor,
    profileTextShadow,
    hasVisibleBorder,
    pillBgColor,
    fallbackColorMXID: getColorMXIDValue(userId),
  });

  return (
    <Box direction="Column">
      <UserHero
        userId={userId}
        avatarUrl={avatarUrl}
        avatarMxc={avatarMxc}
        presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
      />
      <Box 
        direction="Column" 
        gap="200" 
        alignItems="Center"
        style={{ 
          padding: config.space.S400, 
          paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
          marginTop: toRem(-36),
          background: gradientStyle,
          textAlign: 'center'
        }}
      >
        {/* Display Name */}
        <Text
          size="H4"
          className={classNames(BreakWord, LineClamp3)}
          style={{ color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined, textShadow: profileTextShadow }}
        >
          {getMemberDisplayName(room, userId)}
        </Text>
        
        {/* Username */}
        <Text
          size="T200"
          className={BreakWord}
          style={{ color: profileColor, textShadow: profileTextShadow }}
        >
          {userId}
        </Text>
        
        {/* Status Pill */}
        {presence?.status && (
          <Box
            style={{
              backgroundColor: pillBgColor || color.Surface.Container,
              border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
              padding: `${toRem(6)} ${toRem(10)}`,
              borderRadius: toRem(16),
              maxWidth: toRem(250),
            }}
          >
            <Text 
              size="T300" 
              className={BreakWord}
              style={{
                color: pillBgColor ? getContrastingTextColor(pillBgColor) : undefined
              }}
            >
              {presence.status}
            </Text>
          </Box>
        )}
        
        {/* Chips Row */}
        <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
          {server && <ServerChip server={server} borderColor={pillBgColor} />}
          <ShareChip userId={userId} borderColor={pillBgColor} />
          {creator ? <CreatorChip borderColor={pillBgColor} /> : <PowerChip userId={userId} borderColor={pillBgColor} />}
        </Box>
        
        {/* Message Button */}
        {userId !== myUserId && (
          <Button
            size="300"
            variant="Primary"
            fill="Solid"
            radii="300"
            before={<Icon size="50" src={Icons.Message} filled />}
            onClick={handleMessage}
          >
            <Text size="B300">Message</Text>
          </Button>
        )}
        
        {/* Additional Chips if needed */}
        {userId !== myUserId && (
          <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
            <MutualRoomsChip userId={userId} borderColor={pillBgColor} />
            <OptionsChip userId={userId} borderColor={pillBgColor} />
          </Box>
        )}
      </Box>
      {hasBottomContent && <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
        {ignored && <IgnoredUserAlert />}
        {member && membership === Membership.Ban && (
          <UserBanAlert
            userId={userId}
            reason={member.events.member?.getContent().reason}
            canUnban={canUnban}
            bannedBy={member.events.member?.getSender()}
            ts={member.events.member?.getTs()}
          />
        )}
        {member &&
          membership === Membership.Leave &&
          member.events.member &&
          member.events.member.getSender() !== userId && (
            <UserKickAlert
              reason={member.events.member?.getContent().reason}
              kickedBy={member.events.member?.getSender()}
              ts={member.events.member?.getTs()}
            />
          )}
        {member && membership === Membership.Invite && (
          <UserInviteAlert
            userId={userId}
            reason={member.events.member?.getContent().reason}
            canKick={canKickUser}
            invitedBy={member.events.member?.getSender()}
            ts={member.events.member?.getTs()}
          />
        )}
        <UserModeration
          userId={userId}
          canInvite={canInvite && membership === Membership.Leave}
          canKick={canKickUser && membership === Membership.Join}
          canBan={canBanUser && membership !== Membership.Ban}
        />
      </Box>}
    </Box>
  );
}