'use client';

import { useState } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Box,
  Typography,
  List,
  ListItem,
  ListItemText,
  IconButton,
  CircularProgress,
  Alert,
  TextField,
  Tabs,
  Tab,
  Paper,
  Chip,
  Card
} from '@mui/material';
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import UploadFileIcon from '@mui/icons-material/UploadFile';
import FolderZipIcon from '@mui/icons-material/FolderZip';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import axios from 'axios';

export default function ImportDialog({ open, projectId, onClose, onSuccess }) {
  const { t } = useTranslation();
  const [mode, setMode] = useState(0); // 0: 目录导入, 1: PDF 导入, 2: 压缩包导入
  const [directories, setDirectories] = useState([]);
  const [loading, setLoading] = useState(false);
  const [inputPath, setInputPath] = useState('');
  const [selectedPdf, setSelectedPdf] = useState(null);
  const [selectedZip, setSelectedZip] = useState(null);

  const handleAddDirectory = () => {
    if (inputPath.trim() && !directories.includes(inputPath.trim())) {
      setDirectories([...directories, inputPath.trim()]);
      setInputPath('');
    }
  };

  const handleRemoveDirectory = index => {
    setDirectories(directories.filter((_, i) => i !== index));
  };

  const handleImport = async () => {
    if (directories.length === 0) {
      toast.error(t('images.selectAtLeastOne'));
      return;
    }

    try {
      setLoading(true);
      const response = await axios.post(`/api/projects/${projectId}/images`, {
        directories
      });

      toast.success(t('images.importSuccess', { count: response.data.count }));
      setDirectories([]);
      onSuccess?.();
    } catch (error) {
      console.error('Failed to import images:', error);
      toast.error(error.response?.data?.error || t('images.importFailed'));
    } finally {
      setLoading(false);
    }
  };

  const handlePdfSelect = event => {
    const file = event.target.files?.[0];
    if (file && file.type === 'application/pdf') {
      setSelectedPdf(file);
    } else {
      toast.error(t('images.invalidPdfFile', { defaultValue: '请选择有效的 PDF 文件' }));
    }
  };

  const handlePdfImport = async () => {
    if (!selectedPdf) {
      toast.error(t('images.selectPdfFile', { defaultValue: '请选择 PDF 文件' }));
      return;
    }

    try {
      setLoading(true);
      const formData = new FormData();
      formData.append('file', selectedPdf);

      // 调用 PDF 转换 API
      const response = await axios.post(`/api/projects/${projectId}/images/pdf-convert`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });

      toast.success(
        t('images.pdfImportSuccess', {
          defaultValue: `成功从 PDF "${response.data.pdfName}" 导入 ${response.data.count} 张图片`,
          count: response.data.count,
          name: response.data.pdfName
        })
      );
      setSelectedPdf(null);
      onSuccess?.();
    } catch (error) {
      console.error('Failed to import PDF:', error);
      toast.error(error.response?.data?.error || t('images.pdfImportFailed', { defaultValue: 'PDF 导入失败' }));
    } finally {
      setLoading(false);
    }
  };

  const handleZipSelect = event => {
    const file = event.target.files?.[0];
    if (file && file.name.toLowerCase().endsWith('.zip')) {
      setSelectedZip(file);
    } else {
      toast.error(t('images.invalidZipFile', { defaultValue: '请选择有效的 ZIP 文件' }));
    }
  };

  const handleZipImport = async () => {
    if (!selectedZip) {
      toast.error(t('images.selectZipFile', { defaultValue: '请选择 ZIP 文件' }));
      return;
    }

    try {
      setLoading(true);
      const formData = new FormData();
      formData.append('file', selectedZip);

      // 调用压缩包导入 API
      const response = await axios.post(`/api/projects/${projectId}/images/zip-import`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });

      toast.success(
        t('images.zipImportSuccess', {
          defaultValue: `成功从压缩包 "${response.data.zipName}" 导入 ${response.data.count} 张图片`,
          count: response.data.count,
          name: response.data.zipName
        })
      );
      setSelectedZip(null);
      onSuccess?.();
    } catch (error) {
      console.error('Failed to import ZIP:', error);
      toast.error(error.response?.data?.error || t('images.zipImportFailed', { defaultValue: '压缩包导入失败' }));
    } finally {
      setLoading(false);
    }
  };

  const handleClose = () => {
    if (!loading) {
      setDirectories([]);
      setSelectedPdf(null);
      setSelectedZip(null);
      setMode(0);
      onClose();
    }
  };

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
      <DialogTitle>{t('images.importImages')}</DialogTitle>
      <DialogContent sx={{ pt: 2 }}>
        <Tabs
          value={mode}
          onChange={(e, newValue) => setMode(newValue)}
          sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
        >
          <Tab
            label={t('images.importFromDirectory', { defaultValue: '从目录导入' })}
            icon={<FolderOpenIcon />}
            iconPosition="start"
          />
          <Tab
            label={t('images.importFromPdf', { defaultValue: '从 PDF 导入' })}
            icon={<PictureAsPdfIcon />}
            iconPosition="start"
          />
          <Tab
            label={t('images.importFromZip', { defaultValue: '从压缩包导入' })}
            icon={<FolderZipIcon />}
            iconPosition="start"
          />
        </Tabs>

        {mode === 0 ? (
          <>
            <Alert severity="info" sx={{ mb: 2 }}>
              {t('images.importTip')}
            </Alert>

            <Box sx={{ display: 'flex', gap: 1.5, mb: 3 }}>
              <TextField
                fullWidth
                size="small"
                label={t('images.directoryPath')}
                placeholder={t('images.enterDirectoryPath')}
                value={inputPath}
                onChange={e => setInputPath(e.target.value)}
                onKeyPress={e => {
                  if (e.key === 'Enter') {
                    handleAddDirectory();
                  }
                }}
                disabled={loading}
                sx={{
                  '& .MuiOutlinedInput-root': {
                    borderRadius: 2
                  }
                }}
              />
              <Button
                variant="contained"
                startIcon={<FolderOpenIcon />}
                onClick={handleAddDirectory}
                disabled={loading || !inputPath.trim()}
                sx={{
                  borderRadius: 2,
                  px: 2.5,
                  fontWeight: 600,
                  textTransform: 'none',
                  whiteSpace: 'nowrap',
                  boxShadow: 1,
                  transition: 'all 0.2s',
                  '&:hover:not(:disabled)': {
                    boxShadow: 2,
                    transform: 'translateY(-1px)'
                  }
                }}
              >
                {t('images.addDirectory', { defaultValue: '添加目录' })}
              </Button>
            </Box>

            {directories.length > 0 && (
              <Card
                sx={{
                  p: 2.5,
                  bgcolor: 'background.paper',
                  border: '1px solid',
                  borderColor: 'divider',
                  borderRadius: 2
                }}
              >
                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                  <FolderOpenIcon sx={{ mr: 1, color: 'primary.main' }} />
                  <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                    {t('images.selectedDirectories')} ({directories.length})
                  </Typography>
                </Box>
                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                  {directories.map((dir, index) => (
                    <Chip
                      key={index}
                      label={dir}
                      onDelete={() => handleRemoveDirectory(index)}
                      disabled={loading}
                      icon={<FolderOpenIcon />}
                      sx={{
                        borderRadius: 1.5,
                        fontWeight: 500,
                        maxWidth: '100%',
                        '& .MuiChip-label': {
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                        }
                      }}
                    />
                  ))}
                </Box>
              </Card>
            )}
          </>
        ) : mode === 1 ? (
          <>
            <Alert severity="info" sx={{ mb: 2 }}>
              {t('images.pdfImportTip', { defaultValue: '选择 PDF 文件，系统会自动将其转换为图片并导入' })}
            </Alert>

            <Paper
              variant="outlined"
              sx={{
                p: 4,
                textAlign: 'center',
                cursor: 'pointer',
                bgcolor: 'background.default',
                border: '2px dashed',
                borderColor: selectedPdf ? 'primary.main' : 'divider',
                transition: 'all 0.3s',
                '&:hover': {
                  bgcolor: 'action.hover',
                  borderColor: 'primary.main'
                }
              }}
              onClick={() => document.getElementById('pdf-file-input').click()}
            >
              <input
                id="pdf-file-input"
                type="file"
                accept=".pdf,application/pdf"
                style={{ display: 'none' }}
                onChange={handlePdfSelect}
                disabled={loading}
              />
              <UploadFileIcon sx={{ fontSize: 64, color: selectedPdf ? 'primary.main' : 'text.secondary', mb: 2 }} />
              <Typography variant="h6" gutterBottom>
                {selectedPdf ? selectedPdf.name : t('images.clickToSelectPdf', { defaultValue: '点击选择 PDF 文件' })}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('images.supportedFormat', { defaultValue: '支持格式：PDF' })}
              </Typography>
              {selectedPdf && (
                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
                  {t('images.fileSize', { defaultValue: '文件大小' })}: {(selectedPdf.size / 1024 / 1024).toFixed(2)} MB
                </Typography>
              )}
            </Paper>
          </>
        ) : (
          <>
            <Alert severity="info" sx={{ mb: 2 }}>
              {t('images.zipImportTip', { defaultValue: '选择 ZIP 压缩包文件，系统会自动解压并导入其中的图片' })}
            </Alert>

            <Paper
              variant="outlined"
              sx={{
                p: 4,
                textAlign: 'center',
                cursor: 'pointer',
                bgcolor: 'background.default',
                border: '2px dashed',
                borderColor: selectedZip ? 'primary.main' : 'divider',
                transition: 'all 0.3s',
                '&:hover': {
                  bgcolor: 'action.hover',
                  borderColor: 'primary.main'
                }
              }}
              onClick={() => document.getElementById('zip-file-input').click()}
            >
              <input
                id="zip-file-input"
                type="file"
                accept=".zip,application/zip,application/x-zip-compressed"
                style={{ display: 'none' }}
                onChange={handleZipSelect}
                disabled={loading}
              />
              <FolderZipIcon sx={{ fontSize: 64, color: selectedZip ? 'primary.main' : 'text.secondary', mb: 2 }} />
              <Typography variant="h6" gutterBottom>
                {selectedZip ? selectedZip.name : t('images.clickToSelectZip', { defaultValue: '点击选择 ZIP 文件' })}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('images.supportedZipFormat', { defaultValue: '支持格式：ZIP' })}
              </Typography>
              {selectedZip && (
                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
                  {t('images.fileSize', { defaultValue: '文件大小' })}: {(selectedZip.size / 1024 / 1024).toFixed(2)} MB
                </Typography>
              )}
            </Paper>
          </>
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} disabled={loading}>
          {t('common.cancel')}
        </Button>
        {mode === 0 ? (
          <Button
            onClick={handleImport}
            variant="contained"
            disabled={loading || directories.length === 0}
            startIcon={loading ? <CircularProgress size={20} /> : null}
          >
            {t('images.startImport')}
          </Button>
        ) : mode === 1 ? (
          <Button
            onClick={handlePdfImport}
            variant="contained"
            disabled={loading || !selectedPdf}
            startIcon={loading ? <CircularProgress size={20} /> : null}
          >
            {t('images.convertAndImport', { defaultValue: '转换并导入' })}
          </Button>
        ) : (
          <Button
            onClick={handleZipImport}
            variant="contained"
            disabled={loading || !selectedZip}
            startIcon={loading ? <CircularProgress size={20} /> : null}
          >
            {t('images.extractAndImport', { defaultValue: '解压并导入' })}
          </Button>
        )}
      </DialogActions>
    </Dialog>
  );
}