<template>
  <v-app>
    <v-main>
      <v-container>
        <v-card class="pa-5 mx-auto mt-10" max-width="500" elevation="10">
          <v-card-title class="text-center">Seasoned AI</v-card-title>
          
          <v-divider class="my-3"></v-divider>

          <v-file-input
            v-model="files"
            label="Pick a recipe photo"
            prepend-icon="mdi-camera"
            variant="outlined"
            accept="image/*"
          ></v-file-input>

          <v-btn 
            color="primary" 
            block 
            size="x-large"
            :loading="loading"
            @click="uploadImage"
          >
            Analyze Recipe
          </v-btn>

          <div v-if="recipe" class="mt-5">
            <h3 class="text-h6">{{ recipe.title }}</h3>
            <p>{{ recipe.description }}</p>
          </div>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'

const files = ref([])
const loading = ref(false)
const recipe = ref(null)

const uploadImage = async () => {
  if (!files.value || files.value.length === 0) {
    alert("Please select a file first!")
    return
  }

  loading.value = true
  const formData = new FormData()
  // Vuetify v-file-input returns an array
  formData.append('image', files.value[0])

  try {
    const response = await axios.post('http://localhost:5000/api/recipe/upload', formData)
    recipe.value = response.data
    console.log("Success:", response.data)
  } catch (error) {
    console.error("Connection Error:", error)
    alert("Could not connect to C# Backend on port 5000")
  } finally {
    loading.value = false
  }
}
</script>