// resources\assets\ts\ContactsPage\components\DateienTab.tsx

import React, { useCallback, useState, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Chip from '@mui/material/Chip';
import Button from '@mui/material/Button';
import Link from '@mui/material/Link';
import Paper from '@mui/material/Paper';
import {
  Folder as FolderIcon,
  Description as FileIcon,
  Delete as DeleteIcon,
  Download as DownloadIcon,
  CreateNewFolder as CreateNewFolderIcon,
  CloudUpload as UploadIcon,
  ArrowBack as ArrowBackIcon,
} from '@mui/icons-material';

interface DateienTabProps {
  adrid: number;
  csrfToken: string;
}

const DateienTab: React.FC<DateienTabProps> = ({
  adrid,
  csrfToken,
}) => {
  const [folderPath, setFolderPath] = useState<string>('none');
  const [files, setFiles] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);

  const fetchFiles = (adrid: number, path: string) => {
    setLoading(true);
    const serverPath = path === 'none' ? 'none' : path.replace(/\//g, ',');
    setFolderPath(path);

    fetch(`/crm/folderFiles/${adrid}/${serverPath}`)
      .then((res) => res.json())
      .then((data: string[]) => {
        setFiles(data);
      })
      .catch((err) => console.error('Fehler beim Laden der Dateien:', err))
      .finally(() => setLoading(false));
  };

  const delFile = (filePath: string) => {
    const isFile = filePath.lastIndexOf('.') !== -1;
    const fileName = filePath.split('/').pop() || '';

    if (!window.confirm(`${isFile ? 'Datei' : 'Ordner'} "${fileName}" wirklich löschen?`)) {
      return;
    }

    const formData = new FormData();
    formData.append(isFile ? 'file' : 'name', fileName);
    formData.append('Folder', 'none');
    formData.append('adr_id', adrid.toString());
    formData.append('_token', csrfToken);

    const url = isFile ? '/crmFolder/deleteFile' : '/crmFolder/delFolder';

    fetch(url, {
      method: 'POST',
      body: formData,
    })
      .then((res) => {
        if (!res.ok) throw new Error('Fehler beim Löschen');
        return res.text();
      })
      .then(() => fetchFiles(adrid, folderPath))
      .catch((err) => {
        console.error('Löschfehler:', err);
        alert('Fehler beim Löschen');
      });
  };

  const newFolder = () => {
    const folderNameRaw = prompt(
      'Wie soll Ihr neuer Ordner heißen? (Punkte und Leerzeichen werden nicht angezeigt)',
      'Neuer Ordner'
    );
    if (!folderNameRaw) return;

    const FolderName_Format = folderNameRaw.replace(/\s/g, '_').replace(/[.]/g, '');

    const formData = new FormData();
    formData.append('name', FolderName_Format);
    formData.append('Path', folderPath);
    formData.append('adr_id', adrid.toString());
    formData.append('_token', csrfToken);

    fetch('/crmFolder/newFolder', {
      method: 'POST',
      body: formData,
    })
      .then(() => fetchFiles(adrid, folderPath))
      .catch((err) => {
        console.error('Fehler beim Erstellen:', err);
        alert('Fehler beim Erstellen des Ordners');
      });
  };

  useEffect(() => {
    fetchFiles(adrid, folderPath);
  }, [adrid]);

  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      acceptedFiles.forEach((file) => {
        const relativePath = (file as any).webkitRelativePath || '';
        const fullFolderPath = relativePath
          ? folderPath + '/' + relativePath.substring(0, relativePath.lastIndexOf('/'))
          : folderPath;

        const formData = new FormData();
        formData.append('file', file);
        formData.append('adr_id', adrid.toString());
        formData.append('Folder', fullFolderPath);
        formData.append('_token', csrfToken);

        fetch('/crmFolder/newFile', {
          method: 'POST',
          body: formData,
        })
          .then((res) => {
            if (!res.ok) {
              console.error('Upload failed:', res.status, res.statusText);
              throw new Error('Upload fehlgeschlagen');
            }
            return fetchFiles(adrid, folderPath);
          })
          .catch((err) => {
            console.error('Upload-Fehler:', err);
            alert('Fehler beim Hochladen der Datei');
          });
      });
    },
    [adrid, folderPath, csrfToken]
  );

  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
    onDrop,
    noClick: true,
    noKeyboard: true,
  });

  const handleFileDrop = (acceptedFiles: File[], targetPath: string) => {
    acceptedFiles.forEach((file) => {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('adr_id', adrid.toString());
      formData.append('Folder', targetPath);
      formData.append('_token', csrfToken);

      fetch('/crmFolder/newFile', {
        method: 'POST',
        body: formData,
      })
        .then(() => fetchFiles(adrid, folderPath))
        .catch((err) => console.error('Upload-Fehler:', err));
    });
  };

  // Helper to get file extension
  const getFileExtension = (fileName: string): string => {
    const parts = fileName.split('.');
    return parts.length > 1 ? parts.pop()!.toUpperCase() : '';
  };

  // Helper to build download URL
