import React from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied';
import SentimentNeutralIcon from '@mui/icons-material/SentimentNeutral';
import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
import SchoolIcon from '@mui/icons-material/School';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import type { ClassSession } from '../types/class';

interface DayCoverageIndicatorProps {
  coverage: DayCoverageAnalysis | null;
  onShowDetails: (coverage: DayCoverageAnalysis) => void;
  classSessionsForDay?: ClassSession[];
}

export interface DayCoverageAnalysis {
  date: string;
  day_of_week: number;
  status: 'perfect' | 'good' | 'warning' | 'critical' | 'neutral';
  total_templates: number;
  total_shifts_created: number;
  total_people_assigned: number;
  template_coverage: TemplateCoverage[];
  missing_shifts: any[];
  missing_roles: MissingRole[];
  missing_people: number;
}

export interface TemplateCoverage {
  template_id: number;
  template_name: string;
  template_color: string;
  status: 'complete' | 'partial' | 'missing';
  min_workers: number;
  max_workers: number;
  assigned_workers: number;
  missing_workers: number;
  must_have_roles: RoleAnalysis[];
  nice_to_have_roles: RoleAnalysis[];
  missing_must_have_roles: RoleAnalysis[];
  missing_nice_to_have_roles: RoleAnalysis[];
}

export interface RoleAnalysis {
  role_id: number;
  role_name: string;
  role_color: string;
  needed: number;
  assigned: number;
  missing: number;
}

export interface MissingRole {
  template_name: string;
  role_name: string;
  role_color: string;
  needed: number;
  assigned: number;
  missing: number;
  is_must_have: boolean;
}

const DayCoverageIndicator: React.FC<DayCoverageIndicatorProps> = ({
  coverage,
  onShowDetails,
  classSessionsForDay = [],
}) => {
  const { i18n } = useLingui();

  const classAtRisk: boolean = classSessionsForDay.some(
    (cs: ClassSession) => cs.zcs_status === 'pending_assignment' || cs.zcs_status === 'unstaffed'
  );

  const handleClick = () => {
    if (coverage) {
      onShowDetails(coverage);
    }
  };

  if (!coverage || coverage.status === 'neutral') {
    if (classAtRisk) {
      return (
        <Tooltip title={i18n._(t`Klassen ohne Zuweisung`)} arrow>
          <IconButton
            size="small"
            sx={{
              padding: '2px',
              '&:hover': {
                backgroundColor: 'rgba(0, 0, 0, 0.04)',
              },
            }}
          >
            <SchoolIcon fontSize="small" sx={{ color: '#ff9800' }} />
          </IconButton>
        </Tooltip>
      );
    }
    return null;
  }

  const effectiveStatus: DayCoverageAnalysis['status'] =
    classAtRisk && (coverage.status === 'perfect' || coverage.status === 'good')
      ? 'warning'
      : coverage.status;

  const getIcon = () => {
    switch (effectiveStatus) {
      case 'perfect':
        return <SentimentSatisfiedIcon sx={{ color: '#4caf50' }} />;
      case 'good':
      case 'warning':
        return <SentimentNeutralIcon sx={{ color: '#ff9800' }} />;
      case 'critical':
        return <SentimentVeryDissatisfiedIcon sx={{ color: '#f44336' }} />;
      default:
        return null;
    }
  };

  const getTooltipText = () => {
    switch (effectiveStatus) {
      case 'perfect':
        return i18n._(t`Perfekt! Alle Schichten vollständig besetzt`);
      case 'good':
      case 'warning':
        return i18n._(t`Teilweise besetzt - Einige Rollen fehlen noch`);
      case 'critical':
        return i18n._(t`Kritisch - Schichten nicht besetzt`);
      default:
        return '';
    }
  };

  return (
    <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
      <Tooltip title={getTooltipText()} arrow>
        <IconButton
          size="small"
          onClick={handleClick}
          sx={{
            padding: '2px',
            '&:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.04)',
            },
          }}
        >
          {getIcon()}
        </IconButton>
      </Tooltip>
      {classAtRisk && (
        <Tooltip title={i18n._(t`Klassen ohne Zuweisung`)} arrow>
          <IconButton
            size="small"
            onClick={handleClick}
            sx={{
              padding: '2px',
              '&:hover': {
                backgroundColor: 'rgba(0, 0, 0, 0.04)',
              },
            }}
          >
            <SchoolIcon fontSize="small" sx={{ color: '#ff9800' }} />
          </IconButton>
        </Tooltip>
      )}
    </Box>
  );
};

export default DayCoverageIndicator;