import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import SyncIcon from '@mui/icons-material/Sync';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
import { tileBaseSx, TILE_SIZE } from 'dashgui/tiles';

export class Attachment extends PureComponent {
  handleRescan = (e) => {
    e?.stopPropagation?.();
    const { attachment, onRescan } = this.props;
    if (attachment && onRescan) {
      onRescan(attachment);
    }
  };

  handleDelete = (e) => {
    e?.stopPropagation?.();
    const { attachment, onDelete } = this.props;
    if (attachment && onDelete) {
      onDelete(attachment);
    }
  };

  handleTileClick = (e) => {
    const { attachment, onClick } = this.props;
    if (onClick && attachment) {
      onClick(attachment);
    } else if (attachment?.file instanceof Blob || attachment?.file instanceof File) {
      const url = URL.createObjectURL(attachment.file);
      window.open(url, '_blank');
    }
  };

  formatFileSize(bytes) {
    if (bytes == null || Number.isNaN(bytes)) return '';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  }

  render() {
    const { attachment, disabled, sx } = this.props;
    const thumbnail = attachment?.thumbnail;
    const name = attachment?.name || 'Dokument';
    const size = attachment?.size;
    const isPdf = attachment?.type === 'application/pdf' || name.toLowerCase().endsWith('.pdf');
    const isText = attachment?.type?.startsWith('text/') || name.toLowerCase().endsWith('.txt');

    return (
      <Box
        component="div"
        role="button"
        tabIndex={disabled ? -1 : 0}
        onClick={disabled ? undefined : this.handleTileClick}
        sx={{
          ...tileBaseSx,
          width: TILE_SIZE,
          height: TILE_SIZE,
          p: 0,
          gap: 0,
          position: 'relative',
          overflow: 'hidden',
          cursor: disabled ? 'default' : 'pointer',
          bgcolor: isText ? '#fcfcfc' : '#f8fafc',
          border: '1px solid',
          borderColor: 'divider',
          ...(disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}),
          ...sx,
        }}
      >
        {/* Thumbnail, Text preview, or Fallback Icon */}
        <Box
          sx={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            bgcolor: isText ? '#fafafa' : '#f1f5f9',
          }}
        >
          {thumbnail ? (
            <Box
              component="img"
              src={thumbnail}
              alt={name}
              sx={{
                width: '100%',
                height: '100%',
                objectFit: 'contain',
                display: 'block',
              }}
            />
          ) : isText ? (
            <Box
              sx={{
                width: '100%',
                height: '100%',
                p: 1.25,
                bgcolor: '#fafafa',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                overflow: 'hidden',
                position: 'relative',
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
                <TextSnippetOutlinedIcon sx={{ fontSize: 18, color: 'primary.main' }} />
                <Typography
                  component="span"
                  sx={{
                    fontSize: '0.62rem',
                    fontWeight: 700,
                    color: 'primary.dark',
                    bgcolor: 'action.selected',
                    px: 0.5,
                    py: 0.1,
                    borderRadius: 0.5,
                    letterSpacing: '0.05em',
                  }}
                >
                  TXT
                </Typography>
              </Box>
              <Typography
                component="pre"
                sx={{
                  m: 0,
                  fontFamily: 'monospace',
                  fontSize: '0.45rem',
                  lineHeight: 1.2,
                  color: 'text.secondary',
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-all',
                  overflow: 'hidden',
                  opacity: 0.8,
                  userSelect: 'none',
                }}
              >
                {attachment?.text ? attachment.text.slice(0, 300) : 'Textdatei'}
              </Typography>
            </Box>
          ) : (
            <PictureAsPdfIcon sx={{ fontSize: 48, color: 'error.main' }} />
          )}
        </Box>

        {/* Action buttons: Rescan (for PDF) and Delete */}
        <Box
          sx={{
            position: 'absolute',
            top: 4,
            right: 4,
            display: 'flex',
            gap: 0.5,
            zIndex: 2,
          }}
          onClick={(e) => e.stopPropagation()}
        >
          {isPdf ? (
            <Tooltip title="Neu analysieren">
              <span>
                <IconButton
                  size="small"
                  disabled={disabled}
                  onClick={this.handleRescan}
                  sx={{
                    bgcolor: 'rgba(0, 0, 0, 0.6)',
                    color: '#fff',
                    p: 0.5,
                    backdropFilter: 'blur(2px)',
                    '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.85)' },
                  }}
                >
                  <SyncIcon sx={{ fontSize: 16 }} />
                </IconButton>
              </span>
            </Tooltip>
          ) : null}
          <Tooltip title="Löschen">
            <span>
              <IconButton
                size="small"
                disabled={disabled}
                onClick={this.handleDelete}
                sx={{
                  bgcolor: 'rgba(0, 0, 0, 0.6)',
                  color: '#fff',
                  p: 0.5,
                  backdropFilter: 'blur(2px)',
                  '&:hover': { bgcolor: 'error.main' },
                }}
              >
                <DeleteOutlineOutlinedIcon sx={{ fontSize: 16 }} />
              </IconButton>
            </span>
          </Tooltip>
        </Box>

        {/* Bottom file metadata overlay */}
        <Box
          sx={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            px: 1,
            py: 0.5,
            background: 'linear-gradient(transparent, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.85))',
            textAlign: 'left',
            pointerEvents: 'none',
          }}
        >
          <Typography
            variant="caption"
            fontWeight={600}
            noWrap
            sx={{ color: '#fff', display: 'block', fontSize: '0.72rem', lineHeight: 1.2 }}
          >
            {name}
          </Typography>
          {size ? (
            <Typography
              variant="caption"
              noWrap
              sx={{ color: 'rgba(255,255,255,0.8)', fontSize: '0.65rem' }}
            >
              {this.formatFileSize(size)}
            </Typography>
          ) : null}
        </Box>
      </Box>
    );
  }
}

export default Attachment;