<template>
  <AppModal :open="open" title="Пожаловаться" size="sm" @close="emit('close')">
    <form class="report-form" @submit.prevent="submit">
      <p class="report-form__label label">
        Опишите причину жалобы (необязательно)
      </p>
      <textarea
        v-model="form.description"
        class="report-form__textarea"
        placeholder="Опишите нарушение..."
        rows="4"
      />
    </form>
    <template #footer>
      <AppButton variant="ghost" @click="emit('close')">
        Отмена
      </AppButton>
      <AppButton variant="danger" :loading="loading" @click="submit">
        Отправить жалобу
      </AppButton>
    </template>
  </AppModal>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { apiClient } from '@/api/client'
import AppButton from '@/components/common/AppButton.vue'
import AppModal from '@/components/common/AppModal.vue'
import { useAuth } from '@/composables/useAuth'
import { useUi } from '@/composables/useUi'

const props = defineProps<{
  open: boolean
  entityId: string
  entityType: 'profile' | 'message'
}>()

const emit = defineEmits<{ close: [] }>()

const authStore = useAuth()
const uiStore = useUi()

const form = reactive({ description: '' })
const loading = ref(false)

async function submit() {
  const profileId = authStore.activeProfile?.id
  if (!profileId)
    return
  loading.value = true
  try {
    await apiClient.api.reportsControllerCreate({
      sourceProfileId: profileId,
      entityId: props.entityId,
      entityType: props.entityType,
      description: form.description || undefined,
    })
    uiStore.addToast('Жалоба отправлена', 'success')
    form.description = ''
    emit('close')
  }
  catch {
    uiStore.addToast('Не удалось отправить жалобу', 'error')
  }
  finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.report-form {
  display: flex;
  flex-direction: column;
  gap: 8px;

  &__label {
    color: var(--color-muted);
  }

  &__textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-cream);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color var(--transition-fast);

    &::placeholder {
      color: var(--color-muted);
    }
    &:focus {
      border-color: var(--color-border-strong);
    }
  }
}
</style>
