nademitex_admin/src/views/catalogs/CatalogsView.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import AdminPageSkeleton from '@/components/ui/AdminPageSkeleton.vue'
import BaseModal from '@/components/ui/BaseModal.vue'
import BaseSwitch from '@/components/ui/BaseSwitch.vue'
import BaseEmptyState from '@/components/ui/BaseEmptyState.vue'
import ActiveSwitchCell from '@/components/ui/ActiveSwitchCell.vue'
import AdminIcon from '@/components/icons/AdminIcon.vue'
import AdminSelect from '@/components/ui/AdminSelect.vue'
import AdminImagePicker from '@/components/ui/AdminImagePicker.vue'
import { catalogsApi, companiesApi } from '@/services/api'
import { ApiError } from '@/services/http'
import { useToast } from '@/composables/useToast'
import type { Catalog, Company } from '@/types'

const catalogList = ref<Catalog[]>([])
const companies = ref<Company[]>([])
const searchQuery = ref('')
const companyFilter = ref('all')
const loading = ref(true)
const modalMode = ref<'add' | 'edit' | null>(null)
const editingId = ref<string | null>(null)
const formError = ref('')
const saving = ref(false)
const toast = useToast()

const companyFilterOptions = computed(() => [
  { value: 'all', label: 'همه شرکت‌ها' },
  ...companies.value.map((company) => ({ value: company.id, label: company.name })),
])

const companyFormOptions = computed(() =>
  companies.value.map((company) => ({ value: company.id, label: company.name })),
)

const emptyForm = () => ({
  companyId: companies.value[0]?.id ?? '',
  code: '',
  name: '',
  displayOrder: catalogList.value.length + 1,
  isActive: true,
  imageUrl: null as string | null,
})

const form = reactive(emptyForm())

const isModalOpen = computed(() => modalMode.value !== null)
const modalTitle = computed(() => (modalMode.value === 'edit' ? 'ویرایش کالیته' : 'افزودن کالیته'))
const isFormValid = computed(() => form.code.trim() && form.name.trim() && form.companyId)
const hasActiveFilters = computed(
  () => searchQuery.value.trim().length > 0 || companyFilter.value !== 'all',
)

const filteredCatalogs = computed(() => {
  let list = catalogList.value
  if (companyFilter.value !== 'all') {
    list = list.filter((c) => c.companyId === companyFilter.value)
  }
  const q = searchQuery.value.trim()
  if (q) {
    list = list.filter((c) => c.code.includes(q) || c.name.includes(q) || c.companyName.includes(q))
  }
  return list
})

async function loadData() {
  loading.value = true
  try {
    const [catalogsData, companiesData] = await Promise.all([
      catalogsApi.list(),
      companiesApi.list(),
    ])
    catalogList.value = catalogsData
    companies.value = companiesData
  } catch (err) {
    toast.error(err instanceof ApiError ? err.message : 'بارگذاری کالیته‌ها انجام نشد.')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  void loadData()
})

function companyName(companyId: string) {
  return companies.value.find((c) => c.id === companyId)?.name ?? '—'
}

function openAddModal() {
  modalMode.value = 'add'
  editingId.value = null
  Object.assign(form, emptyForm())
  formError.value = ''
}

function openEditModal(catalog: Catalog) {
  modalMode.value = 'edit'
  editingId.value = catalog.id
  form.companyId = catalog.companyId
  form.code = catalog.code
  form.name = catalog.name
  form.displayOrder = catalog.displayOrder
  form.isActive = catalog.isActive
  form.imageUrl = catalog.imageUrl ?? null
  formError.value = ''
}

function closeModal() {
  modalMode.value = null
  editingId.value = null
  formError.value = ''
}

