<template>
  <div>
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-semibold text-gray-900">ประกาศ</h2>
      <q-btn
        color="primary"
        label="สร้างประกาศ"
        icon="add"
        @click="openDialog()"
      />
    </div>

    <div v-if="loading" class="flex justify-center py-10">
      <q-spinner color="primary" size="40px" />
    </div>

    <div v-else-if="announcements.length === 0" class="text-center py-10 text-gray-500">
      <q-icon name="campaign" size="60px" color="grey-4" class="mb-4" />
      <p>ยังไม่มีประกาศ</p>
      <q-btn
        color="primary"
        label="สร้างประกาศแรก"
        class="mt-4"
        @click="openDialog()"
      />
    </div>

    <div v-else class="space-y-4">
      <q-card
        v-for="announcement in announcements"
        :key="announcement.id"
        flat
        bordered
        class="rounded-lg"
      >
        <q-card-section>
          <div class="flex items-start justify-between">
            <div class="flex-1">
              <div class="flex items-center gap-2">
                <q-icon v-if="announcement.is_pinned" name="push_pin" color="orange" size="20px" />
                <h3 class="font-semibold text-gray-900">{{ announcement.title.th }}</h3>
                <q-badge :color="announcement.status === 'PUBLISHED' ? 'green' : 'grey'">
                  {{ announcement.status === 'PUBLISHED' ? 'เผยแพร่' : 'ฉบับร่าง' }}
                </q-badge>
              </div>
              <p class="text-sm text-gray-500 mt-1">{{ announcement.title.en }}</p>
              <p class="text-gray-600 mt-3 whitespace-pre-line">{{ announcement.content.th }}</p>
              <p class="text-xs text-gray-400 mt-3">
                สร้างเมื่อ {{ formatDate(announcement.created_at) }}
              </p>
            </div>
            <div class="flex gap-1">
              <q-btn flat round icon="edit" color="primary" size="sm" @click="openDialog(announcement)" />
              <q-btn flat round icon="delete" color="negative" size="sm" @click="confirmDelete(announcement)" />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>

    <!-- Announcement Dialog -->
    <q-dialog v-model="showDialog" persistent>
      <q-card style="min-width: 600px; max-width: 700px">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">{{ editing ? 'แก้ไขประกาศ' : 'สร้างประกาศใหม่' }}</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="showDialog = false" />
        </q-card-section>

        <q-card-section>
          <div class="space-y-4">
            <q-input
              v-model="form.title.th"
              outlined
              label="หัวข้อ (ภาษาไทย) *"
              :rules="[val => !!val || 'กรุณากรอกหัวข้อ']"
              lazy-rules="ondemand"
              hide-bottom-space
            />
            <q-input
              v-model="form.title.en"
              outlined
              label="หัวข้อ (English)"
            />
            <q-input
              v-model="form.content.th"
              outlined
              type="textarea"
              rows="4"
              label="เนื้อหา (ภาษาไทย) *"
              :rules="[val => !!val || 'กรุณากรอกเนื้อหา']"
              lazy-rules="ondemand"
              hide-bottom-space
            />
            <q-input
              v-model="form.content.en"
              outlined
              type="textarea"
              rows="4"
              label="เนื้อหา (English)"
            />
            <div class="flex gap-4">
              <q-toggle v-model="form.is_pinned" label="ปักหมุด" />
              <q-select
                v-model="form.status"
                :options="[
                  { label: 'ฉบับร่าง', value: 'DRAFT' },
                  { label: 'เผยแพร่', value: 'PUBLISHED' }
                ]"
                outlined
                emit-value
                map-options
                label="สถานะ"
                class="flex-1"
              />
            </div>

            <!-- Published At -->
            <div class="row q-col-gutter-sm" v-if="form.status === 'PUBLISHED'">
              <div class="col-12 col-md-12">
                <q-input filled v-model="form.published_at" label="วันเวลาที่เผยแพร่ (ไม่ระบุ = เผยแพร่ทันที)">
                  <template v-slot:prepend>
                    <q-icon name="event" class="cursor-pointer">
                      <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                        <q-date v-model="form.published_at" mask="YYYY-MM-DD HH:mm">
                          <div class="row items-center justify-end">
                            <q-btn v-close-popup label="Close" color="primary" flat />
                          </div>
                        </q-date>
                      </q-popup-proxy>
                    </q-icon>
                  </template>

                  <template v-slot:append>
                    <q-icon name="access_time" class="cursor-pointer">
                      <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                        <q-time v-model="form.published_at" mask="YYYY-MM-DD HH:mm" format24h>
                          <div class="row items-center justify-end">
                            <q-btn v-close-popup label="Close" color="primary" flat />
                          </div>
                        </q-time>
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
            </div>

            <!-- Attachments Section -->
            <div class="border rounded-lg p-4">
              <div class="flex justify-between items-center mb-3">
                <h4 class="font-semibold text-gray-700">ไฟล์แนบ</h4>
                <q-btn
                  size="sm"
                  color="primary"
                  icon="attach_file"
                  label="เพิ่มไฟล์"
                  :loading="uploadingAttachment"
                  @click="triggerFileInput"
                />
                <input
                  ref="fileInputRef"
                  type="file"
                  class="hidden"
                  @change="handleFileUpload"
                />
              </div>

              <!-- Existing Attachments (edit mode) -->
              <div v-if="editing?.attachments && editing.attachments.length > 0" class="space-y-2 mb-2">
                <div
                  v-for="attachment in editing?.attachments"
                  :key="attachment.id"
                  class="flex items-center justify-between bg-gray-50 rounded p-2"
                >
                  <div class="flex items-center gap-2">
                    <q-icon name="insert_drive_file" color="grey" />
                    <span class="text-sm">{{ attachment.file_name }}</span>
                    <span class="text-xs text-gray-400">({{ formatFileSize(attachment.file_size) }})</span>
                  </div>
                  <q-btn
                    flat
                    round
                    size="sm"
                    icon="delete"
                    color="negative"
                    :loading="deletingAttachmentId === attachment.id"
                    @click="deleteAttachment(attachment.id)"
                  />
                </div>
              </div>

              <!-- Pending Files (create mode) -->
              <div v-if="pendingFiles.length > 0" class="space-y-2 mb-2">
                <div
                  v-for="(file, index) in pendingFiles"
                  :key="index"
                  class="flex items-center justify-between bg-blue-50 rounded p-2"
                >
                  <div class="flex items-center gap-2">
                    <q-icon name="upload_file" color="primary" />
                    <span class="text-sm">{{ file.name }}</span>
                    <span class="text-xs text-gray-400">({{ formatFileSize(file.size) }})</span>
                    <q-badge color="blue" label="รอสร้าง" size="sm" />
                  </div>
                  <q-btn
                    flat
                    round
                    size="sm"
                    icon="close"
                    color="grey"
                    @click="removePendingFile(index)"
                  />
                </div>
              </div>

              <div v-if="!editing?.attachments?.length && pendingFiles.length === 0" class="text-center py-4 text-gray-400 text-sm">
                ยังไม่มีไฟล์แนบ
              </div>
            </div>
          </div>
        </q-card-section>

        <q-card-actions align="right" class="q-pa-md">
          <q-btn flat label="ยกเลิก" color="grey-7" @click="showDialog = false" />
          <q-btn
            :label="editing ? 'บันทึก' : 'สร้าง'"
            color="primary"
            :loading="saving"
            @click="save"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import {
  instructorService,
  type AnnouncementResponse,
  type CreateAnnouncementRequest
} from '~/services/instructor.service';

