<template>
  <v-app>
    <v-app-bar title="Seasoned AI Recipe Parser" color="primary"></v-app-bar>
    <v-main>
      <v-container>
        <v-card class="mx-auto mt-5" max-width="600">
          <v-card-text>
            <v-file-input
              v-model="selectedFile"
              label="Upload Recipe Photo"
              accept="image/*"
              prepend-icon="mdi-camera"
              @change="onFileSelect"
            ></v-file-input>
            
            <v-btn 
              :loading="loading" 
              color="success" 
              block 
              @click="uploadImage"
              :disabled="!selectedFile"
            >
              Analyze with C# Backend
            </v-btn>
          </v-card-text>
        </v-card>

        <v-card v-if="recipe" class="mx-auto mt-5" max-width="600">
          <v-card-title>{{ recipe.title }}</v-card-title>
          <v-card-text>
            <div class="text-subtitle-1">Ingredients:</div>
            <ul>
              <li v-for="item in recipe.ingredients" :key="item">{{ item }}</li>
            </ul>
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import axios from 'axios'
const selectedFile = ref(null)
const loading = ref(false)
const recipe = ref(null)

const uploadImage = async () => {
  if (!selectedFile.value) return
  loading.value = true
  
  const formData = new FormData()
  // We use [0] because v-file-input returns an array
  formData.append('image', selectedFile.value[0])

  try {
    // This points to your C# Backend we built earlier!
    const response = await axios.post('http://localhost:5000/api/recipe/upload', formData)
    recipe.value = response.data
  } catch (error) {
    console.error("Backend Error:", error)
    alert("Make sure your C# Backend is running on port 5000!")
  } finally {
    loading.value = false
  }
}
</script>