import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
import { ConfigProvider, Layout, theme, Typography, Space, Tabs, Slider, Radio, Switch, Segmented } from 'antd';
import { ApartmentOutlined, ThunderboltOutlined, FilterOutlined, SwapOutlined, FileSearchOutlined, GlobalOutlined } from '@ant-design/icons';
import { ThemeToggle } from './components/ThemeToggle';
import { InputPanel } from './components/InputPanel';
import { TransformationInputPanel } from './components/TransformationInputPanel';
import { MindmapPanel } from './components/MindmapPanel';
import { TransformationPanel } from './components/TransformationPanel';
import { DeduplicationPanel } from './components/DeduplicationPanel';
import { PatentSearchPanel } from './components/PatentSearchPanel';
import { DualPathInputPanel } from './components/DualPathInputPanel';
import { DualPathMindmapPanel } from './components/DualPathMindmapPanel';
import { CrossoverPanel } from './components/CrossoverPanel';
import { useAttribute } from './hooks/useAttribute';
import { useDualPathAttribute } from './hooks/useDualPathAttribute';
import { getModels } from './services/api';
import { crossoverPairsToDAGs, type CrossoverDAGResult } from './utils/crossoverToDAG';
import { DualTransformationPanel } from './components/DualTransformationPanel';
import type { MindmapDAGRef } from './components/MindmapDAG';
import type { TransformationDAGRef } from './components/TransformationDAG';
import type { CategoryMode, ExpertSource, ExpertTransformationDAGResult, DeduplicationMethod, ExpertMode, CrossoverPair, PromptLanguage } from './types';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

interface VisualSettings {
  nodeSpacing: number;
  fontSize: number;
}

