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

/* 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 [mermaidData, setMermaidData]: any = useState(null);
  const [mermaidLoading, setMermaidLoading] = useState(false);
  const [mermaidError, setMermaidError] = useState<string | null>(null);

  const fetchData = async (topicToFetch: string) => {
    setCardLoading(true);
    setGuodegangLoading(true);
    setMermaidLoading(true);
    setCardError(null);
    setGuodegangError(null);
    setMermaidError(null);

    const cardUrl = `http://localhost:8080/card/${encodeURIComponent(topicToFetch)}`;
    const guodegangUrl = `http://localhost:8080/guodegang/${encodeURIComponent(topicToFetch)}`;
    const mermaidUrl = `http://localhost:8080/mermaid/${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 fetchMermaid = async () => {
      try {
        const response = await fetch(mermaidUrl, { signal: abortController.signal });
        if (!response.ok) throw new Error(`Mermaid API failed: ${response.status}`);
        const result = await response.json();
        setMermaidData(result.message);
      } catch (error) {
        console.error("Error fetching mermaid data:", error);
        setMermaidError("Failed to load mermaid data");
      } finally {
        setMermaidLoading(false);
      }
    };

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

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

  const cardLoaded = !cardLoading && !!cardData;
  const guodegangLoaded = !guodegangLoading && !!guodegangData;
  const mermaidLoaded = !mermaidLoading && !!mermaidData;

  const progress = (() => {
    if (!topic) return 0;
    if (cardLoaded && guodegangLoaded && mermaidLoaded) return 100;
    if (cardLoaded && guodegangLoaded) return 67;
    if (cardLoaded && mermaidLoaded) return 67;
    if (guodegangLoaded && mermaidLoaded) return 67;
    if (cardLoaded || guodegangLoaded || mermaidLoaded) return 33;
    return 10;
  })();

  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-6xl">
            <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="mermaid">
                            <Tabs.Separator />
                            <Tabs.Indicator />
                            📊 Mermaid 图表
                        </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="mermaid">
                    <Mermaid topic={topic} data={mermaidData} loading={mermaidLoading} error={mermaidError} />
                </Tabs.Panel>
            </Tabs>
        </div>
    </div>
  );
}

export default App;