import { GeneralService } from './../../services/generalservice';
import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import { IChat } from '../../interfaces/main.interface'
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-chat-widget-component',
  standalone: false,
  templateUrl: './chat-widget-component.html',
  styleUrl: './chat-widget-component.css',
})
export class ChatWidgetComponent {
  isOpen = false;
  // newMessage = '';
  chatForm!: FormGroup;
  messages:IChat[]=[];

  // State สำหรับจัดการขนาด
  isMaximized = false;
  isResizing = false;

  // ขนาดเริ่มต้น (px)
  chatWidth = 320;
  chatHeight = 384;

  // ตัวแปรสำหรับคำนวณการลาก
  private startX = 0;
  private startY = 0;
  private startWidth = 0;
  private startHeight = 0;


  constructor(
    private generalService: GeneralService
  ) {
    this.setupFormControl(); // เรียกใช้ตอนเริ่ม Component
  }

  setupFormControl() {
    this.chatForm = new FormGroup({
      message: new FormControl('', [Validators.required])
    });
  }



  toggleChat() {
    this.isOpen = !this.isOpen;
    let body = {methods: 'ind'}
    this.OnAiChat(body);
    const isAlreadyHave = this.messages.some(sub => sub.text == 'รอAi ประมวณผลสักครู่');
    if(isAlreadyHave === false){
      this.messages.push({
        text: 'รอAi ประมวณผลสักครู่',
        isUser: false
      })
    }
    this.isMaximized = false;
  }

  OnAiChat(value: any){
    let url = 'https://n8n.nuttakit.work/webhook/Ai'
    let request = {
      methods: value.methods || 'cht',
      message: value.message ?? ''
    }
    this.generalService.postUrl(url, request).subscribe({
      next: (result: any) => {
        if (result.code === 200) {
          this.messages.push(result.data)
        }else{
          this.generalService.trowApi(result);
        }
      },
      error: (error: any) => {

      },
      complete: () => {

      }
    })
  }

  toggleMaximize() {
    this.isMaximized = !this.isMaximized;
  }

  sendMessage() {
    let newMessage = this.chatForm.get('message')?.value;
    if (newMessage.trim()) {
      this.messages.push({ text: newMessage, isUser: true });
      newMessage = '';
      // setTimeout(() => {
      //   this.messages.push({
      //     text: 'รับทราบครับ ระบบกำลังประมวลผล...',
      //     isUser: false
      //   });
      // }, 1000);
    }
  }

  // --- Logic สำหรับการ Resize (ลากขยาย) ---

  startResizing(event: MouseEvent) {
    event.preventDefault(); // ป้องกันการเลือก Text
    this.isResizing = true;

    // บันทึกตำแหน่งเมาส์และขนาดปัจจุบัน
    this.startX = event.clientX;
    this.startY = event.clientY;
    this.startWidth = this.chatWidth;
    this.startHeight = this.chatHeight;
  }

  // ใช้ @HostListener เพื่อดักจับ MouseMove ทั่วทั้ง Window
  @HostListener('window:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (!this.isResizing) return;

    // คำนวณความต่าง (Delta)
    // หมายเหตุ: ลากไปทางซ้าย (ค่า X น้อยลง) ต้องทำให้กว้างขึ้น -> ใช้ startX - clientX
    // ลากไปข้างบน (ค่า Y น้อยลง) ต้องทำให้สูงขึ้น -> ใช้ startY - clientY
    const deltaX = this.startX - event.clientX;
    const deltaY = this.startY - event.clientY;

    // กำหนดขนาดใหม่ (จำกัดขนาดต่ำสุดไม่ให้เล็กเกินไป)
    this.chatWidth = Math.max(300, this.startWidth + deltaX);
    this.chatHeight = Math.max(350, this.startHeight + deltaY);
  }

  @HostListener('window:mouseup')
  stopResizing() {
    this.isResizing = false;
  }
}