<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/components/agenda/AgendaOnlineGradeCard.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, onMounted, ref } from 'vue'
import TabView from 'primevue/tabview'
import TabPanel from 'primevue/tabpanel'
import ProgressSpinner from 'primevue/progressspinner'
import { useToast } from 'primevue/usetoast'

import { fetchSlotsRegras } from '@/services/agendaConfigService'
import { fetchSlotsBloqueados, setSlotBloqueado } from '@/services/agendaSlotsBloqueadosService'
import { gerarSlotsDoDia } from '@/utils/slotsGenerator'

import { supabase } from '@/lib/supabase/client'

const toast = useToast()

const props = defineProps({
  ownerId: { type: String, required: true }
})

const diasSemana = [
  { label: 'Seg', value: 1 },
  { label: 'Ter', value: 2 },
  { label: 'Qua', value: 3 },
  { label: 'Qui', value: 4 },
  { label: 'Sex', value: 5 },
  { label: 'Sáb', value: 6 },
  { label: 'Dom', value: 0 }
]

const loading = ref(false)
const savingSlot = ref(false)

const slotsRegras = ref([]) // agenda_slots_regras
const regrasSemanais = ref([]) // agenda_regras_semanais
const bloqueadosByDia = ref({}) // {dia: Set('09:00'...)}

async function loadRegrasSemanais() {
  const { data, error } = await supabase
    .from('agenda_regras_semanais')
    .select('*')
    .eq('owner_id', props.ownerId)
    .order('dia_semana', { ascending: true })
    .order('hora_inicio', { ascending: true })

  if (error) throw error
  regrasSemanais.value = data || []
}

async function load() {
  loading.value = true
  try {
    await Promise.all([
      loadRegrasSemanais(),
      (async () => { slotsRegras.value = await fetchSlotsRegras(props.ownerId) })()
    ])

    // carregue bloqueados de todos os dias
    const map = {}
    for (const d of diasSemana.map(x => x.value)) {
      const rows = await fetchSlotsBloqueados(props.ownerId, d)
      map[d] = new Set(rows.map(r => String(r.hora_inicio).slice(0, 5)))
    }
    bloqueadosByDia.value = map
  } catch (e) {
    console.error(e)
    toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível carregar a grade.', life: 3200 })
  } finally {
    loading.value = false
  }
}

function regraDoDia(dia) {
  return slotsRegras.value.find(r => r.dia_semana === dia) || null
}
function janelasDoDia(dia) {
  return (regrasSemanais.value || []).filter(r => r.dia_semana === dia && r.ativo !== false)
}

function slotsDoDia(dia) {
  const regra = regraDoDia(dia)
  if (!regra || regra.ativo === false) return []
  return gerarSlotsDoDia(janelasDoDia(dia), regra)
}

function isBloqueado(dia, hhmm) {
  return !!bloqueadosByDia.value?.[dia]?.has(hhmm)
}

async function toggleSlot(dia, hhmm) {
  savingSlot.value = true
  try {
    const blocked = isBloqueado(dia, hhmm)
    await setSlotBloqueado(props.ownerId, dia, hhmm, !blocked)

    if (!bloqueadosByDia.value[dia]) bloqueadosByDia.value[dia] = new Set()
    if (blocked) bloqueadosByDia.value[dia].delete(hhmm)
    else bloqueadosByDia.value[dia].add(hhmm)
  } catch (e) {
    console.error(e)
    toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível atualizar o horário.', life: 3200 })
  } finally {
    savingSlot.value = false
  }
}

const resumo = computed(() => {
  // só um resumo simples — depois refinamos
  const diasAtivos = diasSemana.filter(d => (regraDoDia(d.value)?.ativo !== false)).length
  return { diasAtivos }
})

onMounted(load)
</script>

