import { useContext, useEffect, useMemo, useState } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Alert, Card, List, Modal, Tag } from 'antd';
import { DeleteOutlined,} from '@ant-design/icons';
import axios from 'axios';
import dayjs from 'dayjs';
import { useAuth } from '../../contexts/authContext';
import useDarkMode from '../../hooks/useDarkMode';
import ThemeContext from '../../contexts/themeContext';
import PageWrapper from '../../layout/PageWrapper/PageWrapper'
import Page from '../../layout/Page/Page';
import SubHeader, { SubHeaderLeft, SubHeaderRight } from '../../layout/SubHeader/SubHeader';
import { TChannel, TLivestreamLanguage, TProgram, TStreamingData, TStreamingLanguage,} from '../../type/livestream-type';
import LivestreamService from '../../services/LivestreamService';
import showNotificationCustom from '../../components/extras/showNotificationCustom';
import Select from '../../components/bootstrap/forms/Select';
import Option from '../../components/bootstrap/Option';
import { streamspacePagesMenu } from '../../menu';
import CommentsViewersComponent from '../../components/livestream/CommentsViewersComponent';
import { Apis } from '../../constants/Apis';
import VideojsPlayerComponent from '../../components/videojs/VideojsPlayerComponent';
import Button from '../../components/bootstrap/Button';
import ManageLanguages from '../../components/livestream/ManageLanguages';
import { useEventEmitter } from '../../emitters/use-event-emitter';
import { formatProgramStart, isProgramLiveAt } from '../../utils/program-time';

const initialLink = "https://2nbyjxnbl53k-hls-live.5centscdn.com/RTV/59a49be6dc0f146c57cd9ee54da323b1.sdp/playlist.m3u8"
//'https://2nbyjxnbl53k-hls-live.5centscdn.com/RTV/59a49be6dc0f146c57cd9ee54da323b1.sdp/playlist.m3u8';
 
