'use client';

import { useState, useRef } from 'react';
import {
  Dialog,
  DialogContent,
  DialogActions,
  Button,
  Box,
  Typography,
  TextField,
  Alert,
  LinearProgress,
  Chip,
  IconButton,
  Radio
} from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import DownloadIcon from '@mui/icons-material/Download';
import CloseIcon from '@mui/icons-material/Close';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import { useTranslation } from 'react-i18next';
import * as XLSX from 'xlsx';

import {
  QUESTION_TYPES,
  FORMAT_PREVIEW,
  getJsonTemplateData,
  getExcelTemplateData,
  getColumnWidths
} from '../constants';
import {
  StyledDialogTitle,
  UploadBox,
  PreviewPaper,
  CodeBlock,
  ErrorContainer,
  TypeRadioGroup,
  TypeFormControlLabel
} from './ImportDialog.styles';

export default function ImportDialog({ open, onClose, projectId, onSuccess }) {
  const { t } = useTranslation();
  const fileInputRef = useRef(null);

  const [questionType, setQuestionType] = useState('open_ended');
  const [tags, setTags] = useState('');
  const [file, setFile] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [errorDetails, setErrorDetails] = useState([]);

  // 处理文件选择
  const handleFileChange = e => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      const ext = selectedFile.name.split('.').pop().toLowerCase();
      if (!['json', 'xls', 'xlsx'].includes(ext)) {
        setError(t('evalDatasets.import.invalidFileType', '不支持的文件格式，请上传 json、xls 或 xlsx 文件'));
        return;
      }
      setFile(selectedFile);
      setError(null);
      setErrorDetails([]);
    }
  };

  // 下载模板
  const handleDownloadTemplate = format => {
    if (!questionType) {
      setError(t('evalDatasets.import.selectTypeFirst', '请先选择题型'));
      return;
    }

    if (format === 'json') {
      // JSON 模板动态生成并下载
      const templateData = getJsonTemplateData(questionType);
      const jsonContent = JSON.stringify(templateData, null, 2);
      const blob = new Blob([jsonContent], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `eval-dataset-template-${questionType}.json`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } else {
      // Excel 模板动态生成
      const templateData = getExcelTemplateData(questionType);
      const worksheet = XLSX.utils.json_to_sheet(templateData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Template');

      // 设置列宽
      const colWidths = getColumnWidths(questionType);
      worksheet['!cols'] = colWidths;

      // 下载文件
      XLSX.writeFile(workbook, `eval-dataset-template-${questionType}.xlsx`);
    }
  };

  // 提交导入
  const handleSubmit = async () => {
    if (!questionType) {
      setError(t('evalDatasets.import.selectTypeFirst', '请先选择题型'));
      return;
    }
    if (!file) {
      setError(t('evalDatasets.import.selectFile', '请选择要导入的文件'));
      return;
    }

    setLoading(true);
    setError(null);
    setErrorDetails([]);

    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('questionType', questionType);
      formData.append('tags', tags);

      const response = await fetch(`/api/projects/${projectId}/eval-datasets/import`, {
        method: 'POST',
        body: formData
      });

      const result = await response.json();

      if (result.code === 0) {
        onSuccess?.(result.data);
        handleClose();
      } else {
        setError(result.error || result.message);
        if (result.details) {
          setErrorDetails(result.details);
        }
      }
    } catch (err) {
      setError(err.message || t('evalDatasets.import.failed', '导入失败'));
    } finally {
      setLoading(false);
    }
  };

  // 关闭对话框
  const handleClose = () => {
    if (loading) return;
    setQuestionType('open_ended');
    setTags('');
    setFile(null);
    setError(null);
    setErrorDetails([]);
    onClose();
  };

  // 获取当前题型的格式预览
  const formatPreview = questionType ? FORMAT_PREVIEW[questionType] : null;

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
      <StyledDialogTitle>
        {t('evalDatasets.import.title', '导入评估数据集')}
        <IconButton onClick={handleClose} disabled={loading} size="small">
          <CloseIcon />
        </IconButton>
      </StyledDialogTitle>

      <DialogContent dividers>
        {loading && <LinearProgress sx={{ mb: 2 }} />}

        {/* 错误提示 */}
        {error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
            {errorDetails.length > 0 && (
              <ErrorContainer>
                {errorDetails.map((detail, index) => (
                  <Box key={index} className="item">
                    {detail}
                  </Box>
                ))}
                {errorDetails.length < 10 && (
                  <Box sx={{ mt: 0.5, color: 'text.secondary', ml: 2 }}>
                    {t('evalDatasets.import.showingErrors', '显示前 {{count}} 条错误', { count: errorDetails.length })}
                  </Box>
                )}
              </ErrorContainer>
            )}
          </Alert>
        )}

        {/* 题型选择 - 使用封装好的样式组件 */}
        <Box sx={{ mb: 3, mt: 1 }}>
          <Typography variant="subtitle2" sx={{ mb: 1.5, fontWeight: 600, color: 'text.primary' }}>
            {t('evalDatasets.import.questionType', '选择题型')}
          </Typography>
          <TypeRadioGroup value={questionType} onChange={e => setQuestionType(e.target.value)}>
            {QUESTION_TYPES.map(type => (
              <TypeFormControlLabel
                key={type.value}
                value={type.value}
                checked={questionType === type.value}
                control={<Radio size="small" />}
                label={t(type.label, type.labelZh)}
              />
            ))}
          </TypeRadioGroup>
        </Box>

        {/* 数据格式预览 */}
        {formatPreview && (
          <PreviewPaper variant="outlined">
            <Typography variant="subtitle2" className="title">
              {t('evalDatasets.import.formatPreview', '数据格式预览')}
            </Typography>
            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}>
              {formatPreview.fields.map(field => (
                <Chip key={field} label={field} size="small" variant="outlined" color="primary" />
              ))}
            </Box>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
              {formatPreview.description}
            </Typography>
            <CodeBlock>
              <pre style={{ margin: 0 }}>{JSON.stringify(formatPreview.example, null, 2)}</pre>
            </CodeBlock>

            {/* 下载模板按钮 */}
            <Box sx={{ mt: 2, display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
              <Button
                variant="text"
                size="small"
                startIcon={<DownloadIcon />}
                onClick={() => handleDownloadTemplate('json')}
              >
                JSON {t('evalDatasets.import.template', '模板')}
              </Button>
              <Button
                variant="text"
                size="small"
                startIcon={<DownloadIcon />}
                onClick={() => handleDownloadTemplate('xlsx')}
              >
                Excel {t('evalDatasets.import.template', '模板')}
              </Button>
            </Box>
          </PreviewPaper>
        )}

        {/* 文件上传 */}
        <Box sx={{ mb: 3 }}>
          <input
            type="file"
            ref={fileInputRef}
            onChange={handleFileChange}
            accept=".json,.xls,.xlsx"
            style={{ display: 'none' }}
          />
          <UploadBox active={false} hasFile={!!file} onClick={() => fileInputRef.current?.click()}>
            {file ? (
              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
                <InsertDriveFileIcon color="primary" sx={{ fontSize: 40 }} />
                <Typography color="primary" variant="h6">
                  {file.name}
                </Typography>
                <Chip label={`${(file.size / 1024).toFixed(1)} KB`} size="small" color="primary" variant="soft" />
                <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>
                  {t('common.clickToReplace', '点击更换文件')}
                </Typography>
              </Box>
            ) : (
              <Box>
                <CloudUploadIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 1 }} />
                <Typography variant="h6" color="text.secondary" gutterBottom>
                  {t('evalDatasets.import.dropOrClick', '点击或拖拽文件到此处')}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {t('evalDatasets.import.supportedFormats', '支持 JSON、XLS、XLSX 格式')}
                </Typography>
              </Box>
            )}
          </UploadBox>
        </Box>

        {/* 标签输入 */}
        <TextField
          fullWidth
          label={t('evalDatasets.import.tags', '标签（可选）')}
          placeholder={t('evalDatasets.import.tagsPlaceholder', '为导入的数据添加标签，多个标签用逗号分隔')}
          value={tags}
          onChange={e => setTags(e.target.value)}
          disabled={loading}
          helperText={t('evalDatasets.import.tagsHelp', '导入的所有数据将打上这些标签')}
          InputProps={{
            startAdornment: tags ? <Box sx={{ mr: 1, color: 'text.secondary' }}>#</Box> : null
          }}
        />
      </DialogContent>

      <DialogActions sx={{ px: 3, py: 2 }}>
        <Button onClick={handleClose} disabled={loading} size="large">
          {t('common.cancel', '取消')}
        </Button>
        <Button
          variant="contained"
          onClick={handleSubmit}
          disabled={loading || !questionType || !file}
          size="large"
          disableElevation
        >
          {loading ? t('evalDatasets.import.importing', '导入中...') : t('evalDatasets.import.import', '导入')}
        </Button>
      </DialogActions>
    </Dialog>
  );
}