import React, { ReactNode, useEffect } from 'react';
import { Role, type Message } from './useClassroom';
import { useClassroomContext } from './ClassroomProvider';
import {
  VideoCameraIcon,
  CameraIcon,
  MicrophoneIcon,
  ShareIcon,
  ClipboardDocumentIcon,
  PaperAirplaneIcon,
  ArrowsPointingOutIcon,
  ArrowsPointingInIcon,
  LockClosedIcon,
} from '@heroicons/react/24/outline';
import { Button } from '@/client/components/ui/button';
import { Textarea } from '@/client/components/ui/textarea';
import { Card, CardContent } from '@/client/components/ui/card';
import { TeacherClassControlButton } from './TeacherClassControlButton';
import { TeacherStudentManagementButton } from './TeacherStudentManagementButton';
import { TeacherHandUpManagementButton } from './TeacherHandUpManagementButton';
import { TeacherQuestionManagementButton } from './TeacherQuestionManagementButton';
import { AllMuteToggleButton } from './AllMuteToggleButton';
import { StudentHandUpButton } from './StudentHandUpButton';
import { StudentQuestionButton } from './StudentQuestionButton';
import { MessageList } from './MessageList';
import { ImageSelectorButton } from './ImageSelectorButton';
import { ScrollArea } from '@/client/components/ui/scroll-area';
import { DivideCircle } from 'lucide-react';

interface ClassroomLayoutProps {
  children: ReactNode;
  role: Role;
}

