/**
 * General Stream WebRTC Page
 * 
 * Ultra-low latency translation streaming using WebRTC (<500ms)
 * Replaces HLS-based streaming with real-time WebRTC technology
 * 
 * Based on: WEBRTC_INTEGRATION_GUIDE.md
 */

import { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Alert, Modal } from 'antd';
import axios from 'axios';
import dayjs from 'dayjs';
import useDarkMode from '../../hooks/useDarkMode';
import ThemeContext from '../../contexts/themeContext';
import PageWrapper from '../../layout/PageWrapper/PageWrapper';
import Page from '../../layout/Page/Page';
import { useAuth } from '../../contexts/authContext';
import SubHeader, { SubHeaderLeft, SubHeaderRight } from '../../layout/SubHeader/SubHeader';
import { TGeneralStreamingData, TLivestreamLanguage } from '../../type/livestream-type';
import LivestreamService from '../../services/LivestreamService';
import showNotificationCustom from '../../components/extras/showNotificationCustom';
import WebRTCPlayer from '../../components/livestream/WebRTCPlayer';
import Select from '../../components/bootstrap/forms/Select';
import Option from '../../components/bootstrap/Option';
import { streamspacePagesMenu } from '../../menu';
import { Apis } from '../../constants/Apis';
import CommentsViewersGeneralComponent from '../../components/livestream/CommentsViewersGeneralComponent';
import { WebRTCConsumer, type TranslatorInfo } from '../../utils/webrtc-consumer';
import { isProgramLiveAt } from '../../utils/program-time';
import Spinner from '../../components/bootstrap/Spinner';
import Card, { CardBody, CardHeader, CardTitle } from '../../components/bootstrap/Card';