<template>
  <Card class="overflow-hidden">
    <template #title>
      <div class="flex items-center justify-between gap-2">
        <div class="flex items-center gap-2">
          <i class="pi pi-globe" />
          <span>Grade do online (estilo Altegio)</span>
        </div>
        <div class="flex gap-2">
          <Button icon="pi pi-refresh" text rounded :disabled="loading" @click="load" />
        </div>
      </div>
    </template>

    <template #content>
      <div v-if="loading" class="flex items-center gap-3 text-600">
        <ProgressSpinner style="width:22px;height:22px" />
        Carregando…
      </div>

      <div v-else>
        <!-- Resumo tipo "cards" -->
        <div class="grid grid-cols-12 gap-3 mb-4">
          <div class="col-span-12 md:col-span-4 p-3 rounded-xl border border-[var(--surface-border)]">
            <div class="text-600 text-sm">Tipo de slots</div>
            <div class="text-900 font-semibold mt-1">Fixo</div>
          </div>
          <div class="col-span-12 md:col-span-4 p-3 rounded-xl border border-[var(--surface-border)]">
            <div class="text-600 text-sm">Dias ativos</div>
            <div class="text-900 font-semibold mt-1">{{ resumo.diasAtivos }}</div>
          </div>
          <div class="col-span-12 md:col-span-4 p-3 rounded-xl border border-[var(--surface-border)]">
            <div class="text-600 text-sm">Dica</div>
            <div class="text-900 font-semibold mt-1">Clique em um horário para ocultar/exibir</div>
          </div>
        </div>

        <TabView>
          <TabPanel v-for="d in diasSemana" :key="d.value" :header="d.label">
            <div class="grid grid-cols-12 gap-4">
              <!-- Jornada -->
              <div class="col-span-12">
                <div class="flex items-center justify-between">
                  <div class="text-900 font-medium">Jornada do dia</div>
                  <div class="text-600 text-sm">
                    (Isso vem das suas "janelas semanais")
                  </div>
                </div>

                <div class="mt-2 flex flex-wrap gap-2">
                  <template v-if="janelasDoDia(d.value).length">
                    <Tag
                      v-for="j in janelasDoDia(d.value)"
                      :key="j.id"
                      :value="`${String(j.hora_inicio).slice(0,5)}–${String(j.hora_fim).slice(0,5)}`"
                    />
                  </template>
                  <template v-else>
                    <span class="text-600 text-sm">Sem jornada ativa neste dia.</span>
                  </template>
                </div>
              </div>

              <!-- Chips -->
              <div class="col-span-12">
                <div class="flex items-center justify-between">
                  <div class="text-900 font-medium">Horários publicados</div>
                  <div class="text-600 text-sm" v-if="savingSlot">Salvando…</div>
                </div>

                <div class="mt-3 flex flex-wrap gap-2">
                  <template v-if="slotsDoDia(d.value).length">
                    <button
                      v-for="hh in slotsDoDia(d.value)"
                      :key="hh"
                      class="px-3 py-2 rounded-lg border text-sm transition"
                      :class="isBloqueado(d.value, hh)
                        ? 'border-[var(--surface-border)] text-600 bg-[var(--surface-ground)] line-through opacity-70'
                        : 'border-[var(--surface-border)] text-900 bg-[var(--surface-card)] hover:bg-[var(--surface-ground)]'"
                      @click="toggleSlot(d.value, hh)"
                    >
                      {{ hh }}
                    </button>
                  </template>

                  <template v-else>
                    <span class="text-600 text-sm">
                      Nada para publicar (verifique: jornada do dia + regra de slots ativa).
                    </span>
                  </template>
                </div>

                <div class="text-600 text-sm mt-3 leading-relaxed">
                  Se algum horário não deve aparecer para o paciente, clique para <b>desativar</b>.
                  Isso não altera sua agenda interna — só a disponibilidade do online.
                </div>
              </div>
            </div>
          </TabPanel>
        </TabView>
      </div>
    </template>
  </Card>
</template>
