"use client";

import React from 'react';
import { ChatMessage } from '@/types/chat';
import Image from 'next/image';

interface MessageItemProps {
  message: ChatMessage;
  isOwnMessage: boolean;
  theme?: 'light' | 'dark';
  textColor?: string;
  textColorClass?: string;
  bgColor?: string;
  bgColorClass?: string;
  currentUserColor?: string;
  currentUserColorClass?: string;
  adminColor?: string;
  adminColorClass?: string;
  isWarning?: boolean;
}

const DEFAULT_PROFILE_IMAGE = '/image/profile.png';

const MessageItem: React.FC<MessageItemProps> = ({ 
  message, 
  isOwnMessage, 
  theme = 'light',
  textColor,
  textColorClass,
  bgColor,
  bgColorClass,
  currentUserColor,
  currentUserColorClass,
  adminColor,
  adminColorClass,
  isWarning = false
}) => {
  // Format date
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };

  // ตรวจสอบว่า message.user_info มีค่าหรือไม่
  const username = message.user_info?.username || 'Unknown User';
  const profileImage = message.user_info?.profile_image || DEFAULT_PROFILE_IMAGE;
  const userRole = message.user_info?.role || 'user';
  const isAdmin = userRole === 'admin';

  // console.log("user_info", message.user_info);
  // console.log("isAdmin", isAdmin);

  const isDark = theme === 'dark';
  
  // กำหนดสีพื้นฐานจาก props
  const baseTextColor = textColor || (isDark ? '#ffffff' : '#333333');
  
  // สร้างสีสำหรับส่วนต่างๆ โดยใช้การ drop opacity
  const getUsernameColor = () => {
    // ถ้าเป็นข้อความของเรา ใช้สีที่กำหนดเฉพาะ
    const usernameColor = isOwnMessage && currentUserColor 
      ? currentUserColor 
      : isAdmin && adminColor
        ? adminColor
        : baseTextColor;
    return usernameColor;
  };
  
  const getTimeColor = () => {
    // ใช้สีเดียวกับ textColor แต่ลดความเข้มลงมากที่สุด
    return {
      color: baseTextColor,
      opacity: 0.5 
    };
  };
  
  const getMessageColor = () => {
    // ใช้สีเดียวกับ textColor แต่ใช้ความเข้มเต็มที่
    return {
      color: baseTextColor,
      opacity: 1.0 
    };
  };
  
  // กำหนด Tailwind class สำหรับสีของผู้ใช้ปัจจุบัน
  const usernameTailwindClass = isOwnMessage && currentUserColorClass 
    ? `${currentUserColorClass}` 
    : isAdmin && adminColorClass
      ? `${adminColorClass}`
      : textColorClass 
        ? `${textColorClass} opacity-90` 
        : '';

  // กำหนด class สำหรับพื้นหลังข้อความ
  const messageBgClass = isWarning
    ? isDark ? 'bg-gray-700' : 'bg-gray-100'
    : isOwnMessage 
      ? isDark ? 'bg-blue-700' : 'bg-blue-100' 
      : isAdmin
        ? isDark ? 'bg-purple-700' : 'bg-purple-100'
        : isDark ? 'bg-gray-700' : 'bg-gray-100';

  // กำหนด class สำหรับข้อความ
  const messageTextClass = isWarning
    ? isDark ? 'text-red-400 font-semibold' : 'text-red-600 font-semibold'
    : isAdmin && adminColorClass 
      ? adminColorClass 
      : textColorClass || (isDark ? 'text-white' : 'text-gray-800');

  return (
    <div className="flex items-start gap-2 mb-4">
      <div className="flex-shrink-0">
        <div className="relative w-8 h-8 rounded-full overflow-hidden">
          <Image
            src={profileImage}
            alt={username}
            fill
            className="object-cover"
          />
        </div>
      </div>

      <div className="flex flex-col max-w-[75%]">
        <div className="flex items-baseline mb-0.5">
          <span 
            className={`text-sm ${usernameTailwindClass}`}
            style={!usernameTailwindClass ? { color: getUsernameColor() } : {}}
          >
            {username}
          </span>
          <span 
            className={`text-xs ml-1.5 ${textColorClass ? `${textColorClass} opacity-50` : ''}`}
            style={!textColorClass ? getTimeColor() : {}}
          >
            {message.created_at && formatDate(message.created_at)}
          </span>
        </div>
        <div
          className={`rounded-lg p-2 ${bgColorClass ? `${bgColorClass}` : messageBgClass}`}
          style={{
            backgroundColor: bgColor || ''
          }}
        >
          <span 
            className={`${messageTextClass}`}
            style={!textColorClass && !adminColorClass ? { color: textColor || '' } : {}}
          >
            {message.is_deleted ? (
              <span className="italic text-gray-500">ข้อความถูกลบแล้ว</span>
            ) : (
              message.content
            )}
          </span>
        </div>
      </div>
    </div>
  );
};

export default MessageItem;