import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Card,
  CardContent,
  Grid,
  Typography,
  Chip,
  Stack,
} from '@mui/material';
import dayjs from 'dayjs';
import type { IKnowledge } from '@/interfaces/database/knowledge';

interface KnowledgeInfoCardProps {
  knowledgeBase: IKnowledge;
}

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

const KnowledgeInfoCard: React.FC<KnowledgeInfoCardProps> = ({ knowledgeBase }) => {
  const { t } = useTranslation();

  return (
    <Card sx={{ mb: 3 }}>
      <CardContent>
        <Grid container spacing={3}>
          <Grid size={{ xs: 12, md: 8 }}>
            <Typography variant="h4" gutterBottom>
              {knowledgeBase.name}
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
              {knowledgeBase.description || t('knowledge.noDescription')}
            </Typography>
            <Stack direction="row" spacing={2} flexWrap="wrap">
              <Chip label={t('knowledge.fileCount', { count: knowledgeBase.doc_num || 0 })} variant="outlined" />
              <Chip label={t('knowledge.chunkCount', { count: knowledgeBase.chunk_num || 0 })} variant="outlined" />
              <Chip label={t('knowledge.tokenCount', { count: knowledgeBase.token_num || 0 })} variant="outlined" />
              <Chip label={t('knowledge.size', { size: formatFileSize(knowledgeBase.size || 0) })} variant="outlined" />
            </Stack>
          </Grid>
          <Grid size={{ xs: 12, md: 4 }}>
            <Stack spacing={1} alignItems="flex-end">
              <Typography variant="body2" color="text.secondary">
                {t('knowledge.createTime')}: {dayjs(knowledgeBase.create_time).format('YYYY-MM-DD HH:mm:ss')}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('knowledge.updateTime')}: {dayjs(knowledgeBase.update_time).format('YYYY-MM-DD HH:mm:ss')}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('knowledge.language')}: {knowledgeBase.language || 'English'}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('knowledge.permission')}: {knowledgeBase.permission}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('knowledge.embeddingModel')}: {knowledgeBase.embd_id}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('knowledge.parser')}: {knowledgeBase.parser_id}
              </Typography>
            </Stack>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default KnowledgeInfoCard;