import { useState, useMemo, useEffect, useCallback } from "react";
import { Button, Form, Tabs } from "@agentscope-ai/design";
import { useTranslation } from "react-i18next";
import { useSearchParams } from "react-router-dom";
import { useAgentConfig } from "./useAgentConfig.tsx";
import {
  ReactAgentCard,
  LlmRetryCard,
  LlmRateLimiterCard,
  ToolExecutionLevelCard,
  AgentLoopCard,
} from "./components";
import { PageHeader } from "@/components/PageHeader";
import {
  CONTEXT_MANAGER_BACKEND_MAPPINGS,
  MEMORY_MANAGER_BACKEND_MAPPINGS,
} from "@/constants/backendMappings";
import api from "@/api";
import { useAgentStore } from "@/stores/agentStore";
import styles from "./index.module.less";

function AgentConfigPage() {
  const { t } = useTranslation();
  const [searchParams] = useSearchParams();
  const [activeTab, setActiveTab] = useState(
    searchParams.get("tab") || "reactAgent",
  );
  const {
    form,
    loading,
    saving,
    error,
    language,
    savingLang,
    timezone,
    savingTimezone,
    approvalLevel,
    setApprovalLevel,
    fetchConfig,
    handleSave,
    handleLanguageChange,
    handleTimezoneChange,
  } = useAgentConfig();

  const llmRetryEnabled = Form.useWatch("llm_retry_enabled", form) ?? true;
  const contextBackend =
    Form.useWatch("context_manager_backend", form) || "light";
  const memoryBackend =
    Form.useWatch("memory_manager_backend", form) || "remelight";
  const { selectedAgent } = useAgentStore();

  const [maxInputLength, setMaxInputLength] = useState(131072);
  const refreshEffectiveContextWindow = useCallback(() => {
    return api
      .getActiveModels({
        scope: "effective",
        agent_id: selectedAgent || undefined,
      })
      .then((info) => {
        if (info.effective_max_input_length != null) {
          setMaxInputLength(info.effective_max_input_length);
          return;
        }
        if (info.active_llm) {
          return api.listProviders().then((providers) => {
            const provider = providers.find(
              (p) => p.id === info.active_llm?.provider_id,
            );
            const all = [
              ...(provider?.models ?? []),
              ...(provider?.extra_models ?? []),
            ];
            const model = all.find(
              (item) => item.id === info.active_llm?.model,
            );
            if (model?.max_input_length != null) {
              setMaxInputLength(model.max_input_length);
            }
          });
        }
      })
      .catch(() => {});
  }, [selectedAgent]);

  useEffect(() => {
    refreshEffectiveContextWindow();
  }, [refreshEffectiveContextWindow]);

  useEffect(() => {
    const handleVisibility = () => {
      if (document.visibilityState === "visible") {
        refreshEffectiveContextWindow();
      }
    };
    document.addEventListener("visibilitychange", handleVisibility);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibility);
    };
  }, [refreshEffectiveContextWindow]);

  const dynamicTabs = useMemo(() => {
    const baseTabs = [
      {
        key: "reactAgent",
        label: (
          <span className={styles.tabLabel}>
            {t("agentConfig.reactAgentTitle")}
          </span>
        ),
        children: (
          <div className={styles.tabContent}>
            <ReactAgentCard
              language={language}
              savingLang={savingLang}
              onLanguageChange={handleLanguageChange}
              timezone={timezone}
              savingTimezone={savingTimezone}
              onTimezoneChange={handleTimezoneChange}
            />
          </div>
        ),
      },
      {
        key: "agentLoop",
        label: (
          <span className={styles.tabLabel}>
            {t("agentConfig.agentLoopTitle", "Agent Loop Settings")}
          </span>
        ),
        children: (
          <div className={styles.tabContent}>
            <AgentLoopCard />
          </div>
        ),
      },
      {
        key: "llmRetry",
        label: (
          <span className={styles.tabLabel}>
            {t("agentConfig.llmRetryTitle")}
          </span>
        ),
        children: (
          <div className={styles.tabContent}>
            <LlmRetryCard llmRetryEnabled={llmRetryEnabled} />
          </div>
        ),
      },
      {
        key: "llmRateLimiter",
        label: (
          <span className={styles.tabLabel}>
            {t("agentConfig.llmRateLimiterTitle")}
          </span>
        ),
        children: (
          <div className={styles.tabContent}>
            <LlmRateLimiterCard />
          </div>
        ),
      },
    ];

    const contextMapping = CONTEXT_MANAGER_BACKEND_MAPPINGS[contextBackend];
    if (contextMapping) {
      const ContextComponent = contextMapping.component;
      baseTabs.push({
        key: contextMapping.tabKey,
        label: (
          <span className={styles.tabLabel}>
            {t(`agentConfig.${contextMapping.tabKey}Title`)}
          </span>
        ),
        children: (
          <div className={styles.tabContent}>
            <ContextComponent maxInputLength={maxInputLength} />
          </div>
        ),
      });
    }

    const memoryMapping = MEMORY_MANAGER_BACKEND_MAPPINGS[memoryBackend];
    if (memoryMapping) {
      const MemoryComponent = memoryMapping.component;
      baseTabs.push({
        key: memoryMapping.tabKey,
        label: (
          <span className={styles.tabLabel}>
            {t(`agentConfig.${memoryMapping.tabKey}Title`)}
          </span>
        ),
        children: (
          <div className={styles.tabContent}>
            <MemoryComponent />
          </div>
        ),
      });
    }

    // Add Tool Execution Level tab
    baseTabs.push({
      key: "toolExecutionLevel",
      label: (
        <span className={styles.tabLabel}>
          {t("agentConfig.toolExecutionLevelTitle")}
        </span>
      ),
      children: (
        <div className={styles.tabContent}>
          <ToolExecutionLevelCard
            value={approvalLevel}
            onChange={setApprovalLevel}
            disabled={saving}
          />
        </div>
      ),
    });

    return baseTabs;
  }, [
    t,
    language,
    savingLang,
    timezone,
    savingTimezone,
    handleLanguageChange,
    handleTimezoneChange,
    llmRetryEnabled,
    maxInputLength,
    contextBackend,
    memoryBackend,
    approvalLevel,
    setApprovalLevel,
    saving,
  ]);

  useEffect(() => {
    const tabKeys = dynamicTabs.map((t) => t.key);
    if (!tabKeys.includes(activeTab)) {
      setActiveTab(tabKeys[0] ?? "reactAgent");
    }
  }, [dynamicTabs, activeTab]);

  if (loading) {
    return (
      <div className={styles.configPage}>
        <div className={styles.centerState}>
          <span className={styles.stateText}>{t("common.loading")}</span>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={styles.configPage}>
        <div className={styles.centerState}>
          <span className={styles.stateTextError}>{error}</span>
          <Button size="small" onClick={fetchConfig} style={{ marginTop: 12 }}>
            {t("environments.retry")}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.configPage}>
      <PageHeader parent={t("nav.agent")} current={t("agentConfig.title")} />

      <div className={styles.content}>
        <Form form={form} layout="vertical" className={styles.form}>
          <Tabs
            className={styles.mainTabs}
            activeKey={activeTab}
            onChange={setActiveTab}
            items={dynamicTabs}
            destroyInactiveTabPane={false}
          />
        </Form>
      </div>

      <div className={styles.footerActions}>
        <Button
          onClick={fetchConfig}
          disabled={saving}
          style={{ marginRight: 8 }}
        >
          {t("common.reset")}
        </Button>
        <Button type="primary" onClick={handleSave} loading={saving}>
          {t("common.save")}
        </Button>
      </div>
    </div>
  );
}

export default AgentConfigPage;
