<template>
  <div class="testing-view">
    <v-container>
      <v-row class="mb-4">
        <!-- Filtro de Data/Hora -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="filters.date"
            label="Data/Hora"
            type="datetime-local"
          ></v-text-field>
        </v-col>

        <!-- Filtro de Câmera ID -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="filters.cameraId"
            label="Câmera ID"
            clearable
          ></v-text-field>
        </v-col>

        <!-- Campo de Pesquisa -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="filters.search"
            label="Pesquisar"
            append-icon="mdi-magnify"
            clearable
          ></v-text-field>
        </v-col>
      </v-row>

      <!-- Botões de Treino e Integração -->
      <v-row class="mb-4">
        <v-col class="d-flex justify-end">
          <v-btn color="primary" class="mr-2" @click="trainModels">
            Treinar Modelos
          </v-btn>
          <v-btn color="success" @click="integrateModels">
            Integrar Modelos
          </v-btn>
        </v-col>
      </v-row>

      <!-- Lista de Modelos de Teste -->
      <v-row>
        <v-col>
          <v-data-table
            :headers="headers"
            :items="models"
            item-value="id"
            class="elevation-1"
          >
            <template #top>
              <v-toolbar flat>
                <v-toolbar-title>Modelos de Teste</v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
            </template>
            <template #item_actions="{ item }">
              <v-btn icon color="primary" @click="viewDetails(item)">
                <v-icon>mdi-eye</v-icon>
              </v-btn>
            </template>
          </v-data-table>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  name: "TestingView",
  data() {
    return {
      filters: {
        date: "",
        cameraId: "",
        search: "",
      },
      headers: [
        { text: "ID", value: "id" },
        { text: "Nome", value: "name" },
        { text: "Status", value: "status" },
        { text: "Ações", value: "actions", sortable: false },
      ],
      models: [
        { id: 1, name: "Modelo A", status: "Pronto" },
        { id: 2, name: "Modelo B", status: "Em Execução" },
        { id: 3, name: "Modelo C", status: "Concluído" },
      ],
    };
  },
  methods: {
    trainModels() {
      alert("Iniciando treinamento dos modelos...");
    },
    integrateModels() {
      alert("Integrando modelos...");
    },
    viewDetails(item) {
      alert(`Visualizando detalhes do modelo: ${item.name}`);
    },
  },
};
</script>

<style scoped>
.testing-view {
  background: #f9f9f9;
  min-height: 100vh;
}
</style>
