src/app/page.tsx

'use client';

import { useState, useEffect } from 'react';
import MenuScene from '../components/menu/Menu';
import IntroScene from '../components/intro/Intro';
import CourtScene from '../components/court/Court';
import DefenseScene from '../components/defense/Defense';
import LawyerScene from '../components/lawyer/Lawyer';
import EndScene from '../components/end/End';
import AccusationScene from '../components/accusation/Accusation';

// Types pour notre état
type Language = 'fr' | 'en' | 'es';

type Scene = 'menu' | 'intro' | 'accusation' | 'court' | 'defense' | 'lawyer' | 'end';
interface Story {
  accusation: {
    description: string;
    alibi: string[];
    problematic: string[];
  };
}

interface Message {
  content: string;
  role: 'lawyer' | 'judge';
}

interface Chat {
  messages: Message[];
}


const intro = {
  fr: {
    title: "L'Avocat de l'IA",
    description: "Vous êtes un avocat de l'intelligence artificielle. Votre client est accusé d'un crime. Défendez-le devant le tribunal.",
    start: "Commencer"
  },
  en: {
    title: "The AI Lawyer",
    description: "You are an artificial intelligence lawyer. Your client is accused of a crime. Defend them in court.",
    start: "Start"
  },
  es: {
    title: "El Abogado de la IA",
    description: "Eres un abogado de inteligencia artificial. Tu cliente está acusado de un crimen. Defiéndelo en la corte.",
    start: "Empezar"
  }
}

const sceneOrder: Scene[] = ['menu', 'intro', 'accusation', 'court', 'defense', 'lawyer'];

export default function Home() {
  // Gestion des scènes
  const [currentScene, setCurrentScene] = useState<Scene>('menu');
  const [story, setStory] = useState<Story | null>(null);
  const [chat, setChat] = useState<Chat>({ messages: [] });
  // États principaux du jeu
  const [language, setLanguage] = useState<Language>('fr');

  const [round, setRound] = useState<number>(1);

  const [requiredWords, setRequiredWords] = useState<string[]>([])

  const [currentQuestion, setCurrentQuestion] = useState<string>('');

  const resetGame = () => {
    setCurrentScene('menu');
    setStory(null);
    setChat({ messages: [] });
    setLanguage('fr');
    setRound(1);
    setRequiredWords([]);
  };

  const setNextScene = () => {
    if (currentScene === 'lawyer') {
      if (round < 3) {
        setRound(round + 1);
        setCurrentScene('court');
      } else {
        setCurrentScene('end');
      }
      return;
    }

    if (currentScene === 'end') {
      resetGame();
      return;
    }

    const currentIndex = sceneOrder.indexOf(currentScene);
    if (currentIndex !== -1 && currentIndex < sceneOrder.length - 1) {
      setCurrentScene(sceneOrder[currentIndex + 1]);
    }
  };

  // Props communs à passer aux composants
  const commonProps = {
    intro,
    language,
    setLanguage,
    round,
    setRound,
    setCurrentScene,
    setNextScene,
    story,
    currentQuestion,
    setCurrentQuestion,
    requiredWords,
    setRequiredWords,
    chat,
    setChat,
  };

  useEffect(() => {
    const fetchStory = async () => {
      try {
        const response = await fetch('/api/text/story', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ language })
        });

        const data = await response.json();

        if (data.success && data.story) {
          setStory({
            accusation: {
              description: data.story.description,
              alibi: data.story.alibi,
              problematic: data.story.problematic,
            }
          });
        }
      } catch (error) {
        console.error('Erreur lors de la récupération de l\'histoire:', error);
      }
    };

    console.log('currentScene:', currentScene)

    if (currentScene === 'intro') {
      fetchStory();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentScene]); // on écoute les changements de currentScene

  useEffect(() => {
    const fetchQuestion = async () => {
      try {
        const response = await fetch('/api/text/question', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            language,
            story: story?.accusation,
            chat: chat
          })
        });

        const data = await response.json();
        console.log('data:', data)
        if (data.question && data.words) {
          setCurrentQuestion(data.question);
          setRequiredWords(data.words);
          setChat(prevChat => ({
            messages: [...prevChat.messages, { content: data.question, role: 'judge' }]
          }));
        }
      } catch (error) {
        console.error('Erreur lors de la récupération de la question:', error);
      }
    };

    if ((currentScene === 'accusation' && story) || (currentScene === 'lawyer' && round < 3 && story)) {
      console.log('fetchQuestion')
      fetchQuestion();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentScene]);

  useEffect(() => {
    if (currentQuestion && requiredWords.length > 0) {
      console.log('currentQuestion:', currentQuestion)
      console.log('requiredWords:', requiredWords)
    }
  }, [currentQuestion, requiredWords])

  switch (currentScene) {
    case 'menu':
      return <MenuScene {...commonProps} />;
    case 'intro':
      return <IntroScene {...commonProps} />;
    case 'accusation':
      return <AccusationScene {...commonProps} />;
    case 'court':
      return <CourtScene {...commonProps} />;
    case 'defense':
      return <DefenseScene {...commonProps} />;
    case 'lawyer':
      return <LawyerScene {...commonProps} />;
    case 'end':
      return <EndScene {...commonProps} />;
    default:
      return <MenuScene {...commonProps} />;
  }
}