"use client";

import React, { useRef, useEffect } from 'react';
import { ChatMessage } from '@/types/chat';
import MessageItem from './MessageItem';

// เพิ่ม array สำหรับเก็บข้อความแจ้งเตือน
const WARNING_TEXT_ARRAY = ["ส่งข้อความผิดกฏ"];

interface MessageListProps {
  messages: ChatMessage[];
  userCode?: string;
  currentUserCode?: string;
  theme?: 'light' | 'dark';
  bgColor?: string;
  bgColorClass?: string;
  textColor?: string;
  textColorClass?: string;
  currentUserColor?: string;
  currentUserColorClass?: string;
  adminColor?: string;
  adminColorClass?: string;
}

const MessageList: React.FC<MessageListProps> = ({ 
  messages, 
  userCode,
  currentUserCode,
  theme = 'light',
  bgColor,
  bgColorClass,
  textColor,
  textColorClass,
  currentUserColor,
  currentUserColorClass,
  adminColor,
  adminColorClass
}) => {
  // ใช้ currentUserCode ถ้ามี ไม่งั้นใช้ userCode
  const effectiveUserCode = currentUserCode || userCode || '';
  
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const isDark = theme === 'dark';
  const bgClass = isDark ? 'bg-gray-900' : 'bg-white';
  const textClass = isDark ? 'text-white' : 'text-gray-800';

  // Scroll to bottom whenever messages change
  useEffect(() => {
    if (containerRef.current && messagesEndRef.current) {
      // ใช้ scrollTop แทน scrollIntoView เพื่อให้เลื่อนเฉพาะภายใน container
      containerRef.current.scrollTop = containerRef.current.scrollHeight;
      
      // เพิ่มการเลื่อนอีกครั้งหลังจากผ่านไป 100ms เพื่อให้แน่ใจว่าเลื่อนหลังจาก render เสร็จสมบูรณ์
      setTimeout(() => {
        if (containerRef.current) {
          containerRef.current.scrollTop = containerRef.current.scrollHeight;
        }
      }, 100);
    }
  }, [messages]);

  return (
    <div 
      ref={containerRef}
      className={`h-full overflow-y-auto p-4 ${bgColorClass ? `${bgColorClass}` : (bgColor ? '' : bgClass)} ${textColorClass ? `${textColorClass}` : (textColor ? '' : textClass)}`}
      style={{
        backgroundColor: bgColor || '',
        color: textColor || ''
      }}
    >
      {messages.length === 0 ? (
        <div className="flex items-center justify-center h-full">
          <p className="text-gray-500">No messages yet</p>
        </div>
      ) : (
        <>
          {messages.map((message, index) => (
            <MessageItem
              key={message.id || `${message.user_code}-${index}`}
              message={message}
              isOwnMessage={message.user_code === effectiveUserCode}
              theme={theme}
              bgColor={bgColor}
              bgColorClass={bgColorClass}
              textColor={textColor}
              textColorClass={textColorClass}
              currentUserColor={currentUserColor}
              currentUserColorClass={currentUserColorClass}
              adminColor={adminColor}
              adminColorClass={adminColorClass}
              isWarning={WARNING_TEXT_ARRAY.includes(message.content)}
            />
          ))}
          <div ref={messagesEndRef} />
        </>
      )}
    </div>
  );
};

export default MessageList;