import React, { useState } from 'react';
import './App.css';

// 调解看板组件
import TopSection from './components/dashboard/TopSection';
import MediationProgress from './components/dashboard/MediationProgress';
import TabContainer from './components/dashboard/TabContainer';
import ToolsPanel from './components/dashboard/ToolsPanel';
import FloatingControlPanel from './components/dashboard/FloatingControlPanel';

// 弹窗组件
import ToolModal from './components/common/ToolModal';

// 工具内容组件
import WageCalculatorContent from './components/tools/WageCalculatorContent';
import LawSearchContent from './components/tools/LawSearchContent';
import CaseSearchContent from './components/tools/CaseSearchContent';
import SimilarCaseContent from './components/tools/SimilarCaseContent';

function App() {
  const [activeModal, setActiveModal] = useState(null);
  const [currentStep, setCurrentStep] = useState(1);

  // 工具配置
  const toolConfig = {
    'wage-calculator': {
      title: '欠薪计算器',
      icon: 'fas fa-calculator',
      component: WageCalculatorContent,
    },
    'law-search': {
      title: '法律条文查询',
      icon: 'fas fa-gavel',
      component: LawSearchContent,
    },
    'case-search': {
      title: '典型案例查询',
      icon: 'fas fa-search',
      component: CaseSearchContent,
    },
    'similar-case': {
      title: '类案与法条推荐',
      icon: 'fas fa-balance-scale',
      component: SimilarCaseContent,
    },
  };

  const handleToolClick = (toolKey) => {
    setActiveModal(toolKey);
  };

  const handleCloseModal = () => {
    setActiveModal(null);
  };

  const renderModalContent = () => {
    if (!activeModal || !toolConfig[activeModal]) return null;
    const Component = toolConfig[activeModal].component;
    return <Component />;
  };

  return (
    <div className="app">
      {/* Font Awesome CDN */}
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      />

      {/* 顶部区域 */}
      <TopSection />

      {/* 中间区域 */}
      <section className="middle-section">
        {/* A区域：左侧主要内容 */}
        <div className="area-a">
          {/* AI调解进度 */}
          <MediationProgress currentStep={currentStep} />

          {/* 选项卡容器 */}
          <TabContainer />
        </div>

        {/* B区域：右侧工具栏 */}
        <ToolsPanel onToolClick={handleToolClick} />
      </section>

      {/* 底部悬浮控制看板 */}
      <FloatingControlPanel currentStep={currentStep} elapsedTime="25分钟" />

      {/* 工具弹窗 */}
      {activeModal && toolConfig[activeModal] && (
        <ToolModal
          visible={true}
          title={toolConfig[activeModal].title}
          icon={toolConfig[activeModal].icon}
          onClose={handleCloseModal}
        >
          {renderModalContent()}
        </ToolModal>
      )}
    </div>
  );
}

export default App;