import React from 'react';
import { Trans } from '@lingui/macro';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import SearchOffIcon from '@mui/icons-material/SearchOff';
import { DashType } from '../types';

const typeLabels: Record<string, string> = {
  events: 'Ereignisse',
  Table: 'Tabelle',
  Linechart: 'Liniendiagramm',
  Barchart: 'Balkendiagramm',
  Linechart24: 'Liniendiagramm (24h)',
  Barchart24: 'Balkendiagramm (24h)',
  Thermometer: 'Thermometer',
  ToDos: 'Aufgaben',
  Balken: 'Balkenanzeige',
  CollectedEvents: 'Gesammelte Ereignisse',
  Intervallaufgaben: 'Intervallaufgaben',
  'Tortendiagramm_Ausstehende_Messungen': 'Tortendiagramm',
  'Tortendiagramm-Aufgaben': 'Tortendiagramm',
  Map: 'Karte',
};

interface EmptyStateProps {
  type: DashType;
  count: number;
  cardContentID: number;
}

const EmptyState: React.FC<EmptyStateProps> = ({ type, count, cardContentID }) => {
  const label = typeLabels[type] ?? type;

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
        py: 4,
        px: 2,
        width: '100%',
        minHeight: 120,
      }}
    >
      <SearchOffIcon sx={{ fontSize: 36, color: '#bbb' }} />
      <Typography sx={{ fontSize: '0.875rem', fontWeight: 500, color: '#555' }}>
        <Trans>Keine Daten gefunden</Trans>
      </Typography>
      <Typography sx={{ fontSize: '0.75rem', color: '#999' }}>
        <Trans>Kartentyp</Trans>: {label} · <Trans>Eingestellter Zeitraum</Trans>: {count}{' '}
        <Trans>Tage</Trans>
      </Typography>
      <Typography sx={{ fontSize: '0.75rem', color: '#999', mt: 0.5 }}>
        <Trans>
          Bitte prüfen Sie die{' '}
          <Link
            href={`/config/GRP${cardContentID}`}
            target="_blank"
            rel="noopener noreferrer"
            sx={{
              color: '#0099ff',
              textDecorationColor: 'rgba(0, 153, 255, 0.4)',
              '&:hover': { textDecorationColor: '#0099ff' },
            }}
          >
            Konfiguration
          </Link>
        </Trans>
      </Typography>
    </Box>
  );
};

export default EmptyState;