<template>
  <v-container>
    <!-- Tabs para alternar entre Usuários e Câmeras -->
    <v-tabs v-model="tab" grow>
      <v-tab value="usuarios">Usuários</v-tab>
      <v-tab value="cameras">Câmeras</v-tab>
    </v-tabs>

    <v-window v-model="tab">
      <!-- Aba Usuários -->
      <v-window-item value="usuarios">
        <v-container>
          <v-text-field v-model="searchUser" label="Buscar usuário" prepend-inner-icon="mdi-magnify"></v-text-field>
          <v-btn color="primary" class="mb-3" @click="exportUsersPDF">Exportar PDF</v-btn>

          <v-data-table :headers="userHeaders" :items="filteredUsers" item-value="id">
            <template v-slot:item.actions="{ item }">
              <v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="openUserEdit(item)">
              </v-btn>
              <v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteUser(item)">
              </v-btn>
            </template>
          </v-data-table>

          <!-- Diálogo de Edição de Usuário -->
          <v-dialog v-model="showUserEdit" max-width="600px">
            <v-card>
              <v-card-title>
                <span class="text-h5">Editar Usuário</span>
              </v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="12">
                      <v-text-field
                        v-model="editedUser.name"
                        label="Nome"
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-text-field
                        v-model="editedUser.email"
                        label="E-mail"
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-select
                        v-model="editedUser.role"
                        :items="['Administrador', 'Usuário']"
                        label="Cargo"
                        required
                      ></v-select>
                    </v-col>
                    <v-col cols="12">
                      <v-select
                        v-model="editedUser.group"
                        :items="['Alfa', 'Beta', 'Omega']"
                        label="Grupo"
                        required
                      ></v-select>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue-darken-1" variant="text" @click="closeUserEdit">
                  Cancelar
                </v-btn>
                <v-btn color="blue-darken-1" variant="text" @click="saveUserEdit">
                  Salvar
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-container>
      </v-window-item>

      <!-- Aba Câmeras -->
      <v-window-item value="cameras">
        <v-container>
          <v-text-field v-model="searchCamera" label="Buscar câmera" prepend-inner-icon="mdi-magnify"></v-text-field>
          <v-btn color="primary" class="mb-3" @click="exportCamerasPDF">Exportar PDF</v-btn>

          <v-data-table :headers="cameraHeaders" :items="filteredCameras" item-value="model">
            <template v-slot:item.view="{ item }">
              <v-chip
                :color="getStreamTypeColor(item.view)"
                size="small"
                class="text-caption"
              >
                {{ getStreamType(item.view) }}
              </v-chip>
              <v-btn icon="mdi-video" size="small" color="primary" variant="text" density="compact" @click="openCameraView(item)" class="ml-2">
              </v-btn>
            </template>
            <template v-slot:item.actions="{ item }">
              <v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="editCamera(item)">
              </v-btn>
              <v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteCamera(item)">
              </v-btn>
            </template>
          </v-data-table>

          <!-- Diálogo de Edição de Câmera -->
          <v-dialog v-model="showCameraEdit" max-width="600px">
            <v-card>
              <v-card-title>
                <span class="text-h5">Editar Câmera</span>
              </v-card-title>
              <v-card-text>
                <v-form ref="form" v-model="validForm">
                  <v-text-field
                    v-model="editedCamera.model"
                    label="Modelo"
                    required
                    :rules="[v => !!v || 'Modelo é obrigatório']"
                    class="mb-4"
                  ></v-text-field>
                  
                  <v-text-field
                    v-model="editedCamera.description"
                    label="Descrição"
                    required
                    :rules="[v => !!v || 'Descrição é obrigatória']"
                    class="mb-4"
                  ></v-text-field>
                  
                  <v-text-field
                    v-model="editedCamera.view"
                    label="URL do Stream"
                    required
                    :rules="[
                      v => !!v || 'URL é obrigatória',
                      v => isValidStreamUrl(v) || 'URL deve começar com http:// ou rtsp://'
                    ]"
                    class="mb-4"
                  ></v-text-field>
                  
                  <v-select
                    v-model="editedCamera.status"
                    :items="['Ativa', 'Inativa', 'Manutenção']"
                    label="Status"
                    required
                    :rules="[v => !!v || 'Status é obrigatório']"
                    class="mb-4"
                  ></v-select>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" variant="text" @click="closeCameraEdit">
                  Cancelar
                </v-btn>
                <v-btn color="success" variant="text" @click="saveCameraEdit">
                  Salvar
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

          <!-- Diálogo de Visualização de Câmera -->
          <v-dialog v-model="showCameraView" fullscreen hide-overlay>
            <v-card>
              <v-toolbar dark color="primary">
                <v-btn icon dark @click="closeCameraView">
                  <v-icon>mdi-close</v-icon>
                </v-btn>
                <v-toolbar-title>Visualização da Câmera</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <div class="camera-container">
                  <div v-if="isRTSP" class="video-player">
                    <v-alert
                      type="info"
                      title="Stream RTSP"
                      text="Conectando ao stream RTSP. Por favor, aguarde..."
                      class="mb-4"
                    ></v-alert>
                    <video-js
                      ref="videoPlayer"
                      class="vjs-custom-skin"
                      controls
                      preload="auto"
                      width="100%"
                      height="100%"
                    >
                      <source :src="rtspToHls(selectedCameraUrl)" type="application/x-mpegURL">
                    </video-js>
                  </div>
                  <div v-else-if="isHTTP" class="video-player">
                    <video-js
                      ref="videoPlayer"
                      class="vjs-custom-skin"
                      controls
                      preload="auto"
                      width="100%"
                      height="100%"
                    >
                      <source :src="selectedCameraUrl" :type="getVideoType(selectedCameraUrl)">
                    </video-js>
                  </div>
                  <div v-else class="error-message">
                    <v-alert
                      type="error"
                      title="Erro"
                      text="Formato de URL não suportado. Use URLs que comecem com http:// ou rtsp://"
                    ></v-alert>
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-dialog>
        </v-container>
      </v-window-item>
    </v-window>
  </v-container>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { jsPDF } from "jspdf";
