<script setup lang="ts">
import { ref, computed } from 'vue'
import { cn } from '@/lib/utils'
import { useLocalTranslation } from '@/lib/composables/useLocalTranslation'
import Rating from '@/ui/review-dialog/Rating.vue'
import Button from '@/components/shared/Button.vue'
import LogoIcon from '@/assets/logo.svg'
import type { ReviewProps } from '@/lib/types'

const COMMENT_MAX_LENGTH = 500

const props = withDefaults(defineProps<{
  onSubmit: (payload: ReviewProps) => void | Promise<void>
  onDone?: () => void
  isSubmitting?: boolean
}>(), { isSubmitting: false })

const { t } = useLocalTranslation()
const rating = ref(0)
const comment = ref('')
const commentError = ref<string | null>(null)

const hasRating = computed(() => rating.value >= 1 && rating.value <= 5)

function handleRatingChange(val: number) { rating.value = val }

function handleCommentChange(e: Event) {
  const value = (e.target as HTMLTextAreaElement).value
  comment.value = value
  if (commentError.value && value.length <= COMMENT_MAX_LENGTH) commentError.value = null
}

function handleSubmit() {
  const trimmed = comment.value.trim()
  if (trimmed.length > COMMENT_MAX_LENGTH) {
    commentError.value = t('homeSdk.ReviewDialog.comment_error') || 'Max 500 chars.'
    return
  }
  commentError.value = null
  void props.onSubmit({ rating: rating.value, comment: trimmed })
}
</script>

<template>
  <section class="babylai:mb-4 babylai:flex babylai:justify-start">
    <div class="babylai:shrink-0 babylai:me-3 babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary">
      <LogoIcon class="babylai:w-4 babylai:h-4 babylai:text-primary" />
    </div>
    <div class="babylai:bg-card babylai:max-w-[80%] babylai:p-5 babylai:rounded-3xl babylai:text-sm babylai:flex babylai:flex-col babylai:gap-2.5 babylai:text-start">
      <h2 class="babylai:text-card-foreground">{{ t('homeSdk.InChatReview.title') }}</h2>
      <p class="babylai:font-normal babylai:text-muted-foreground babylai:leading-snug">{{ t('homeSdk.InChatReview.description') }}</p>
      <section class="babylai:bg-muted babylai:rounded-3xl babylai:p-3">
        <Rating :value="rating" size="md" @change="handleRatingChange" />
      </section>
      <template v-if="hasRating">
        <p class="babylai:text-card-foreground babylai:leading-snug">{{ t('homeSdk.InChatReview.follow_up') }}</p>
        <textarea
          :class="cn(
            'babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:min-h-20',
            commentError ? 'babylai:border-destructive' : 'babylai:border-black-white-200'
          )"
          :rows="4"
          :max-length="COMMENT_MAX_LENGTH"
          :placeholder="t('homeSdk.InChatReview.note_placeholder')"
          :value="comment"
          :aria-invalid="!!commentError"
          @input="handleCommentChange"
        />
        <p v-if="commentError" class="babylai:text-sm babylai:text-destructive" role="alert">{{ commentError }}</p>
        <p class="babylai:text-xs babylai:text-muted-foreground">{{ comment.length }}/{{ COMMENT_MAX_LENGTH }}</p>
        <Button variant="default" :disabled="isSubmitting" @click="handleSubmit">
          <span v-if="isSubmitting" class="babylai:inline-flex babylai:items-center babylai:gap-2">
            <span class="babylai:inline-block babylai:animate-spin babylai:rounded-full babylai:h-4 babylai:w-4 babylai:border-2 babylai:border-white babylai:border-t-transparent babylai:box-border" aria-hidden="true" />
            {{ t('homeSdk.InChatReview.submit_button') }}
          </span>
          <span v-else>{{ t('homeSdk.InChatReview.submit_button') }}</span>
        </Button>
      </template>
    </div>
  </section>
</template>
