src/components/PromptGroup/PromptGroupDetail.tsx

import React, { useState } from 'react';
import { PromptGroup } from '../../types';
import Card, { CardHeader, CardContent, CardFooter } from '../common/Card';
import Button from '../common/Button';
import CategoryBadge from '../Category/CategoryBadge';
import { useApp } from '../../contexts/AppContext';
import Modal, { ModalFooter, ModalButton } from '../common/Modal';
import { exportPromptGroupToZip } from '../../utils/exportUtils';

interface PromptGroupDetailProps {
  promptGroup: PromptGroup;
  onEdit: () => void;
  onDelete: () => void;
  className?: string;
}

const PromptGroupDetail: React.FC<PromptGroupDetailProps> = ({

  promptGroup,

  onEdit,

  onDelete,

  className = ''

}) => {
  const { categories } = useApp();
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  
  // 查找分类对象 - 支持两种可能的数据结构  
  const categoryId = typeof promptGroup.category === 'object' 
    ? promptGroup.category._id 
    : promptGroup.category;
    
  const category = categories.find(c => c._id === categoryId);
  
  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'
    });
  };
  
  const handleExport = () => {
    exportPromptGroupToZip(promptGroup);
  };
  
  const handleDelete = () => {
    setShowDeleteModal(true);
  };
  
  const confirmDelete = () => {
    onDelete();
    setShowDeleteModal(false);
  };

  return (
    <div className={className}>

      <Card>

        <CardContent className="pt-4">

          <div className="flex justify-between items-start">

            <div>

              <div className="flex items-center mb-2">

                <h1 className="text-2xl font-bold mr-2">{promptGroup.name}</h1>

                {category && <CategoryBadge category={category} />}

              </div>

              

              <p className="text-gray-600 mb-4">{promptGroup.description || '无描述'}</p>

              

              <div className="flex items-center text-sm text-gray-500 mb-4">

                <div className="flex items-center mr-6">

                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">

                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>

                    <polyline points="14 2 14 8 20 8"></polyline>

                    <line x1="16" y1="13" x2="8" y2="13"></line>

                    <line x1="16" y1="17" x2="8" y2="17"></line>

                    <polyline points="10 9 9 9 8 9"></polyline>

                  </svg>

                  {promptGroup.prompts.length} 个提示词

                </div>

                <div className="flex items-center mr-6">

                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">

                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>

                  </svg>

                  {promptGroup.workflows.length} 个工作流

                </div>

                <div className="flex items-center">

                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">

                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>

                    <polyline points="14 2 14 8 20 8"></polyline>

                    <line x1="16" y1="13" x2="8" y2="13"></line>

                    <line x1="16" y1="17" x2="8" y2="17"></line>

                    <polyline points="10 9 9 9 8 9"></polyline>

                  </svg>

                  {promptGroup.dslFiles.length} 个DSL文件

                </div>

              </div>

              

              <div className="grid grid-cols-2 gap-4 text-sm">

                <div>

                  <p className="text-xs text-gray-500">创建时间</p>

                  <p>{formatDate(promptGroup.createdAt)}</p>

                </div>

                <div>

                  <p className="text-xs text-gray-500">更新时间</p>

                  <p>{formatDate(promptGroup.updatedAt)}</p>

                </div>

              </div>

            </div>

          </div>

        </CardContent>

        

        <CardFooter className="flex justify-end space-x-2">

          <Button

            variant="secondary"

            onClick={handleExport}

          >

            导出

          </Button>

          <Button

            variant="secondary"

            onClick={onEdit}

          >

            编辑

          </Button>

          <Button

            variant="danger"

            onClick={handleDelete}

          >

            删除

          </Button>

        </CardFooter>

      </Card>

      

      <Modal

        isOpen={showDeleteModal}

        onClose={() => setShowDeleteModal(false)}

        title="删除提示词组"

        footer={

          <ModalFooter>

            <ModalButton

              variant="secondary"

              onClick={() => setShowDeleteModal(false)}

            >

              取消

            </ModalButton>

            <ModalButton

              variant="danger"

              onClick={confirmDelete}

            >

              删除

            </ModalButton>

          </ModalFooter>

        }

      >

        <p className="text-center mb-4">您确定要删除这个提示词组吗？</p>

        <p className="text-center text-gray-500 text-sm">此操作不可撤销。所有关联的提示词和DSL文件也将被删除。</p>

      </Modal>

    </div>
  );
};

export default PromptGroupDetail;