import { useState } from "react";
import { ProgressBar, Label, Tabs } from "@heroui/react";
import Card from "./components/Card";
import Guodegang from "./components/Guodegang";
import Quiz from "./components/Quiz";
import Topic from "./components/Topic";
import Scenario from "./components/Scenario";

/* eslint-disable @typescript-eslint/no-explicit-any */
function App() {
  const [topic, setTopic] = useState('');
  const [cardData, setCardData]: any = useState(null);
  const [cardLoading, setCardLoading] = useState(false);
  const [cardError, setCardError] = useState<string | null>(null);
  const [guodegangData, setGuodegangData]: any = useState(null);
  const [guodegangLoading, setGuodegangLoading] = useState(false);
  const [guodegangError, setGuodegangError] = useState<string | null>(null);
  const [quizData, setQuizData]: any = useState(null);
  const [quizLoading, setQuizLoading] = useState(false);
  const [quizError, setQuizError] = useState<string | null>(null);
  const [scenarioData, setScenarioData]: any = useState(null);
  const [scenarioLoading, setScenarioLoading] = useState(false);
  const [scenarioError, setScenarioError] = useState<string | null>(null);

  const fetchData = async (topicToFetch: string) => {
    setCardLoading(true);
    setGuodegangLoading(true);
    setQuizLoading(true);
    setScenarioLoading(true);
    setCardError(null);
    setGuodegangError(null);
    setQuizError(null);
    setScenarioError(null);

    const cardUrl = `http://localhost:8080/card/${encodeURIComponent(topicToFetch)}`;
    const guodegangUrl = `http://localhost:8080/guodegang/${encodeURIComponent(topicToFetch)}`;
    const quizUrl = `http://localhost:8080/quiz/${encodeURIComponent(topicToFetch)}`;
    const scenarioUrl = `http://localhost:8080/scenario/${encodeURIComponent(topicToFetch)}`;

    const abortController = new AbortController();
    const timeoutId = setTimeout(() => abortController.abort(), 300000);

    const fetchCard = async () => {
      try {
        const response = await fetch(cardUrl, { signal: abortController.signal });
        if (!response.ok) throw new Error(`Card API failed: ${response.status}`);
        const result = await response.json();
        setCardData(result.message);
      } catch (error) {
        console.error("Error fetching card data:", error);
        setCardError("Failed to load card data");
      } finally {
        setCardLoading(false);
      }
    };

    const fetchGuodegang = async () => {
      try {
        const response = await fetch(guodegangUrl, { signal: abortController.signal });
        if (!response.ok) throw new Error(`Guodegang API failed: ${response.status}`);
        const result = await response.json();
        setGuodegangData(result.message);
      } catch (error) {
        console.error("Error fetching guodegang data:", error);
        setGuodegangError("Failed to load guodegang data");
      } finally {
        setGuodegangLoading(false);
      }
    };

    const fetchQuiz = async () => {
      try {
        const response = await fetch(quizUrl, { signal: abortController.signal });
        if (!response.ok) throw new Error(`Quiz API failed: ${response.status}`);
        const result = await response.json();
        setQuizData(result.message);
      } catch (error) {
        console.error("Error fetching quiz data:", error);
        setQuizError("Failed to load quiz data");
      } finally {
        setQuizLoading(false);
      }
    };

    const fetchScenario = async () => {
      try {
        const response = await fetch(scenarioUrl, { signal: abortController.signal });
        if (!response.ok) throw new Error(`Scenario API failed: ${response.status}`);
        const result = await response.json();
        setScenarioData(result.message);
      } catch (error) {
        console.error("Error fetching scenario data:", error);
        setScenarioError("Failed to load scenario data");
      } finally {
        setScenarioLoading(false);
      }
    };

    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchQuiz(), fetchScenario()]).finally(() => {
      clearTimeout(timeoutId);
    });
  };

  const handleTopicSubmit = (newTopic: string) => {
    setTopic(newTopic);
    if (newTopic) {
      fetchData(newTopic);
    }
  };

  const cardLoaded = !cardLoading && !!cardData;
  const guodegangLoaded = !guodegangLoading && !!guodegangData;
  const quizLoaded = !quizLoading && !!quizData;
  const scenarioLoaded = !scenarioLoading && !!scenarioData;

  const progress = (() => {
    if (!topic) return 0;
    const loadedCount = [cardLoaded, guodegangLoaded, quizLoaded, scenarioLoaded].filter(Boolean).length;
    return Math.round((loadedCount / 4) * 100);
  })();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
        <Topic onTopicSubmit={handleTopicSubmit}/>
        {topic && (
            <div className="w-64">
                <ProgressBar value={progress} color="accent">
                    <Label>Data Loading</Label>
                    <ProgressBar.Output />
                    <ProgressBar.Track>
                        <ProgressBar.Fill />
                    </ProgressBar.Track>
                </ProgressBar>
            </div>
        )}
        <div className="w-full max-w-8xl">
            <Tabs className="w-full">
                <Tabs.ListContainer>
                    <Tabs.List aria-label="View options">
                        <Tabs.Tab id="card">
                            <Tabs.Separator />
                            <Tabs.Indicator />
                            📚 学习卡片
                        </Tabs.Tab>
                        <Tabs.Tab id="guodegang">
                            <Tabs.Separator />
                            <Tabs.Indicator />
                            🎭 德云社讲解
                        </Tabs.Tab>
                        <Tabs.Tab id="quiz">
                            <Tabs.Separator />
                            <Tabs.Indicator />
                            📝 测验问答
                        </Tabs.Tab>
                        <Tabs.Tab id="scenario">
                            <Tabs.Separator />
                            <Tabs.Indicator />
                            💡 工程场景
                        </Tabs.Tab>
                    </Tabs.List>
                </Tabs.ListContainer>
                <Tabs.Panel id="card">
                    <Card topic={topic} data={cardData} loading={cardLoading} error={cardError} />
                </Tabs.Panel>
                <Tabs.Panel id="guodegang">
                    <Guodegang topic={topic} data={guodegangData} loading={guodegangLoading} error={guodegangError} />
                </Tabs.Panel>
                <Tabs.Panel id="quiz">
                    <Quiz topic={topic} data={quizData} loading={quizLoading} error={quizError} />
                </Tabs.Panel>
                <Tabs.Panel id="scenario">
                    <Scenario topic={topic} data={scenarioData} loading={scenarioLoading} error={scenarioError} />
                </Tabs.Panel>
            </Tabs>
        </div>
    </div>
  );
}

export default App;