import React, { useState, useEffect } from 'react';
import {
  Typography,
  Box,
  Card,
  CardContent,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Chip,
  Alert,
  CircularProgress,
  Grid,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem
} from '@mui/material';
import {
  Delete,
  Download,
  Visibility,
  FileUpload,
  Warning,
  CheckCircle,
  Error,
  Update
} from '@mui/icons-material';
import { fetchFiles, deleteFile, uploadFile } from '../api';
import Toast from './Toast';

function FileManager({ selectedProject }) {
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [deleteDialog, setDeleteDialog] = useState({ open: false, file: null });
  const [revisionDialog, setRevisionDialog] = useState({ open: false, file: null });
  const [revisionFile, setRevisionFile] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [toast, setToast] = useState({ open: false, message: '', type: 'info' });
  const [filter, setFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');

  useEffect(() => {
    if (selectedProject) {
      fetchFilesList();
    } else {
      setFiles([]);
    }
  }, [selectedProject]);

  // 파일 업로드 이벤트 리스너 추가
  useEffect(() => {
    console.log('FileManager: 이벤트 리스너 등록 시작');
    
    const handleFileUploaded = (event) => {
      const { jobNo } = event.detail;
      console.log('FileManager: 파일 업로드 이벤트 수신:', event.detail);
      console.log('FileManager: 현재 선택된 프로젝트:', selectedProject);
      
      if (selectedProject && selectedProject.job_no === jobNo) {
        console.log('FileManager: 파일 업로드 감지됨, 목록 갱신 중...');
        fetchFilesList();
      } else {
        console.log('FileManager: job_no 불일치 또는 프로젝트 미선택');
        console.log('이벤트 jobNo:', jobNo);
        console.log('선택된 프로젝트 jobNo:', selectedProject?.job_no);
      }
    };

    window.addEventListener('fileUploaded', handleFileUploaded);
    console.log('FileManager: fileUploaded 이벤트 리스너 등록 완료');
    
    return () => {
      window.removeEventListener('fileUploaded', handleFileUploaded);
      console.log('FileManager: fileUploaded 이벤트 리스너 제거');
    };
  }, [selectedProject]);

  const fetchFilesList = async () => {
    setLoading(true);
    try {
      console.log('FileManager: 파일 목록 조회 시작, job_no:', selectedProject.job_no);
      const response = await fetchFiles({ job_no: selectedProject.job_no });
      console.log('FileManager: API 응답:', response.data);
      
      if (response.data && response.data.files) {
        setFiles(response.data.files);
        console.log('FileManager: 파일 목록 업데이트 완료, 파일 수:', response.data.files.length);
      } else {
        console.log('FileManager: 파일 목록이 비어있음');
        setFiles([]);
      }
    } catch (error) {
      console.error('FileManager: 파일 목록 조회 실패:', error);
      setToast({
        open: true,
        message: '파일 목록을 불러오는데 실패했습니다.',
        type: 'error'
      });
    } finally {
      setLoading(false);
    }
  };

  const handleDeleteFile = async () => {
    if (!deleteDialog.file) return;

    try {
      await deleteFile(deleteDialog.file.id);
      setToast({
        open: true,
        message: '파일이 성공적으로 삭제되었습니다.',
        type: 'success'
      });
      setDeleteDialog({ open: false, file: null });
      fetchFilesList(); // 목록 새로고침
    } catch (error) {
      console.error('파일 삭제 실패:', error);
      setToast({
        open: true,
        message: '파일 삭제에 실패했습니다.',
        type: 'error'
      });
    }
  };

  const handleRevisionUpload = async () => {
    if (!revisionFile || !revisionDialog.file) return;

    setUploading(true);
    try {
      const formData = new FormData();
      formData.append('file', revisionFile);
      formData.append('job_no', selectedProject.job_no);
      formData.append('parent_file_id', revisionDialog.file.id);
      formData.append('bom_name', revisionDialog.file.bom_name || revisionDialog.file.original_filename);
      
      console.log('🔄 리비전 업로드 FormData:', {
        fileName: revisionFile.name,
        jobNo: selectedProject.job_no,
        parentFileId: revisionDialog.file.id,
        parentFileIdType: typeof revisionDialog.file.id,
        baseFileName: revisionDialog.file.original_filename,
        bomName: revisionDialog.file.bom_name || revisionDialog.file.original_filename,
        fullFileObject: revisionDialog.file
      });
      
      const response = await uploadFile(formData);
      
      if (response.data.success) {
        setToast({
          open: true,
          message: `리비전 업로드 성공! ${response.data.revision}`,
          type: 'success'
        });
        setRevisionDialog({ open: false, file: null });
        setRevisionFile(null);
        fetchFilesList(); // 목록 새로고침
      } else {
        setToast({
          open: true,
          message: response.data.message || '리비전 업로드에 실패했습니다.',
          type: 'error'
        });
      }
    } catch (error) {
      console.error('리비전 업로드 실패:', error);
      setToast({
        open: true,
        message: '리비전 업로드에 실패했습니다.',
        type: 'error'
      });
    } finally {
      setUploading(false);
    }
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'completed':
        return 'success';
      case 'processing':
        return 'warning';
      case 'failed':
        return 'error';
      default:
        return 'default';
    }
  };

  const getStatusIcon = (status) => {
    switch (status) {
      case 'completed':
        return <CheckCircle />;
      case 'processing':
        return <CircularProgress size={16} />;
      case 'failed':
        return <Error />;
      default:
        return null;
    }
  };

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

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleString('ko-KR');
  };

  const filteredFiles = files.filter(file => {
    const matchesFilter = !filter || 
      file.original_filename.toLowerCase().includes(filter.toLowerCase()) ||
      file.project_name?.toLowerCase().includes(filter.toLowerCase());
    
    const matchesStatus = !statusFilter || file.status === statusFilter;
    
    return matchesFilter && matchesStatus;
  });

  if (!selectedProject) {
    return (
      <Box>
        <Typography variant="h4" gutterBottom>
          📁 도면 관리
        </Typography>
        <Card>
          <CardContent sx={{ textAlign: 'center', py: 4 }}>
            <FileUpload sx={{ fontSize: 64, color: 'secondary.main', mb: 2 }} />
            <Typography variant="h6" gutterBottom>
              프로젝트를 선택해주세요
            </Typography>
            <Typography variant="body2" color="textSecondary">
              프로젝트 관리 탭에서 프로젝트를 선택하면 도면을 관리할 수 있습니다.
            </Typography>
          </CardContent>
        </Card>
      </Box>
    );
  }

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        📁 도면 관리
      </Typography>
      
      <Typography variant="h6" color="primary" sx={{ mb: 2 }}>
        {selectedProject.project_name} ({selectedProject.official_project_code})
      </Typography>

      {/* 필터 UI */}
      <Box sx={{ mb: 2, p: 2, bgcolor: 'grey.50', borderRadius: 2 }}>
        <Grid container spacing={2} alignItems="center">
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              label="파일명/프로젝트명 검색"
              value={filter}
              onChange={e => setFilter(e.target.value)}
              size="small"
              fullWidth
              placeholder="파일명 또는 프로젝트명으로 검색"
            />
          </Grid>
          <Grid item xs={12} sm={6} md={4}>
            <FormControl size="small" fullWidth>
              <InputLabel>상태</InputLabel>
              <Select
                value={statusFilter}
                label="상태"
                onChange={e => setStatusFilter(e.target.value)}
              >
                <MenuItem value="">전체</MenuItem>
                <MenuItem value="completed">완료</MenuItem>
                <MenuItem value="processing">처리 중</MenuItem>
                <MenuItem value="failed">실패</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={12} sm={12} md={4}>
            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
              <Button
                variant="outlined"
                size="small"
                onClick={() => {
                  setFilter('');
                  setStatusFilter('');
                }}
              >
                필터 초기화
              </Button>
              <Button
                variant="contained"
                size="small"
                onClick={fetchFilesList}
              >
                새로고침
              </Button>
            </Box>
          </Grid>
        </Grid>
      </Box>

      {/* 전역 Toast */}
      <Toast
        open={toast.open}
        message={toast.message}
        type={toast.type}
        onClose={() => setToast({ open: false, message: '', type: 'info' })}
      />

      {loading ? (
        <Card>
          <CardContent sx={{ textAlign: 'center', py: 4 }}>
            <CircularProgress size={60} />
            <Typography variant="h6" sx={{ mt: 2 }}>
              파일 목록 로딩 중...
            </Typography>
          </CardContent>
        </Card>
      ) : filteredFiles.length === 0 ? (
        <Card>
          <CardContent sx={{ textAlign: 'center', py: 4 }}>
            <FileUpload sx={{ fontSize: 64, color: 'secondary.main', mb: 2 }} />
            <Typography variant="h6" gutterBottom>
              {filter || statusFilter ? '검색 결과가 없습니다' : '업로드된 파일이 없습니다'}
            </Typography>
            <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
              {filter || statusFilter 
                ? '다른 검색 조건을 시도해보세요.' 
                : '파일 업로드 탭에서 BOM 파일을 업로드해주세요.'
              }
            </Typography>
            {(filter || statusFilter) && (
              <Button 
                variant="outlined" 
                onClick={() => {
                  setFilter('');
                  setStatusFilter('');
                }}
              >
                필터 초기화
              </Button>
            )}
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardContent>
            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
              <Typography variant="h6">
                총 {filteredFiles.length}개 파일
              </Typography>
              <Chip 
                label={`${files.length}개 전체`} 
                color="primary" 
                variant="outlined" 
              />
            </Box>
            
            <TableContainer component={Paper} variant="outlined">
              <Table>
                <TableHead>
                  <TableRow sx={{ bgcolor: 'grey.50' }}>
                    <TableCell><strong>번호</strong></TableCell>
                    <TableCell><strong>파일명</strong></TableCell>
                    <TableCell align="center"><strong>프로젝트</strong></TableCell>
                    <TableCell align="center"><strong>상태</strong></TableCell>
                    <TableCell align="center"><strong>파일 크기</strong></TableCell>
                    <TableCell align="center"><strong>업로드 일시</strong></TableCell>
                    <TableCell align="center"><strong>처리 완료</strong></TableCell>
                    <TableCell align="center"><strong>작업</strong></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {filteredFiles.map((file, index) => (
                    <TableRow 
                      key={file.id}
                      sx={{ '&:hover': { bgcolor: 'grey.50' } }}
                    >
                      <TableCell>
                        {index + 1}
                      </TableCell>
                      <TableCell>
                        <Typography variant="body2" sx={{ maxWidth: 300 }}>
                          {file.original_filename}
                        </Typography>
                      </TableCell>
                      <TableCell align="center">
                        <Chip 
                          label={file.project_name || '-'} 
                          size="small" 
                          color="primary"
                        />
                      </TableCell>
                      <TableCell align="center">
                        <Chip 
                          label={file.status === 'completed' ? '완료' : 
                                 file.status === 'processing' ? '처리 중' : 
                                 file.status === 'failed' ? '실패' : '대기'}
                          size="small"
                          color={getStatusColor(file.status)}
                          icon={getStatusIcon(file.status)}
                        />
                      </TableCell>
                      <TableCell align="center">
                        <Typography variant="body2">
                          {formatFileSize(file.file_size || 0)}
                        </Typography>
                      </TableCell>
                      <TableCell align="center">
                        <Typography variant="body2">
                          {formatDate(file.created_at)}
                        </Typography>
                      </TableCell>
                      <TableCell align="center">
                        <Typography variant="body2">
                          {file.processed_at ? formatDate(file.processed_at) : '-'}
                        </Typography>
                      </TableCell>
                      <TableCell align="center">
                        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
                          <IconButton
                            size="small"
                            color="primary"
                            title="다운로드"
                            disabled={file.status !== 'completed'}
                          >
                            <Download />
                          </IconButton>
                          <IconButton
                            size="small"
                            color="info"
                            title="상세 보기"
                          >
                            <Visibility />
                          </IconButton>
                          <IconButton
                            size="small"
                            color="warning"
                            title="리비전 업로드"
                            onClick={() => {
                              console.log('🔄 리비전 버튼 클릭, 파일 정보:', file);
                              setRevisionDialog({ open: true, file });
                            }}
                          >
                            <Update />
                          </IconButton>
                          <IconButton
                            size="small"
                            color="error"
                            title="삭제"
                            onClick={() => setDeleteDialog({ open: true, file })}
                          >
                            <Delete />
                          </IconButton>
                        </Box>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </CardContent>
        </Card>
      )}

      {/* 삭제 확인 다이얼로그 */}
      <Dialog
        open={deleteDialog.open}
        onClose={() => setDeleteDialog({ open: false, file: null })}
      >
        <DialogTitle>
          <Box display="flex" alignItems="center" gap={1}>
            <Warning color="error" />
            파일 삭제 확인
          </Box>
        </DialogTitle>
        <DialogContent>
          <Typography variant="body1" sx={{ mb: 2 }}>
            다음 파일을 삭제하시겠습니까?
          </Typography>
          <Alert severity="warning" sx={{ mb: 2 }}>
            <Typography variant="body2">
              <strong>파일명:</strong> {deleteDialog.file?.original_filename}
            </Typography>
            <Typography variant="body2">
              <strong>프로젝트:</strong> {deleteDialog.file?.project_name}
            </Typography>
            <Typography variant="body2">
              <strong>업로드 일시:</strong> {deleteDialog.file?.created_at ? formatDate(deleteDialog.file.created_at) : '-'}
            </Typography>
          </Alert>
          <Typography variant="body2" color="error">
            ⚠️ 이 작업은 되돌릴 수 없습니다. 파일과 관련된 모든 자재 데이터가 함께 삭제됩니다.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button 
            onClick={() => setDeleteDialog({ open: false, file: null })}
          >
            취소
          </Button>
          <Button 
            onClick={handleDeleteFile}
            color="error"
            variant="contained"
            startIcon={<Delete />}
          >
            삭제
          </Button>
        </DialogActions>
      </Dialog>

      {/* 리비전 업로드 다이얼로그 */}
      <Dialog
        open={revisionDialog.open}
        onClose={() => {
          setRevisionDialog({ open: false, file: null });
          setRevisionFile(null);
        }}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>리비전 업로드</DialogTitle>
        <DialogContent>
          <Typography variant="body1" gutterBottom>
            <strong>기준 파일:</strong> {revisionDialog.file?.original_filename}
          </Typography>
          <Typography variant="body2" color="textSecondary" gutterBottom>
            현재 리비전: {revisionDialog.file?.revision || 'Rev.0'}
          </Typography>
          
          <Box sx={{ mt: 2 }}>
            <Typography variant="body2" gutterBottom>
              새 리비전 파일을 선택하세요:
            </Typography>
            <input
              type="file"
              accept=".xlsx,.xls,.csv"
              onChange={(e) => setRevisionFile(e.target.files[0])}
              style={{ width: '100%', padding: '8px' }}
            />
          </Box>
          
          {revisionFile && (
            <Alert severity="info" sx={{ mt: 2 }}>
              선택된 파일: {revisionFile.name}
            </Alert>
          )}
        </DialogContent>
        <DialogActions>
          <Button 
            onClick={() => {
              setRevisionDialog({ open: false, file: null });
              setRevisionFile(null);
            }}
          >
            취소
          </Button>
          <Button 
            onClick={handleRevisionUpload}
            variant="contained"
            disabled={!revisionFile || uploading}
          >
            {uploading ? '업로드 중...' : '리비전 업로드'}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}

export default FileManager; 