webMontime/src/views/app/AppRegisterBusinessView.vue

<template>
  <WebAppLayout>
    <h1 class="mb-2 text-xl font-bold text-text">ثبت کسب‌وکار</h1>
    <p class="mb-4 text-sm text-muted">
      درخواست شما پس از بررسی توسط مدیریت منتایم فعال می‌شود.
    </p>

    <p
      v-if="error"
      class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
    >
      {{ error }}
    </p>

    <FormPageSkeleton v-if="loading" />

    <div
      v-else-if="pendingRequest"
      class="space-y-4 rounded-2xl border border-amber-500/30 bg-amber-500/10 p-4"
    >
      <p class="font-semibold text-text">در انتظار تأیید</p>
      <p class="text-sm text-muted">
        درخواست «{{ pendingRequest.title }}» ثبت شده و در حال بررسی است.
      </p>
      <p class="text-xs text-muted">
        پس از تأیید، پیامک دریافت می‌کنید و تب «کسب‌وکار» در اپ فعال می‌شود.
      </p>
    </div>

    <div
      v-else-if="lastRejected"
      class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
    >
      آخرین درخواست «{{ lastRejected.title }}» رد شد.
      <span v-if="lastRejected.adminNote"> — {{ lastRejected.adminNote }}</span>
      می‌توانید دوباره درخواست دهید.
    </div>

    <form v-if="showForm" class="space-y-4" @submit.prevent="onSubmit">
      <AppInput id="bizTitle" v-model="form.title" label="نام کسب‌وکار" required @blur="maybeSlug" />

      <AppInput
        id="bizSlug"
        v-model="form.slug"
        label="اسلاگ (انگلیسی)"
        ltr
        placeholder="اختیاری — از عنوان ساخته می‌شود"
        @input="slugTouched = true"
      />

      <div class="space-y-1.5">
        <label for="bizCategory" class="block text-sm font-medium text-muted">دسته</label>
        <select
          id="bizCategory"
          v-model="form.categoryId"
          required
          class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
        >
          <option value="" disabled>انتخاب دسته</option>
          <option v-for="cat in categories" :key="cat.id" :value="cat.id">
            {{ cat.title }}
          </option>
        </select>
      </div>

      <div class="space-y-1.5">
        <label for="bizDesc" class="block text-sm font-medium text-muted">توضیحات</label>
        <textarea
          id="bizDesc"
          v-model="form.description"
          rows="3"
          class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
        />
      </div>

      <AppInput
        id="bizPhone"
        v-model="form.contactPhone"
        label="تلفن تماس"
        type="tel"
        inputmode="tel"
        ltr
      />
      <AppInput id="bizAddress" v-model="form.address" label="آدرس" />

      <AppButton type="submit" :loading="saving">ارسال درخواست</AppButton>
    </form>
  </WebAppLayout>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { fetchBusinessCategories } from '@/api/business-categories';
import {
  fetchMyBusinessRegistrations,
  submitBusinessRegistration,
} from '@/api/business-registrations';
import type { BusinessCategory, BusinessRegistrationRequest } from '@/api/types';
import { ApiError } from '@/api/client';
import AppButton from '@/components/ui/AppButton.vue';
import FormPageSkeleton from '@/components/ui/FormPageSkeleton.vue';
import AppInput from '@/components/ui/AppInput.vue';
import WebAppLayout from '@/layouts/WebAppLayout.vue';
import { useAuthStore } from '@/stores/auth';
import { isValidSlug, optionalSlug, slugify } from '@/utils/slug';

const router = useRouter();
const auth = useAuthStore();

const loading = ref(true);
const saving = ref(false);
const error = ref('');
const slugTouched = ref(false);
const categories = ref<BusinessCategory[]>([]);
const requests = ref<BusinessRegistrationRequest[]>([]);

const form = ref({
  title: '',
  slug: '',
  categoryId: '',
  description: '',
  contactPhone: '',
  address: '',
});

const pendingRequest = computed(() =>
  requests.value.find((r) => r.status === 'pending'),
);

const lastRejected = computed(() =>
  requests.value.find((r) => r.status === 'rejected'),
);

const showForm = computed(
  () => !pendingRequest.value && auth.isCustomer,
);

onMounted(async () => {
  if (auth.isBusinessOwner) {
    await router.replace({ name: 'app-owner' });
    return;
  }

  loading.value = true;
  error.value = '';
  try {
    const [cats, mine] = await Promise.all([
      fetchBusinessCategories(),
      fetchMyBusinessRegistrations(),
    ]);
    categories.value = cats.filter((c) => c.isActive);
    requests.value = mine;
    if (categories.value[0] && !form.value.categoryId) {
      form.value.categoryId = categories.value[0].id;
    }
  } catch (e) {
    error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
  } finally {
    loading.value = false;
  }
});

function maybeSlug() {
  if (!slugTouched.value && !form.value.slug.trim()) {
    form.value.slug = slugify(form.value.title);
  }
}

async function onSubmit() {
  if (!form.value.title.trim() || !form.value.categoryId) {
    error.value = 'نام و دسته را وارد کنید.';
    return;
  }
  const slug = optionalSlug(form.value.slug);
  if (slug && !isValidSlug(slug)) {
    error.value = 'اسلاگ فقط حروف کوچک انگلیسی و خط تیره باشد.';
    return;
  }
  saving.value = true;
  error.value = '';
  try {
    await submitBusinessRegistration({
      title: form.value.title.trim(),
      categoryId: form.value.categoryId,
      ...(slug ? { slug } : {}),
      description: form.value.description.trim() || undefined,
      contactPhone: form.value.contactPhone.trim() || undefined,
      address: form.value.address.trim() || undefined,
    });
    requests.value = await fetchMyBusinessRegistrations();
  } catch (e) {
    error.value = e instanceof ApiError ? e.message : 'خطا در ارسال درخواست';
  } finally {
    saving.value = false;
  }
}
</script>