import React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  CircularProgress,
  Typography,
  List,
  ListItem,
  ListItemText,
  Divider,
  Box
} from "@mui/material";

export interface RuleDetail {
  name: string;
  description: string;
  calculationMethod: string;
  passingCriteria: string;
  applicableParts: string[];
}

export interface RulePresetDialogProps {
  open: boolean;
  onClose: () => void;
  rulePreset?: string | null;
  ruleDetails: RuleDetail | null;
  loading: boolean;
}

export const RulePresetDialog = ({
  open,
  onClose,
  rulePreset,
  ruleDetails,
  loading
}: RulePresetDialogProps) => {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="md"
      fullWidth
    >
      <DialogTitle>
        <Typography variant="h5" component="div">
          {ruleDetails?.name || "Assessment Rules"}
        </Typography>
        <Typography variant="subtitle1" color="text.secondary" component="div">
          {rulePreset || "No rule preset specified"}
        </Typography>
      </DialogTitle>
      <DialogContent dividers>
        {loading ? (
          <Box sx={{ display: "flex", justifyContent: "center", p: 3 }}>
            <CircularProgress />
          </Box>
        ) : ruleDetails ? (
          <List>
            <ListItem>
              <ListItemText
                primary="Description"
                secondary={ruleDetails.description}
              />
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemText
                primary="Calculation Method"
                secondary={ruleDetails.calculationMethod}
              />
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemText
                primary="Passing Criteria"
                secondary={ruleDetails.passingCriteria}
              />
            </ListItem>
            <Divider />
            <ListItem>
              <ListItemText
                primary="Applicable To"
                secondary={ruleDetails.applicableParts && ruleDetails.applicableParts.length > 0 
                  ? ruleDetails.applicableParts.join(", ") 
                  : "No specific parts defined"}
              />
            </ListItem>
          </List>
        ) : (
          <Typography color="text.secondary" align="center" sx={{ py: 3 }}>
            No rule details available for this preset
          </Typography>
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">Close</Button>
      </DialogActions>
    </Dialog>
  );
};