async function submitCatalog() {
  if (!isFormValid.value) {
    formError.value = 'کد، نام و شرکت الزامی هستند.'
    return
  }

  saving.value = true
  try {
    if (modalMode.value === 'edit' && editingId.value) {
      const updated = await catalogsApi.update(editingId.value, {
        code: form.code.trim(),
        name: form.name.trim(),
        displayOrder: Number(form.displayOrder) || 1,
        isActive: form.isActive,
        imageUrl: form.imageUrl,
      })
      const index = catalogList.value.findIndex((c) => c.id === editingId.value)
      if (index !== -1) {
        catalogList.value[index] = {
          ...catalogList.value[index]!,
          ...updated,
          companyName: companyName(form.companyId),
        }
      }
      toast.success('اطلاعات کالیته به‌روزرسانی شد.')
    } else {
      const created = await catalogsApi.create({
        companyId: form.companyId,
        code: form.code.trim(),
        name: form.name.trim(),
        displayOrder: Number(form.displayOrder) || 1,
        isActive: form.isActive,
        imageUrl: form.imageUrl,
      })
      catalogList.value.push({
        ...created,
        companyName: created.companyName || companyName(form.companyId),
        productCount: created.productCount ?? 0,
      })
      toast.success('کالیته جدید ثبت شد.')
    }
    closeModal()
  } catch (err) {
    toast.error(err instanceof ApiError ? err.message : 'ذخیره کالیته انجام نشد.')
  } finally {
    saving.value = false
  }
}

async function persistActive(id: string, isActive: boolean) {
  await catalogsApi.setActive(id, isActive)
}

function clearFilters() {
  searchQuery.value = ''
  companyFilter.value = 'all'
}
</script>

