"use client";

import React, { useState, useEffect } from 'react';
import { IoSendSharp } from "react-icons/io5";

interface MessageInputProps {
  onSendMessage: (content: string) => void;
  isConnected: boolean;
  theme?: 'light' | 'dark';
  bgColor?: string;
  bgColorClass?: string;
  textColor?: string;
  textColorClass?: string;
  bgInput?: string;
  bgInputClass?: string;
  textInputColor?: string;
  textInputColorClass?: string;
  buttonBgColor?: string;
  buttonBgClass?: string;
  userRole?: 'admin' | 'user';
}

const MessageInput: React.FC<MessageInputProps> = ({ 
  onSendMessage, 
  isConnected,
  theme = 'light',
  bgColor,
  bgColorClass,
  textColor,
  textColorClass,
  bgInput,
  bgInputClass,
  textInputColor,
  textInputColorClass,
  buttonBgColor,
  buttonBgClass,
  userRole = 'user'
}) => {
  const [message, setMessage] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [isConnecting, setIsConnecting] = useState(false);

  // เพิ่ม useEffect เพื่อตรวจสอบสถานะการเชื่อมต่อ
  useEffect(() => {
    if (!isConnected) {
      setIsConnecting(true);
    } else {
      setIsConnecting(false);
    }
  }, [isConnected]);

  const containsLink = (text: string): boolean => {
    const urlRegex = /(https?:\/\/[^\s]+)|(www\.[^\s]+)|([^\s]+\.(com|net|org|io|co|me|dev|app|site|xyz|info))/gi;
    return urlRegex.test(text);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (message.trim() && isConnected) {
      if (userRole !== 'admin' && containsLink(message)) {
        onSendMessage("ส่งข้อความผิดกฏ");
        setErrorMessage('ไม่อนุญาตให้ส่งลิงค์');
        setTimeout(() => setErrorMessage(''), 3000); 
      } else {
        onSendMessage(message.trim());
        setErrorMessage('');
      }
      setMessage('');
    }
  };

  const isDark = theme === 'dark';
  const formBgClass = isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200';
  const inputBgClass = isDark ? 'bg-gray-800 border-gray-700' : 'bg-gray-100 border-transparent';
  const inputTextClass = isDark ? 'text-white' : 'text-gray-800';
  const formTextClass = isDark ? 'text-white' : 'text-gray-800';
  const defaultButtonBgClass = isDark ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-500 hover:bg-blue-600';

  return (
    <form 
      onSubmit={handleSubmit} 
      className={`p-4 border-t ${textInputColorClass || (textInputColor ? '' : inputTextClass)} ${bgColorClass ? `${bgColorClass}` : (bgColor ? '' : formBgClass)} ${textColorClass ? `${textColorClass}` : (textColor ? '' : formTextClass)}`}
      style={{
        backgroundColor: bgColor || '',
        color: textInputColor || '',
        width: '100%'
      }}
    >
      {errorMessage && (
        <div className="mb-2 text-red-500 text-sm">
          {errorMessage}
        </div>
      )}
      <div className="flex items-center w-full">
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder={isConnected ? "พิมพ์ข้อความ..." : isConnecting ? "กำลังเชื่อมต่อ..." : "ไม่สามารถเชื่อมต่อได้"}
          disabled={!isConnected}
          className={`flex-1 px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
            bgInputClass ? `${bgInputClass}` : (bgInput ? '' : inputBgClass)
          } ${textInputColorClass || (textInputColor ? '' : inputTextClass)} ${!isConnected && 'opacity-50'}`}
          style={{
            backgroundColor: bgInput || '',
            color: textInputColor || '',
            minWidth: 0,
          
          }}
        />
        <button
          type="submit"
          disabled={!message.trim() || !isConnected}
          className={`px-4 py-2 rounded-r-md text-white font-medium ${buttonBgClass ? buttonBgClass : (buttonBgColor ? '' : defaultButtonBgClass)} ${
            (!message.trim() || !isConnected) ? 'opacity-50 cursor-not-allowed' : ''
          }`}
          style={{
            whiteSpace: 'nowrap',
            flexShrink: 0,
            backgroundColor: buttonBgColor || ''
          }}
        >
          <div className="flex items-center">
            <span className="mr-1">ส่ง</span>
            <IoSendSharp size={16} />
          </div>
        </button>
      </div>
    </form>
  );
};

export default MessageInput;