<template>
    <a-modal
        :title="$t('staff_member.details')"
        :open="visible"
        :footer="null"
        :width="600"
        @cancel="onClose"
    >
        <div class="user-view-modal">
            <div class="user-header">
                <a-avatar :src="user.profile_image_url" :size="64" />
                <div class="user-header-info">
                    <h3>{{ user.name }}</h3>
                    <div class="user-tags">
                        <a-tag v-if="user.role" color="blue">
                            {{ user.role?.display_name }}
                        </a-tag>
                        <a-tag :color="user.status === 'active' ? 'success' : 'error'">
                            {{ $t(`common.${user.status}`) }}
                        </a-tag>
                    </div>
                </div>
            </div>

            <a-divider style="margin: 16px 0" />

            <div class="user-info-grid">
                <div class="info-item">
                    <MailOutlined class="info-icon" />
                    <div class="info-content">
                        <span class="info-label">{{ $t("staff_member.email") }}</span>
                        <span class="info-value">{{ user.email }}</span>
                    </div>
                </div>
                <div class="info-item">
                    <PhoneOutlined class="info-icon" />
                    <div class="info-content">
                        <span class="info-label">{{ $t("staff_member.phone") }}</span>
                        <span class="info-value">{{ user.phone || "-" }}</span>
                    </div>
                </div>
                <div class="info-item">
                    <SafetyCertificateOutlined class="info-icon" />
                    <div class="info-content">
                        <span class="info-label">{{
                            $t("staff_member.allow_login")
                        }}</span>
                        <span class="info-value">
                            <a-tag
                                :color="user.allow_login ? 'success' : 'default'"
                                style="margin: 0"
                            >
                                {{
                                    user.allow_login ? $t("common.yes") : $t("common.no")
                                }}
                            </a-tag>
                        </span>
                    </div>
                </div>
                <div class="info-item">
                    <CalendarOutlined class="info-icon" />
                    <div class="info-content">
                        <span class="info-label">{{
                            $t("staff_member.created_at")
                        }}</span>
                        <span class="info-value">{{
                            formatDateTime(user.created_at)
                        }}</span>
                    </div>
                </div>
                <div v-if="user.address" class="info-item full-width">
                    <EnvironmentOutlined class="info-icon" />
                    <div class="info-content">
                        <span class="info-label">{{ $t("staff_member.address") }}</span>
                        <span class="info-value">{{ user.address }}</span>
                    </div>
                </div>
            </div>
        </div>
    </a-modal>
</template>
<script setup>
import {
    MailOutlined,
    PhoneOutlined,
    SafetyCertificateOutlined,
    CalendarOutlined,
    EnvironmentOutlined,
} from "@ant-design/icons-vue";

const props = defineProps(["user", "visible"]);
const emit = defineEmits(["closed"]);

const { formatDateTime } = window.__composables.common();

const onClose = () => {
    emit("closed");
};
</script>

<style lang="less" scoped>
.user-view-modal {
    .user-header {
        display: flex;
        align-items: center;
        gap: 16px;

        .user-header-info {
            h3 {
                margin: 0 0 8px 0;
                font-size: 18px;
                font-weight: 600;
            }

            .user-tags {
                display: flex;
                gap: 8px;
            }
        }
    }

    .user-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;

        .info-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;

            &.full-width {
                grid-column: 1 / -1;
            }

            .info-icon {
                font-size: 16px;
                color: var(--ant-color-text-tertiary);
                margin-top: 2px;
            }

            .info-content {
                display: flex;
                flex-direction: column;
                gap: 2px;

                .info-label {
                    font-size: 12px;
                    color: var(--ant-color-text-secondary);
                }

                .info-value {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--ant-color-text);
                }
            }
        }
    }
}
</style>
