import React, { useState, useEffect } from 'react';
import './BotaoVideoPaciente.css';
import { FaVideo, FaExpand, FaCompress, FaPhoneSlash, FaPhone } from 'react-icons/fa'; 
import { JitsiMeeting } from '@jitsi/react-sdk';
import { db } from '../firebaseConfig'; 
import { ref, onValue, remove } from "firebase/database"; 

// ID DO PACIENTE
const MEU_ID_PACIENTE = '1'; // Deve ser '1' para bater com o do médico

const BotaoVideoPaciente = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [callActive, setCallActive] = useState(false);
  const [roomName, setRoomName] = useState('');
  const [incomingCallData, setIncomingCallData] = useState(null); 
  const [callerName, setCallerName] = useState(''); 

  // "Ouvinte" do Firebase
  useEffect(() => {
    const callRef = ref(db, `calls/paciente-${MEU_ID_PACIENTE}`);
    const unsubscribe = onValue(callRef, (snapshot) => {
      const data = snapshot.val();
      if (data && data.incomingCall) {
        setIncomingCallData(data.incomingCall);
        setCallerName(data.incomingCall.fromName);
        setIsOpen(true); 
      } else {
        setIncomingCallData(null);
        setCallActive(false); 
      }
    });
    return () => unsubscribe();
  }, []); 

  // UseEffect da tecla "Esc"
  useEffect(() => {
    const handleEscKey = (event) => {
      if (event.key === 'Escape' && isFullScreen) {
        setIsFullScreen(false);
      }
    };
    document.addEventListener('keydown', handleEscKey);
    return () => document.removeEventListener('keydown', handleEscKey);
  }, [isFullScreen]);

  // Função para ATENDER
  const handleAcceptCall = () => {
    if (!incomingCallData) return;
    setRoomName(incomingCallData.roomName);
    setCallActive(true);
    setIncomingCallData(null); 
  };

  // Função para RECUSAR / DESLIGAR
  const handleHangUp = () => {
    const callRef = ref(db, `calls/paciente-${MEU_ID_PACIENTE}`);
    remove(callRef);
    setCallActive(false);
    setRoomName('');
    setCallerName('');
    setIncomingCallData(null);
  };
  
  // Função para fechar a janela
  const toggleVideoChat = () => {
    setIsOpen(!isOpen);
    if (isOpen) { 
      handleHangUp(); 
      setIsFullScreen(false);
    }
  };

  const handleFullScreen = () => {
    setIsFullScreen(!isFullScreen);
  };

  // Renderiza o conteúdo (Ocioso, Recebendo, Em Chamada)
  const renderContent = () => {
    // 1ª Prioridade: Em chamada ativa
    if (callActive) {
      return (
        <div className="call-screen">
          <JitsiMeeting
            roomName={roomName}
            domain="meet.jit.si"
            // Informações do Usuário (Paciente)
            userInfo={{
              displayName: 'Paciente' // Você pode mudar isso
            }}
            // Configurações para pular todas as telas
            configOverwrite={{
              prejoinPageEnabled: false,
              enableWelcomePage: false,
              enableClosePage: false,
              toolbarButtons: [
                'microphone', 'camera', 'hangup', 'chat', 'settings'
              ],
            }}
            // Configurações da Interface
            interfaceConfigOverwrite={{
              SHOW_SUBJECT: false, 
              DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
            }}
            getIFrameRef={(iframe) => { iframe.style.height = '100%'; }}
            onApiReady={(api) => {
              api.on('videoConferenceLeft', handleHangUp);
            }}
          />
        </div>
      );
    }
    
    // 2ª Prioridade: Recebendo uma chamada
    if (incomingCallData) {
      return (
        <div className="incoming-call-screen">
          <p>Chamada recebida de:</p>
          <h3>{callerName || 'Médico'}</h3>
          <div className="incoming-call-actions">
            <button className="decline-btn" onClick={handleHangUp}>
              <FaPhoneSlash size={20} /> Recusar
            </button>
            <button className="accept-btn" onClick={handleAcceptCall}>
              <FaPhone size={20} /> Atender
            </button>
          </div>
        </div>
      );
    }
    
    // 3ª Prioridade: Nenhuma chamada, tela de espera
    return (
      <div className="patient-idle-screen">
        <p>Aguardando chamadas do seu médico...</p>
      </div>
    );
  };

  return (
    <div className="paciente-video-container">
      {isOpen && (
        <div className={`paciente-video-window ${isFullScreen ? 'pseudo-fullscreen' : ''}`}>
          <div className="paciente-video-header">
            <h3>{callActive ? `Em chamada...` : (incomingCallData ? 'Chamada Recebida' : 'Videochamada')}</h3>
            <div className="paciente-video-controls">
              <button onClick={handleFullScreen} className="control-btn fullscreen-btn">
                {isFullScreen ? <FaCompress size={14} /> : <FaExpand size={14} />}
              </button>
              <button onClick={toggleVideoChat} className="control-btn close-btn">
                &times;
              </button>
            </div>
          </div>
          <div className="paciente-video-body">
            {renderContent()}
          </div>
        </div>
      )}
      
      <button 
        className={`paciente-video-button ${incomingCallData ? 'ringing' : ''}`} 
        onClick={toggleVideoChat}
      >
        <FaVideo size={22} color="white" />
      </button>
    </div>
  );
};

export default BotaoVideoPaciente;