interface Props {
  courseId: number;
}

const props = defineProps<Props>();
const $q = useQuasar();

// State
const announcements = ref<AnnouncementResponse[]>([]);
const loading = ref(false);
const showDialog = ref(false);
const editing = ref<AnnouncementResponse | null>(null);
const saving = ref(false);

// Form
const form = ref<CreateAnnouncementRequest>({
  title: { th: '', en: '' },
  content: { th: '', en: '' },
  is_pinned: false,
  status: 'DRAFT',
  published_at: ''
});

// Attachments
const fileInputRef = ref<HTMLInputElement | null>(null);
const uploadingAttachment = ref(false);
const deletingAttachmentId = ref<number | null>(null);
const pendingFiles = ref<File[]>([]);

// Methods
const fetchAnnouncements = async () => {
  loading.value = true;
  try {
    announcements.value = await instructorService.getAnnouncements(props.courseId);
  } catch (error) {
    console.error('Failed to fetch announcements:', error);
    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดประกาศได้', position: 'top' });
  } finally {
    loading.value = false;
  }
};

const openDialog = (announcement?: AnnouncementResponse) => {
  editing.value = announcement || null;
  if (announcement) {
    // Format date for q-date/q-time (YYYY-MM-DD HH:mm)
    let formattedPublishedAt = '';
    if (announcement.published_at) {
      const date = new Date(announcement.published_at);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      formattedPublishedAt = `${year}-${month}-${day} ${hours}:${minutes}`;
    }

    form.value = {
      title: { ...announcement.title },
      content: { ...announcement.content },
      is_pinned: announcement.is_pinned,
      status: announcement.status,
      published_at: formattedPublishedAt
    };
  } else {
    form.value = {
      title: { th: '', en: '' },
      content: { th: '', en: '' },
      is_pinned: false,
      status: 'DRAFT',
      published_at: ''
    };
  }
  pendingFiles.value = [];
  showDialog.value = true;
};

