<template>
    <div
        class="user-info-card"
        :class="{ 'clickable': isClickable }"
        @click="handleClick"
    >
        <!-- Left Side - Profile Image (Full Height) -->
        <div v-if="image" class="user-avatar" :class="{ 'rounded': rounded }" :style="{ backgroundImage: `url(${image})` }"></div>
        <div v-else class="user-avatar user-avatar-placeholder" :class="{ 'rounded': rounded }">
            <UserOutlined />
        </div>

        <!-- Right Side - User Details -->
        <div class="user-details">
            <div v-if="name" class="user-name" :style="nameStyle">{{ name }}</div>
            <div v-if="email" class="user-email" :style="{ color: token.colorTextSecondary }">
                <MailOutlined class="icon" :style="{ color: token.colorTextTertiary }" />
                <span>{{ email }}</span>
            </div>
            <div v-if="phone" class="user-phone" :style="{ color: token.colorTextSecondary }">
                <PhoneOutlined class="icon" :style="{ color: token.colorTextTertiary }" />
                <span>{{ phone }}</span>
            </div>
            <div v-if="role" class="user-role" :style="{ color: token.colorTextSecondary }">
                <SafetyCertificateOutlined class="icon" :style="{ color: token.colorTextTertiary }" />
                <span>{{ role }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue';
import { UserOutlined, MailOutlined, PhoneOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue';
import { theme } from 'ant-design-vue';

const props = defineProps({
    name: {
        type: String,
        default: ''
    },
    email: {
        type: String,
        default: ''
    },
    phone: {
        type: String,
        default: ''
    },
    image: {
        type: String,
        default: ''
    },
    role: {
        type: String,
        default: ''
    },
    rounded: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['click']);
const instance = getCurrentInstance();
const { useToken } = theme;
const { token } = useToken();

// Automatically detect if component has click listener
const isClickable = computed(() => {
    // Check if there are any click event listeners attached
    return instance?.vnode?.props?.onClick !== undefined;
});

// Computed style for name - blue when clickable, theme text color otherwise
const nameStyle = computed(() => ({
    color: isClickable.value ? token.value.colorPrimary : token.value.colorText
}));

const handleClick = () => {
    if (isClickable.value) {
        emit('click');
    }
};
</script>

<style scoped lang="less">
.user-info-card {
    display: flex;
    align-items: stretch;
    gap: 12px;

    &.clickable {
        cursor: pointer;

        .user-details {
            .user-name {
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .user-avatar {
        flex-shrink: 0;
        width: 45px;
        height: 100%;
        min-height: 45px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        &.rounded {
            border-radius: 50%;
        }

        &.user-avatar-placeholder {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
    }

    .user-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;

        .user-name {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all 0.2s ease;
        }

        .user-email,
        .user-phone,
        .user-role {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            line-height: 1.4;

            .icon {
                font-size: 11px;
                flex-shrink: 0;
            }

            span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
