<template>
  <div class="min-h-screen bg-gray-50 p-6 text-gray-800">
    <header class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between border-b pb-4">
      <div>
        <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">Painel Analítico de Negócios</h1>
        <p class="text-sm text-gray-500 mt-1">Telemetria de vendas e projeções em tempo real com Vue 3 & ECharts</p>
      </div>
      <div class="mt-4 md:mt-0 flex gap-2">
        <button
          v-for="periodo in periodos"
          :key="periodo.valor"
          @click="periodoAtivo = periodo.valor"
          :class="[
            'px-4 py-2 text-sm font-semibold rounded-lg transition-colors',
            periodoAtivo === periodo.valor
              ? 'bg-blue-600 text-white shadow-sm'
              : 'bg-white text-gray-700 hover:bg-gray-100 border'
          ]"
        >
          {{ periodo.label }}
        </button>
      </div>
    </header>

    <!-- Cards de Indicadores -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
        <p class="text-sm font-medium text-gray-500">Faturamento Consolidado</p>
        <p class="text-2xl font-bold text-gray-900 mt-2">R$ {{ faturamentoFormatado }}</p>
        <span class="inline-block mt-2 text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">+14.2% vs mês anterior</span>
      </div>
      <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
        <p class="text-sm font-medium text-gray-500">Transações Ativas</p>
        <p class="text-2xl font-bold text-gray-900 mt-2">{{ totalTransacoes }}</p>
        <span class="inline-block mt-2 text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-0.5 rounded">99.8% taxa de sucesso</span>
      </div>
      <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
        <p class="text-sm font-medium text-gray-500">Meta Trimestral</p>
        <p class="text-2xl font-bold text-gray-900 mt-2">{{ percentualMeta }}%</p>
        <div class="w-full bg-gray-200 rounded-full h-2 mt-3">
          <div class="bg-blue-600 h-2 rounded-full" :style="{ width: percentualMeta + '%' }"></div>
        </div>
      </div>
    </div>

    <!-- Área de Gráfico ECharts -->
    <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
      <h2 class="text-lg font-bold text-gray-900 mb-4">Evolução Mensal de Faturamento</h2>
      <div ref="chartContainer" class="w-full h-80"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);
let myChart = null;

const periodoAtivo = ref('mensal');
const periodos = [
  { label: 'Semanal', valor: 'semanal' },
  { label: 'Mensal', valor: 'mensal' },
  { label: 'Anual', valor: 'anual' }
];

const totalVendas = ref(128500);
const totalTransacoes = ref(1420);
const percentualMeta = ref(84);

const faturamentoFormatado = computed(() => {
  return totalVendas.value.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
});

function initChart() {
  if (!chartContainer.value) return;
  myChart = echarts.init(chartContainer.value);

  const option = {
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: 'Vendas (R$)',
        type: 'bar',
        data: [18000, 24000, 21000, 29000, 31000, 38000, 42000],
        itemStyle: { color: '#2563eb' }
      }
    ]
  };

  myChart.setOption(option);
}

function handleResize() {
  if (myChart) myChart.resize();
}

watch(periodoAtivo, () => {
  if (myChart) {
    const novosDados = periodoAtivo.value === 'semanal'
      ? [5000, 7000, 8500, 9200]
      : [18000, 24000, 21000, 29000, 31000, 38000, 42000];
    myChart.setOption({ series: [{ data: novosDados }] });
  }
});

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>