import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ProjectList } from './components/ProjectList';
import { ProjectForm } from './components/ProjectForm';
import { ProjectDetails } from './pages/ProjectDetails';
import Models from './pages/Models';
import Navigation from './components/Navigation';
import { useProjectStore } from './store/projectStore';
import { useUIStore } from './store/uiStore';
import { CreateProjectRequest, UpdateProjectRequest } from './types/project';
import "./App.css";

/**
 * 主应用组件
 * 遵循 Tauri 开发规范的应用架构设计
 */
function App() {
  const { createProject, updateProject } = useProjectStore();
  const {
    showCreateProjectModal,
    showEditProjectModal,
    editingProject,
    closeCreateProjectModal,
    closeEditProjectModal
  } = useUIStore();

  // 处理创建项目
  const handleCreateProject = async (data: CreateProjectRequest) => {
    try {
      await createProject(data);
      closeCreateProjectModal();
    } catch (error) {
      console.error('创建项目失败:', error);
      throw error;
    }
  };

  // 处理更新项目
  const handleUpdateProject = async (data: UpdateProjectRequest) => {
    if (!editingProject) return;

    try {
      await updateProject(editingProject.id, data);
      closeEditProjectModal();
    } catch (error) {
      console.error('更新项目失败:', error);
      throw error;
    }
  };

  return (
    <Router>
      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
        {/* 导航栏 */}
        <Navigation />

        {/* 主要内容区域 */}
        <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 max-w-7xl">
          <Routes>
            <Route path="/" element={<ProjectList />} />
            <Route path="/project/:id" element={<ProjectDetails />} />
            <Route path="/models" element={<Models />} />
          </Routes>
        </main>

        {/* 创建项目模态框 */}
        {showCreateProjectModal && (
          <ProjectForm
            onSubmit={handleCreateProject}
            onCancel={closeCreateProjectModal}
          />
        )}

        {/* 编辑项目模态框 */}
        {showEditProjectModal && editingProject && (
          <ProjectForm
            initialData={editingProject}
            onSubmit={handleUpdateProject}
            onCancel={closeEditProjectModal}
            isEdit={true}
          />
        )}
      </div>
    </Router>
  );
}

export default App;