<template>
    <Head title="Give Feedback" />
    <AuthenticatedLayout title="Give Feedback">
        <div class="max-w-2xl">
            <div class="bg-white rounded-2xl border border-surface-200 p-6 shadow-sm">
                <form @submit.prevent="submit" class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1.5">Recipient *</label>
                        <select v-model="form.to_user_id" required class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500">
                            <option :value="null">-- Select Staff --</option>
                            <option v-for="u in users" :key="u.id" :value="u.id">{{ u.surname }} {{ u.firstname }} — {{ u.designation || u.department?.name || '' }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1.5">Feedback Type *</label>
                        <div class="grid grid-cols-3 gap-3">
                            <label v-for="t in types" :key="t.value" :class="['flex items-center justify-center gap-2 p-3 rounded-xl border-2 cursor-pointer transition-all', form.type === t.value ? 'border-primary-500 bg-primary-50' : 'border-surface-200 hover:border-primary-200']">
                                <input v-model="form.type" type="radio" :value="t.value" class="hidden" />
                                <span class="text-sm font-medium">{{ t.label }}</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1.5">Your Feedback *</label>
                        <textarea v-model="form.content" rows="5" required maxlength="2000" class="w-full px-4 py-3 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500" placeholder="Write your feedback..."></textarea>
                        <p class="mt-1 text-xs text-surface-400 text-right">{{ form.content.length }}/2000</p>
                    </div>
                    <div class="flex items-center gap-2">
                        <input v-model="form.is_anonymous" type="checkbox" id="anon" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500" />
                        <label for="anon" class="text-sm text-surface-700">Submit anonymously</label>
                    </div>
                    <div class="flex items-center gap-4 pt-4 border-t border-surface-200">
                        <button type="submit" :disabled="form.processing" class="px-6 py-2.5 bg-primary-600 text-white rounded-xl text-sm font-medium hover:bg-primary-700 disabled:opacity-50">Submit Feedback</button>
                        <Link href="/feedback" class="px-6 py-2.5 border border-surface-200 text-surface-600 rounded-xl text-sm font-medium hover:bg-surface-50">Cancel</Link>
                    </div>
                </form>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
const props = defineProps({ users: Array });
const types = [{ value: 'praise', label: '👏 Praise' }, { value: 'constructive', label: '💡 Constructive' }, { value: 'suggestion', label: '💬 Suggestion' }];
const form = useForm({ to_user_id: null, type: 'praise', content: '', is_anonymous: false });
function submit() { form.post('/feedback'); }
</script>
