Nitro-V3/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx

import { CreateLinkEvent, PetRespectComposer, PetType } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState, useCallback } from 'react';
import { FaTimes } from 'react-icons/fa';
import { ConvertSeconds, GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../../../../api';
import { Button, Column, Flex, LayoutCounterTimeView, LayoutPetImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../../common';
import { useRoom, useSessionInfo } from '../../../../../hooks';

// TypeScript interface for AvatarInfoPet
interface AvatarInfoPet {
  id: number;
  name: string;
  petType: number;
  petBreed: number;
  petFigure: string;
  posture: string;
  level: number;
  maximumLevel: number;
  age: number;
  ownerId: number;
  ownerName: string;
  respect: number;
  dead?: boolean;
  energy?: number;
  maximumEnergy?: number;
  happyness?: number;
  maximumHappyness?: number;
  experience?: number;
  levelExperienceGoal?: number;
  remainingGrowTime?: number;
  remainingTimeToLive?: number;
  maximumTimeToLive?: number;
  rarityLevel?: number;
  isOwner?: boolean;
}

interface InfoStandWidgetPetViewProps {
  avatarInfo: AvatarInfoPet;
  onClose: () => void;
}

const PetHeader: FC<{ name: string; petType: number; petBreed: number; onClose: () => void }> = ({ name, petType, petBreed, onClose }) => (
    <div className="flex flex-col gap-1">
        <Flex alignItems="center" gap={1} justifyContent="between">
            <Text small wrap variant="white">
                {name}
            </Text>
            <FaTimes
                className="cursor-pointer fa-icon"
                onClick={onClose}
                aria-label={LocalizeText('generic.close')}
                title={LocalizeText('generic.close')}
            />
        </Flex>
        <Text small wrap variant="white">
            {LocalizeText(`pet.breed.${petType}.${petBreed}`)}
        </Text>
        <hr className="m-0" />
    </div>
);

const MonsterplantStats: FC<{
  avatarInfo: AvatarInfoPet;
  remainingGrowTime: number;
  remainingTimeToLive: number;
}> = ({ avatarInfo, remainingGrowTime, remainingTimeToLive }) => (
    <>
        <Column center gap={1}>
            <LayoutPetImageView direction={4} figure={avatarInfo.petFigure} posture={avatarInfo.posture} />
            <hr className="m-0" />
        </Column>
        <div className="flex flex-col gap-2">
            {!avatarInfo.dead && (
                <Column alignItems="center" gap={1}>
                    <Text center small wrap variant="white">
                        {LocalizeText('pet.level', ['level', 'maxlevel'], [avatarInfo.level.toString(), avatarInfo.maximumLevel.toString()])}
                    </Text>
                </Column>
            )}
            <Column alignItems="center" gap={1}>
                <Text small truncate variant="white">
                    {LocalizeText('infostand.pet.text.wellbeing')}
                </Text>
                <div className="bg-light-dark rounded relative overflow-hidden w-full">
                    <div className="flex justify-center items-center size-full absolute">
                        <Text small variant="white">
                            {avatarInfo.dead || remainingTimeToLive <= 0
                                ? '00:00:00'
                                : `${ConvertSeconds(remainingTimeToLive).split(':')[1]}:${ConvertSeconds(remainingTimeToLive).split(':')[2]}:${ConvertSeconds(remainingTimeToLive).split(':')[3]}`}
                        </Text>
                    </div>
                    <div
                        className="bg-success rounded pet-stats"
                        style={{
                            width: avatarInfo.dead || remainingTimeToLive <= 0 ? '0' : `${(remainingTimeToLive / avatarInfo.maximumTimeToLive) * 100}%`,
                        }}
                    />
                </div>
            </Column>
            {remainingGrowTime > 0 && (
                <Column alignItems="center" gap={1}>
                    <Text small truncate variant="white">
                        {LocalizeText('infostand.pet.text.growth')}
                    </Text>
                    <LayoutCounterTimeView
                        className="top-2 inset-e-2"
                        day={ConvertSeconds(remainingGrowTime).split(':')[0]}
                        hour={ConvertSeconds(remainingGrowTime).split(':')[1]}
                        minutes={ConvertSeconds(remainingGrowTime).split(':')[2]}
                        seconds={ConvertSeconds(remainingGrowTime).split(':')[3]}
                    />
                </Column>
            )}
            <Column alignItems="center" gap={1}>
                <Text small truncate variant="white">
                    {LocalizeText('infostand.pet.text.raritylevel', ['level'], [LocalizeText(`infostand.pet.raritylevel.${avatarInfo.rarityLevel}`)])}
                </Text>
                <LayoutRarityLevelView className="top-2 inset-e-2" level={avatarInfo.rarityLevel} />
            </Column>
            <hr className="m-0" />
        </div>
        <div className="flex flex-col gap-1">
            <Text small wrap variant="white">
                {LocalizeText('pet.age', ['age'], [avatarInfo.age.toString()])}
            </Text>
            <hr className="m-0" />
        </div>
    </>
);

// Sub-component: Regular Pet Stats
const RegularPetStats: FC<{ avatarInfo: AvatarInfoPet }> = ({ avatarInfo }) => (
    <>
        <div className="flex flex-col gap-1">
            <div className="flex gap-1">
                <Column fullWidth className="body-image pet p-1" overflow="hidden">
                    <LayoutPetImageView direction={4} figure={avatarInfo.petFigure} posture={avatarInfo.posture} />
                </Column>
                <Column grow gap={1}>
                    <Text center small wrap variant="white">
                        {LocalizeText('pet.level', ['level', 'maxlevel'], [avatarInfo.level.toString(), avatarInfo.maximumLevel.toString()])}
                    </Text>
                    <Column alignItems="center" gap={1}>
                        <Text small truncate variant="white">
                            {LocalizeText('infostand.pet.text.happiness')}
                        </Text>
                        <div className="bg-light-dark rounded relative overflow-hidden w-full">
                            <div className="flex justify-center items-center size-full absolute">
                                <Text small variant="white">
                                    {avatarInfo.happyness + '/' + avatarInfo.maximumHappyness}
                                </Text>
                            </div>
                            <div
                                className="bg-info rounded pet-stats"
                                style={{ width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' }}
                            />
                        </div>
                    </Column>
                    <Column alignItems="center" gap={1}>
                        <Text small truncate variant="white">
                            {LocalizeText('infostand.pet.text.experience')}
                        </Text>
                        <div className="bg-light-dark rounded relative overflow-hidden w-full">
                            <div className="flex justify-center items-center size-full absolute">
                                <Text small variant="white">
                                    {avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal}
                                </Text>
                            </div>
                            <div
                                className="bg-purple rounded pet-stats"
                                style={{ width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' }}
                            />
                        </div>
                    </Column>
                    <Column alignItems="center" gap={1}>
                        <Text small truncate variant="white">
                            {LocalizeText('infostand.pet.text.energy')}
                        </Text>
                        <div className="bg-light-dark rounded relative overflow-hidden w-full">
                            <div className="flex justify-center items-center size-full absolute">
                                <Text small variant="white">
                                    {avatarInfo.energy + '/' + avatarInfo.maximumEnergy}
                                </Text>
                            </div>
                            <div
                                className="bg-success rounded pet-stats"
                                style={{ width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' }}
                            />
                        </div>
                    </Column>
                </Column>
            </div>
            <hr className="m-0" />
        </div>
        <div className="flex flex-col gap-1">
            <Text small wrap variant="white">
                {LocalizeText('infostand.text.petrespect', ['count'], [avatarInfo.respect.toString()])}
            </Text>
            <Text small wrap variant="white">
                {LocalizeText('pet.age', ['age'], [avatarInfo.age.toString()])}
            </Text>
            <hr className="m-0" />
        </div>
    </>
);

export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = ({ avatarInfo, onClose }) =>
{
    const [remainingGrowTime, setRemainingGrowTime] = useState(0);
    const [remainingTimeToLive, setRemainingTimeToLive] = useState(0);
    const { roomSession = null } = useRoom();
    const { petRespectRemaining = 0, respectPet = null } = useSessionInfo();

    useEffect(() =>
    {
        setRemainingGrowTime(avatarInfo.remainingGrowTime || 0);
        setRemainingTimeToLive(avatarInfo.remainingTimeToLive || 0);
    }, [avatarInfo]);

    useEffect(() =>
    {
        if (avatarInfo.petType !== PetType.MONSTERPLANT || avatarInfo.dead) return;

        const interval = setInterval(() =>
        {
            setRemainingGrowTime((prev) => (prev <= 0 ? 0 : prev - 1));
            setRemainingTimeToLive((prev) => (prev <= 0 ? 0 : prev - 1));
        }, 1000);

        return () => clearInterval(interval);
    }, [avatarInfo]);

    const processButtonAction = useCallback(
        async (action: string) =>
        {
            try
            {
                let hideMenu = true;
                if (!action) return;

                switch (action)
                {
                    case 'respect':
                        await respectPet(avatarInfo.id);
                        if (petRespectRemaining - 1 >= 1) hideMenu = false;
                        break;
                    case 'buyfood':
                        CreateLinkEvent('catalog/open/' + GetConfigurationValue('catalog.links')['pets.buy_food']);
                        break;
                    case 'train':
                        roomSession?.requestPetCommands(avatarInfo.id);
                        break;
                    case 'treat':
                        SendMessageComposer(new PetRespectComposer(avatarInfo.id));
                        break;
                    case 'compost':
                        roomSession?.compostPlant(avatarInfo.id);
                        break;
                    case 'pick_up':
                        roomSession?.pickupPet(avatarInfo.id);
                        break;
                }

                if (hideMenu) onClose();
            }
            catch (error)
            {
                console.error(`Failed to process action ${action}:`, error);
            }
        },
        [avatarInfo, petRespectRemaining, respectPet, roomSession, onClose]
    );

    const buttons = [
        {
            action: 'buyfood',
            label: LocalizeText('infostand.button.buyfood'),
            condition: avatarInfo.petType !== PetType.MONSTERPLANT,
        },
        {
            action: 'train',
            label: LocalizeText('infostand.button.train'),
            condition: avatarInfo.isOwner && avatarInfo.petType !== PetType.MONSTERPLANT,
        },
        {
            action: 'treat',
            label: LocalizeText('infostand.button.pettreat'),
            condition:
        !avatarInfo.dead &&
        avatarInfo.petType === PetType.MONSTERPLANT &&
        avatarInfo.energy / avatarInfo.maximumEnergy < 0.98,
        },
        {
            action: 'compost',
            label: LocalizeText('infostand.button.compost'),
            condition: roomSession?.isRoomOwner && avatarInfo.petType === PetType.MONSTERPLANT,
        },
        {
            action: 'pick_up',
            label: LocalizeText('inventory.pets.pickup'),
            condition: avatarInfo.isOwner,
        },
        {
            action: 'respect',
            label: LocalizeText('infostand.button.petrespect', ['count'], [petRespectRemaining.toString()]),
            condition: petRespectRemaining > 0 && avatarInfo.petType !== PetType.MONSTERPLANT,
        },
    ];

    if (!avatarInfo) return <Text variant="white">{LocalizeText('generic.loading')}</Text>;

    return (
        <Column alignItems="end" gap={1}>
            <Column className="nitro-infostand rounded">
                <Column className="container-fluid content-area" gap={1} overflow="visible">
                    <PetHeader
                        name={avatarInfo.name}
                        petType={avatarInfo.petType}
                        petBreed={avatarInfo.petBreed}
                        onClose={onClose}
                    />
                    {avatarInfo.petType === PetType.MONSTERPLANT ? (
                        <MonsterplantStats
                            avatarInfo={avatarInfo}
                            remainingGrowTime={remainingGrowTime}
                            remainingTimeToLive={remainingTimeToLive}
                        />
                    ) : (
                        <RegularPetStats avatarInfo={avatarInfo} />
                    )}
                    <div className="flex flex-col gap-1">
                        <div className="flex items-center gap-1">
                            <UserProfileIconView userId={avatarInfo.ownerId} />
                            <Text small wrap variant="white">
                                {LocalizeText('infostand.text.petowner', ['name'], [avatarInfo.ownerName])}
                            </Text>
                        </div>
                    </div>
                </Column>
            </Column>
            <Flex gap={1} justifyContent="end">
                {buttons.map(
                    (button) =>
                        button.condition && (
                            <Button key={button.action} variant="dark" onClick={() => processButtonAction(button.action)}>
                                {button.label}
                            </Button>
                        )
                )}
            </Flex>
        </Column>
    );
};