"use client";

import React from "react";
import dynamic from "next/dynamic";
import { UserInfo } from "../../types/chat";

// ใช้ dynamic import เพื่อหลีกเลี่ยงปัญหา SSR กับ WebSocket
const ChatWidget = dynamic(
  () => import("./ChatWidget"),
  { ssr: false }
);

export interface ChatWidgetClientProps {
  roomCode: string;
  appId: string;
  roomName?: string;
  theme?: 'light' | 'dark';
  // สี - รองรับทั้งค่าสีโดยตรงและ Tailwind class
  bgColor?: string;
  bgColorClass?: string;
  textColor?: string;
  textColorClass?: string;
  bgInput?: string;
  bgInputClass?: string;
  textInputColor?: string;
  textInputColorClass?: string;
  currentUserColor?: string;
  currentUserColorClass?: string;
  // เพิ่ม props สำหรับสี Admin
  adminColor?: string;
  adminColorClass?: string;
  // เพิ่ม props สำหรับสีปุ่ม
  buttonBgColor?: string;
  buttonBgClass?: string;
  // เพิ่ม props สำหรับข้อมูลผู้ใช้
  userInfo?: UserInfo;
  userCode?: string;
  // เพิ่ม props สำหรับกำหนดขนาด
  width?: string | number;
  height?: string | number;
  // เพิ่ม props สำหรับกำหนดเส้นขอบ
  borderWidth?: string | number;
  borderColor?: string;
  borderColorClass?: string;
  borderRadius?: string | number;
  hasBorder?: boolean;
  // เพิ่ม props สำหรับกำหนด URL
  apiUrl?: string;
  wsUrl?: string;
}

const ChatWidgetClient: React.FC<ChatWidgetClientProps> = ({
  roomCode,
  appId,
  roomName,
  theme = 'dark',
  bgColor,
  bgColorClass,
  textColor,
  textColorClass,
  bgInput,
  bgInputClass,
  textInputColor,
  textInputColorClass,
  currentUserColor,
  currentUserColorClass,
  adminColor,
  adminColorClass,
  buttonBgColor,
  buttonBgClass,
  userInfo,
  userCode,
  width,
  height,
  borderWidth = 1,
  borderColor,
  borderColorClass,
  borderRadius = 4,
  hasBorder = true,
  apiUrl,
  wsUrl,
}) => {
  // แปลงค่า borderWidth และ borderRadius ให้เป็น string ที่มี px (ถ้าเป็นตัวเลข)
  const borderWidthStyle = typeof borderWidth === 'number' ? `${borderWidth}px` : borderWidth;
  const borderRadiusStyle = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
  
  // กำหนดสีเส้นขอบตาม theme ถ้าไม่ได้ระบุ
  const defaultBorderColor = theme === 'dark' ? '#333333' : '#e5e7eb';
  
  return (
    <div style={{ 
      width: typeof width === 'number' ? `${width}px` : width || '100%', 
      height: typeof height === 'number' ? `${height}px` : height || '100%',
      maxWidth: '100%',
      border: hasBorder ? `${borderWidthStyle} solid ${borderColor || defaultBorderColor}` : 'none',
      borderRadius: borderRadiusStyle,
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column'
    }}
    className={borderColorClass ? `border-${borderColorClass}` : ''}
    >
      <ChatWidget
        roomCode={roomCode}
        appId={appId}
        roomName={roomName}
        theme={theme}
        bgColor={bgColor}
        bgColorClass={bgColorClass}
        textColor={textColor}
        textColorClass={textColorClass}
        bgInput={bgInput}
        bgInputClass={bgInputClass}
        textInputColor={textInputColor}
        textInputColorClass={textInputColorClass}
        currentUserColor={currentUserColor}
        currentUserColorClass={currentUserColorClass}
        adminColor={adminColor}
        adminColorClass={adminColorClass}
        buttonBgColor={buttonBgColor}
        buttonBgClass={buttonBgClass}
        userInfo={userInfo}
        userCode={userCode}
        width={width}
        height={height}
        apiUrl={apiUrl}
        wsUrl={wsUrl}
      />
    </div>
  );
};

export default ChatWidgetClient;