import React from 'react';
import {
  Box,
  Typography,
  Card,
  CardContent,
  Grid,
  Chip,
  IconButton,
  Menu,
  MenuItem,
  Button,
  Avatar,
} from '@mui/material';
import {
  MoreVert as MoreVertIcon,
  Folder as FolderIcon,
  ArrowForward as ArrowForwardIcon,
  Add as AddIcon,
} from '@mui/icons-material';
import { useTranslation } from 'react-i18next';
import type { IKnowledge } from '@/interfaces/database/knowledge';
import KnowledgeCard from './KnowledgeCard';

interface KnowledgeGridViewProps {
  knowledgeBases: IKnowledge[];
  maxItems?: number;
  showSeeAll?: boolean;
  onSeeAll?: () => void;
  onEdit?: (kb: IKnowledge) => void;
  onDelete?: (kb: IKnowledge) => void;
  onView?: (kb: IKnowledge) => void;
  loading?: boolean;
  // 新增属性用于控制空状态显示
  searchTerm?: string;
  teamFilter?: string;
  onCreateKnowledge?: () => void;
}


const KnowledgeGridView: React.FC<KnowledgeGridViewProps> = ({
  knowledgeBases,
  maxItems,
  showSeeAll = false,
  onSeeAll,
  onEdit,
  onDelete,
  onView,
  loading = false,
  searchTerm = '',
  teamFilter = 'all',
  onCreateKnowledge,
}) => {
  const { t } = useTranslation();
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [selectedKB, setSelectedKB] = React.useState<IKnowledge | null>(null);

  const handleMenuClick = (event: React.MouseEvent<HTMLElement>, kb: IKnowledge) => {
    setAnchorEl(event.currentTarget);
    setSelectedKB(kb);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    setSelectedKB(null);
  };

  const handleDelete = () => {
    if (selectedKB && onDelete) {
      onDelete(selectedKB);
    }
    handleMenuClose();
  };

  const handleView = () => {
    if (selectedKB && onView) {
      onView(selectedKB);
    }
    handleMenuClose();
  }

  const handleViewKnowledge = (kb: IKnowledge) => {
    if (onView) {
      onView(kb);
    }
    handleMenuClose();
  };

  const displayedKBs = maxItems ? knowledgeBases.slice(0, maxItems) : knowledgeBases;
  const hasMore = maxItems && knowledgeBases.length > maxItems;

  if (loading) {
    return (
      <Box sx={{ textAlign: 'center', py: 4 }}>
        <Typography>{t('common.loading')}</Typography>
      </Box>
    );
  }

  if (knowledgeBases.length === 0) {
    return (
      <Box sx={{ textAlign: 'center', py: 8 }}>
        <FolderIcon sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
        <Typography variant="h6" color="text.secondary" gutterBottom>
          {searchTerm || teamFilter !== 'all' ? t('knowledge.noMatchingKnowledgeBases') : t('knowledge.noKnowledgeBases')}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          {searchTerm || teamFilter !== 'all'
            ? t('knowledge.tryAdjustingFilters')
            : t('knowledge.createFirstKnowledgeBase')
          }
        </Typography>
        {(!searchTerm && teamFilter === 'all' && onCreateKnowledge) && (
          <Button
            variant="contained"
            startIcon={<AddIcon />}
            onClick={onCreateKnowledge}
          >
            {t('knowledge.createKnowledgeBase')}
          </Button>
        )}
      </Box>
    );
  }

  return (
    <Box>
      <Grid container spacing={3}>
        {displayedKBs.map((kb) => (
          <Grid key={kb.id} size={{ xs: 12, sm: 6, md: 4 }}>
            <KnowledgeCard knowledge={kb} onMenuClick={handleMenuClick} onViewKnowledge={handleViewKnowledge} />
          </Grid>
        ))}
      </Grid>

      {showSeeAll && hasMore && (
        <Box sx={{ textAlign: 'center', mt: 3 }}>
          <Button
            variant="outlined"
            endIcon={<ArrowForwardIcon />}
            onClick={onSeeAll}
            sx={{ borderRadius: 2 }}
          >
            {t('common.viewAll')} ({knowledgeBases.length})
          </Button>
        </Box>
      )}

      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleMenuClose}
      >
        <MenuItem onClick={handleView}>{t('common.viewDetails')}</MenuItem>
        <MenuItem onClick={handleDelete} sx={{ color: 'error.main' }}>
          {t('common.delete')}
        </MenuItem>
      </Menu>
    </Box>
  );
};

export default KnowledgeGridView;