const GeneralStreamWebRTC = () => {
  const { mobileDesign } = useContext(ThemeContext);
  const { themeStatus } = useDarkMode();
  const { username } = useParams();
  const { userData } = useAuth();

  const [vsUser, setVsUser] = useState<any>({});
  const [streamSpaceData, setStreamSpaceData] = useState<TGeneralStreamingData>();
  const [hasProgram, setHasProgram] = useState(false);
  const [activeTranslators, setActiveTranslators] = useState<TranslatorInfo[]>([]);
  const [selectedTranslator, setSelectedTranslator] = useState<TranslatorInfo | null>(null);
  const [selectedLanguage, setSelectedLanguage] = useState<string>('');
  const [modalOpen, setModalOpen] = useState(false);
  const [spaceUsername, setSpaceUsername] = useState<string | undefined>(
    username ? username : userData?.username
  );
  const [isLoadingTranslators, setIsLoadingTranslators] = useState(true);
  const [translatorError, setTranslatorError] = useState<string | null>(null);
  const [showLatencyInfo, setShowLatencyInfo] = useState(false);
  const [testMode, setTestMode] = useState(false);

  // Test translators for development/testing
  const testTranslators: TranslatorInfo[] = [
    {
      id: "69075dfdd06430e3c53cff74",
      fullName: "Test Translator",
      language: "german",
      languageLabel: "German",
      country: "Germany",
      profileImage: "",
      isTranslating: true,
      isConnected: false,
      translationStartedAt: new Date().toISOString(),
      lastLoginAt: null
    },
    {
      id: "test-spanish-id",
      fullName: "Test Translator - Spanish",
      language: "spanish",
      languageLabel: "Spanish",
      country: "Spain",
      profileImage: "",
      isTranslating: true,
      isConnected: false,
      translationStartedAt: new Date().toISOString(),
      lastLoginAt: null
    }
  ];

  const isVsOwner = () => {
    return userData?.email === vsUser?.email ? true : false;
  };

  const fetchVSUser = async () => {
    try {
      const response = await axios.get(
        `${Apis.DATABASE_API_URL}/getUserByUsername/${username}`
      );

      if (response.data.success) {
        setVsUser(response.data.data);
      } else {
      }
    } catch (error) {
      console.error(error);
    } finally {
    }
  };

  /**
   * Fetch active translators from WebRTC backend
   */
  const fetchActiveTranslators = async () => {
    try {
      setIsLoadingTranslators(true);
      setTranslatorError(null);

      // Use test data if in test mode
      if (testMode) {
        console.log('[WebRTC] Using test translators');
        setActiveTranslators(testTranslators);
        const firstTranslator = testTranslators[0];
        setSelectedTranslator(firstTranslator);
        setSelectedLanguage(firstTranslator.language || 'english');
        setIsLoadingTranslators(false);
        showNotificationCustom(
          'Test Mode',
          'Using test translators for development',
          'info',
          'top-center'
        );
        return;
      }

      const translators = await WebRTCConsumer.getActiveTranslators();
      console.log('[WebRTC] Active translators:', translators);

      setActiveTranslators(translators);

      // Auto-select first translator if available
      if (translators.length > 0) {
        const firstTranslator = translators[0];
        setSelectedTranslator(firstTranslator);
        // Use language from translator, fallback to 'english' if not provided
        setSelectedLanguage(firstTranslator.language || 'english');
        console.log('[WebRTC] Auto-selected translator:', firstTranslator);
      } else {
        setTranslatorError('No active translators found. Kindly wait until the Translators start the Live Translation.');
      }

      setIsLoadingTranslators(false);
    } catch (error: any) {
      console.error('[WebRTC] Failed to fetch translators:', error);
      
      // Show detailed error with CORS info
      let errorMessage = error.message || 'Failed to load translators';
      
      if (error.message.includes('CORS')) {
        errorMessage = `🚫 CORS Error\n\n${error.message}\n\n💡 Solution:\n• Use Test Mode (button above) for local development\n• Or configure backend CORS to allow: ${window.location.origin}`;
      } else if (process.env.NODE_ENV === 'development') {
        errorMessage = `${errorMessage}\n\nAPI: https://ministryprogs.tniglobal.org/webrtc/public/active-translators\n\n💡 Tip: Click "Enable Test Mode" above to continue testing`;
      }
      
      setTranslatorError(errorMessage);
      setIsLoadingTranslators(false);
      
      // Show notification
      showNotificationCustom(
        'Connection Error',
        error.message.includes('CORS') ? 'CORS Error - Use Test Mode' : 'Unable to connect to translation server',
        'danger',
        'top-center'
      );
    }
  };

  const fetchUpcomingProgramWithLanguages = async () => {
    try {
      const response = await LivestreamService.fetchUpcomingProgramWithLanguages();

      if (response.success) {
        setStreamSpaceData({
          program: response.data,
          language_registrations: response.data.language_registrations,
        });

        const programIsLive = isProgramLiveAt(response.data.start);
        setHasProgram(programIsLive);
        setModalOpen(!programIsLive);
      } else {
        setHasProgram(false);
        setModalOpen(false);
        showNotificationCustom('Notice', response.message.text, 'info', 'bottom-center');
      }
    } catch (error) {
      console.error(error);
      setHasProgram(false);
      setModalOpen(false);
    } finally {
    }
  };

  /**
   * Handle translator/language selection
   */
  const handleTranslatorChange = (translatorId: string) => {
    const translator = activeTranslators.find((t) => t.id === translatorId);
    if (translator) {
      console.log('[WebRTC] Switching to translator:', translator);
      setSelectedTranslator(translator);
      // Use language from translator, fallback to 'english' if not provided
      setSelectedLanguage(translator.language || 'english');
    }
  };

  /**
   * Refresh translator list
   */
  const refreshTranslators = () => {
    fetchActiveTranslators();
  };

  useEffect(() => {
    fetchVSUser();
    fetchUpcomingProgramWithLanguages();
    fetchActiveTranslators();

    // Refresh translator list every 30 seconds
    const interval = setInterval(() => {
      fetchActiveTranslators();
    }, 30000);

    return () => clearInterval(interval);
  }, []);

  return (
    <PageWrapper isProtected title="General Stream - WebRTC">
      <SubHeader>
        <SubHeaderLeft>
          <div className="me-2 mt-3 fw-bold">
            <p className="fle-text-pink">
              General Stream
            </p>
          </div>
        </SubHeaderLeft>
        <SubHeaderRight>
          <div className="d-flex align-items-center">
            <span className="me-3">{dayjs().format('MMM D')}</span>
            {process.env.NODE_ENV === 'development' && (
              <button
                className={`btn btn-sm me-2 ${testMode ? 'btn-warning' : 'btn-outline-secondary'}`}
                onClick={() => {
                  setTestMode(!testMode);
                  // Refresh translators with new mode
                  setTimeout(() => fetchActiveTranslators(), 100);
                }}
              >
                {testMode ? '⚠️ Test Mode ON' : '🧪 Enable Test Mode'}
              </button>
            )}
          </div>
        </SubHeaderRight>
      </SubHeader>

      <Page container="fluid">
        <div className="pt-3 pb-5">
          {/* Development CORS Notice */}
          {process.env.NODE_ENV === 'development' && !testMode && (
            <Alert
              message="🔧 Development Mode Notice"
              description={
                <div>
                  <p>You're running on <strong>{window.location.origin}</strong></p>
                  <p>If you encounter CORS errors, the backend may not be configured to accept requests from this origin.</p>
                  <p><strong>Quick Solution:</strong> Click the "🧪 Enable Test Mode" button above to use mock data for testing.</p>
                </div>
              }
              type="info"
              showIcon
              closable
              className="mb-4"
            />
          )}

          {/* Translator Selection */}
          {isLoadingTranslators ? (
            <div className="text-center mb-4">
              <Spinner size="2rem" color="info" />
              <div className="mt-2 text-info">Loading active translators...</div>
            </div>
          ) : translatorError ? (
            <Alert
              message="Unable to Load Translators"
              description={
                <div>
                  <p style={{ whiteSpace: 'pre-line' }}>{translatorError}</p>
                  <div className="mt-3">
                    <button className="btn btn-sm btn-primary me-2" onClick={refreshTranslators}>
                      🔄 Retry Connection
                    </button>
                    {process.env.NODE_ENV === 'development' && !testMode && (
                      <button 
                        className="btn btn-sm btn-warning"
                        onClick={() => {
                          setTestMode(true);
                          fetchActiveTranslators();
                        }}
                      >
                        🧪 Use Test Mode
                      </button>
                    )}
                  </div>
                </div>
              }
              type="warning"
              showIcon
              className="mb-4"
            />
          ) : activeTranslators.length > 0 ? (
            <Card className="mb-4">
              <CardHeader>
                <CardTitle>
                  <div className="d-flex justify-content-between align-items-center">
                    <span>Select Translation Language</span>
                    <button
                      className="btn btn-sm btn-light"
                      onClick={refreshTranslators}
                      title="Refresh translator list"
                    >
                      🔄 Refresh
                    </button>
                  </div>
                </CardTitle>
              </CardHeader>
              <CardBody>
                <Select
                  ariaLabel="Select Translator"
                  placeholder="Choose a translator"
                  onChange={(e: any) => {
                    handleTranslatorChange(e.target.value);
                  }}
                  value={selectedTranslator?.id || ''}
                >
                  {activeTranslators.map((translator) => (
                    <Option key={translator.id} value={translator.id}>
                      {`${translator.languageLabel || translator.language || 'Unknown Language'}${translator.isTranslating ? ' 🔴 LIVE' : ''}`}
                    </Option>
                  ))}
                </Select>

                {selectedTranslator && (
                  <div className="mt-3 p-3 bg-light rounded">
                    <div className="row">
                      <div className="col-md-2">
                        {selectedTranslator.profileImage && (
                          <img
                            src={selectedTranslator.profileImage}
                            alt={selectedTranslator.fullName}
                            style={{
                              width: '60px',
                              height: '60px',
                              borderRadius: '50%',
                              objectFit: 'cover',
                            }}
                          />
                        )}
                      </div>
                      <div className="col-md-10">
                        {selectedTranslator.fullName && selectedTranslator.fullName.trim() !== '' && (
                          <h6 className="mb-1">
                            {selectedTranslator.fullName.split(' ')
                              .filter(name => name.length > 0)
                              .map(name => name.charAt(0).toUpperCase())
                              .join('')}
                          </h6>
                        )}
                        <p className="mb-1 text-muted">
                          <strong>Language:</strong> {selectedTranslator.languageLabel || selectedTranslator.language || 'Not specified'}
                        </p>
                        {selectedTranslator.isTranslating && (
                          <span className="badge" style={{ 
                            backgroundColor: '#dc3545', 
                            color: 'white', 
                            fontSize: '0.95em', 
                            padding: '0.4em 0.6em',
                            display: 'inline-flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                          }}>
                            <span style={{ color: '#00ff00', fontSize: '1.3em', marginRight: '0.3em', lineHeight: '1' }}>●</span>
                            <span style={{ fontSize: '1em', lineHeight: '1' }}>Translating Live</span>
                          </span>
                        )}
                      </div>
                    </div>
                  </div>
                )}
              </CardBody>
            </Card>
          ) : (
            <Alert
              message="No Active Translators"
              description="There are currently no translators streaming. Please check back during live events."
              type="info"
              showIcon
              className="mb-4"
            />
          )}

          {/* WebRTC Player */}
          {selectedTranslator && selectedLanguage && (
            <div className="mt-4 mb-5 p-2 bg-dark rounded">
              <WebRTCPlayer
                translatorId={selectedTranslator.id}
                language={selectedLanguage}
                autoPlay={true}
                controls={true}
                muted={false}
                onError={(error) => {
                  console.error('[Page] WebRTC Player error:', error);
                  showNotificationCustom(
                    'Streaming Error',
                    error.message || 'Failed to connect to translator stream',
                    'danger',
                    'top-center'
                  );
                }}
                onConnected={() => {
                  console.log('[Page] WebRTC Player connected successfully');
                  const langLabel = selectedTranslator.languageLabel || selectedTranslator.language || 'translation';
                  showNotificationCustom(
                    'Connected',
                    `Now streaming ${langLabel} translation with ultra-low latency`,
                    'success',
                    'bottom-center'
                  );
                }}
                onDisconnected={() => {
                  console.log('[Page] WebRTC Player disconnected');
                }}
              />
            </div>
          )}

          <div className='mb-4 d-flex flex-wrap gap-2 justify-content-center justify-content-md-start'>
            <a
              href='https://tniglobal.org/give'
              target='_blank'
              rel='noreferrer'
              className='btn btn-success fw-bold d-inline-flex justify-content-center align-items-center'
              style={{ minWidth: '220px' }}>
              Give
            </a>
            <a
              href='https://tniglobal.org/members'
              target='_blank'
              rel='noreferrer'
              className='btn btn-primary fw-bold d-inline-flex justify-content-center align-items-center'
              style={{ minWidth: '220px' }}>
              Join TNI
            </a>
            <a
              href='https://tniglobal.org/salvation.php'
              target='_blank'
              rel='noreferrer'
              className='btn fle-bg-coral fle-text-white fw-bold d-inline-flex justify-content-center align-items-center'
              style={{ minWidth: '220px' }}>
              Prayer of Salvation
            </a>
          </div>

          {/* Comments and Viewers Section */}
          <div>
            <CommentsViewersGeneralComponent
              vsUsername={spaceUsername}
              reference="generalstream_webrtc"
            />
          </div>

          {/* Program Info Modal */}
          <Modal
            title={<p className="text-info fw-bold h4">Program Information</p>}
            centered
            open={modalOpen}
            onOk={() => setModalOpen(false)}
            onCancel={() => setModalOpen(false)}
          >
            <p className="text-muted fw-bold">Upcoming program:</p>
            <p className="text-danger fw-bold">{streamSpaceData?.program.title}</p>

            <Alert
              message="You are watching live WebRTC translation feeds with ultra-low latency"
              type="success"
              showIcon
            />
          </Modal>


        </div>
      </Page>
    </PageWrapper>
  );
};

export default GeneralStreamWebRTC;