import React from "react";
import { Tooltip, Chip } from "@mui/material";

// Define criterion cycle states
export interface CriterionState {
  attained: boolean;
  referred: boolean;
  failed: boolean;
  attemptNumber: number; // Changed from 'try' to 'attemptNumber'
}

// Component props for the criterion cycle box
export interface CriterionCycleBoxProps {
  value: CriterionState | null;
  criterionName: string;
  onChange: (newValue: CriterionState | null) => void;
  disabled?: boolean;
  compact?: boolean; // Added compact mode option
}

// Component to handle cycling through criterion states
export const CriterionCycleBox = ({ 
  value, 
  criterionName, 
  onChange, 
  disabled = false,
  compact = false 
}: CriterionCycleBoxProps) => {
  // Define the cycle sequence
  const cycleStates: (CriterionState | null)[] = [
    { attained: true, referred: false, failed: false, attemptNumber: 1 }, // A1
    { attained: false, referred: true, failed: false, attemptNumber: 1 }, // R1
    { attained: true, referred: false, failed: false, attemptNumber: 2 }, // A2
    { attained: false, referred: true, failed: false, attemptNumber: 2 }, // R2
    { attained: false, referred: false, failed: true, attemptNumber: 2 }, // F
    null, // Blank/Not attempted
  ];

  // Find current state index or default to last (blank)
  const getCurrentStateIndex = (): number => {
    if (!value) return cycleStates.length - 1;
    
    return cycleStates.findIndex(
      (state) => 
        state !== null && 
        state.attained === value.attained && 
        state.referred === value.referred && 
        state.failed === value.failed && 
        state.attemptNumber === value.attemptNumber
    );
  };

  const currentStateIndex = getCurrentStateIndex();
  
  // Handle cycling to the next state
  const handleClick = () => {
    if (disabled) return;
    
    const nextIndex = (currentStateIndex + 1) % cycleStates.length;
    onChange(cycleStates[nextIndex]);
  };

  // Determine display text and color for current state
  const getDisplayProps = () => {
    if (!value) return { label: criterionName, color: "default" as const };
    
    if (value.attained && value.attemptNumber === 1) return { label: "A1", color: "success" as const };
    if (value.referred && value.attemptNumber === 1) return { label: "R1", color: "warning" as const };
    if (value.attained && value.attemptNumber === 2) return { label: "A2", color: "success" as const };
    if (value.referred && value.attemptNumber === 2) return { label: "R2", color: "warning" as const };
    if (value.failed) return { label: "F", color: "error" as const };
    
    return { label: criterionName, color: "default" as const };
  };

  const { label, color } = getDisplayProps();

  // Get tooltip text based on current state
  const getTooltipText = () => {
    if (!value) return `${criterionName} - Not attempted`;
    
    if (value.attained && value.attemptNumber === 1) return `${criterionName} - Achieved on first attempt`;
    if (value.referred && value.attemptNumber === 1) return `${criterionName} - Referred on first attempt`;
    if (value.attained && value.attemptNumber === 2) return `${criterionName} - Achieved on second attempt`;
    if (value.referred && value.attemptNumber === 2) return `${criterionName} - Referred on second attempt`;
    if (value.failed) return `${criterionName} - Failed, no further attempts`;
    
    return criterionName;
  };

  return (
    <Tooltip title={getTooltipText()}>
      <Chip
        label={compact ? (value ? label : "-") : label}
        color={color}
        onClick={handleClick}
        sx={{ 
          m: compact ? 0 : 0.5,
          cursor: disabled ? 'default' : 'pointer',
          opacity: disabled ? 0.7 : 1,
          width: compact ? '40px' : 'auto',
          height: compact ? '28px' : '32px',
          fontSize: compact ? '0.9rem' : '1.125rem',
          '& .MuiChip-label': {
            padding: compact ? '0 2px' : undefined
          }
        }}
        variant={!value ? "outlined" : "filled"}
      />
    </Tooltip>
  );
};