<template>
  <div class="catalogs-page">
    <div class="admin-page-header">
      <div>
        <h1 class="admin-page-header__title">کالیته‌ها</h1>
      </div>
      <button type="button" class="admin-btn admin-btn--primary" @click="openAddModal">
        افزودن کالیته
      </button>
    </div>

    <div class="catalogs-page__filters admin-card">
      <div class="catalogs-page__search">
        <AdminIcon name="search" :size="18" />
        <input
          v-model="searchQuery"
          type="search"
          class="catalogs-page__search-input"
          placeholder="جستجو بر اساس کد یا نام..."
        />
      </div>
      <AdminSelect
        v-model="companyFilter"
        class="catalogs-page__company-filter"
        aria-label="فیلتر شرکت"
        :options="companyFilterOptions"
      />
    </div>

    <AdminPageSkeleton v-if="loading" variant="table" />
    <BaseEmptyState
      v-else-if="!filteredCatalogs.length"
      class="admin-card"
      icon="catalogs"
      :title="hasActiveFilters ? 'نتیجه‌ای یافت نشد' : 'کالیته‌ای ثبت نشده'"
      :description="
        hasActiveFilters
          ? 'عبارت جستجو را تغییر دهید یا فیلترها را پاک کنید.'
          : 'برای شروع، اولین کالیته را ثبت کنید.'
      "
    >
      <button v-if="hasActiveFilters" type="button" class="admin-btn admin-btn--outline admin-btn--sm" @click="clearFilters">
        پاک کردن فیلترها
      </button>
      <button v-else type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="openAddModal">
        افزودن کالیته
      </button>
    </BaseEmptyState>

    <div v-else class="catalogs-page__table admin-card desktop-only">
      <div class="admin-table-wrap">
        <table class="admin-table">
          <thead>
            <tr>
              <th>تصویر</th>
              <th>کد</th>
              <th>نام کالیته</th>
              <th>شرکت</th>
              <th class="numeric">ترتیب</th>
              <th class="numeric">تعداد محصول</th>
              <th class="status">وضعیت</th>
              <th class="actions">عملیات</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="catalog in filteredCatalogs" :key="catalog.id">
              <td>
                <span
                  class="catalog-thumb"
                  :class="{ 'catalog-thumb--empty': !catalog.imageUrl }"
                  :style="catalog.imageUrl ? { backgroundImage: `url(${catalog.imageUrl})` } : undefined"
                />
              </td>
              <td>{{ catalog.code }}</td>
              <td>{{ catalog.name }}</td>
              <td>{{ catalog.companyName }}</td>
              <td class="numeric">{{ catalog.displayOrder }}</td>
              <td class="numeric">{{ catalog.productCount }}</td>
              <td class="status">
                <ActiveSwitchCell
                  :id="catalog.id"
                  v-model="catalog.isActive"
                  :entity-name="catalog.name"
                  entity-type="کالیته"
                  :persist="persistActive"
                />
              </td>
              <td class="actions">
                <button type="button" class="admin-btn admin-btn--ghost admin-btn--xs" @click="openEditModal(catalog)">
                  ویرایش
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-if="!loading && filteredCatalogs.length" class="compact-only admin-card-list">
      <article v-for="catalog in filteredCatalogs" :key="catalog.id" class="admin-card-item">
        <div class="admin-card-item__header">
          <span
            class="catalog-thumb"
            :class="{ 'catalog-thumb--empty': !catalog.imageUrl }"
            :style="catalog.imageUrl ? { backgroundImage: `url(${catalog.imageUrl})` } : undefined"
          />
          <p class="admin-card-item__title">کالیته {{ catalog.code }} — {{ catalog.name }}</p>
          <ActiveSwitchCell
            :id="catalog.id"
            v-model="catalog.isActive"
            :entity-name="catalog.name"
            entity-type="کالیته"
            :persist="persistActive"
          />
        </div>
        <div class="admin-card-item__meta">
          <span>{{ catalog.companyName }}</span>
          <span>{{ catalog.productCount }} محصول</span>
          <span>ترتیب: {{ catalog.displayOrder }}</span>
        </div>
        <div class="admin-card-item__actions">
          <button type="button" class="admin-btn admin-btn--ghost admin-btn--xs" @click="openEditModal(catalog)">
            ویرایش
          </button>
        </div>
      </article>
    </div>

    <BaseModal :open="isModalOpen" :title="modalTitle" size="lg" @close="closeModal">
      <form class="admin-form" @submit.prevent="submitCatalog">
        <p v-if="formError" class="admin-form__error" role="alert">{{ formError }}</p>

        <div class="admin-form__field">
          <label>شرکت <span class="admin-form__required">*</span></label>
          <AdminSelect
            v-model="form.companyId"
            block
            aria-label="انتخاب شرکت"
            placeholder="انتخاب شرکت"
            :options="companyFormOptions"
          />
        </div>

        <div class="admin-form__row">
          <div class="admin-form__field">
            <label for="catalog-code">کد کالیته <span class="admin-form__required">*</span></label>
            <input id="catalog-code" v-model="form.code" type="text" class="admin-input" placeholder="377" />
          </div>
          <div class="admin-form__field">
            <label for="catalog-name">نام کالیته <span class="admin-form__required">*</span></label>
            <input id="catalog-name" v-model="form.name" type="text" class="admin-input" />
          </div>
        </div>

        <div class="admin-form__row">
          <div class="admin-form__field">
            <label for="catalog-order">ترتیب نمایش</label>
            <input id="catalog-order" v-model.number="form.displayOrder" type="number" min="1" class="admin-input" />
          </div>
          <div class="admin-form__field">
            <BaseSwitch v-model="form.isActive" label="وضعیت" />
          </div>
        </div>

        <AdminImagePicker v-model="form.imageUrl" label="تصویر بنر کالیته" />
      </form>

      <template #footer>
        <button type="button" class="admin-btn admin-btn--outline" @click="closeModal">انصراف</button>
        <button type="button" class="admin-btn admin-btn--primary" :disabled="!isFormValid || saving" @click="submitCatalog">
          {{ modalMode === 'edit' ? 'ذخیره تغییرات' : 'ثبت کالیته' }}
        </button>
      </template>
    </BaseModal>
  </div>
</template>

<style scoped>
.catalogs-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  align-items: center;
}

.catalogs-page__search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
}

.catalogs-page__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  outline: none;
}

.catalogs-page__company-filter {
  width: min(220px, 100%);
}

.catalogs-page__table {
  overflow: hidden;
}

.catalog-thumb {
  display: block;
  width: 72px;
  height: 44px;
  border-radius: 8px;
  background: #e8eceb center / cover no-repeat;
}

.catalog-thumb--empty {
  background: #eef1f0;
}
</style>