@props(['user'])

@php
$designation = $user->designation();
$employeeId = $user->employee_id ?? '—';
$faceClasses = 'relative isolate flex flex-col gap-6 overflow-hidden rounded-3xl p-6 text-white shadow-raised [backface-visibility:hidden] [grid-area:1/1]';
@endphp

{{-- A company ID card: it tilts towards the pointer, shines on hover, and flips to show the employee's details. --}}
<div
    x-data="{ flipped: false, tiltX: 0, tiltY: 0 }"
    @mousemove="
        const box = $el.getBoundingClientRect();
        tiltY = ((event.clientX - box.left) / box.width - 0.5) * 10;
        tiltX = -((event.clientY - box.top) / box.height - 0.5) * 10;
    "
    @mouseleave="tiltX = 0; tiltY = 0"
    {{ $attributes->merge(['class' => 'group animate-card-in [perspective:1200px] motion-reduce:animate-none']) }}
>
    <div
        :style="`transform: rotateX(${tiltX}deg) rotateY(${tiltY + (flipped ? 180 : 0)}deg)`"
        class="grid h-full transition-transform duration-500 ease-out [transform-style:preserve-3d] motion-reduce:transition-none"
    >
        <!-- Front -->
        <div :aria-hidden="flipped" class="{{ $faceClasses }} bg-gradient-to-br from-slate-950 via-slate-900 to-brand-900">
            <div class="pointer-events-none absolute -right-16 -top-16 -z-10 h-56 w-56 animate-drift rounded-full bg-brand-500/25 blur-2xl motion-reduce:animate-none"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-12 -z-10 h-56 w-56 animate-drift rounded-full bg-accent-500/20 blur-2xl [animation-delay:-3s] motion-reduce:animate-none"></div>
            <div class="pointer-events-none absolute inset-y-0 left-0 -z-10 w-1/3 -translate-x-[160%] -skew-x-[20deg] bg-gradient-to-r from-transparent via-white/15 to-transparent group-hover:animate-shine motion-reduce:hidden"></div>

            <!-- Company -->
            <div class="flex items-start justify-between gap-4">
                <div class="min-w-0">
                    <div class="truncate text-lg font-extrabold tracking-tight">{{ config('app.name') }}</div>
                    <div class="text-[0.65rem] font-semibold uppercase tracking-[0.25em] text-brand-300">{{ __('Employee Card') }}</div>
                </div>

                <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-white/10 px-2.5 py-1 text-xs font-medium ring-1 ring-white/20">
                    <span class="relative flex h-2 w-2">
                        @if ($user->is_active)
                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75 motion-reduce:hidden"></span>
                        @endif
                        <span class="relative inline-flex h-2 w-2 rounded-full {{ $user->is_active ? 'bg-emerald-400' : 'bg-gray-400' }}"></span>
                    </span>
                    {{ $user->is_active ? __('Active') : __('Inactive') }}
                </span>
            </div>

            <!-- Person -->
            <div class="flex flex-1 items-center gap-4">
                <x-avatar :user="$user" size="lg" shape="square" class="ring-4 ring-white/15" />

                <div class="min-w-0">
                    <div class="truncate text-xl font-bold">{{ $user->name }}</div>
                    <div class="truncate text-sm font-medium text-brand-300">{{ $designation }}</div>
                    <div class="mt-1 font-mono text-xs tracking-[0.2em] text-slate-300">{{ $employeeId }}</div>
                </div>
            </div>

            <!-- Barcode -->
            <div class="flex items-end justify-between gap-4 border-t border-white/10 pt-4">
                <div class="h-9 w-40 max-w-full rounded-sm bg-[repeating-linear-gradient(90deg,rgba(255,255,255,0.9)_0px,rgba(255,255,255,0.9)_2px,transparent_2px,transparent_4px,rgba(255,255,255,0.9)_4px,rgba(255,255,255,0.9)_5px,transparent_5px,transparent_9px)]" aria-hidden="true"></div>

                <button type="button" @click="flipped = true" :tabindex="flipped ? -1 : 0" class="inline-flex items-center gap-1.5 rounded-lg bg-white/10 px-3 py-1.5 text-xs font-semibold ring-1 ring-white/20 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white transition duration-150 ease-in-out">
                    {{ __('View details') }}
                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- Back -->
        <div :aria-hidden="! flipped" aria-hidden="true" class="{{ $faceClasses }} bg-gradient-to-br from-brand-900 via-slate-900 to-slate-950 [transform:rotateY(180deg)]">
            <div class="pointer-events-none absolute -left-16 -top-16 -z-10 h-56 w-56 animate-drift rounded-full bg-accent-500/20 blur-2xl motion-reduce:animate-none"></div>

            <div class="flex items-start justify-between gap-4">
                <div class="min-w-0">
                    <div class="truncate text-lg font-extrabold tracking-tight">{{ config('app.name') }}</div>
                    <div class="text-[0.65rem] font-semibold uppercase tracking-[0.25em] text-brand-300">{{ __('Employee Details') }}</div>
                </div>

                <button type="button" @click="flipped = false" :tabindex="flipped ? 0 : -1" tabindex="-1" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-white/10 px-3 py-1.5 text-xs font-semibold ring-1 ring-white/20 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white transition duration-150 ease-in-out">
                    {{ __('Back') }}
                </button>
            </div>

            <dl class="flex flex-1 flex-col justify-center divide-y divide-white/10 text-sm">
                <div class="flex items-center justify-between gap-4 py-2">
                    <dt class="text-brand-300">{{ __('Name') }}</dt>
                    <dd class="truncate font-semibold">{{ $user->name }}</dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-2">
                    <dt class="text-brand-300">{{ __('Designation') }}</dt>
                    <dd class="truncate font-semibold">{{ $designation }}</dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-2">
                    <dt class="text-brand-300">{{ __('Email') }}</dt>
                    <dd class="truncate font-semibold">{{ $user->email }}</dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-2">
                    <dt class="text-brand-300">{{ __('Phone') }}</dt>
                    <dd class="truncate font-semibold">{{ $user->phone ?? __('Not added yet') }}</dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-2">
                    <dt class="text-brand-300">{{ __('Employee ID') }}</dt>
                    <dd class="font-mono font-semibold">{{ $employeeId }}</dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-2">
                    <dt class="text-brand-300">{{ __('Joined') }}</dt>
                    <dd class="font-semibold">{{ $user->created_at?->format('d M Y') ?? '—' }}</dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-2">
                    <dt class="text-brand-300">{{ __('Status') }}</dt>
                    <dd class="font-semibold">{{ $user->is_active ? __('Active') : __('Inactive') }}</dd>
                </div>
            </dl>
        </div>
    </div>
</div>