<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue'
import { Form } from 'vee-validate'
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import Textarea from '@/components/ui/textarea/Textarea.vue'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import { useAuth } from '@/composables/useAuth'
import { CommentRow } from '@shared/types/application'
import { Dot } from 'lucide-vue-next'
import { ref } from 'vue'

const props = defineProps<{
  messages: CommentRow[]
}>()

const emit = defineEmits<{
  (e: 'post', text: string): void
  (e: 'postInternal', text: string): void
}>()

const commentSchema = toTypedSchema(
  z.object({
    text: z.string().trim().min(1, 'Required').max(2000, 'Max 2000 characters'),
  })
)

const submitMode = ref("public");

// vee-validate passes (values, actions) to @submit
function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) {
  if (submitMode.value === "internal")
    emit('postInternal', values.text.trim())
  else
    emit('post', values.text.trim())
  resetForm()
}
</script>

<template>
  <div class="space-y-4">
    <Form :validation-schema="commentSchema" @submit="onSubmit">
      <FormField name="text" v-slot="{ componentField }">
        <FormItem>
          <FormLabel>Comment</FormLabel>
          <FormControl>
            <Textarea v-bind="componentField" rows="3" placeholder="Write a comment…"
              class="bg-neutral-800 resize-none w-full" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>

      <!-- Button below, right-aligned -->
      <div class="mt-2 flex justify-end gap-2">
        <Button type="submit" @click="submitMode = 'internal'" variant="outline">Post (Internal)</Button>
        <Button type="submit" @click="submitMode = 'public'">Post (Public)</Button>
      </div>
    </Form>

    <!-- Existing posts -->
    <div class="space-y-3">
      <div v-for="(message, i) in props.messages" :key="message.comment_id ?? i" class="rounded-md border p-3 space-y-5"
        :class="message.admin_only ? 'border-amber-300/70' : 'border-neutral-800'">
        <!-- Comment header -->
        <div class="flex justify-between">
          <div class="flex">
            <p>{{ message.poster_name }}</p>
            <p v-if="message.admin_only" class="flex">
              <Dot /><span class="text-amber-300">Internal</span>
            </p>
          </div>
          <p class="text-muted-foreground">{{ new Date(message.post_time).toLocaleString("EN-us", {
            year: "numeric",
            month: "long",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit"
          }) }}</p>
        </div>
        <p>{{ message.post_content }}</p>
      </div>
    </div>
  </div>
</template>