App.tsx

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Message, MessageSender } from './types';
import { initChat, sendMessageToAI } from './services/geminiService';
import ChatWindow from './components/ChatWindow';
import MessageInput from './components/MessageInput';
import WelcomeScreen from './components/WelcomeScreen';
import StageSelector from './components/StageSelector';
import type { Chat } from '@google/genai';

type AppState = 'welcome' | 'chatting' | 'selecting' | 'finished';

const App: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [organizationName, setOrganizationName] = useState<string>('an open-source organization');
  const [appState, setAppState] = useState<AppState>('welcome');
  const [userMessageCount, setUserMessageCount] = useState(0);

  const chatRef = useRef<Chat | null>(null);

  const startChat = useCallback(async () => {
    setAppState('chatting');
    setIsLoading(true);
    const { chat, organizationName } = initChat();
    setOrganizationName(organizationName);

    if (chat) {
        chatRef.current = chat;
        try {
            const firstBotMessage = await sendMessageToAI(chat, "Introduce yourself and the problem briefly, then wait for my response.");
            setMessages([{
                id: crypto.randomUUID(),
                text: firstBotMessage,
                sender: MessageSender.BOT
            }]);
        } catch (error) {
            setMessages([{
                id: crypto.randomUUID(),
                text: "I seem to be having trouble starting up. Please check the connection or API key.",
                sender: MessageSender.BOT
            }]);
        } finally {
            setIsLoading(false);
        }
    } else {
        setMessages([{
            id: crypto.randomUUID(),
            text: "Failed to initialize the chat service. Please ensure your Gemini API key is configured correctly in the environment variables.",
            sender: MessageSender.BOT
        }]);
        setIsLoading(false);
    }
  }, []);

  const handleSendMessage = async (userMessage: string) => {
    if (!chatRef.current) return;
    
    const newUserMessage: Message = {
      id: crypto.randomUUID(),
      text: userMessage,
      sender: MessageSender.USER,
    };
    
    setMessages((prev) => [...prev, newUserMessage]);
    setIsLoading(true);
    setUserMessageCount(prev => prev + 1);

    try {
        const botResponseText = await sendMessageToAI(chatRef.current, userMessage);
        const newBotMessage: Message = {
            id: crypto.randomUUID(),
            text: botResponseText,
            sender: MessageSender.BOT,
        };
        setMessages((prev) => [...prev, newBotMessage]);
    } catch (error) {
        const errorMessage: Message = {
            id: crypto.randomUUID(),
            text: "Oops! Something went wrong on my end. Could you try asking that again?",
            sender: MessageSender.BOT,
        };
        setMessages((prev) => [...prev, errorMessage]);
    } finally {
        setIsLoading(false);
    }
  };
  
  const handleStageSelect = async (stage: string) => {
    if (!chatRef.current) return;
    
    setAppState('finished');
    setIsLoading(true);
    
    const analysisRequest = `The student thinks the problem is in the '${stage}' stage. Based on our conversation, is this correct? Explain why or why not, and then summarize the key takeaways from our discussion.`;

    const userChoiceMessage: Message = {
        id: crypto.randomUUID(),
        text: `I think the problem is in the **${stage}** stage.`,
        sender: MessageSender.USER,
    }
    setMessages((prev) => [...prev, userChoiceMessage]);


    try {
        const botResponseText = await sendMessageToAI(chatRef.current, analysisRequest);
        const newBotMessage: Message = {
            id: crypto.randomUUID(),
            text: botResponseText,
            sender: MessageSender.BOT,
        };
        setMessages((prev) => [...prev, newBotMessage]);
    } catch (error) {
        const errorMessage: Message = {
            id: crypto.randomUUID(),
            text: "Oops! I had trouble analyzing that. Let's try again.",
            sender: MessageSender.BOT,
        };
        setMessages((prev) => [...prev, errorMessage]);
    } finally {
        setIsLoading(false);
    }
  };

  const handleRestart = useCallback(() => {
    setMessages([]);
    setUserMessageCount(0);
    chatRef.current = null;
    startChat();
  }, [startChat]);


  if (appState === 'welcome') {
    return <WelcomeScreen onStart={startChat} />;
  }

  const showStageSelector = userMessageCount >= 5 && appState === 'chatting';

  return (
    <div className="flex flex-col h-screen bg-gray-900 text-gray-100 font-sans">
      <header className="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700 p-4 shadow-md">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-xl md:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-teal-400">
            DevOps Pipeline Tutor
          </h1>
          <p className="text-sm text-gray-400">Your AI mentor from {organizationName}</p>
        </div>
      </header>
      <ChatWindow messages={messages} isLoading={isLoading} />
      {showStageSelector && <StageSelector onSelect={handleStageSelect} />}
      
      {appState === 'finished' ? (
         <div className="bg-gray-800 p-4 border-t border-gray-700">
            <div className="max-w-4xl mx-auto flex justify-center">
                <button
                onClick={handleRestart}
                className="bg-indigo-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-indigo-500 transition-transform transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-indigo-500/50"
                >
                Start New Conversation
                </button>
            </div>
         </div>
      ) : (
        <MessageInput onSendMessage={handleSendMessage} isLoading={isLoading} disabled={showStageSelector} />
      )}
    </div>
  );
};

export default App;