{% extends "admin/layout.html" %}

{% block admin_title %}Visão Geral{% endblock %}

{% block admin_content %}
<div class="space-y-6">

  <!-- Header da Página com Boas-Vindas e Data -->
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <div>
      <span class="text-xs font-semibold uppercase tracking-wider text-brand">Painel Operacional</span>
      <h1 class="text-2xl font-bold text-white tracking-tight mt-0.5">Visão Geral de Hoje</h1>
      <p class="text-xs text-stone-400 mt-1">Acompanhe faturamento, comissões e atendimentos em tempo real.</p>
    </div>
    <div class="flex items-center gap-2">
      <a href="/admin/agenda" class="px-4 py-2 rounded-xl bg-brand text-black font-bold text-xs flex items-center gap-2 hover:bg-brand-400 transition-colors shadow-md shadow-brand/10">
        <i data-lucide="calendar" class="w-4 h-4"></i>
        Ver Agenda Completa
      </a>
      <a href="/admin/caixa" class="px-4 py-2 rounded-xl bg-dark-card border border-dark-border hover:border-stone-500 text-stone-200 font-semibold text-xs flex items-center gap-2 transition-colors">
        <i data-lucide="plus-circle" class="w-4 h-4 text-brand"></i>
        Nova Venda / Caixa
      </a>
    </div>
  </div>

  <!-- Cards de Indicadores do Dia (Os 4 Números de Ouro) -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    
    <!-- Faturamento do Dia -->
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
      <div class="flex items-center justify-between">
        <span class="text-xs font-medium text-stone-400">Entrou no Caixa Hoje</span>
        <div class="w-8 h-8 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center">
          <i data-lucide="dollar-sign" class="w-4 h-4"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mt-3">R$ {{ "%.2f"|format(metrics.today_sales_total)|replace(".", ",") }}</p>
      <div class="mt-2 flex items-center gap-2 text-[11px] text-stone-400">
        <span class="text-emerald-400 font-semibold">{{ metrics.today_orders_count }} vendas</span> registradas hoje
      </div>
    </div>

    <!-- Comissões da Equipe -->
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
      <div class="flex items-center justify-between">
        <span class="text-xs font-medium text-stone-400">Comissões da Equipe</span>
        <div class="w-8 h-8 rounded-xl bg-brand/10 text-brand flex items-center justify-center">
          <i data-lucide="percent" class="w-4 h-4"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mt-3">R$ {{ "%.2f"|format(metrics.today_commissions_total)|replace(".", ",") }}</p>
      <div class="mt-2 flex items-center gap-2 text-[11px] text-stone-400">
        Líquido barbearia: <b class="text-stone-200">R$ {{ "%.2f"|format(metrics.today_house_net)|replace(".", ",") }}</b>
      </div>
    </div>

    <!-- Atendimentos Agendados Hoje -->
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
      <div class="flex items-center justify-between">
        <span class="text-xs font-medium text-stone-400">Cortes / Agendamentos</span>
        <div class="w-8 h-8 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center">
          <i data-lucide="calendar-check" class="w-4 h-4"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mt-3">{{ metrics.today_appts_count }}</p>
      <div class="mt-2 flex items-center gap-2 text-[11px] text-stone-400">
        <span class="text-blue-400 font-semibold">{{ metrics.today_appts_completed }} concluídos</span> · {{ metrics.today_appts_pending }} restantes
      </div>
    </div>

    <!-- Clube de Assinatura Ativo -->
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
      <div class="flex items-center justify-between">
        <span class="text-xs font-medium text-stone-400">Receita Recorrente (Clube)</span>
        <div class="w-8 h-8 rounded-xl bg-purple-500/10 text-purple-400 flex items-center justify-center">
          <i data-lucide="crown" class="w-4 h-4"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mt-3">R$ {{ "%.2f"|format(metrics.club_monthly_revenue)|replace(".", ",") }}<span class="text-xs font-normal text-stone-400">/mês</span></p>
      <div class="mt-2 flex items-center gap-2 text-[11px] text-stone-400">
        <span class="text-purple-400 font-semibold">{{ metrics.club_active_members }} clientes</span> fidelizados no clube
      </div>
    </div>

  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    
    <!-- Lista dos Agendamentos do Dia (Esquerda - 2 Colunas) -->
    <div class="lg:col-span-2 space-y-4">
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border">
        <div class="flex items-center justify-between pb-4 border-b border-dark-border">
          <div class="flex items-center gap-2">
            <i data-lucide="clock" class="w-4 h-4 text-brand"></i>
            <h2 class="text-sm font-bold text-white">Próximos Horários de Hoje</h2>
          </div>
          <span class="text-xs text-stone-400">{{ metrics.today_date_formatted }}</span>
        </div>

        <div class="divide-y divide-dark-border mt-2">
          {% if today_appointments %}
            {% for a in today_appointments %}
            <div class="py-3.5 flex items-center justify-between gap-4">
              <div class="flex items-center gap-3">
                <span class="px-2.5 py-1 rounded-lg bg-stone-800 text-brand font-bold text-xs border border-stone-700/60 font-mono">
                  {{ a.start_time }}h
                </span>
                <div>
                  <h4 class="text-sm font-semibold text-white">{{ a.client_name }}</h4>
                  <div class="flex items-center gap-2 text-xs text-stone-400 mt-0.5">
                    <span>{{ a.service_name }}</span>
                    <span>•</span>
                    <span class="flex items-center gap-1">
                      <span class="w-2 h-2 rounded-full" style="background-color: {{ a.barber_color }}"></span>
                      {{ a.barber_name }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="flex items-center gap-3">
                <!-- Status Badge -->
                {% if a.status == 'concluido' %}
                  <span class="px-2.5 py-1 rounded-full bg-stone-800 text-stone-400 text-xs font-medium">Concluído</span>
                {% elif a.status == 'em_atendimento' %}
                  <span class="px-2.5 py-1 rounded-full bg-purple-500/20 text-purple-400 border border-purple-500/30 text-xs font-semibold animate-pulse">Em atendimento</span>
                {% elif a.status == 'confirmado' %}
                  <span class="px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 text-xs font-medium">Confirmado</span>
                {% else %}
                  <span class="px-2.5 py-1 rounded-full bg-amber-500/10 text-amber-400 border border-amber-500/30 text-xs font-medium">Agendado</span>
                {% endif %}

                <!-- Ação WhatsApp / Fechar -->
                <div class="flex items-center gap-1.5">
                  <a href="https://wa.me/55{{ a.client_phone }}?text={{ a.zap_reminder_text|urlencode }}" target="_blank"
                     title="Lembrar pelo WhatsApp"
                     class="p-2 rounded-xl bg-emerald-950/40 text-emerald-400 hover:bg-emerald-900/50 border border-emerald-500/20 transition-colors">
                    <i data-lucide="message-circle" class="w-4 h-4"></i>
                  </a>
                  <a href="/admin/caixa?appt_id={{ a.id }}" title="Abrir Comanda no Caixa"
                     class="p-2 rounded-xl bg-brand/10 text-brand hover:bg-brand/20 border border-brand/30 transition-colors">
                    <i data-lucide="receipt" class="w-4 h-4"></i>
                  </a>
                </div>
              </div>
            </div>
            {% endfor %}
          {% else %}
            <div class="py-12 text-center text-stone-500 text-xs">
              <i data-lucide="calendar" class="w-8 h-8 mx-auto mb-2 opacity-40"></i>
              Nenhum agendamento para hoje ainda. Compartilhe o link com seus clientes!
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Coluna da Direita: Barbeiros em Atendimento & Atalhos Rápidos -->
    <div class="space-y-6">
      
      <!-- Equipe Hoje -->
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border space-y-3">
        <h3 class="text-sm font-bold text-white flex items-center justify-between">
          <span>Equipe Hoje</span>
          <span class="text-xs text-stone-500 font-normal">{{ barbers|length }} profissionais</span>
        </h3>
        <div class="space-y-2.5">
          {% for b in barbers %}
          <div class="p-3 rounded-xl bg-dark-bg border border-dark-border flex items-center justify-between">
            <div class="flex items-center gap-2.5">
              <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white shadow-inner" style="background-color: {{ b.avatar_color or '#d97706' }}">
                {{ b.name[:2]|upper }}
              </div>
              <div>
                <h4 class="text-xs font-semibold text-white">{{ b.name }}</h4>
                <p class="text-[10px] text-stone-400">Comissão: {{ (b.commission_rate * 100)|int }}%</p>
              </div>
            </div>
            <a href="/admin/comissoes" class="text-xs text-brand hover:underline font-medium">Ver saldo</a>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Card Dica Navalhe: Guerra às Faltas -->
      <div class="p-5 rounded-2xl bg-gradient-to-br from-amber-950/20 to-dark-card border border-brand/20 space-y-2.5">
        <div class="flex items-center gap-2 text-brand">
          <i data-lucide="zap" class="w-4 h-4"></i>
          <h4 class="text-xs font-bold uppercase tracking-wider">Regra de Ouro da Barbearia</h4>
        </div>
        <p class="text-xs text-stone-300 leading-relaxed">
          O cliente que recebe lembrete no WhatsApp horas antes tem <b class="text-white">87% menos chance de faltar</b>. Use o botão verde nos agendamentos para disparar a confirmação!
        </p>
      </div>

    </div>

  </div>

</div>
{% endblock %}