<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"
          >Estoque de Produtos</span
        >
        <q-space />
        <q-btn dense flat icon="mdi-close" @click="onDialogCancel" />
      </q-bar>

      <q-card-section class="q-pt-none q-pb-lg q-px-md">
        <q-card flat bordered style="border-radius: 8px; padding: 20px">
          <div class="text-subtitle1 text-dark q-mb-md" style="font-weight: 600">
            Meu Estoque
          </div>

          <q-card flat bordered style="border-radius: 8px">
            <div class="list-header q-px-md q-py-xs">
              <span class="text-caption text-grey-7">Produto</span>
              <span class="text-caption text-grey-7">Estoque</span>
              <span class="text-caption text-grey-7">Ações</span>
            </div>

            <q-separator />

            <template v-for="(item, index) in produtos" :key="item.id">
              <div class="list-row q-px-md q-py-sm">
                <span class="text-body2 text-dark">{{ item.nome }}</span>
                <div class="row items-center" style="gap: 12px">
                  <span class="text-body2 text-dark">{{ item.quantidade }}</span>
                  <q-badge
                    :label="item.status"
                    :outline="item.status === 'Limitado'"
                    :color="statusColor(item.status)"
                    style="border-radius: 8px; font-size: 11px; padding: 4px 10px"
                  />
                </div>
                <div class="row" style="gap: 6px">
                  <q-btn
                    flat
                    dense
                    icon="mdi-clipboard-outline"
                    color="dark"
                    style="border: 1px solid #ccc; border-radius: 6px; width: 34px; height: 34px"
                  />
                  <q-btn
                    flat
                    dense
                    icon="mdi-delete-outline"
                    color="dark"
                    style="border: 1px solid #ccc; border-radius: 6px; width: 34px; height: 34px"
                  />
                </div>
              </div>
              <q-separator v-if="index < produtos.length - 1" />
            </template>
          </q-card>
        </q-card>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from "quasar";

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

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

const produtos = [
  { id: 1, nome: "Box Viver", quantidade: 14, status: "Baixo" },
  { id: 2, nome: "Brinquedo 1", quantidade: 100, status: "Alto" },
  { id: 3, nome: "Brinquedo 2", quantidade: 100, status: "Alto" },
  { id: 4, nome: "Novo Produto", quantidade: 30, status: "Limitado" },
];

const statusColor = (status) => {
  if (status === "Alto") return "primary";
  if (status === "Baixo") return "orange";
  return "primary";
};
</script>

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

.list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  align-items: center;
}
</style>
