import { Component, createRef } from 'react';
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Divider from '@mui/material/Divider';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import IconButton from '@mui/material/IconButton';
import LinearProgress from '@mui/material/LinearProgress';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';
import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined';
import CloseIcon from '@mui/icons-material/Close';
import { enqueueSnackbar } from 'notistack';
import { company } from '../../api';
import categoryAutomat from '../../automats/categoryAutomat';
import articleIndexAutomat from '../../automats/articleIndexAutomat';
import brandAutomat from '../../automats/brandAutomat';

function formatBytes(bytes) {
  if (bytes == null || isNaN(bytes) || bytes === 0) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
}

function isZipFile(file) {
  if (!file) return false;
  const name = (file.name || '').toLowerCase();
  return (
    name.endsWith('.zip') ||
    file.type === 'application/zip' ||
    file.type === 'application/x-zip-compressed'
  );
}

const PHASE_LABELS = {
  brands: 'Marken werden importiert…',
  categories: 'Kategorien werden importiert…',
  articles: 'Artikel werden abgeglichen…',
  variants: 'Varianten werden verknüpft…',
  images: 'Bilder werden optimiert…',
};

const EXPORT_OPTIONS = [
  {
    id: 'articles',
    label: 'Artikel & Medien (ZIP)',
    desc: 'artikel.csv inklusive aller referenzierten AVIF-Bilder und Preise.',
    endpoint: '/api/article/export.zip',
    defaultFilename: 'artikel-export.zip',
  },
  {
    id: 'categories',
    label: 'Kategorien & Bilder (ZIP)',
    desc: 'kategorien.csv inklusive Kategoriebäumen und AVIF-Vorschaubildern.',
    endpoint: '/api/category/export.zip',
    defaultFilename: 'kategorien-export.zip',
  },
  {
    id: 'company',
    label: 'Gesamtsicherung / Mandant (ZIP)',
    desc: 'Vollständiger Datenbestand (Artikel, Kategorien, Kunden, Belege und Medien).',
    endpoint: '/api/company/export.zip',
    defaultFilename: 'mandant-gesamtsicherung.zip',
  },
];