import "jspdf-autotable";
import VideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';

// Estado dos tabs
const tab = ref("usuarios");

// Estado dos diálogos
const showUserEdit = ref(false);
const showCameraView = ref(false);
const editedUser = ref({});
const selectedCameraUrl = ref('');

// **Usuários**
const userHeaders = [
  { title: "ID", key: "id" },
  { title: "Nome", key: "name" },
  { title: "E-mail", key: "email" },
  { title: "Cargo", key: "role" },
  { title: "Grupo", key: "group" },
  { title: "Ações", key: "actions", sortable: false }
];

const users = ref([
  { id: 1, name: "Alice", email: "alice@email.com", role: "Administrador", group: "Alfa" },
  { id: 2, name: "Bob", email: "bob@email.com", role: "Usuário", group: "Omega" },
  { id: 3, name: "Lucca", email: "lucca@email.com", role: "Usuário", group: "Omega" },
  { id: 4, name: "Claudia", email: "claudia@email.com", role: "Usuário", group: "Beta" }
]);

const searchUser = ref("");
const filteredUsers = computed(() =>
  users.value.filter(user =>
    Object.values(user).some(value =>
      String(value).toLowerCase().includes(searchUser.value.toLowerCase())
    )
  )
);

// **Câmeras**
const cameraHeaders = [
  { title: "Modelo", key: "model" },
  { title: "Descrição", key: "description" },
  { title: "Visualização", key: "view" },
  { title: "Status", key: "status" },
  { title: "Ações", key: "actions", sortable: false }
];

const cameras = ref([
  { model: "AXIS Q6128", description: "Câmera HD", view: "https://stream-akamai.castr.com/5b9352dbda7b8c769937e459/live_2361c920455111ea85db6911fe397b9e/index.fmp4.m3u8", status: "Ativa" },
  { model: "Hikvision DS-2CD", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=1&subtype=0", status: "Ativa" },
  { model: "AK-31548", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=3&subtype=0", status: "Ativa" }
]);

// Funções auxiliares para identificação do tipo de stream
const getStreamType = (url) => {
  if (url.toLowerCase().startsWith('rtsp://')) return 'RTSP';
  if (url.toLowerCase().startsWith('http')) return 'HTTP';
  return 'Desconhecido';
};

const getStreamTypeColor = (url) => {
  if (url.toLowerCase().startsWith('rtsp://')) return 'purple';
  if (url.toLowerCase().startsWith('http')) return 'blue';
  return 'gray';
};

const searchCamera = ref("");
const filteredCameras = computed(() =>
  cameras.value.filter(camera =>
    Object.values(camera).some(value =>
      String(value).toLowerCase().includes(searchCamera.value.toLowerCase())
    )
  )
);

// Computed properties para o player de vídeo
const isRTSP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('rtsp://'));
const isHTTP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('http'));

const playerOptions = computed(() => ({
  autoplay: true,
  controls: true,
  sources: [{
    src: selectedCameraUrl.value,
    type: 'application/x-mpegURL'
  }]
}));

// [Resto do código permanece o mesmo...]

</script>

<style scoped>
.camera-container {
  width: 100%;
  height: calc(100vh - 64px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

.video-player {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 64px);
}

.error-message {
  padding: 20px;
  text-align: center;
  color: red;
}

.video-js {
  width: 100%;
  height: 100%;
}

.vjs-custom-skin {
  width: 100%;
  height: 100%;
}
</style>