<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
      <q-bar class="bg-transparent q-px-md" style="height: 55px">
        <span class="text-h6 text-dark" style="font-weight: 600">Alunos Ativos</span>
        <q-space />
        <q-btn dense flat icon="mdi-close" @click="onDialogCancel" />
      </q-bar>

      <q-card-section class="q-pt-none q-pb-md q-px-md">
        <q-card flat bordered style="border-radius: 8px">
          <q-card-section class="q-pb-xs">
            <div class="text-subtitle2 text-dark">Lista de alunos ativos</div>
            <div class="text-caption text-grey-6">
              {{ students.length }} Alunos Ativos
              <q-spinner v-if="loading" size="16px" color="primary" class="q-ml-sm" />
            </div>
          </q-card-section>

          <q-card-section class="q-pt-xs q-pb-sm">
            <q-input
              v-model="search"
              dense
              borderless
              placeholder="Busque por nome, tel/whats ou unidade"
            >
              <template #prepend>
                <q-icon name="mdi-magnify" color="grey-6" />
              </template>
            </q-input>
          </q-card-section>

          <q-separator />

          <div class="list-header q-px-md q-py-xs">
            <span class="text-caption text-grey-7">Nome</span>
            <span class="text-caption text-grey-7">Contato/Unidade</span>
            <span class="text-caption text-grey-7">Contrato</span>
          </div>

          <q-separator />

          <div style="max-height: 320px; overflow-y: auto">
            <template v-for="(student, index) in filteredStudents" :key="student.id">
              <div
                class="list-row q-px-md q-py-sm"
                @click="goToDetail(student)"
              >
                <span class="text-body2 text-dark">{{ student.name }}</span>
                <div class="column" style="gap: 2px">
                  <span class="text-caption text-dark">{{ student.phone }}</span>
                  <span class="text-caption text-grey-6">{{ student.unit }}</span>
                </div>
                <q-badge
                  label="Ativo"
                  color="btn-badge"
                  style="
                    border-radius: 8px;
                    font-size: 11px;
                    padding: 4px;
                    width: max-content;
                    margin-left: 10px;
                  "
                />
              </div>
              <q-separator v-if="index < filteredStudents.length - 1" />
            </template>
          </div>
        </q-card>
      </q-card-section>

      <q-card-actions align="right" class="q-px-md q-pb-md q-pt-none">
        <q-btn
          label="EXPORTAR"
          color="primary-2"
          unelevated
          style="border-radius: 8px; font-weight: 600; letter-spacing: 0.5px"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useRouter } from "vue-router";
import { getFranchisorActiveStudents } from "src/api/student";

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogCancel, onDialogOK } =
  useDialogPluginComponent();

const router = useRouter();
const search = ref("");
const loading = ref(false);
const students = ref([]);

onMounted(async () => {
  loading.value = true;
  try {
    const data = await getFranchisorActiveStudents();
    students.value = data.map((s) => ({
      id: s.id,
      name: s.name,
      phone: s.phone ?? "—",
      unit: s.unit?.fantasy_name ?? "—",
    }));
  } catch {
    // silent
  } finally {
    loading.value = false;
  }
});

const filteredStudents = computed(() => {
  if (!search.value) return students.value;
  const q = search.value.toLowerCase();
  return students.value.filter(
    (s) =>
      s.name.toLowerCase().includes(q) ||
      s.phone.includes(q) ||
      s.unit.toLowerCase().includes(q),
  );
});

const goToDetail = (student) => {
  onDialogOK();
  router.push({ name: "StudentDetailPage", params: { id: student.id } });
};
</script>

<style scoped>
.list-header {
  display: grid;
  grid-template-columns: 1fr 1fr 100px;
  align-items: center;
}

.list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 100px;
  align-items: center;
  align-content: center;
  cursor: pointer;
  transition: background-color 0.15s;
}

.list-row:hover {
  background-color: #f5f5f5;
}
</style>