export default class ImportExportSettingsPanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // Export state
      exportType: 'articles',
      downloading: false,
      downloadProgress: null, // null = unknown, number 0-100
      downloadLoaded: 0,
      downloadTotal: 0,
      downloadError: null,

      // Import state (SSE streaming & upload tracking)
      selectedFile: null,
      uploading: false,
      uploadStage: 'idle', // 'idle' | 'upload' | 'server'
      uploadProgress: 0,
      uploadLoaded: 0,
      uploadTotal: 0,
      importPhase: null, // 'categories' | 'articles' | 'variants' | 'images' | null
      importPhaseCurrent: 0,
      importPhaseTotal: 0,
      importItem: null,
      statusMessage: null,
      importStats: null,
      uploadError: null,
      uploadSuccess: null,
    };

    this.fileInputRef = createRef();
    this.uploadAbortController = null;
    this.abortController = null;

    this.handleStartDownload = this.handleStartDownload.bind(this);
    this.handleCancelDownload = this.handleCancelDownload.bind(this);
    this.handleFileChange = this.handleFileChange.bind(this);
    this.handleStartUpload = this.handleStartUpload.bind(this);
    this.handleCancelUpload = this.handleCancelUpload.bind(this);
  }

  componentWillUnmount() {
    if (this.uploadAbortController) {
      this.uploadAbortController.abort();
    }
    if (this.abortController) {
      this.abortController.abort();
    }
  }

  async handleStartDownload() {
    const { exportType } = this.state;
    const option = EXPORT_OPTIONS.find((opt) => opt.id === exportType) ?? EXPORT_OPTIONS[0];

    this.setState({
      downloading: true,
      downloadProgress: null,
      downloadLoaded: 0,
      downloadTotal: 0,
      downloadError: null,
    });

    this.abortController = new AbortController();

    try {
      const response = await fetch(option.endpoint, {
        method: 'GET',
        credentials: 'include',
        signal: this.abortController.signal,
      });

      if (!response.ok) {
        let errMessage = `Fehler beim Herunterladen (${response.status})`;
        try {
          const json = await response.json();
          errMessage = json.error || json.message || errMessage;
        } catch {
          // Ignore json parse error
        }
        throw new Error(errMessage);
      }

      const contentLengthHeader = response.headers.get('content-length');
      const totalBytes = contentLengthHeader ? parseInt(contentLengthHeader, 10) : 0;
      const reader = response.body.getReader();
      const chunks = [];
      let loadedBytes = 0;

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        chunks.push(value);
        loadedBytes += value.length;

        if (totalBytes > 0) {
          const percent = Math.min(100, Math.round((loadedBytes / totalBytes) * 100));
          this.setState({
            downloadProgress: percent,
            downloadLoaded: loadedBytes,
            downloadTotal: totalBytes,
          });
        } else {
          this.setState({
            downloadProgress: null,
            downloadLoaded: loadedBytes,
          });
        }
      }

      // Stream completed — trigger browser file save
      const blob = new Blob(chunks, { type: 'application/zip' });
      const blobUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = blobUrl;
      a.download = option.defaultFilename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(blobUrl);

      enqueueSnackbar(`${option.label} erfolgreich heruntergeladen.`, { variant: 'success' });
      this.setState({ downloading: false, downloadProgress: 100 });
    } catch (err) {
      if (err.name === 'AbortError') {
        enqueueSnackbar('Download abgebrochen.', { variant: 'info' });
      } else {
        this.setState({ downloadError: err.message || String(err) });
      }
    } finally {
      this.setState({ downloading: false });
      this.abortController = null;
    }
  }

  handleCancelDownload() {
    if (this.abortController) {
      this.abortController.abort();
    }
  }

  handleFileChange(event) {
    const file = event.target.files?.[0];
    if (file) {
      if (!isZipFile(file)) {
        this.setState({
          selectedFile: null,
          uploadError: 'Nur ZIP-Dateien (.zip) sind für den Import zulässig.',
          uploadSuccess: null,
          uploadProgress: 0,
        });
        if (this.fileInputRef.current) this.fileInputRef.current.value = '';
        return;
      }
      this.setState({
        selectedFile: file,
        uploadError: null,
        uploadSuccess: null,
        uploadProgress: 0,
      });
    }
  }

  async handleStartUpload() {
    const { selectedFile } = this.state;
    if (!selectedFile) return;

    this.uploadAbortController = new AbortController();

    this.setState({
      uploading: true,
      uploadStage: 'upload',
      uploadProgress: 0,
      uploadLoaded: 0,
      uploadTotal: selectedFile.size,
      importPhase: null,
      importPhaseCurrent: 0,
      importPhaseTotal: 0,
      importItem: null,
      statusMessage: null,
      importStats: null,
      uploadError: null,
      uploadSuccess: null,
    });

    try {
      await company.importCatalog(
        selectedFile,
        {
          onUploadProgress: (p) => {
            this.setState({
              uploadStage: 'upload',
              uploadProgress: p.percent,
              uploadLoaded: p.loaded,
              uploadTotal: p.total,
            });
          },
          onStatus: (message) => {
            this.setState({
              uploadStage: 'server',
              statusMessage: message,
            });
          },
          onProgress: (progress) => {
            this.setState({
              uploadStage: 'server',
              importPhase: progress?.phase ?? null,
              importPhaseCurrent: progress?.current ?? 0,
              importPhaseTotal: progress?.total ?? 0,
              importItem: progress?.item ?? null,
            });
          },
          onDone: (stats) => {
            this.setState({
              uploading: false,
              uploadStage: 'idle',
              importStats: stats,
              uploadSuccess: 'Import erfolgreich abgeschlossen.',
              statusMessage: null,
              importItem: null,
              selectedFile: null,
            });
            if (this.fileInputRef.current) this.fileInputRef.current.value = '';
            enqueueSnackbar('Import erfolgreich abgeschlossen.', { variant: 'success' });
            void categoryAutomat.actions.loadTree();
            void articleIndexAutomat.actions.reload?.();
            void brandAutomat.actions.load?.();
          },
          onError: (message) => {
            this.setState({
              uploading: false,
              uploadStage: 'idle',
              uploadError: message,
            });
            enqueueSnackbar(message || 'Fehler beim Importieren', { variant: 'error' });
          },
        },
        { signal: this.uploadAbortController.signal },
      );
    } catch (err) {
      if (err.name === 'AbortError') {
        this.setState({ uploading: false, uploadStage: 'idle', statusMessage: null });
        enqueueSnackbar('Import abgebrochen.', { variant: 'info' });
        return;
      }
      this.setState({
        uploading: false,
        uploadStage: 'idle',
        uploadError: err?.message || 'Upload fehlgeschlagen.',
      });
      enqueueSnackbar(err?.message || 'Upload fehlgeschlagen.', { variant: 'error' });
    } finally {
      this.uploadAbortController = null;
    }
  }

  handleCancelUpload() {
    if (this.uploadAbortController) {
      this.uploadAbortController.abort();
      this.uploadAbortController = null;
    }
  }

  render() {
    const {
      exportType,
      downloading,
      downloadProgress,
      downloadLoaded,
      downloadTotal,
      downloadError,
      selectedFile,
      uploading,
      uploadStage,
      uploadProgress,
      uploadLoaded,
      uploadTotal,
      importPhase,
      importPhaseCurrent,
      importPhaseTotal,
      importItem,
      statusMessage,
      importStats,
      uploadError,
      uploadSuccess,
    } = this.state;

    const progressPercent =
      importPhaseTotal > 0
        ? Math.min(100, Math.round((importPhaseCurrent / importPhaseTotal) * 100))
        : null;

    return (
      <Box sx={{ maxWidth: 680, mx: 'auto', py: 2 }}>
        <Stack spacing={4}>
          {/* SECTION 1: EXPORT (DOWNLOAD) */}
          <Box
            sx={{
              p: 2.5,
              borderRadius: 2,
              border: '1px solid',
              borderColor: 'divider',
              bgcolor: 'background.paper',
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1.5 }}>
              <CloudDownloadOutlinedIcon color="primary" sx={{ fontSize: 28 }} />
              <Box>
                <Typography variant="subtitle1" fontWeight={600}>
                  Daten exportieren (Download)
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  Große Datenmengen werden als ZIP-Archiv gestreamt.
                </Typography>
              </Box>
            </Box>

            <Divider sx={{ my: 1.5 }} />

            {downloadError && (
              <Alert severity="error" sx={{ mb: 2 }}>
                {downloadError}
              </Alert>
            )}

            <FormControl component="fieldset" fullWidth sx={{ mb: 2 }}>
              <FormLabel component="legend" sx={{ mb: 1, fontSize: '0.85rem' }}>
                Export-Umfang auswählen
              </FormLabel>
              <RadioGroup
                value={exportType}
                onChange={(e) => this.setState({ exportType: e.target.value })}
              >
                {EXPORT_OPTIONS.map((opt) => (
                  <FormControlLabel
                    key={opt.id}
                    value={opt.id}
                    disabled={downloading}
                    control={<Radio size="small" />}
                    label={
                      <Box sx={{ py: 0.5 }}>
                        <Typography variant="body2" fontWeight={500}>
                          {opt.label}
                        </Typography>
                        <Typography variant="caption" color="text.secondary" display="block">
                          {opt.desc}
                        </Typography>
                      </Box>
                    }
                  />
                ))}
              </RadioGroup>
            </FormControl>

            {downloading && (
              <Box sx={{ mb: 2, p: 1.5, bgcolor: 'action.hover', borderRadius: 1.5 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                  <Typography variant="caption" color="text.secondary">
                    {downloadProgress != null
                      ? `${downloadProgress}% (${formatBytes(downloadLoaded)} von ${formatBytes(downloadTotal)})`
                      : `${formatBytes(downloadLoaded)} geladen (wird gestreamt...)`}
                  </Typography>
                  <Button
                    size="small"
                    color="error"
                    onClick={this.handleCancelDownload}
                    sx={{ p: 0, minWidth: 'auto', fontSize: '0.75rem' }}
                  >
                    Abbrechen
                  </Button>
                </Box>
                <LinearProgress
                  variant={downloadProgress != null ? 'determinate' : 'indeterminate'}
                  value={downloadProgress ?? undefined}
                />
              </Box>
            )}

            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
              <Button
                variant="contained"
                startIcon={
                  downloading ? (
                    <CircularProgress size={16} color="inherit" />
                  ) : (
                    <CloudDownloadOutlinedIcon />
                  )
                }
                disabled={downloading}
                onClick={this.handleStartDownload}
              >
                {downloading ? 'Herunterladen...' : 'Download starten'}
              </Button>
            </Box>
          </Box>

          {/* SECTION 2: IMPORT (UPLOAD) */}
          <Box
            sx={{
              p: 2.5,
              borderRadius: 2,
              border: '1px solid',
              borderColor: 'divider',
              bgcolor: 'background.paper',
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1.5 }}>
              <CloudUploadOutlinedIcon color="primary" sx={{ fontSize: 28 }} />
              <Typography variant="subtitle1" fontWeight={600}>
                Import
              </Typography>
            </Box>

            <Divider sx={{ my: 1.5 }} />

            {uploadError && (
              <Alert severity="error" sx={{ mb: 2 }}>
                {uploadError}
              </Alert>
            )}

            {uploadSuccess && (
              <Alert severity="success" sx={{ mb: 2 }}>
                {uploadSuccess}
              </Alert>
            )}

            {/* Import statistics breakdown on done */}
            {importStats && (
              <Box
                sx={{
                  p: 2,
                  bgcolor: 'background.default',
                  border: '1px solid',
                  borderColor: 'divider',
                  borderRadius: 2,
                  mb: 2,
                }}
              >
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
                  <CheckCircleOutlineIcon color="success" />
                  <Typography variant="subtitle2" fontWeight={600}>
                    Import-Statistik
                  </Typography>
                </Box>
                <Box
                  sx={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))',
                    gap: 1.5,
                  }}
                >
                  <Box
                    sx={{
                      p: 1.5,
                      bgcolor: 'background.paper',
                      borderRadius: 1.5,
                      border: '1px solid',
                      borderColor: 'divider',
                    }}
                  >
                    <Typography variant="caption" color="text.secondary">
                      Kategorien
                    </Typography>
                    <Typography variant="h6" fontWeight={700}>
                      {importStats.categories ?? 0}
                    </Typography>
                    {importStats.categoriesCreated != null && (
                      <Typography variant="caption" color="success.main" display="block">
                        +{importStats.categoriesCreated} neu
                      </Typography>
                    )}
                  </Box>
                  <Box
                    sx={{
                      p: 1.5,
                      bgcolor: 'background.paper',
                      borderRadius: 1.5,
                      border: '1px solid',
                      borderColor: 'divider',
                    }}
                  >
                    <Typography variant="caption" color="text.secondary">
                      Artikel
                    </Typography>
                    <Typography variant="h6" fontWeight={700}>
                      {importStats.articlesTotal ??
                        ((importStats.articlesImported ?? 0) +
                          (importStats.articlesUpdated ?? 0))}
                    </Typography>
                    <Typography variant="caption" color="text.secondary" display="block">
                      {importStats.articlesImported ?? 0} neu / {importStats.articlesUpdated ?? 0} akt.
                    </Typography>
                  </Box>
                  <Box
                    sx={{
                      p: 1.5,
                      bgcolor: 'background.paper',
                      borderRadius: 1.5,
                      border: '1px solid',
                      borderColor: 'divider',
                    }}
                  >
                    <Typography variant="caption" color="text.secondary">
                      Varianten
                    </Typography>
                    <Typography variant="h6" fontWeight={700}>
                      {importStats.variantsLinked ?? 0}
                    </Typography>
                    <Typography variant="caption" color="text.secondary" display="block">
                      verknüpft
                    </Typography>
                  </Box>
                  <Box
                    sx={{
                      p: 1.5,
                      bgcolor: 'background.paper',
                      borderRadius: 1.5,
                      border: '1px solid',
                      borderColor: 'divider',
                    }}
                  >
                    <Typography variant="caption" color="text.secondary">
                      Bilder
                    </Typography>
                    <Typography variant="h6" fontWeight={700}>
                      {importStats.articlePictures ?? 0}
                    </Typography>
                    {importStats.categoryPictures != null && (
                      <Typography variant="caption" color="text.secondary" display="block">
                        +{importStats.categoryPictures} Kat-Bilder
                      </Typography>
                    )}
                  </Box>
                  {importStats.brands != null && (
                    <Box
                      sx={{
                        p: 1.5,
                        bgcolor: 'background.paper',
                        borderRadius: 1.5,
                        border: '1px solid',
                        borderColor: 'divider',
                      }}
                    >
                      <Typography variant="caption" color="text.secondary">
                        Marken
                      </Typography>
                      <Typography variant="h6" fontWeight={700}>
                        {importStats.brands ?? 0}
                      </Typography>
                      <Typography variant="caption" color="text.secondary" display="block">
                        {importStats.brandsCreated != null ? `+${importStats.brandsCreated} neu` : ''}
                        {importStats.brandPictures ? ` (${importStats.brandPictures} Logos)` : ''}
                      </Typography>
                    </Box>
                  )}
                </Box>
              </Box>
            )}

            <input
              ref={this.fileInputRef}
              type="file"
              accept=".zip,application/zip,application/x-zip-compressed"
              style={{ display: 'none' }}
              onChange={this.handleFileChange}
              disabled={uploading}
            />

            {!selectedFile ? (
              <Box sx={{ mb: 2 }}>
                <Button
                  variant="outlined"
                  startIcon={<InsertDriveFileOutlinedIcon />}
                  onClick={() => this.fileInputRef.current?.click()}
                  disabled={uploading}
                >
                  ZIP-Datei auswählen
                </Button>
              </Box>
            ) : (
              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  p: 1.5,
                  mb: 2,
                  borderRadius: 1.5,
                  border: '1px solid',
                  borderColor: 'divider',
                  bgcolor: 'background.default',
                }}
              >
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, minWidth: 0 }}>
                  <InsertDriveFileOutlinedIcon color="primary" />
                  <Box sx={{ minWidth: 0 }}>
                    <Typography variant="body2" fontWeight={600} noWrap>
                      {selectedFile.name}
                    </Typography>
                    <Typography variant="caption" color="text.secondary">
                      Größe: {formatBytes(selectedFile.size)}
                    </Typography>
                  </Box>
                </Box>
                {!uploading && (
                  <IconButton
                    size="small"
                    onClick={() => {
                      this.setState({ selectedFile: null });
                      if (this.fileInputRef.current) this.fileInputRef.current.value = '';
                    }}
                  >
                    <CloseIcon fontSize="small" />
                  </IconButton>
                )}
              </Box>
            )}

            {/* Real-time Streaming Progress Ticker */}
            {uploading && (
              <Box sx={{ mb: 2, p: 2, bgcolor: 'action.hover', borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
                {uploadStage === 'upload' ? (
                  <>
                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
                      <Typography variant="body2" fontWeight={600} color="primary.main">
                        Datei wird übertragen…
                      </Typography>
                      <Button
                        size="small"
                        color="error"
                        onClick={this.handleCancelUpload}
                        sx={{ minWidth: 'auto', fontSize: '0.75rem', px: 1, py: 0.25 }}
                      >
                        Abbrechen
                      </Button>
                    </Box>
                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                      <Typography variant="caption" color="text.secondary">
                        {uploadProgress}% ({formatBytes(uploadLoaded)} von {formatBytes(uploadTotal)})
                      </Typography>
                    </Box>
                    <LinearProgress
                      variant="determinate"
                      value={uploadProgress}
                      sx={{ height: 8, borderRadius: 1 }}
                    />
                  </>
                ) : (
                  <>
                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
                      <Typography variant="body2" fontWeight={600} color="primary.main">
                        {(importPhase && PHASE_LABELS[importPhase]) || statusMessage || 'Verarbeitung läuft…'}
                      </Typography>
                      <Button
                        size="small"
                        color="error"
                        onClick={this.handleCancelUpload}
                        sx={{ minWidth: 'auto', fontSize: '0.75rem', px: 1, py: 0.25 }}
                      >
                        Abbrechen
                      </Button>
                    </Box>
                    {importPhaseTotal > 0 ? (
                      <>
                        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            sx={{
                              maxWidth: '75%',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              whiteSpace: 'nowrap',
                              fontFamily: 'monospace',
                            }}
                          >
                            {importItem || 'Fortschritt'}
                          </Typography>
                          <Typography variant="caption" fontWeight={600} color="text.secondary">
                            {importPhaseCurrent} / {importPhaseTotal} ({progressPercent}%)
                          </Typography>
                        </Box>
                        <LinearProgress
                          variant="determinate"
                          value={progressPercent ?? 0}
                          sx={{ height: 8, borderRadius: 1 }}
                        />
                      </>
                    ) : (
                      <>
                        {statusMessage && (
                          <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 0.5 }}>
                            {statusMessage}
                          </Typography>
                        )}
                        <LinearProgress sx={{ height: 8, borderRadius: 1 }} />
                      </>
                    )}
                  </>
                )}
              </Box>
            )}

            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
              <Button
                variant="contained"
                startIcon={
                  uploading ? (
                    <CircularProgress size={16} color="inherit" />
                  ) : (
                    <CloudUploadOutlinedIcon />
                  )
                }
                disabled={uploading || !selectedFile}
                onClick={this.handleStartUpload}
              >
                {uploading ? 'Import läuft…' : 'Upload & Import starten'}
              </Button>
            </Box>
          </Box>
        </Stack>
      </Box>
    );
  }
}