function App() {
  const [isDark, setIsDark] = useState(true);
  const [activeTab, setActiveTab] = useState<string>('attribute');
  const [dualPathMode, setDualPathMode] = useState(false);
  const [promptLanguage, setPromptLanguage] = useState<PromptLanguage>('zh');

  // Single path hook
  const { loading, progress, error, currentResult, history, analyze, loadFromHistory } = useAttribute();

  // Dual path hook
  const dualPath = useDualPathAttribute();

  const [visualSettings, setVisualSettings] = useState<VisualSettings>({
    nodeSpacing: 32,
    fontSize: 14,
  });
  const mindmapRef = useRef<MindmapDAGRef>(null);
  const transformationRef = useRef<TransformationDAGRef>(null);

  // Dual path expert mode
  const [expertMode, setExpertMode] = useState<ExpertMode>('shared');
  const [selectedCrossoverPairs, setSelectedCrossoverPairs] = useState<CrossoverPair[]>([]);

  // Convert selected crossover pairs to two separate DAGs for dual transformation
  const crossoverDAGs = useMemo((): CrossoverDAGResult | null => {
    if (selectedCrossoverPairs.length === 0) return null;
    if (!dualPath.pathA.result || !dualPath.pathB.result) return null;
    return crossoverPairsToDAGs(
      selectedCrossoverPairs,
      dualPath.pathA.result,
      dualPath.pathB.result
    );
  }, [selectedCrossoverPairs, dualPath.pathA.result, dualPath.pathB.result]);

  // Transformation Agent settings
  const [transformModel, setTransformModel] = useState<string>('');
  const [transformTemperature, setTransformTemperature] = useState<number>(0.95);
  const [expertConfig, setExpertConfig] = useState<{
    expert_count: number;
    keywords_per_expert: number;
    custom_experts?: string[];
  }>({
    expert_count: 3,
    keywords_per_expert: 1,
    custom_experts: undefined,
  });
  const [customExpertsInput, setCustomExpertsInput] = useState('');
  const [expertSource, setExpertSource] = useState<ExpertSource>('llm');
  const [expertLanguage, setExpertLanguage] = useState<'en' | 'zh'>('en');
  const [shouldStartTransform, setShouldStartTransform] = useState(false);
  const [transformLoading, setTransformLoading] = useState(false);
  const [transformationResult, setTransformationResult] = useState<ExpertTransformationDAGResult | null>(null);

  // Deduplication settings
  const [deduplicationThreshold, setDeduplicationThreshold] = useState(0.85);
  const [deduplicationMethod, setDeduplicationMethod] = useState<DeduplicationMethod>('embedding');

  // Available models from API
  const [availableModels, setAvailableModels] = useState<string[]>([]);

  // Fetch models on mount
  useEffect(() => {
    async function fetchModels() {
      try {
        const response = await getModels();
        setAvailableModels(response.models);
        // Set default model for transformation if not set
        if (response.models.length > 0 && !transformModel) {
          const defaultModel = response.models.find((m) => m.includes('qwen3')) || response.models[0];
          setTransformModel(defaultModel);
        }
      } catch (err) {
        console.error('Failed to fetch models:', err);
      }
    }
    fetchModels();
  }, []);

  const handleAnalyze = async (
    query: string,
    model?: string,
    temperature?: number,
    chainCount?: number,
    categoryMode?: CategoryMode,
    customCategories?: string[],
    suggestedCategoryCount?: number,
    lang?: PromptLanguage
  ) => {
    await analyze(query, model, temperature, chainCount, categoryMode, customCategories, suggestedCategoryCount, lang || promptLanguage);
  };

  const handleResetView = useCallback(() => {
    mindmapRef.current?.resetView();
  }, []);

  const handleTransform = useCallback(() => {
    setShouldStartTransform(true);
  }, []);

  // Dual path analysis handler
  const handleDualPathAnalyze = useCallback(async (
    queryA: string,
    queryB: string,
    options?: {
      model?: string;
      temperature?: number;
      chainCount?: number;
      categoryMode?: CategoryMode;
      customCategories?: string[];
      suggestedCategoryCount?: number;
      lang?: PromptLanguage;
    }
  ) => {
    await dualPath.analyzeParallel(queryA, queryB, { ...options, lang: options?.lang || promptLanguage });
  }, [dualPath, promptLanguage]);

  // Handle mode switch
  const handleModeSwitch = useCallback((checked: boolean) => {
    setDualPathMode(checked);
    // Reset to attribute tab when switching modes
    setActiveTab('attribute');
  }, []);

  return (
    <ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
      }}
    >
      <Layout style={{ minHeight: '100vh' }}>
        <Header
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '0 24px',
            background: isDark
              ? 'linear-gradient(90deg, #141414 0%, #1f1f1f 50%, #141414 100%)'
              : 'linear-gradient(90deg, #fff 0%, #fafafa 50%, #fff 100%)',
            borderBottom: isDark ? '1px solid #303030' : '1px solid #f0f0f0',
            boxShadow: isDark
              ? '0 2px 8px rgba(0, 0, 0, 0.3)'
              : '0 2px 8px rgba(0, 0, 0, 0.06)',
          }}
        >
          <Space align="center" size="middle">
            <ApartmentOutlined
              style={{
                fontSize: 24,
                color: isDark ? '#177ddc' : '#1890ff',
              }}
            />
            <Title
              level={4}
              style={{
                margin: 0,
                background: isDark
                  ? 'linear-gradient(90deg, #177ddc 0%, #69c0ff 100%)'
                  : 'linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
              }}
            >
              Novelty Seeking
            </Title>
          </Space>
          <Space align="center" size="middle">
            <Space size="small">
              <Typography.Text type="secondary">Single</Typography.Text>
              <Switch
                checked={dualPathMode}
                onChange={handleModeSwitch}
                checkedChildren={<SwapOutlined />}
                unCheckedChildren={<ApartmentOutlined />}
              />
              <Typography.Text type="secondary">Dual</Typography.Text>
            </Space>
            <Space size="small">
              <GlobalOutlined style={{ color: isDark ? '#177ddc' : '#1890ff' }} />
              <Segmented
                size="small"
                value={promptLanguage}
                onChange={(value) => setPromptLanguage(value as PromptLanguage)}
                options={[
                  { label: '中文', value: 'zh' },
                  { label: 'EN', value: 'en' },
                ]}
              />
            </Space>
            <ThemeToggle isDark={isDark} onToggle={setIsDark} />
          </Space>
        </Header>
        <Layout>
          <Content
            style={{
              padding: 16,
              height: 'calc(100vh - 64px)',
              overflow: 'hidden',
            }}
          >
            <Tabs
              activeKey={activeTab}
              onChange={setActiveTab}
              style={{ height: '100%' }}
              tabBarStyle={{ marginBottom: 8 }}
              items={dualPathMode ? [
                // ===== Dual Path Mode Tabs =====
                {
                  key: 'attribute',
                  label: (
                    <span>
                      <SwapOutlined style={{ marginRight: 8 }} />
                      Dual Path Attribute
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)' }}>
                      <DualPathMindmapPanel
                        pathA={dualPath.pathA}
                        pathB={dualPath.pathB}
                        isDark={isDark}
                        visualSettings={visualSettings}
                      />
                    </div>
                  ),
                },
                {
                  key: 'crossover',
                  label: (
                    <span>
                      <SwapOutlined style={{ marginRight: 8 }} />
                      Crossover
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)', padding: 16 }}>
                      <CrossoverPanel
                        pathAResult={dualPath.pathA.result}
                        pathBResult={dualPath.pathB.result}
                        isDark={isDark}
                        expertMode={expertMode}
                        onExpertModeChange={setExpertMode}
                        onCrossoverReady={setSelectedCrossoverPairs}
                      />
                    </div>
                  ),
                },
                {
                  key: 'transformation',
                  label: (
                    <span>
                      <ThunderboltOutlined style={{ marginRight: 8 }} />
                      Transformation Agent
                      {crossoverDAGs && (
                        <span style={{ marginLeft: 4, fontSize: 10, opacity: 0.7 }}>
                          (A:{crossoverDAGs.pathA.nodes.length} / B:{crossoverDAGs.pathB.nodes.length})
                        </span>
                      )}
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)' }}>
                      <DualTransformationPanel
                        crossoverDAGA={crossoverDAGs?.pathA ?? null}
                        crossoverDAGB={crossoverDAGs?.pathB ?? null}
                        isDark={isDark}
                        model={transformModel}
                        temperature={transformTemperature}
                        expertConfig={expertConfig}
                        expertSource={expertSource}
                        expertLanguage={expertLanguage}
                        lang={promptLanguage}
                        shouldStartTransform={shouldStartTransform}
                        onTransformComplete={() => setShouldStartTransform(false)}
                        onLoadingChange={setTransformLoading}
                      />
                    </div>
                  ),
                },
                {
                  key: 'patent',
                  label: (
                    <span>
                      <FileSearchOutlined style={{ marginRight: 8 }} />
                      Patent Search
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)' }}>
                      <PatentSearchPanel
                        isDark={isDark}
                      />
                    </div>
                  ),
                },
              ] : [
                // ===== Single Path Mode Tabs =====
                {
                  key: 'attribute',
                  label: (
                    <span>
                      <ApartmentOutlined style={{ marginRight: 8 }} />
                      Attribute Agent
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)' }}>
                      <MindmapPanel
                        ref={mindmapRef}
                        data={currentResult}
                        loading={loading}
                        error={error}
                        isDark={isDark}
                        visualSettings={visualSettings}
                      />
                    </div>
                  ),
                },
                {
                  key: 'transformation',
                  label: (
                    <span>
                      <ThunderboltOutlined style={{ marginRight: 8 }} />
                      Transformation Agent
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)' }}>
                      <TransformationPanel
                        ref={transformationRef}
                        attributeData={currentResult}
                        isDark={isDark}
                        model={transformModel}
                        temperature={transformTemperature}
                        expertConfig={expertConfig}
                        expertSource={expertSource}
                        expertLanguage={expertLanguage}
                        lang={promptLanguage}
                        shouldStartTransform={shouldStartTransform}
                        onTransformComplete={() => setShouldStartTransform(false)}
                        onLoadingChange={setTransformLoading}
                        onResultsChange={setTransformationResult}
                      />
                    </div>
                  ),
                },
                {
                  key: 'deduplication',
                  label: (
                    <span>
                      <FilterOutlined style={{ marginRight: 8 }} />
                      Deduplication
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)' }}>
                      <DeduplicationPanel
                        transformationResult={transformationResult}
                        isDark={isDark}
                        threshold={deduplicationThreshold}
                        onThresholdChange={setDeduplicationThreshold}
                        method={deduplicationMethod}
                        onMethodChange={setDeduplicationMethod}
                        lang={promptLanguage}
                      />
                    </div>
                  ),
                },
                {
                  key: 'patent',
                  label: (
                    <span>
                      <FileSearchOutlined style={{ marginRight: 8 }} />
                      Patent Search
                    </span>
                  ),
                  children: (
                    <div style={{ height: 'calc(100vh - 140px)' }}>
                      <PatentSearchPanel
                        descriptions={transformationResult?.results.flatMap(r => r.descriptions)}
                        isDark={isDark}
                      />
                    </div>
                  ),
                },
              ]}
            />
          </Content>
          <Sider
            width={350}
            theme={isDark ? 'dark' : 'light'}
            style={{
              height: 'calc(100vh - 64px)',
              overflow: 'auto',
            }}
          >
            {activeTab === 'attribute' && !dualPathMode && (
              <InputPanel
                loading={loading}
                progress={progress}
                history={history}
                currentResult={currentResult}
                onAnalyze={handleAnalyze}
                onLoadHistory={(item, lang) => loadFromHistory(item, lang || promptLanguage)}
                onResetView={handleResetView}
                visualSettings={visualSettings}
                onVisualSettingsChange={setVisualSettings}
                lang={promptLanguage}
              />
            )}
            {activeTab === 'attribute' && dualPathMode && (
              <DualPathInputPanel
                onAnalyze={handleDualPathAnalyze}
                loadingA={dualPath.pathA.loading}
                loadingB={dualPath.pathB.loading}
                progressA={dualPath.pathA.progress}
                progressB={dualPath.pathB.progress}
                availableModels={availableModels}
                lang={promptLanguage}
              />
            )}
            {activeTab === 'crossover' && dualPathMode && (
              <div style={{ padding: 16 }}>
                <Typography.Title level={5} style={{ marginBottom: 16 }}>
                  <SwapOutlined style={{ marginRight: 8 }} />
                  Crossover Settings
                </Typography.Title>
                <Typography.Text type="secondary">
                  Select attribute pairs in the main panel to create crossover combinations.
                  {selectedCrossoverPairs.length > 0 && (
                    <div style={{ marginTop: 8 }}>
                      <Typography.Text strong>
                        {selectedCrossoverPairs.length} pairs selected
                      </Typography.Text>
                    </div>
                  )}
                </Typography.Text>
              </div>
            )}
            {activeTab === 'transformation' && (
              <TransformationInputPanel
                onTransform={handleTransform}
                loading={transformLoading}
                hasData={dualPathMode ? !!crossoverDAGs : !!currentResult}
                isDark={isDark}
                model={transformModel}
                temperature={transformTemperature}
                expertConfig={expertConfig}
                customExpertsInput={customExpertsInput}
                expertSource={expertSource}
                expertLanguage={expertLanguage}
                onModelChange={setTransformModel}
                onTemperatureChange={setTransformTemperature}
                onExpertConfigChange={setExpertConfig}
                onCustomExpertsInputChange={setCustomExpertsInput}
                onExpertSourceChange={setExpertSource}
                onExpertLanguageChange={setExpertLanguage}
                availableModels={availableModels}
              />
            )}
            {activeTab === 'patent' && (
              <div style={{ padding: 16 }}>
                <Typography.Title level={5} style={{ marginBottom: 16 }}>
                  <FileSearchOutlined style={{ marginRight: 8 }} />
                  Patent Search Info
                </Typography.Title>
                <Typography.Paragraph type="secondary" style={{ fontSize: 12 }}>
                  Search patents using the Lens.org API to find prior art and similar inventions.
                </Typography.Paragraph>
                <Typography.Title level={5} style={{ marginTop: 24, marginBottom: 12 }}>
                  How to Use
                </Typography.Title>
                <Typography.Paragraph style={{ fontSize: 12 }}>
                  <ol style={{ paddingLeft: 16, margin: 0 }}>
                    <li style={{ marginBottom: 8 }}>Click a generated description on the left to load it into the search box</li>
                    <li style={{ marginBottom: 8 }}>Edit the description to refine your search query</li>
                    <li style={{ marginBottom: 8 }}>Click "Search Patents" to find similar patents</li>
                    <li style={{ marginBottom: 8 }}>Results appear on the right - click to view on Lens.org</li>
                  </ol>
                </Typography.Paragraph>
                <Typography.Title level={5} style={{ marginTop: 24, marginBottom: 12 }}>
                  Result Interpretation
                </Typography.Title>
                <Typography.Paragraph type="secondary" style={{ fontSize: 12 }}>
                  <strong>Many results:</strong> Query may overlap with existing prior art - consider making it more specific.
                </Typography.Paragraph>
                <Typography.Paragraph type="secondary" style={{ fontSize: 12 }}>
                  <strong>Few/no results:</strong> Potentially novel concept - good candidate for further exploration.
                </Typography.Paragraph>
              </div>
            )}
            {activeTab === 'deduplication' && (
              <div style={{ padding: 16 }}>
                <Typography.Title level={5} style={{ marginBottom: 16 }}>
                  <FilterOutlined style={{ marginRight: 8 }} />
                  Deduplication Settings
                </Typography.Title>

                {/* Method Selection */}
                <div style={{ marginBottom: 20 }}>
                  <Typography.Text strong style={{ display: 'block', marginBottom: 8 }}>
                    Method
                  </Typography.Text>
                  <Radio.Group
                    value={deduplicationMethod}
                    onChange={(e) => setDeduplicationMethod(e.target.value)}
                    buttonStyle="solid"
                    style={{ width: '100%' }}
                  >
                    <Radio.Button value="embedding" style={{ width: '50%', textAlign: 'center' }}>
                      Embedding
                    </Radio.Button>
                    <Radio.Button value="llm" style={{ width: '50%', textAlign: 'center' }}>
                      LLM Judge
                    </Radio.Button>
                  </Radio.Group>
                  <Typography.Text type="secondary" style={{ display: 'block', marginTop: 8, fontSize: 12 }}>
                    {deduplicationMethod === 'embedding'
                      ? 'Fast vector similarity comparison'
                      : 'Accurate but slower pairwise LLM comparison'}
                  </Typography.Text>
                </div>

                {/* Threshold Slider - Only for Embedding method */}
                {deduplicationMethod === 'embedding' && (
                  <div style={{ marginBottom: 20 }}>
                    <Typography.Text strong style={{ display: 'block', marginBottom: 8 }}>
                      Similarity Threshold
                    </Typography.Text>
                    <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 12, fontSize: 12 }}>
                      Higher = stricter matching, fewer groups
                    </Typography.Text>
                    <Slider
                      min={0.5}
                      max={1.0}
                      step={0.05}
                      value={deduplicationThreshold}
                      onChange={setDeduplicationThreshold}
                      marks={{
                        0.5: '50%',
                        0.7: '70%',
                        0.85: '85%',
                        1.0: '100%',
                      }}
                      tooltip={{ formatter: (val) => `${((val ?? 0) * 100).toFixed(0)}%` }}
                    />
                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                      Current: {(deduplicationThreshold * 100).toFixed(0)}% similarity required
                    </Typography.Text>
                  </div>
                )}

                {/* LLM Warning */}
                {deduplicationMethod === 'llm' && (
                  <Typography.Text type="warning" style={{ display: 'block', fontSize: 12 }}>
                    Note: LLM method requires N*(N-1)/2 comparisons. May take longer for many descriptions.
                  </Typography.Text>
                )}
              </div>
            )}
          </Sider>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
}

export default App;