<template>
    <Head title="360° Feedback" />
    <AuthenticatedLayout title="360° Feedback" subtitle="Give and receive feedback">
        <div class="flex justify-end mb-6">
            <Link href="/feedback/create" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary-600 text-white rounded-xl text-sm font-medium hover:bg-primary-700 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Give Feedback
            </Link>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div class="bg-white rounded-2xl border border-surface-200 p-6 shadow-sm">
                <h3 class="text-lg font-semibold text-surface-800 mb-4">Received Feedback</h3>
                <div class="space-y-4">
                    <div v-for="f in received.data" :key="f.id" class="p-4 rounded-xl bg-surface-50 border border-surface-100">
                        <div class="flex items-center justify-between mb-2">
                            <Badge :variant="f.type === 'praise' ? 'success' : f.type === 'constructive' ? 'warning' : 'info'">{{ f.type }}</Badge>
                            <span class="text-xs text-surface-400">{{ new Date(f.created_at).toLocaleDateString() }}</span>
                        </div>
                        <p class="text-sm text-surface-700">{{ f.content }}</p>
                        <p class="text-xs text-surface-500 mt-2">From: {{ f.is_anonymous ? 'Anonymous' : (f.sender?.surname + ' ' + f.sender?.firstname) }}</p>
                    </div>
                    <p v-if="!received.data?.length" class="text-sm text-surface-400 text-center py-8">No feedback received yet</p>
                </div>
                <div class="mt-4"><Pagination :links="received.links" :from="received.from" :to="received.to" :total="received.total" /></div>
            </div>

            <div class="bg-white rounded-2xl border border-surface-200 p-6 shadow-sm">
                <h3 class="text-lg font-semibold text-surface-800 mb-4">Sent Feedback</h3>
                <div class="space-y-4">
                    <div v-for="f in sent.data" :key="f.id" class="p-4 rounded-xl bg-surface-50 border border-surface-100">
                        <div class="flex items-center justify-between mb-2">
                            <Badge :variant="f.type === 'praise' ? 'success' : f.type === 'constructive' ? 'warning' : 'info'">{{ f.type }}</Badge>
                            <span class="text-xs text-surface-400">{{ new Date(f.created_at).toLocaleDateString() }}</span>
                        </div>
                        <p class="text-sm text-surface-700">{{ f.content }}</p>
                        <p class="text-xs text-surface-500 mt-2">To: {{ f.recipient?.surname }} {{ f.recipient?.firstname }}</p>
                    </div>
                    <p v-if="!sent.data?.length" class="text-sm text-surface-400 text-center py-8">No feedback sent yet</p>
                </div>
                <div class="mt-4"><Pagination :links="sent.links" :from="sent.from" :to="sent.to" :total="sent.total" /></div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

<script setup>
import { Head, Link } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import Badge from '@/Components/Badge.vue';
import Pagination from '@/Components/Pagination.vue';
defineProps({ received: Object, sent: Object });
</script>
