<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { usePageTitle } from '../composables/Core/usePageTitle';
import { useModal } from '../composables/Core/useModal';
import LoadingSpinner from '../Components/LoadingSpinner.vue';
import BackButton from '../Components/Core/BackButton.vue';
import TransactionListSkeleton from '../Components/Core/Skeleton/TransactionListSkeleton.vue';

usePageTitle('Farmer Verification');
const modal = useModal();

const farmers = ref([]);
const loading = ref(true);

const fetchFarmers = async () => {
    loading.value = true;
    try {
        const response = await axios.post('/Farmers/List');
        if (response.data.success) {
            farmers.value = response.data.data;
        }
    } catch (error) {
        console.error('Failed to fetch farmers');
    } finally {
        loading.value = false;
    }
};

const verifyFarmer = async (hashkey, status) => {
    try {
        const response = await axios.post('/Farmers/Verify', {
            target: hashkey,
            status: status
        });
        if (response.data.success) {
            const index = farmers.value.findIndex(f => f.hashkey === hashkey);
            if (index !== -1) {
                farmers.value[index].verification_status = status;
            }
        }
    } catch (error) {
        modal.open({
            title: 'Error',
            body: 'Verification failed. Please try again.'
        });
    }
};

onMounted(fetchFarmers);
</script>

<template>
    <div class="verification-dashboard pb-5">
        <div class="tf-container mt-4">
            <BackButton to="Home" />
            
            <h3 class="fw_6 mb-4">Farmer Verification</h3>

            <div v-if="loading" class="mt-2 text-center">
                <TransactionListSkeleton :count="5" />
            </div>

            <div v-else-if="farmers.length > 0" class="list-group list-group-flush rounded-20 overflow-hidden border shadow-sm bg-white">
                <div v-for="farmer in farmers" :key="farmer.hashkey" class="list-group-item p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm bg-light rounded-circle p-2 me-3 text-center">
                                <i class="fas fa-tractor text-primary"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw_6">{{ farmer.farm_name }}</h6>
                                <div class="small text-muted">Owner: {{ farmer.user?.name }}</div>
                            </div>
                        </div>
                        <span :class="{
                            'badge bg-warning text-dark': farmer.verification_status === 'PENDING',
                            'badge bg-success': farmer.verification_status === 'VERIFIED',
                            'badge bg-danger': farmer.verification_status === 'REJECTED'
                        }">{{ farmer.verification_status }}</span>
                    </div>

                    <div class="mb-3 small">
                        <i class="fas fa-map-marker-alt me-1"></i> {{ farmer.farm_location }}
                        <div v-if="farmer.main_crops" class="mt-1"><i class="fas fa-leaf me-1 text-success"></i> {{ farmer.main_crops.join(', ') }}</div>
                    </div>

                    <div v-if="farmer.verification_status === 'PENDING'" class="d-flex gap-2">
                        <button @click="verifyFarmer(farmer.hashkey, 'VERIFIED')" class="btn btn-sm btn-success rounded-pill px-3">Approve</button>
                        <button @click="verifyFarmer(farmer.hashkey, 'REJECTED')" class="btn btn-sm btn-outline-danger rounded-pill px-3">Reject</button>
                    </div>
                </div>
            </div>

            <div v-else class="text-center py-5">
                <div class="mb-3">
                    <i class="fad fa-clipboard-list-check fa-4x text-muted opacity-2"></i>
                </div>
                <p class="text-muted fw_4">No verification at this time</p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.rounded-20 { border-radius: 20px; }
.avatar-sm { width: 40px; height: 40px; }
</style>