const getFileDownloadUrl = (filePath: string): string => {
  const encodedPath = filePath.split('/').map(encodeURIComponent).join('/');
  return `/crm/compfile/${adrid}/${encodedPath}`;
};

  return (
    <Box sx={{ p: 2 }}>
      {/* Upload Dropzone */}
      <Paper
        {...getRootProps()}
        elevation={0}
        sx={{
          border: '2px dashed',
          borderColor: isDragActive ? 'primary.main' : 'grey.300',
          bgcolor: isDragActive ? 'primary.50' : 'grey.50',
          p: 4,
          mb: 2,
          textAlign: 'center',
          cursor: 'pointer',
          transition: 'all 0.2s',
          '&:hover': {
            borderColor: 'primary.main',
            bgcolor: 'primary.50',
          },
        }}
        onClick={open}
      >
        <input {...getInputProps()} />
        <UploadIcon sx={{ fontSize: 48, color: 'grey.400', mb: 1 }} />
        <Typography variant="body1" color="text.secondary">
          {isDragActive
            ? 'Dateien hierher ziehen...'
            : 'Dateien zum Hochladen hierher ziehen oder klicken'}
        </Typography>
      </Paper>

      {/* Action Buttons */}
      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
        <Button
          variant="contained"
          startIcon={<CreateNewFolderIcon />}
          onClick={newFolder}
          sx={{ flex: 1 }}
        >
          Neuer Ordner
        </Button>

        {folderPath !== 'none' && (
          <Button
            variant="outlined"
            startIcon={<ArrowBackIcon />}
            onClick={() => fetchFiles(adrid, 'none')}
            sx={{ flex: 1 }}
          >
            Zurück zum Hauptordner
          </Button>
        )}
      </Box>

      {/* File List */}
      {loading ? (
        <Typography align="center" color="text.secondary" sx={{ py: 4 }}>
          Laden...
        </Typography>
      ) : files.length === 0 ? (
        <Typography align="center" color="text.secondary" sx={{ py: 4 }}>
          Keine Dateien gefunden.
        </Typography>
      ) : (
        <Stack spacing={2}>
          {files.map((file, index) => {
            const isFile = file.lastIndexOf('.') !== -1;
            const name = file.substring(file.lastIndexOf('/') + 1);
            const fileUrl = isFile ? getFileDownloadUrl(file) : null;

            return (
              <Card key={index}>
                <CardContent>
                  <Box
                    sx={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                    }}
                  >
                    {/* File/Folder Info */}
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
                      {isFile ? (
                        <>
                          <FileIcon color="action" />
                          <Box>
                            <Link
                              href={fileUrl!}
                              target="_blank"
                              rel="noopener noreferrer"
                              sx={{
                                fontWeight: 600,
                                color: 'text.primary',
                                textDecoration: 'none',
                                '&:hover': {
                                  textDecoration: 'underline',
                                },
                              }}
                            >
                              {name}
                            </Link>
                            <Typography variant="caption" color="text.secondary" display="block">
                              {getFileExtension(name)}
                            </Typography>
                          </Box>
                        </>
                      ) : (
                        <>
                          <FolderIcon color="primary" />
                          <Box>
                            <Typography
                              variant="body1"
                              sx={{
                                fontWeight: 600,
                                cursor: 'pointer',
                                '&:hover': {
                                  color: 'primary.main',
                                },
                              }}
                              onClick={() => fetchFiles(adrid, file)}
                            >
                              {name}
                            </Typography>
                            <Chip label="Ordner" size="small" />
                          </Box>
                        </>
                      )}
                    </Box>

                    {/* Action Buttons */}
                    <Box sx={{ display: 'flex', gap: 0.5 }}>
                      {isFile && (
                        <IconButton
                          size="small"
                          component="a"
                          href={fileUrl!}
                          download
                          title="Herunterladen"
                        >
                          <DownloadIcon fontSize="small" />
                        </IconButton>
                      )}
                      <IconButton
                        size="small"
                        onClick={() => delFile(file)}
                        color="error"
                        title="Löschen"
                      >
                        <DeleteIcon fontSize="small" />
                      </IconButton>
                    </Box>
                  </Box>
                </CardContent>
              </Card>
            );
          })}
        </Stack>
      )}
    </Box>
  );
};

export default DateienTab;