const MyStream = () => {

	const { mobileDesign } = useContext(ThemeContext);
	const { themeStatus } = useDarkMode();
  const location = useLocation();
	const { username } = useParams();
	const {userData} = useAuth();
  const initialFeedTestMode = useMemo(() => new URLSearchParams(location.search).get('feedTest') === '1', [location.search]);
	
	const [vsUser, setVsUser] = useState<any>({});
  const [streamSpaceData, setStreamSpaceData] = useState<TStreamingData>();
  const [hasProgram, setHasProgram] = useState(false);
  const [channels, setChannels] = useState<TChannel[]>([]);
  const [modalOpen, setModalOpen] = useState(false);
  const [langModalOpen, setLangModalOpen] = useState(false);
  const [spaceUsername, setSpaceUsername] = useState<string | undefined>(username ? username : userData?.username);
  const [videoJsOptions, setVideoJsOptions] = useState({src: initialLink, type: 'application/x-mpegURL'});
  const [progWithLanguages, setProgWithLanguages] = useState<TProgram>();
  const [feedStatus, setFeedStatus] = useState<'checking' | 'healthy' | 'unavailable'>('healthy');
  const [feedMessage, setFeedMessage] = useState('');
  const [forceFeedTestMode, setForceFeedTestMode] = useState(initialFeedTestMode);
	
	const isVsOwner = () => {
		return userData?.email === vsUser?.email? true : false;
	}

  const isSuperAdmin = () => userData?.role === 'superadmin';

  const showStreamingLanguages = hasProgram || forceFeedTestMode;

  const { eventData } = useEventEmitter<{ data: string }>("langdded");

  const applyProgramTiming = (programData: any) => {
    setStreamSpaceData({ program: programData, streaming_languages: programData.streaming_languages });

    const isProgramLive = isProgramLiveAt(programData?.start);
    const findEnglish = programData.streaming_languages.find(
      (lang: TStreamingLanguage) => lang.language_registration.language === 'English',
    );

    if (isProgramLive) {
      if (findEnglish) {
        handleChange(findEnglish.language_registration.streaming_link);
      } else if (programData.streaming_languages.length > 0) {
        handleChange(programData.streaming_languages[0].language_registration.streaming_link);
      }

      setHasProgram(true);
      setModalOpen(false);
      setFeedStatus('checking');
      setFeedMessage('');
      return;
    }

    if (forceFeedTestMode) {
      if (findEnglish) {
        handleChange(findEnglish.language_registration.streaming_link);
      } else if (programData.streaming_languages.length > 0) {
        handleChange(programData.streaming_languages[0].language_registration.streaming_link);
      }

      setHasProgram(false);
      setModalOpen(false);
      setFeedStatus('checking');
      setFeedMessage('');
      return;
    }

    setHasProgram(false);
    setModalOpen(true);
    setFeedStatus('healthy');
    setFeedMessage('');
    handleChange(initialLink);
   
  };

  const refreshStreamingLanguages = async (user: any) => {
    try {
      const response = await LivestreamService.fetchStreamingLanguages(user.id);

      if (response.success) {
        applyProgramTiming(response.data);
      } else {
        setHasProgram(false);
        setModalOpen(false);
        showNotificationCustom('Notice', response.message.text, 'info', 'bottom-center');
      }

      setLangModalOpen(false);
      return response;
    } catch (error) {
      console.error(error);
      setHasProgram(false);
      setModalOpen(false);
    }
  };

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

			if (response.data.success) {
				setVsUser(response.data.data);

        await refreshStreamingLanguages(response.data.data);
			} else {}
      
    } catch (error) {
      console.error(error);
    } finally {
    }

  }

  const fetchChannels = async () => {
    try {
      const response = await LivestreamService.fetchChannels();
      
      if (response.success) {
        setChannels(response.data)
      } 

    } catch (error) {
      console.error(error);
    } finally {
    }
  };

	useEffect(() => {
    fetchChannels();

		initialize();
	}, []);

  useEffect(() => {
    if (vsUser?.id) {
      refreshStreamingLanguages(vsUser);
    }
  }, [eventData]);

  useEffect(() => {
    if (vsUser?.id) {
      refreshStreamingLanguages(vsUser);
    }
  }, [forceFeedTestMode]);


  /////////////////////////////////////////////////////////

  const handleChange = (link: string) => {
    setFeedStatus('checking');
    setFeedMessage('');
    setVideoJsOptions({src: link, type: 'application/x-mpegURL'})
  }

  const selectedLanguageName = useMemo(() => {
    if (!streamSpaceData?.streaming_languages?.length) {
      return 'selected language';
    }

    const selectedLanguage = streamSpaceData.streaming_languages.find(
      (lang) => lang.language_registration.streaming_link === videoJsOptions.src,
    );

    return selectedLanguage?.language_registration.language || 'selected language';
  }, [streamSpaceData, videoJsOptions.src]);

  const handleFeedStatusChange = (status: 'checking' | 'healthy' | 'unavailable', message?: string) => {
    setFeedStatus(status);
    setFeedMessage(message || '');
  };

  const getFeedTagColor = (status?: string) => {
    switch (status) {
      case 'healthy':
        return 'success';
      case 'starting':
        return 'processing';
      case 'offline':
        return 'error';
      default:
        return 'default';
    }
  };

  const getLanguageOptionLabel = (languageRegistration: TLivestreamLanguage) => {
    if (languageRegistration.feed_status === 'offline') {
      return `${languageRegistration.language} - 🔴 Translation feed not yet available`;
    }

    if (languageRegistration.feed_status === 'starting') {
      return `${languageRegistration.language} - 🟡 Translator starting`;
    }

    return `${languageRegistration.language} - 🟢 Translator available`;
  };

  const handleAddLanguage = async () => {
    try {
      if (streamSpaceData) {
        const response = await LivestreamService.fetchAvailableLanguages(streamSpaceData.program.id);
      
        if (response.success) {
          setProgWithLanguages(response.data);
          setLangModalOpen(true);
          
        }
      }
      

    } catch (error) {
      console.error(error);
    } finally {
    }
  }

  const deleteLanguage = async (id: number) => {
    try {
      if (streamSpaceData) {
        const response = await LivestreamService.deleteStreamingLanguages(id);
      
        if (response.success) {
          refreshStreamingLanguages(vsUser);
          showNotificationCustom('Notice', response.message.text, 'info', 'bottom-center');
          
        }
      }
      

    } catch (error) {
      console.error(error);
    } finally {
    }
  }
	

	return (
		<PageWrapper title={streamspacePagesMenu.mystream.text}>
			<SubHeader>
				<SubHeaderLeft>
					<div className='text-muted fw-bold'>
							Virtual space Owner:						
					</div>
				</SubHeaderLeft>
				<SubHeaderRight>
          <div className='fle-text-pink fw-bold'>
            {`${vsUser?.firstname} ${vsUser?.lastname}`}						
					</div>
				</SubHeaderRight>

        <p className='fw-bold text-danger'>
          {`https://livestream.tniglobal.org/${vsUser?.username}/mystream`}
        </p>
			</SubHeader>

			<Page container='fluid'>
      <div className='mb-4'>
        {isVsOwner() && showStreamingLanguages && (
          <Card style={{ marginTop: 16 }} type="inner" title="Your Streaming Languages">
            <div className="my-2">
              <Button className="text-right" color="primary" onClick={handleAddLanguage}>
                Add Language
              </Button>
            </div>
            <table className="table">
              <tbody>
                {streamSpaceData?.streaming_languages.map((lang: any) => (
                  <tr key={lang.id}>
                    <td> {lang.language_registration.language} </td>
                    <td>
                      {lang.language_registration.language === 'English' ? (
                        <p className='text-success fw-bold'>Default language</p>
                      ) : (
                        <DeleteOutlined style={{ fontSize: '20px', color: 'red' }} onClick={() => deleteLanguage(lang.id)} />
                      )}
                    </td>
                  </tr>
                ))}
                
              </tbody>
            </table>
            
          </Card>
        )}
      </div>

				<div className='pt-3 pb-5'>
					{isSuperAdmin() && (
            <div className='mb-3 d-flex align-items-center gap-2'>
              <Button
                color={forceFeedTestMode ? 'warning' : 'light'}
                size='sm'
                icon={forceFeedTestMode ? 'ToggleOn' : 'ToggleOff'}
                onClick={() => setForceFeedTestMode((prev) => !prev)}
              >
                Feed Test Mode: {forceFeedTestMode ? 'ON' : 'OFF'}
              </Button>
              <small className='text-muted'>Superadmin only</small>
            </div>
          )}

          {forceFeedTestMode && !hasProgram && (
            <Alert
              className='mb-3'
              type='info'
              showIcon
              message='Feed Test Mode Active'
              description='Program is not yet live, but translator feeds are exposed for testing. If a selected feed is unavailable, viewers will see the risk-management message below instead of assuming the platform failed.'
            />
          )}

					{showStreamingLanguages && feedStatus === 'unavailable' && (
            <Alert
              className='mb-3'
              type='warning'
              showIcon
              message={`Translator feed unavailable for ${selectedLanguageName}`}
                  description={feedMessage || 'Translation feed not yet available. Please select another language while the translator comes online.'}
            />
          )}

					{showStreamingLanguages && feedStatus === 'checking' && (
            <Alert
              className='mb-3'
              type='info'
              showIcon
              message='Checking translator feed'
              description='Please wait while we validate the selected translator stream.'
            />
          )}

					{showStreamingLanguages ? (
            <>
              <div className='mb-3 d-flex flex-wrap gap-2'>
                {streamSpaceData?.streaming_languages.map((lang) => (
                  <Tag key={`feed-status-${lang.id}`} color={getFeedTagColor(lang.language_registration.feed_status)}>
                    {lang.language_registration.language}: {lang.language_registration.feed_status_label || 'Unknown'}
                  </Tag>
                ))}
              </div>

              <Select
                ariaLabel='Languages'
                placeholder='Select a language'
                onChange={(e: any) => {
                  handleChange(e.target.value)
                }}
                value={videoJsOptions.src}
              >
                {streamSpaceData?.streaming_languages.map((lang) => (
                  <Option
                    key={lang.id}
                    value={lang.language_registration.streaming_link}
                    disabled={lang.language_registration.feed_status === 'offline'}>
                    {getLanguageOptionLabel(lang.language_registration)}
                  </Option>
                ))}
              </Select>
            </>

					) : (
						<Select
              ariaLabel='Channels'
              placeholder='Select a channel'
              onChange={(e: any) => {
                handleChange(e.target.value)
              }}
              value={videoJsOptions.src}
            >
              {channels.map((channel) => (
                <Option key={channel.id} value={channel.value}>
                  {channel.label}
                </Option>
              ))}
            </Select>
          )}

          <div className='mt-1 mb-5 p-2 bg-dark'>
            {showStreamingLanguages && feedStatus === 'unavailable' ? (
              <Card className='border-0 shadow-sm'>
                <div className='p-4 text-center'>
                  <h5 className='text-danger fw-bold mb-2'>Translator feed currently unavailable</h5>
                  <p className='text-primary mb-0'>
                    We are not receiving signal for <span className='fw-bold text-danger'>{selectedLanguageName}</span> at the moment.
                    Please select another available language and try again shortly.
                  </p>
                </div>
              </Card>
            ) : (
              <VideojsPlayerComponent
                selectedLink={videoJsOptions.src}
                type={videoJsOptions.type}
                onFeedStatusChange={handleFeedStatusChange}
              />
            )}
          </div>

          <div>
            <CommentsViewersComponent vsUsername={spaceUsername} reference="streamspace" />
          </div>

      <Modal
        title={<p className='text-info fw-bold h4'> Kindly notice</p>}
          centered open={modalOpen} onOk={() => setModalOpen(false)} onCancel={() => setModalOpen(false)}
        >
        <p className='text-muted fw-bold'>You have 1 upcoming program: </p>
        <p className='text-danger fw-bold'> {streamSpaceData?.program.title} </p>
        <p className='text-muted'>
          Start Date: <span className='fw-bold'>{formatProgramStart(streamSpaceData?.program?.start)}</span>
        </p>

        <p className='text-muted fw-bold'> Languages you have selected to stream on your space: </p>
        <List size="small" bordered dataSource={streamSpaceData?.streaming_languages} className='mb-4'
          renderItem={(item) => <List.Item>{item.language_registration.language}</List.Item>}
        />

        <Alert message="Until the program goes live, you are watching Loveworld channels"
          type="success" showIcon className=''
        />
      </Modal>

      <Modal
        title={<p className='text-info fw-bold mb-3'> {progWithLanguages?.title} </p>}
          centered open={langModalOpen} onOk={() => setLangModalOpen(false)} onCancel={() => setLangModalOpen(false)}
          footer={(_, { CancelBtn }) => (
            <>
              <CancelBtn />
            </>
          )}
        >
          <ManageLanguages program={progWithLanguages} />
        
      </Modal>

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

export default MyStream;