import { useState, type SubmitEvent } from 'react';
import { useLoginState, useUIKit } from '@tencentcloud/chat-uikit-react';
import './LoginView.css';

// Languages shown in the switcher. Labels stay in their own language so users
// can always recognize their option regardless of the current UI language.
const LANGUAGES = [
  { value: 'en-US', label: 'English' },
  { value: 'ko-KR', label: '한국인' },
];

interface LoginViewProps {
  language: string;
  onChangeLanguage: (language: string) => void;
}

export function LoginView({ language, onChangeLanguage }: LoginViewProps) {
  const { login } = useLoginState();
  const { t } = useUIKit();
  const [sdkAppId, setSdkAppId] = useState<number>();
  const [userId, setUserId] = useState('');
  const [userSig, setUserSig] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: SubmitEvent) => {
    e.preventDefault();
    setError('');
    if (!sdkAppId || !userId || !userSig) {
      setError(t('demo.error.required'));
      return;
    }

    setLoading(true);
    try {
      await login({ SDKAppID: Number(sdkAppId), userID: userId, userSig });
      // On success, the login gate in App.tsx switches to ChatLayout automatically.
    } catch (err) {
      setError(err instanceof Error ? err.message : t('demo.error.loginFailed'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login">
      <div className="login__lang" role="group" aria-label="Language">
        {LANGUAGES.map(item => (
          <button
            key={item.value}
            type="button"
            className={item.value === language ? 'login__lang-btn login__lang-btn--active' : 'login__lang-btn'}
            onClick={() => onChangeLanguage(item.value)}
          >
            {item.label}
          </button>
        ))}
      </div>

      <form className="login__card" onSubmit={handleSubmit}>
        <h1 className="login__title">{t('demo.appTitle')}</h1>

        <label className="login__field">
          <span>{t('demo.field.sdkAppId')}</span>
          <input
            type="number"
            placeholder={t('demo.placeholder.sdkAppId')}
            value={sdkAppId || ''}
            onChange={e => setSdkAppId(Number(e.target.value))}
          />
        </label>

        <label className="login__field">
          <span>{t('demo.field.userId')}</span>
          <input
            type="text"
            placeholder={t('demo.placeholder.userId')}
            value={userId}
            onChange={e => setUserId(e.target.value)}
          />
        </label>

        <label className="login__field">
          <span>{t('demo.field.userSig')}</span>
          <input
            type="text"
            placeholder={t('demo.placeholder.userSig')}
            value={userSig}
            onChange={e => setUserSig(e.target.value)}
          />
        </label>

        {error && <p className="login__error">{error}</p>}

        <button className="login__submit" type="submit" disabled={loading}>
          {loading ? t('demo.loggingIn') : t('demo.login')}
        </button>
      </form>
    </div>
  );
}

import { useEffect, useRef, useState, type ReactNode } from 'react';
import {
  Chat,
  ChatHeaderH5,
  ChatSettingH5,
  ContactInfoH5,
  ContactListH5,
  ConversationListH5,
  MessageInputH5,
  MessageListH5,
  SearchH5,
  VariantType,
  useChatContext,
  useLoginState,
  useUIKit,
} from '@tencentcloud/chat-uikit-react';
import { IconBulletpoint, IconSearch } from '@tencentcloud/uikit-base-component-react';
import './ChatLayout.css';

type MobileView = 'conversations' | 'chat' | 'contacts' | 'contactInfo' | 'search' | 'setting';

interface ChatLayoutProps {
  onChangeLanguage: (language: string) => void;
}

/** A full-screen view; only the active one is visible (kept mounted for state). */
function Screen({ active, children }: { active: boolean; children: ReactNode }) {
  return (
    <section className="screen" style={{ zIndex: active ? 1 : 0, visibility: active ? 'visible' : 'hidden' }}>
      {children}
    </section>
  );
}

export function ChatLayout({ onChangeLanguage }: ChatLayoutProps) {
  const { activeConversationID, activeConversation, sendMessage, setActiveConversation } = useChatContext();
  const { loginUserInfo, logout } = useLoginState();
  const { t, language } = useUIKit();
  const [activeView, setActiveView] = useState<MobileView>('conversations');
  const [previousView, setPreviousView] = useState<MobileView>('chat');
  const defaultOpenConversationID = 'C2Cadministrator';


  const activeViewRef = useRef(activeView);
  const prevConversationIDRef = useRef(activeConversationID);  
  const sendWelcomeMessageOnce = useRef(false);


  useEffect(() => {
    activeViewRef.current = activeView;
  }, [activeView]);
  
  useEffect(() => {
    const changed = prevConversationIDRef.current !== activeConversationID;
    prevConversationIDRef.current = activeConversationID;
    if (changed && activeConversationID && activeViewRef.current === 'conversations') {
      setActiveView('chat');
    }
  }, [activeConversationID]);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (activeConversation?.conversationID === defaultOpenConversationID && !sendWelcomeMessageOnce.current) {
        sendMessage({
          type: 'textMessage',
          text: `Welcome to the Chat React mobile web application demo!
You can experience the core IM functions in the following order:
1. Send a text message in the input box.
2. The toolbar on the input box supports extended functions such as voice calls, video calls, sending images, videos, and files.
3. If you want to add friends, you can go to the contacts page and click "Add Friends/Group Chat".
`,
        });
        sendWelcomeMessageOnce.current = true;
      }
    }, 1000);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeConversation?.conversationID]);

  const openFromChat = (view: 'search' | 'setting') => {
    setPreviousView(activeView);
    setActiveView(view);
  };

  const handleChatBack = () => {
    setActiveConversation(undefined);
    setActiveView('conversations');
  };

  return (
    <div className="app-shell">
      <Screen active={activeView === 'conversations'}>
        <header className="topbar">
          <span className="topbar__title">
            {t('demo.chats')}{loginUserInfo?.userId ? ` · ${loginUserInfo.userId}` : ''}
          </span>
          <div className="chat-pane__actions">
            <button
              className="topbar__text-btn"
              type="button"
              onClick={() => onChangeLanguage(language === 'zh-CN' ? 'en-US' : 'ko-KR')}
            >
              {language === 'en-US' ? 'EN' : 'KR'}
            </button>
            <button className="topbar__text-btn" type="button" onClick={logout}>{t('demo.logout')}</button>
          </div>
        </header>
        <div className="screen__body">
          <ConversationListH5
            style={{ height: '100%' }}
            onSelectConversation={() => setActiveView('chat')}
          />
        </div>
        <nav className="tabbar">
          <button className="tabbar__item tabbar__item--active" type="button">{t('demo.chats')}</button>
          <button className="tabbar__item" type="button" onClick={() => setActiveView('contacts')}>{t('demo.contacts')}</button>
        </nav>
      </Screen>

      <Screen active={activeView === 'contacts'}>
        <header className="topbar">
          <span className="topbar__title">{t('demo.contacts')}</span>
        </header>
        <div className="screen__body">
          <ContactListH5 onContactItemClick={() => setActiveView('contactInfo')} />
        </div>
        <nav className="tabbar">
          <button className="tabbar__item" type="button" onClick={() => setActiveView('conversations')}>{t('demo.chats')}</button>
          <button className="tabbar__item tabbar__item--active" type="button">{t('demo.contacts')}</button>
        </nav>
      </Screen>

      <Screen active={activeView === 'contactInfo'}>
        <div className="screen__body screen__body--surface">
          <ContactInfoH5
            onClose={() => setActiveView('contacts')}
            onSendMessage={() => setActiveView('chat')}
            onEnterGroup={() => setActiveView('chat')}
          />
        </div>
      </Screen>

      <Screen active={activeView === 'chat'}>
        <Chat className="chat-pane">
          <ChatHeaderH5
            className="chat-pane__header"
            enableUserStatus
            onBack={handleChatBack}
            ChatHeaderRight={(
              <div className="chat-pane__actions">
                <button className="icon-btn" type="button" aria-label={t('demo.search')} onClick={() => openFromChat('search')}>
                  <IconSearch size="20px" />
                </button>
                <button className="icon-btn" type="button" aria-label={t('demo.setting')} onClick={() => openFromChat('setting')}>
                  <IconBulletpoint size="20px" />
                </button>
              </div>
            )}
          />
          <MessageListH5 />
          <MessageInputH5 />
        </Chat>
      </Screen>

      <Screen active={activeView === 'search'}>
        <div className="screen__body">
          <SearchH5
            variant={VariantType.EMBEDDED}
            onBack={() => setActiveView(previousView)}
            onResultItemClick={(_item, type) => {
              if (type === 'chat_message') {
                setActiveView('chat');
              }
            }}
          />
        </div>
      </Screen>

      <Screen active={activeView === 'setting'}>
        <div className="screen__body screen__body--surface">
          <ChatSettingH5 onBack={() => setActiveView('chat')} />
        </div>
      </Screen>
    </div>
  );
}