<script setup lang="ts">
import { Link, Head } from '@inertiajs/vue3';
import AppLayout from "@/layouts/AppLayout.vue";
import type {BreadcrumbItem} from "@/types";

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Монтажник',
        href: '/installers/{user}',
    },
];

const props = defineProps({
    user: Object,
    requests: Array,
    avg_hours: Number,
});

const statusLabels: Record<string, string> = {
    new: 'Новая',
    assigned: 'Назначена',
    in_progress: 'В работе',
    done: 'Завершена',
    cancelled: 'Отменена',
};

function translateStatus(status: string) {
    return statusLabels[status] ?? status;
}
</script>

<template>
    <Head :title="`Монтажник: ${props.user.name}`" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
            <h1 class="text-2xl font-bold mb-4">Монтажник: {{ props.user.name }}</h1>
            <p><strong>Рейтинг:</strong> {{ props.user.rating?.toFixed(1) ?? '—' }}</p>
            <p><strong>Среднее время выполнения:</strong> {{ props.avg_hours ?? '—' }} часов</p>

            <h2 class="mt-6 text-xl font-semibold mb-2">Заявки</h2>
            <table class="w-full text-sm text-left text-gray-700">
                <thead class="text-xs text-gray-500 uppercase bg-gray-50 border-b">
                <tr>
                    <th class="px-4 py-3">Статус</th>
                    <th class="px-4 py-3">Дата создания</th>
                    <th class="px-4 py-3">Запланированная дата</th>
                    <th class="px-4 py-3">Дата завершения</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                <tr
                    v-for="req in props.requests"
                    :key="req.id"
                    class="hover:bg-gray-50 transition-colors"
                >
                    <td class="px-4 py-3 font-medium capitalize">{{ translateStatus(req.status) }}</td>
                    <td class="px-4 py-3">{{ new Date(req.created_at).toLocaleDateString() }}</td>
                    <td class="px-4 py-3">{{ new Date(req.scheduled_date).toLocaleDateString() }}</td>
                    <td class="px-4 py-3">
                        {{ req.completed_at ? new Date(req.completed_at).toLocaleDateString() : '—' }}
                    </td>
                </tr>

                <tr v-if="props.requests.length === 0">
                    <td colspan="4" class="px-4 py-6 text-center text-gray-500">Заявок нет</td>
                </tr>
                </tbody>
            </table>

            <Link href="/installers/stats" class="inline-block mt-6 text-blue-600 underline">
                ← Вернуться к списку монтажников
            </Link>
        </div>
    </AppLayout>
</template>

<style scoped>
table {
    border-spacing: 0;
    border-collapse: collapse;
}
</style>
