<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { computed, ref } from 'vue';

const props = defineProps({
    sheet: { type: Object, required: true },
    statuses: { type: Object, default: () => ({}) },
    genders: { type: Object, default: () => ({}) },
});

const animal = computed(() => props.sheet.animal ?? props.sheet);
const showDeactivate = ref(false);

const deactivateForm = useForm({
    reason: 'sold',
    exit_weight_kg: '',
    death_cause: '',
    price_per_kg: '',
    total_price: '',
    sale_date: new Date().toISOString().slice(0, 10),
    notes: '',
});

const submitDeactivate = () => {
    deactivateForm.post(route('admin.ranch.cattle.deactivate', animal.value.id), {
        onSuccess: () => (showDeactivate.value = false),
    });
};
</script>

<template>
    <Head :title="`Animal ${animal.ear_tag}`" />

    <AuthenticatedLayout>
        <template #header>
            <h3 class="mb-0">Arete {{ animal.ear_tag }}</h3>
        </template>
        <template #breadcrumb>
            <li class="breadcrumb-item"><Link :href="route('dashboard')">Inicio</Link></li>
            <li class="breadcrumb-item"><Link :href="route('admin.ranch.cattle.index')">Animales</Link></li>
            <li class="breadcrumb-item active">{{ animal.ear_tag }}</li>
        </template>

        <div class="row">
            <div class="col-md-8">
                <div class="card mb-3">
                    <div class="card-header d-flex justify-content-between">
                        <h3 class="card-title mb-0">Hoja de vida</h3>
                        <div>
                            <Link
                                v-if="animal.status === 'active'"
                                :href="route('admin.ranch.cattle.edit', animal.id)"
                                class="btn btn-sm btn-outline-secondary me-1"
                            >
                                Editar
                            </Link>
                            <button
                                v-if="animal.status === 'active'"
                                type="button"
                                class="btn btn-sm btn-outline-danger"
                                @click="showDeactivate = !showDeactivate"
                            >
                                Dar de baja
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <dl class="row mb-0">
                            <dt class="col-sm-3">Estado</dt>
                            <dd class="col-sm-9">{{ statuses[animal.status] || animal.status }}</dd>
                            <dt class="col-sm-3">Sexo</dt>
                            <dd class="col-sm-9">{{ genders[animal.gender] || animal.gender }}</dd>
                            <dt class="col-sm-3">Raza</dt>
                            <dd class="col-sm-9">{{ animal.breed || '—' }}</dd>
                            <dt class="col-sm-3">Potrero</dt>
                            <dd class="col-sm-9">{{ animal.pasture_location || '—' }}</dd>
                            <dt class="col-sm-3">Nacimiento</dt>
                            <dd class="col-sm-9">{{ animal.birth_date || '—' }}</dd>
                        </dl>
                    </div>
                </div>

                <div v-if="showDeactivate" class="card card-danger mb-3">
                    <div class="card-header"><h3 class="card-title">Baja de inventario</h3></div>
                    <form @submit.prevent="submitDeactivate">
                        <div class="card-body row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Motivo</label>
                                <select v-model="deactivateForm.reason" class="form-select">
                                    <option value="sold">Venta</option>
                                    <option value="dead">Muerte</option>
                                    <option value="consumed">Consumo</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Peso salida (kg)</label>
                                <input v-model="deactivateForm.exit_weight_kg" type="number" step="0.01" class="form-control" required />
                            </div>
                            <div v-if="deactivateForm.reason === 'dead'" class="col-md-4">
                                <label class="form-label">Causa</label>
                                <input v-model="deactivateForm.death_cause" class="form-control" required />
                            </div>
                            <div v-if="deactivateForm.reason === 'sold'" class="col-md-4">
                                <label class="form-label">Precio / kg</label>
                                <input v-model="deactivateForm.price_per_kg" type="number" step="0.01" class="form-control" />
                            </div>
                            <div v-if="deactivateForm.reason === 'sold'" class="col-md-4">
                                <label class="form-label">Total</label>
                                <input v-model="deactivateForm.total_price" type="number" step="0.01" class="form-control" />
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-danger" :disabled="deactivateForm.processing">Confirmar baja</button>
                        </div>
                    </form>
                </div>

                <div class="card mb-3">
                    <div class="card-header"><h3 class="card-title">Pesajes recientes</h3></div>
                    <div class="card-body table-responsive p-0">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr><th>Fecha</th><th>Peso</th><th>GDP</th></tr>
                            </thead>
                            <tbody>
                                <tr v-for="w in (sheet.weight_records || []).slice(0, 10)" :key="w.id">
                                    <td>{{ w.weighed_at }}</td>
                                    <td>{{ w.weight_kg }} kg</td>
                                    <td>{{ w.daily_weight_gain ?? '—' }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
