<template>
  <v-card class="card" max-width="2000" flat>
    <!-- Hero Section -->
    <v-row align="center" no-gutters>
      <v-col>
        <v-list-item title="Centro de Controle TARS" subtitle="Plataforma avançada de monitoramento e análise de segurança"></v-list-item>
      </v-col>
    </v-row>
    
    <!-- Quick Stats -->
    <v-row>
      <v-col v-for="stat in quickStats" :key="stat.title" cols="12" sm="6" md="3">
        <v-card :color="stat.color" variant="tonal" class="rounded-lg h-100 stats-card">
          <v-card-text>
            <div class="d-flex flex-column align-center text-center pa-4">
              <v-icon :icon="stat.icon" size="48" class="mb-4" />
              <div class="text-h3 font-weight-bold mb-2">{{ stat.value }}</div>
              <div class="text-subtitle-1">{{ stat.title }}</div>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- Features -->
    <v-row>
      <v-col v-for="feature in features" :key="feature.title" cols="12" md="4">
        <v-card class="rounded-lg feature-card">
          <v-card-text>
            <div class="d-flex align-center mb-4">
              <v-icon :icon="feature.icon" size="36" :color="feature.color" class="mr-4" />
              <h2 class="text-h5 font-weight-bold">{{ feature.title }}</h2>
            </div>
            <p class="text-body-1 mb-4">{{ feature.description }}</p>
            <v-list>
              <v-list-item v-for="item in feature.items" :key="item" class="px-0">
                <template v-slot:prepend>
                  <v-icon icon="mdi-check-circle" color="success" size="small" />
                </template>
                {{ item }}
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
export default {
  name: 'DashboardCard',
  data() {
    return {
      quickStats: [
        { title: 'Câmeras Ativas', value: 0, icon: 'mdi-cctv', color: 'success' },
        { title: 'Modelos', value: 0, icon: 'mdi-brain', color: 'primary' },
        { title: 'Alertas 24h', value: 0, icon: 'mdi-bell', color: 'warning' },
        { title: 'Usuários', value: 0, icon: 'mdi-account-group', color: 'info' }
      ],
      features: [
        {
          title: 'Monitoramento Inteligente',
          description: 'Sistema avançado de vigilância com análise em tempo real',
          icon: 'mdi-security',
          color: 'primary',
          items: [
            'Detecção de EPI em tempo real',
            'Análise de fluxo de pessoas',
            'Detecção de invasão de área',
            'Reconhecimento de comportamentos'
          ]
        },
        {
          title: 'Analytics & Relatórios',
          description: 'Análise detalhada e geração de insights automáticos',
          icon: 'mdi-chart-box',
          color: 'success',
          items: [
            'Dashboards personalizados',
            'Relatórios automatizados',
            'Exportação de dados',
            'Métricas de performance'
          ]
        },
        {
          title: 'Gestão & Configuração',
          description: 'Controle total sobre o sistema e suas funcionalidades',
          icon: 'mdi-cog',
          color: 'info',
          items: [
            'Gerenciamento de usuários',
            'Configuração de câmeras',
            'Ajuste de modelos AI',
            'Políticas de segurança'
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>
.card {
  color: black;
  border-radius: 35px;
  background: linear-gradient(145deg, #eeeded, #ffffff);
  box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
  padding: 20px;
}

.stats-card {
  transition: transform 0.2s;
}

.stats-card:hover {
  transform: translateY(-4px);
}

.feature-card {
  background: white;
  border-radius: 20px;
  box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff;
  padding: 15px;
}
</style>