src/pages/PromptGroupDetailPage.tsx

import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import Layout from '../components/Layout/Layout';
import Card, { CardHeader, CardContent } from '../components/common/Card';
import Button from '../components/common/Button';
import PromptList from '../components/Prompt/PromptList';
import DslFileList from '../components/DslFile/DslFileList';
import DslFileUploader from '../components/DslFile/DslFileUploader';
import CategoryBadge from '../components/Category/CategoryBadge';
import { useApp } from '../contexts/AppContext';
import { exportPromptGroupToZip } from '../utils/exportUtils';

const PromptGroupDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { 
    promptGroups, 
    categories,
    updatePromptGroup,
    deletePromptGroup,
    addPrompt,
    updatePrompt,
    deletePrompt
  } = useApp();
  
  const [activeTab, setActiveTab] = useState<'prompts' | 'dslFiles'>('prompts');
  
  if (!id) {
    return <div>提示词组ID无效</div>;
  }
  
  const promptGroup = promptGroups.find(group => group._id === id);
  
  if (!promptGroup) {
    return (
      <Layout title="未找到" showBackButton>
        <div className="ios-empty-state">
          <div className="ios-empty-state-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
          </div>
          <h3 className="ios-empty-state-title">未找到提示词组</h3>
          <p className="ios-empty-state-text">该提示词组可能已被删除</p>
          <Button
            variant="primary"
            className="mt-4"
            onClick={() => navigate('/')}
          >
            返回首页
          </Button>
        </div>
      </Layout>
    );
  }
  
  const category = categories.find(c => c._id === promptGroup.category);
  
  const handleDeletePromptGroup = () => {
    if (window.confirm('确定要删除此提示词组吗？此操作不可撤销，所有相关提示词和文件都将被删除。')) {
      deletePromptGroup(promptGroup._id);
      navigate('/');
    }
  };
  
  const handleExportPromptGroup = () => {
    exportPromptGroupToZip(promptGroup);
  };
  
  const formatDate = (date: string | Date) => {
    const dateObj = typeof date === 'string' ? new Date(date) : date;
    return dateObj.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  return (
    <Layout 
      title={promptGroup.name} 
      showBackButton
      rightAction={
        <Button
          variant="primary"
          size="small"
          onClick={handleExportPromptGroup}
        >
          导出
        </Button>
      }
    >
      <Card className="mb-4">
        <CardContent>
          <div className="flex justify-between items-start">
            <div>
              <h1 className="text-2xl font-bold mb-2">{promptGroup.name}</h1>
              {category && <CategoryBadge category={category} className="mb-2" />}
              <p className="text-gray-600 mb-2">{promptGroup.description || '无描述'}</p>
              <div className="text-sm text-gray-500">
                创建于 {formatDate(promptGroup.createdAt)}
                <span className="mx-2">•</span>
                更新于 {formatDate(promptGroup.updatedAt)}
              </div>
            </div>
            <div className="flex space-x-2">
              <Button
                variant="secondary"
                size="small"
                onClick={() => navigate(`/edit-prompt-group/${promptGroup._id}`)}
              >
                编辑
              </Button>
              <Button
                variant="danger"
                size="small"
                onClick={handleDeletePromptGroup}
              >
                删除
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
      
      <div className="flex border-b border-gray-200 mb-4">
        <button 
          className={`py-2 px-4 font-medium text-sm ${activeTab === 'prompts' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500'}`}
          onClick={() => setActiveTab('prompts')}
        >
          提示词 ({promptGroup.prompts.length})
        </button>
        <button 
          className={`py-2 px-4 font-medium text-sm ${activeTab === 'dslFiles' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500'}`}
          onClick={() => setActiveTab('dslFiles')}
        >
          DSL文件 ({promptGroup.dslFiles.length})
        </button>
      </div>
      <div className="space-y-4 max-h-screen overflow-y-auto">
      {activeTab === 'prompts' && (
        <PromptList
          groupId={promptGroup._id}
          prompts={promptGroup.prompts}
          onAddPrompt={(promptData) => addPrompt(promptGroup._id, promptData)}
          onUpdatePrompt={(promptId, promptData) => updatePrompt(promptGroup._id, promptId, promptData)}
          onDeletePrompt={(promptId) => deletePrompt(promptGroup._id, promptId)}
        />
      )}
      </div>
      {activeTab === 'dslFiles' && (
        <div>
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-medium">DSL文件列表</h3>
            <DslFileUploader groupId={promptGroup._id} />
          </div>
          <DslFileList 
            groupId={promptGroup._id}
            files={promptGroup.dslFiles}
          />
        </div>
      )}
    </Layout>
  );
};

export default PromptGroupDetailPage;