// Watch for published_at changes to auto-set status
watch(() => form.value.published_at, (newVal) => {
  if (newVal) {
    form.value.status = 'PUBLISHED';
  }
});

// Watch for status changes to clear published_at if DRAFT
watch(() => form.value.status, (newVal) => {
  if (newVal === 'DRAFT') {
    form.value.published_at = '';
  }
});

const save = async () => {
  if (!form.value.title.th || !form.value.content.th) {
    $q.notify({ type: 'warning', message: 'กรุณากรอกข้อมูลที่จำเป็น', position: 'top' });
    return;
  }

  saving.value = true;
  try {
    if (editing.value) {
      await instructorService.updateAnnouncement(props.courseId, editing.value.id, form.value);
      $q.notify({ type: 'positive', message: 'บันทึกประกาศสำเร็จ', position: 'top' });
    } else {
      const created = await instructorService.createAnnouncement(props.courseId, form.value);
      
      // Upload pending files
      for (const file of pendingFiles.value) {
        try {
          await instructorService.uploadAnnouncementAttachment(props.courseId, created.data.id, file);
        } catch (err) {
          console.error('Failed to upload attachment:', err);
        }
      }
      
      $q.notify({ type: 'positive', message: 'สร้างประกาศสำเร็จ', position: 'top' });
    }
    showDialog.value = false;
    fetchAnnouncements();
  } catch (error: any) {
    $q.notify({ 
      type: 'negative', 
      message: error.data?.message || 'ไม่สามารถบันทึกประกาศได้', 
      position: 'top' 
    });
  } finally {
    saving.value = false;
  }
};

const confirmDelete = (announcement: AnnouncementResponse) => {
  $q.dialog({
    title: 'ยืนยันการลบ',
    message: `คุณต้องการลบประกาศ "${announcement.title.th}" หรือไม่?`,
    cancel: true,
    persistent: true
  }).onOk(async () => {
    try {
      await instructorService.deleteAnnouncement(props.courseId, announcement.id);
      $q.notify({ type: 'positive', message: 'ลบประกาศสำเร็จ', position: 'top' });
      fetchAnnouncements();
    } catch (error) {
      $q.notify({ type: 'negative', message: 'ไม่สามารถลบประกาศได้', position: 'top' });
    }
  });
};

const triggerFileInput = () => {
  fileInputRef.value?.click();
};

const handleFileUpload = async (event: Event) => {
  const input = event.target as HTMLInputElement;
  const files = input.files;
  if (!files || files.length === 0) return;
  
  if (editing.value) {
    // Upload immediately in edit mode
    uploadingAttachment.value = true;
    try {
      await instructorService.uploadAnnouncementAttachment(props.courseId, editing.value.id, files[0]);
      $q.notify({ type: 'positive', message: 'อัพโหลดไฟล์สำเร็จ', position: 'top' });
      // Refresh editing
      const all = await instructorService.getAnnouncements(props.courseId);
      editing.value = all.find(a => a.id === editing.value?.id) || null;
    } catch (error) {
      $q.notify({ type: 'negative', message: 'ไม่สามารถอัพโหลดไฟล์ได้', position: 'top' });
    } finally {
      uploadingAttachment.value = false;
    }
  } else {
    // Add to pending files in create mode
    pendingFiles.value.push(files[0]);
  }
  
  input.value = '';
};

const removePendingFile = (index: number) => {
  pendingFiles.value.splice(index, 1);
};

const deleteAttachment = async (attachmentId: number) => {
  if (!editing.value) return;
  deletingAttachmentId.value = attachmentId;
  try {
    await instructorService.deleteAnnouncementAttachment(props.courseId, editing.value.id, attachmentId);
    $q.notify({ type: 'positive', message: 'ลบไฟล์สำเร็จ', position: 'top' });
    // Refresh editing
    const all = await instructorService.getAnnouncements(props.courseId);
    editing.value = all.find(a => a.id === editing.value?.id) || null;
  } catch (error) {
    $q.notify({ type: 'negative', message: 'ไม่สามารถลบไฟล์ได้', position: 'top' });
  } finally {
    deletingAttachmentId.value = null;
  }
};

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
};

const formatFileSize = (bytes: number) => {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
};

// Fetch on mount
onMounted(() => {
  fetchAnnouncements();
});
</script>
