import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { Button, ButtonTypes } from '../Button';

import { ICharacter } from '@rpg-engine/shared';
import {
  ActionButtons,
  Table,
  TableCell,
  TableHeader,
  TableRow,
  UserActionLink,
} from '../Table/Table';
import { SearchFriend } from './SearchFriend';
export type IFriend = Pick<ICharacter, 'name' | '_id' | 'isOnline'>;
interface IFriendListProps {
  scale?: number;
  friends: IFriend[];
  friendRequests: IFriend[];
  searchedCharacters: IFriend[];
  onFocus?: () => void;
  onBlur?: () => void;
  onClose: () => void;
  onOpenPrivateMessage: (character: IFriend) => void;
  onRemoveFriend: (character: IFriend) => void;
  onSendFriendRequest: (character: IFriend) => void;
  onSearch: (characterName: string) => void;
  onAcceptRequest: (character: IFriend) => void;
  onRejectRequest: (character: IFriend) => void;
  onAddFriend?: () => void;
  onBackFriendList?: () => void;
}

export const FriendList: React.FC<IFriendListProps> = ({
  friends,
  friendRequests,
  searchedCharacters,
  onFocus,
  onBlur,
  onSearch,
  onAcceptRequest,
  onSendFriendRequest,
  onRemoveFriend,
  onOpenPrivateMessage,
  onRejectRequest,
  onAddFriend,
  onBackFriendList,
}) => {
  const [isAddFriendUI, setIsAddFriendUI] = useState(false);

  useEffect(() => {
    if (isAddFriendUI) {
      onAddFriend?.();
    } else {
      onBackFriendList?.();
    }
  }, [isAddFriendUI]);

  return (
    <ListWrapper>
      {isAddFriendUI ? (
        <SearchFriend
          searchedCharacters={searchedCharacters}
          onSendFriendRequest={onSendFriendRequest}
          onAcceptRequest={onAcceptRequest}
          onRejectRequest={onRejectRequest}
          friendRequests={friendRequests}
          onSearch={onSearch}
          onBlur={onBlur}
          onFocus={onFocus}
        />
      ) : (
        <>
          <ScrollableArea>
            <Table>
              <thead>
                <TableRow>
                  <TableHeader>Online</TableHeader>
                  <TableHeader>Name</TableHeader>
                  <TableHeader>Actions</TableHeader>
                </TableRow>
              </thead>
              <tbody>
                {friends.map(friend => (
                  <TableRow key={friend._id}>
                    <TableCell>
                      <IsOnlineBadge $isOnline={friend.isOnline} />
                    </TableCell>
                    <TableCell>{friend.name}</TableCell>
                    <TableCell>
                      <ActionButtons>
                        <UserActionLink
                          color={uiColors.white}
                          onClick={() => onOpenPrivateMessage(friend)}
                        >
                          Chat
                        </UserActionLink>
                        <UserActionLink
                          color={uiColors.red}
                          onClick={() => onRemoveFriend(friend)}
                        >
                          Remove
                        </UserActionLink>
                      </ActionButtons>
                    </TableCell>
                  </TableRow>
                ))}
              </tbody>
            </Table>
          </ScrollableArea>
        </>
      )}

      <ButtonContainer>
        <Button
          buttonType={ButtonTypes.RPGUIButton}
          onClick={() => setIsAddFriendUI(prev => !prev)}
        >
          {isAddFriendUI ? 'Back' : 'Add New Friend'}
        </Button>
      </ButtonContainer>
    </ListWrapper>
  );
};

// Styled components for FriendList UI
const ListWrapper = styled.div`
  margin-top: 1rem;
  max-height: 350px;
  display: flex;
  flex-direction: column;
`;

const ScrollableArea = styled.div`
  overflow-y: auto;
  max-height: 300px; /* Adjust this value based on your layout */
`;

const IsOnlineBadge = styled.div<{ $isOnline: boolean }>`
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: ${({ $isOnline }) =>
    $isOnline ? uiColors.lightGreen : uiColors.red};
  margin-right: 1rem;
`;

const ButtonContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1rem;
`;
