'use client';

import { Card, CardContent, Box, Typography, Chip, Checkbox, IconButton, Tooltip, Divider } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import ShortTextIcon from '@mui/icons-material/ShortText';
import NotesIcon from '@mui/icons-material/Notes';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import { useTheme, alpha } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/navigation';

// 题型图标和颜色映射
const QUESTION_TYPE_CONFIG = {
  true_false: {
    icon: CheckCircleIcon,
    color: 'success',
    bgColor: 'success.light'
  },
  single_choice: {
    icon: RadioButtonCheckedIcon,
    color: 'primary',
    bgColor: 'primary.light'
  },
  multiple_choice: {
    icon: CheckBoxIcon,
    color: 'secondary',
    bgColor: 'secondary.light'
  },
  short_answer: {
    icon: ShortTextIcon,
    color: 'warning',
    bgColor: 'warning.light'
  },
  open_ended: {
    icon: NotesIcon,
    color: 'info',
    bgColor: 'info.light'
  }
};

export default function EvalDatasetCard({ item, selected, onSelect, onEdit, onDelete, projectId }) {
  const theme = useTheme();
  const { t } = useTranslation();
  const router = useRouter();

  const typeConfig = QUESTION_TYPE_CONFIG[item.questionType] || QUESTION_TYPE_CONFIG.short_answer;
  const TypeIcon = typeConfig.icon;

  // 解析选项
  const options = item.options
    ? typeof item.options === 'string'
      ? JSON.parse(item.options || '[]')
      : item.options
    : [];

  // 解析答案
  const correctAnswer = item.correctAnswer;

  const handleCardClick = e => {
    // 如果点击的是复选框或按钮，不跳转
    if (e.target.closest('.MuiCheckbox-root') || e.target.closest('.MuiIconButton-root')) {
      return;
    }
    router.push(`/projects/${projectId}/eval-datasets/${item.id}`);
  };

  return (
    <Card
      variant="outlined"
      onClick={handleCardClick}
      sx={{
        height: 'fit-content',
        display: 'flex',
        flexDirection: 'column',
        transition: 'all 0.2s ease-in-out',
        borderColor: selected ? theme.palette.primary.main : theme.palette.divider,
        bgcolor: selected ? alpha(theme.palette.primary.main, 0.04) : 'background.paper',
        borderRadius: 2,
        position: 'relative',
        cursor: 'pointer',
        '&:hover': {
          borderColor: theme.palette.primary.main,
          transform: 'translateY(-4px)',
          boxShadow: `0 8px 24px ${alpha(theme.palette.common.black, 0.08)}`
        }
      }}
    >
      <CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column', p: 2.5 }}>
        {/* 头部：题型标签和操作 */}
        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
            <Checkbox
              size="small"
              checked={selected}
              onChange={e => {
                e.stopPropagation();
                onSelect(item.id);
              }}
              sx={{ p: 0.5, ml: -0.5 }}
            />
            <Chip
              icon={<TypeIcon sx={{ fontSize: '16px !important' }} />}
              label={t(`eval.questionTypes.${item.questionType}`)}
              size="small"
              color={typeConfig.color}
              variant="outlined"
              sx={{
                fontWeight: 600,
                borderWidth: '1.5px',
                bgcolor: alpha(theme.palette[typeConfig.color].main, 0.05)
              }}
            />
          </Box>
          <Box sx={{ display: 'flex', gap: 0.5 }}>
            <Tooltip title={t('common.edit')}>
              <IconButton
                size="small"
                onClick={e => {
                  e.stopPropagation();
                  onEdit(item);
                }}
                sx={{
                  color: 'text.secondary',
                  '&:hover': { color: 'primary.main', bgcolor: alpha(theme.palette.primary.main, 0.1) }
                }}
              >
                <EditIcon fontSize="small" />
              </IconButton>
            </Tooltip>
            <Tooltip title={t('common.delete')}>
              <IconButton
                size="small"
                onClick={e => {
                  e.stopPropagation();
                  onDelete(item.id);
                }}
                sx={{
                  color: 'text.secondary',
                  '&:hover': { color: 'error.main', bgcolor: alpha(theme.palette.error.main, 0.1) }
                }}
              >
                <DeleteIcon fontSize="small" />
              </IconButton>
            </Tooltip>
          </Box>
        </Box>

        {/* 问题内容 */}
        <Box sx={{ mb: 2 }}>
          <Typography
            variant="body1"
            sx={{
              fontWeight: 600,
              lineHeight: 1.6,
              color:
                item.questionType === 'true_false'
                  ? correctAnswer === '✅'
                    ? 'success.main'
                    : 'error.main'
                  : 'text.primary',
              display: 'inline'
            }}
          >
            {item.questionType === 'true_false' && correctAnswer} {item.question}
          </Typography>
        </Box>

        {/* 选项列表（仅单选/多选显示） */}
        {(item.questionType === 'single_choice' || item.questionType === 'multiple_choice') && options.length > 0 && (
          <Box sx={{ mb: 2, flex: 1 }}>
            {(item.questionType === 'multiple_choice' ? options : options.slice(0, 4)).map((option, index) => {
              const optionLabel = String.fromCharCode(65 + index); // A, B, C, D
              // 解析多选题答案，支持多种格式：数组、JSON字符串、逗号分隔字符串
              const parseMultipleAnswers = answer => {
                if (Array.isArray(answer)) return answer;
                if (!answer) return [];
                // 尝试解析 JSON 数组
                if (answer.startsWith('[')) {
                  try {
                    return JSON.parse(answer);
                  } catch (e) {
                    return [];
                  }
                }
                // 逗号分隔字符串格式，如 "A,B,D"
                return answer.split(',').map(s => s.trim());
              };
              const isCorrect =
                item.questionType === 'multiple_choice'
                  ? parseMultipleAnswers(correctAnswer).includes(optionLabel)
                  : correctAnswer === optionLabel;

              return (
                <Box
                  key={index}
                  sx={{
                    display: 'flex',
                    alignItems: 'baseline',
                    gap: 1,
                    mb: 0.5,
                    p: '4px 8px',
                    borderRadius: 1,
                    bgcolor: isCorrect ? alpha(theme.palette.success.main, 0.08) : 'transparent',
                    border: '1px solid',
                    borderColor: isCorrect ? alpha(theme.palette.success.main, 0.3) : 'transparent'
                  }}
                >
                  <Typography
                    variant="caption"
                    sx={{
                      fontWeight: 700,
                      color: isCorrect ? 'success.main' : 'text.secondary',
                      minWidth: 16
                    }}
                  >
                    {optionLabel}.
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      color: isCorrect ? 'success.dark' : 'text.secondary',
                      fontSize: '0.875rem',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap'
                    }}
                  >
                    {option}
                  </Typography>
                </Box>
              );
            })}
            {item.questionType === 'single_choice' && options.length > 4 && (
              <Typography variant="caption" color="text.disabled" sx={{ pl: 1, mt: 0.5, display: 'block' }}>
                ... +{options.length - 4} {t('eval.moreOptions')}
              </Typography>
            )}
          </Box>
        )}

        {/* 非选择题且非判断题答案 */}
        {item.questionType !== 'single_choice' &&
          item.questionType !== 'multiple_choice' &&
          item.questionType !== 'true_false' &&
          correctAnswer && (
            <Box
              sx={{
                p: 1.5,
                borderRadius: 2,
                bgcolor: 'background.paper',
                border: '1px dashed',
                borderColor: 'divider',
                mb: 2,
                flex: 1
              }}
            >
              <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>
                {t('eval.answer')}:
              </Typography>
              <Typography
                variant="body2"
                sx={{
                  color: 'text.secondary',
                  display: '-webkit-box',
                  WebkitLineClamp: 4,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden'
                }}
              >
                {correctAnswer}
              </Typography>
            </Box>
          )}

        <Divider sx={{ my: 1.5, opacity: 0.6 }} />

        {/* 底部元信息 */}
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
          {item.chunks ? (
            <Tooltip title={item.chunks.name || item.chunks.fileName}>
              <Chip
                label={item.chunks.name || item.chunks.fileName}
                size="small"
                variant="outlined"
                sx={{
                  fontSize: 11,
                  height: 22,
                  maxWidth: 140,
                  borderColor: 'divider',
                  color: 'text.secondary'
                }}
              />
            </Tooltip>
          ) : (
            <Box />
          )}

          {item.tags && (
            <Tooltip title={item.tags}>
              <Box sx={{ display: 'flex', gap: 0.5, overflow: 'hidden', maxWidth: 120 }}>
                {item.tags
                  .split(/[,，]/)
                  .slice(0, 2)
                  .map((tag, index) => (
                    <Chip
                      key={index}
                      label={tag}
                      size="small"
                      sx={{
                        fontSize: 11,
                        height: 22,
                        bgcolor: alpha(theme.palette.info.main, 0.08),
                        color: 'info.dark',
                        maxWidth: 80
                      }}
                    />
                  ))}
                {item.tags.split(/[,，]/).length > 2 && (
                  <Typography variant="caption" color="text.secondary" sx={{ fontSize: 11, alignSelf: 'center' }}>
                    +{item.tags.split(/[,，]/).length - 2}
                  </Typography>
                )}
              </Box>
            </Tooltip>
          )}
        </Box>
      </CardContent>
    </Card>
  );
}