webMontime/src/views/app/AppOwnerView.vue

<template>
  <ResponsiveAppLayout>
    <h1 class="mb-1 text-xl font-bold text-text">مدیریت کسب‌وکار</h1>
    <p class="mb-6 text-sm text-muted">تنظیمات کسب‌وکار، خدمات و ساعات کاری</p>

    <FormPageSkeleton v-if="loading" />

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

    <div v-else-if="business" class="mx-auto max-w-3xl space-y-6">
      <form class="space-y-4 rounded-2xl border border-border bg-surface-2 p-4" @submit.prevent="saveBusiness">
        <AppInput id="ownerTitle" v-model="form.title" label="نام کسب‌وکار" required />
        <AppInput id="ownerSubtitle" v-model="form.subtitle" label="زیرعنوان" />
        <AppTextarea id="ownerDescription" v-model="form.description" label="توضیحات" />
        <AppInput id="ownerAddress" v-model="form.address" label="آدرس" />
        <AppInput id="ownerPhone" v-model="form.phone" label="تلفن" ltr />
        <p v-if="saveMessage" class="text-sm text-brand-700 dark:text-brand-500">{{ saveMessage }}</p>
        <AppButton type="submit" :loading="saving">ذخیره اطلاعات</AppButton>
      </form>

      <ServiceClassManager
        :business-id="business.id"
        :enabled="serviceClassesEnabled"
        @update:enabled="setServiceClassesEnabled"
      />
      <BusinessAvailabilityEditor :business-id="business.id" />
    </div>
  </ResponsiveAppLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchMyBusinesses, updateBusiness } from '@/api/businesses';
import { ApiError } from '@/api/client';
import type { Business } from '@/api/types';
import BusinessAvailabilityEditor from '@/components/owner/BusinessAvailabilityEditor.vue';
import ServiceClassManager from '@/components/owner/ServiceClassManager.vue';
import AppButton from '@/components/ui/AppButton.vue';
import AppInput from '@/components/ui/AppInput.vue';
import AppTextarea from '@/components/ui/AppTextarea.vue';
import FormPageSkeleton from '@/components/ui/FormPageSkeleton.vue';
import ResponsiveAppLayout from '@/layouts/ResponsiveAppLayout.vue';
import { useTenantStore } from '@/stores/tenant';

const tenant = useTenantStore();
const business = ref<Business | null>(null);
const loading = ref(true);
const saving = ref(false);
const error = ref('');
const saveMessage = ref('');
const serviceClassesEnabled = ref(false);
const form = ref({
  title: '',
  subtitle: '',
  description: '',
  address: '',
  phone: '',
});

async function loadBusiness() {
  loading.value = true;
  error.value = '';
  try {
    const items = await fetchMyBusinesses();
    business.value = items[0] ?? null;
    if (!business.value) {
      error.value = 'کسب‌وکاری برای مدیریت یافت نشد.';
      return;
    }
    form.value = {
      title: business.value.title,
      subtitle: business.value.subtitle ?? '',
      description: business.value.description ?? '',
      address: business.value.address ?? '',
      phone: business.value.phone ?? '',
    };
    serviceClassesEnabled.value = business.value.serviceClassesEnabled ?? false;
  } catch (e) {
    error.value = e instanceof ApiError ? e.message : 'بارگذاری کسب‌وکار ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

async function setServiceClassesEnabled(value: boolean) {
  if (!business.value) return;
  const previous = serviceClassesEnabled.value;
  serviceClassesEnabled.value = value;
  try {
    business.value = await updateBusiness(business.value.id, {
      serviceClassesEnabled: value,
    });
    tenant.syncSingleBusiness(business.value);
  } catch (e) {
    serviceClassesEnabled.value = previous;
    error.value =
      e instanceof ApiError ? e.message : 'ذخیره وضعیت کلاس‌بندی ناموفق بود.';
  }
}

async function saveBusiness() {
  if (!business.value) return;
  saving.value = true;
  saveMessage.value = '';
  try {
    business.value = await updateBusiness(business.value.id, {
      title: form.value.title.trim(),
      subtitle: form.value.subtitle.trim() || null,
      description: form.value.description.trim() || null,
      address: form.value.address.trim() || null,
      phone: form.value.phone.trim() || null,
    });
    tenant.syncSingleBusiness(business.value);
    saveMessage.value = 'تغییرات ذخیره شد.';
  } catch (e) {
    error.value = e instanceof ApiError ? e.message : 'ذخیره ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

onMounted(() => {
  void loadBusiness();
});
</script>