<script setup>
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
import { cardClass, getStatusColor, machineStatusColors } from '@/Components/Supervisor/ui.js';
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
import { Head, Link } from '@inertiajs/vue3';

defineProps({
    machine: {
        type: Object,
        required: true,
    },
    recentEvents: {
        type: Array,
        default: () => [],
    },
});

const formatDate = (iso) => {
    if (!iso) return '—';
    return new Intl.DateTimeFormat('fr-FR', {
        dateStyle: 'medium',
        timeStyle: 'short',
    }).format(new Date(iso));
};
</script>

<template>
    <Head :title="machine.name" />

    <SupervisorLayout>
        <template #header>
            <Link
                :href="route('supervisor.machines.index')"
                class="text-sm font-medium text-indigo-600 transition hover:text-indigo-800"
            >
                ← Retour aux machines
            </Link>
        </template>

        <div class="mb-6">
            <div class="flex flex-wrap items-start gap-4">
                <div class="flex-1">
                    <h1 class="text-2xl font-bold tracking-tight text-slate-900">{{ machine.name }}</h1>
                    <p class="mt-1 text-sm text-slate-500">{{ machine.establishment?.name }}</p>
                </div>
                <StatusBadge
                    :label="machine.status_label"
                    :color-class="getStatusColor(machine.status, machineStatusColors)"
                />
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <div :class="[cardClass, 'p-6']">
                <h2 class="mb-5 text-base font-semibold text-slate-900">Informations</h2>
                <dl class="space-y-4 text-sm">
                    <div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
                        <dt class="text-slate-500">Type</dt>
                        <dd class="font-medium text-slate-800">{{ machine.type_label }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
                        <dt class="text-slate-500">QR code</dt>
                        <dd class="font-mono text-slate-800">{{ machine.qr_code }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
                        <dt class="text-slate-500">Dernier signal</dt>
                        <dd class="text-slate-800">{{ formatDate(machine.last_heartbeat_at) }}</dd>
                    </div>
                    <div v-if="machine.cycle_started_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
                        <dt class="text-slate-500">Cycle démarré</dt>
                        <dd class="text-slate-800">{{ formatDate(machine.cycle_started_at) }}</dd>
                    </div>
                    <div v-if="machine.cycle_ends_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
                        <dt class="text-slate-500">Fin de cycle prévue</dt>
                        <dd class="text-slate-800">{{ formatDate(machine.cycle_ends_at) }}</dd>
                    </div>
                    <div v-if="machine.current_user" class="flex items-center justify-between gap-4">
                        <dt class="text-slate-500">Utilisateur actuel</dt>
                        <dd class="text-right text-slate-800">
                            {{ machine.current_user.name }}
                            <span class="block text-xs text-slate-400">{{ machine.current_user.email }}</span>
                        </dd>
                    </div>
                </dl>

                <div v-if="machine.establishment" class="mt-6 rounded-xl bg-slate-50 p-4">
                    <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Établissement</h3>
                    <p class="text-sm text-slate-700">{{ machine.establishment.address }}</p>
                    <p v-if="machine.establishment.city" class="text-sm text-slate-700">
                        {{ machine.establishment.city }}
                    </p>
                </div>

                <div v-if="machine.integration" class="mt-4 rounded-xl bg-indigo-50/50 p-4 ring-1 ring-indigo-100">
                    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-indigo-600">Intégration</h3>
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-slate-500">Fournisseur</dt>
                            <dd class="font-medium text-slate-800">{{ machine.integration.provider }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-slate-500">Mode</dt>
                            <dd class="font-medium text-slate-800">{{ machine.integration.mode }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-slate-500">Active</dt>
                            <dd class="font-medium text-slate-800">{{ machine.integration.is_active ? 'Oui' : 'Non' }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            <div :class="[cardClass, 'p-6']">
                <h2 class="mb-5 text-base font-semibold text-slate-900">Événements récents</h2>
                <div v-if="recentEvents.length === 0" class="py-8 text-center text-sm text-slate-400">
                    Aucun événement enregistré.
                </div>
                <ul v-else class="divide-y divide-slate-100">
                    <li v-for="(event, index) in recentEvents" :key="index" class="flex items-start gap-3 py-3 first:pt-0">
                        <span class="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-indigo-400" />
                        <div>
                            <p class="text-sm font-medium text-slate-800">{{ event.event_type_label }}</p>
                            <p class="mt-0.5 text-xs text-slate-400">{{ formatDate(event.occurred_at) }}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </SupervisorLayout>
</template>