export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
  const [showShareLink, setShowShareLink] = React.useState(false);
  const [isLandscape, setIsLandscape] = React.useState(false);
  const {
    remoteScreenContainer,
    remoteCameraContainer,
    isCameraOn,
    isAudioOn,
    isScreenSharing,
    toggleCamera,
    toggleAudio,
    toggleScreenShare,
    messageList,
    msgText,
    setMsgText,
    sendMessage,
    handUpList,
    questions,
    classStatus,
    shareLink,
    showCameraOverlay,
    setShowCameraOverlay,
    showToast,
    isPrivateClass,
    showVideo,
    setShowVideo
  } = useClassroomContext();

  // 检测是否为移动设备
  const isMobileDevice = () => {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  };

  // 横屏切换功能
  const toggleLandscape = () => {
    if (!isMobileDevice()) {
      showToast('info', '横屏功能仅在移动设备上可用');
      return;
    }

    setIsLandscape(!isLandscape);

    if (!isLandscape) {
      // 进入横屏模式
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      }
      // 尝试横屏旋转（需要设备支持）
      // @ts-ignore
      if (screen.orientation && screen.orientation.lock) {
        // @ts-ignore
        screen.orientation.lock('landscape').catch(() => {
          showToast('info', '您的设备不支持自动横屏，请手动旋转设备');
        });
      }
    } else {
      // 退出横屏模式
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
      if (screen.orientation && screen.orientation.unlock) {
        screen.orientation.unlock();
      }
    }
  };

  // 监听屏幕方向变化
  useEffect(() => {
    const handleOrientationChange = () => {
      if (screen.orientation) {
        setIsLandscape(screen.orientation.type.includes('landscape'));
      } else {
        // 备用方案：通过窗口尺寸判断
        setIsLandscape(window.innerWidth > window.innerHeight);
      }
    };

    if (screen.orientation) {
      screen.orientation.addEventListener('change', handleOrientationChange);
    } else {
      // 备用方案：监听窗口尺寸变化
      window.addEventListener('resize', handleOrientationChange);
    }

    // 初始检查
    handleOrientationChange();

    return () => {
      if (screen.orientation) {
        screen.orientation.removeEventListener('change', handleOrientationChange);
      } else {
        window.removeEventListener('resize', handleOrientationChange);
      }
    };
  }, []);

  return (
    <div className={`flex ${isLandscape ? 'flex-row' : 'flex-col'} md:flex-row h-screen bg-gray-100`}>
      {/* 视频区域 */}
      <div className={`relative ${isLandscape ? 'flex-[3] h-auto' : 'h-[300px]'} md:flex-[3] md:h-auto bg-black ${showVideo ? 'block' : 'hidden'}`}>
          {/* 主屏幕共享容器 */}
          <div
            id="remoteScreenContainer"
            ref={remoteScreenContainer}
            className="w-full h-full"
          >
            {/* 屏幕共享视频将在这里动态添加 */}
          </div>

          {/* 摄像头小窗容器 - 固定在右上角 */}
          <div
            id="remoteCameraContainer"
            ref={remoteCameraContainer}
            className={`absolute top-4 right-4 z-10 w-1/4 aspect-video ${showCameraOverlay ? 'block' : 'hidden'
              }`}
          >
            {/* 摄像头视频将在这里动态添加 */}
          </div>

          {/* 摄像头小窗开关按钮 */}
          <Button
            type="button"
            onClick={() => setShowCameraOverlay(!showCameraOverlay)}
            className={`absolute top-4 right-4 z-20 p-2 rounded-full ${showCameraOverlay ? 'bg-green-500' : 'bg-gray-500'
              } text-white`}
            title={showCameraOverlay ? '隐藏摄像头小窗' : '显示摄像头小窗'}
            size="icon"
          >
            <CameraIcon className="w-4 h-4" />
          </Button>

          {/* 闭门标识显示 - 移到视频区域顶部 */}
          {isPrivateClass && (
            <div className="absolute top-4 left-4 z-20 flex items-center px-3 py-1 bg-purple-100 text-purple-800 rounded-full shadow-md" title="闭门会议（仅限学员进入）">
              <LockClosedIcon className="w-4 h-4 mr-1" />
              <span className="text-xs font-medium">闭门会议</span>
            </div>
          )}
        </div>

      {/* 消息和控制面板列 */}
      <div className={`${showVideo ? `${isLandscape ? 'w-96 flex-none h-screen' : 'w-full h-[calc(100vh-300px)]'}` : 'h-full'} md:w-96 md:flex-none flex flex-col overflow-hidden ${isLandscape ? 'max-h-screen' : ''}`}>
        {/* 消息区域 */}
        {/* 消息列表 - 填充剩余空间 */}
        <MessageList messages={messageList} />

        {/* 底部固定区域 */}
        <div className="bg-white shadow-lg p-4">
          {/* 控制面板 */}
          <div className="p-2 flex flex-col gap-3 mb-1 border-b border-gray-200">
            <div className="flex flex-wrap gap-2">
              {/* {role === Role.Teacher && (
              )} */}
              <Button
                type="button"
                onClick={() => setShowVideo(!showVideo)}
                className={`p-2 rounded-full ${showVideo ? 'bg-gray-500' : 'bg-gray-300'} text-white`}
                title={showVideo ? '隐藏视频' : '显示视频'}
                size="icon"
                variant="ghost"
              >
                <VideoCameraIcon className="w-4 h-4" />
              </Button>
              {role === Role.Teacher && (
                <>
                  <Button
                    type="button"
                    onClick={toggleCamera}
                    className={`p-2 rounded-full ${isCameraOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
                    title={isCameraOn ? '关闭摄像头' : '开启摄像头'}
                    size="icon"
                    variant="ghost"
                  >
                    <CameraIcon className="w-4 h-4" />
                  </Button>
                  <Button
                    type="button"
                    onClick={toggleAudio}
                    className={`p-2 rounded-full ${isAudioOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
                    title={isAudioOn ? '关闭麦克风' : '开启麦克风'}
                    size="icon"
                    variant="ghost"
                  >
                    <MicrophoneIcon className="w-4 h-4" />
                  </Button>

                  <Button
                    type="button"
                    onClick={toggleScreenShare}
                    className={`p-2 rounded-full ${isScreenSharing ? 'bg-green-500' : 'bg-blue-500'} text-white`}
                    title={isScreenSharing ? '停止共享' : '共享屏幕'}
                    size="icon"
                    variant="ghost"
                  >
                    <ShareIcon className="w-4 h-4" />
                  </Button>
                </>
              )}
              {role === Role.Teacher && shareLink && (
                <Button
                  type="button"
                  onClick={() => setShowShareLink(!showShareLink)}
                  className="p-2 rounded-full bg-blue-500 text-white"
                  title="分享链接"
                  size="icon"
                  variant="ghost"
                >
                  <ClipboardDocumentIcon className="w-4 h-4" />
                </Button>
              )}


              {/* 横屏按钮 - 仅在移动设备上显示 */}
              {isMobileDevice() && (
                <Button
                  type="button"
                  onClick={toggleLandscape}
                  className={`p-2 rounded-full ${isLandscape ? 'bg-green-500' : 'bg-blue-500'} text-white touch-manipulation`}
                  title={isLandscape ? '退出横屏' : '进入横屏'}
                  size="icon"
                  variant="ghost"
                >
                  {isLandscape ? (
                    <ArrowsPointingInIcon className="w-4 h-4" />
                  ) : (
                    <ArrowsPointingOutIcon className="w-4 h-4" />
                  )}
                </Button>
              )}

              {/* 图片选择按钮 */}
              <ImageSelectorButton />

              {/* 角色特定按钮 */}
              {role === Role.Teacher && (
                <>
                  <TeacherClassControlButton />
                  <TeacherStudentManagementButton />
                  <TeacherHandUpManagementButton />
                  <TeacherQuestionManagementButton />
                  <AllMuteToggleButton />
                </>
              )}

              {/* {role === Role.Student && (
                <>
                  <StudentHandUpButton />
                  <StudentQuestionButton />
                </>
              )} */}
            </div>

            {showShareLink && shareLink && (
              <Card className="bg-blue-50 p-2">
                <CardContent className="p-0">
                  <div className="flex items-center gap-1">
                    <input
                      type="text"
                      value={shareLink}
                      readOnly
                      className="flex-1 text-xs border rounded px-2 py-1 truncate"
                    />
                    <Button
                      type="button"
                      onClick={() => navigator.clipboard.writeText(shareLink)}
                      className="p-2 bg-blue-500 text-white rounded"
                      title="复制链接"
                      size="icon"
                    >
                      <ClipboardDocumentIcon className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* 角色特定内容 - 保留原有功能 */}
            {/* <div className="flex-1 overflow-y-auto">
              {children}
            </div> */}
          </div>

          {/* 消息输入框 */}
          <div className="relative mt-2">
            <Textarea
              value={msgText}
              onChange={(e) => setMsgText(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault();
                  sendMessage();
                }
              }}
              className="w-full pr-10"
              placeholder="输入消息..."
              rows={3}
            />
            <Button
              type="button"
              onClick={sendMessage}
              className="absolute right-2 bottom-2 p-1 bg-blue-500 text-white rounded-full"
              size="icon"
            >
              <PaperAirplaneIcon className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </div>


    </div>
  );
};