import React from 'react';
import { Box, Fade, Grow } from '@mui/material';
import { PTMarkScreen, Part, MarkData, Student } from '../PTMarkScreen/PTMarkScreen';

export interface PTSummaryViewProps {
  key: number;
  trackerId: number;
  students: Student[];
  summaryParts: Part[];
  summaryPartMarks: { [partId: number]: { [studentId: number]: MarkData } };
  loading: boolean;
  onPartHeaderClick: (partId: number) => void;
  // Grade-related functions
  getGradeOptionsForPart?: (partId: number) => Array<{ value: string; label: string }>;
  getGradeDisplayName?: (gradeRef: string, partId: number) => string;
}

export const PTSummaryView: React.FC<PTSummaryViewProps> = ({
  key,
  trackerId,
  students,
  summaryParts,
  summaryPartMarks,
  loading,
  onPartHeaderClick,
  getGradeOptionsForPart,
  getGradeDisplayName
}) => {
  // Summary view doesn't have any state or handlers because it's just displaying data
  // and handling part header clicks

  return (
    <Fade  in={!loading} timeout={300}>
      <Box key={key} className="pt-summary-view">
        <Grow in={!loading} timeout={400} style={{ transformOrigin: '0 0 0' }}>
          <div>            
            <PTMarkScreen
              trackerId={trackerId}
              partId={-1} // Use a dummy partId for summary view
              students={students}
              partGuiConfig={{
                gradeCol: "VISIBLE",
                scoreCol: "VISIBLE",
                unitCriteria: "HIDDEN"
              }}
              initialMarks={{}} // Empty marks as we're displaying data through parts prop
              loading={loading}
              isSummaryView={true}
              parts={summaryParts}
              partMarks={summaryPartMarks}
              onPartHeaderClick={onPartHeaderClick}
              getGradeOptionsForPart={getGradeOptionsForPart}
              getGradeDisplayName={getGradeDisplayName}
            />
          </div>
        </Grow>
      </Box>
    </Fade>
  );
};

export default PTSummaryView;
