// import {
//   Alert,
//   Box,
//   Button,
//   Card,
//   CardContent,
//   CardHeader,
//   Divider,
//   Grid,
//   LinearProgress,
//   TextField,
//   Typography,
// } from '@mui/material';
// import { axiosInstance } from 'axiosApi';
// import { useState } from 'react';
// import zxcvbn from '@zxcvbn-ts/core';

// const ChangePasswordCard = () => {
//   const [currentPassword, setCurrentPassword] = useState('');
//   const [newPassword, setNewPassword] = useState('');
//   const [confirmPassword, setConfirmPassword] = useState('');
//   const [passwordStrength, setPasswordStrength] = useState(0);
//   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
//   const [errors, setErrors] = useState<{ [key: string]: string }>({});

//   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//     const password = e.target.value;
//     setNewPassword(password);
//     const strength = zxcvbn(password).score;
//     setPasswordStrength(strength);
//   };

//   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
//     e.preventDefault();
//     setErrors({});
//     setMessage(null);

//     if (newPassword !== confirmPassword) {
//       setErrors({ confirmPassword: 'Passwords do not match' });
//       return;
//     }

//     if (passwordStrength < 2) {
//       setErrors({ newPassword: 'Password is too weak' });
//       return;
//     }

//     try {
//       await axiosInstance.post('/auth/password/change/', {
//         old_password: currentPassword,
//         new_password: newPassword,
//       });
//       setMessage({ type: 'success', text: 'Password updated successfully!' });
//       setCurrentPassword('');
//       setNewPassword('');
//       setConfirmPassword('');
//       setPasswordStrength(0);
//     } catch (error: any) {
//       setMessage({ type: 'error', text: 'Error updating password.' });
//       if (error.response && error.response.data) {
//         setErrors(error.response.data);
//       }
//     }
//   };

//   const passwordStrengthColor = () => {
//     switch (passwordStrength) {
//       case 0:
//       case 1:
//         return 'error';
//       case 2:
//         return 'warning';
//       case 3:
//       case 4:
//         return 'success';
//       default:
//         return 'grey';
//     }
//   };

//   return (
//     <Card>
//       <CardHeader title="Change Password" />
//       <Divider />
//       <CardContent>
//         <form onSubmit={handleSubmit}>
//           <Grid container spacing={2}>
//             {message && (
//               <Grid item xs={12}>
//                 <Alert severity={message.type}>{message.text}</Alert>
//               </Grid>
//             )}
//             <Grid item xs={12}>
//               <TextField
//                 fullWidth
//                 label="Current Password"
//                 type="password"
//                 value={currentPassword}
//                 onChange={(e) => setCurrentPassword(e.target.value)}
//                 error={!!errors.old_password}
//                 helperText={errors.old_password}
//                 required
//               />
//             </Grid>
//             <Grid item xs={12}>
//               <TextField
//                 fullWidth
//                 label="New Password"
//                 type="password"
//                 value={newPassword}
//                 onChange={handlePasswordChange}
//                 error={!!errors.new_password}
//                 helperText={errors.new_password}
//                 required
//               />
//               <Box sx={{ width: '100%', mt: 1 }}>
//                 <LinearProgress
//                   variant="determinate"
//                   value={(passwordStrength / 4) * 100}
//                   color={passwordStrengthColor()}
//                 />
//                 <Typography variant="caption" color="textSecondary">
//                   {['Very Weak', 'Weak', 'Fair', 'Good', 'Strong'][passwordStrength]}
//                 </Typography>
//               </Box>
//             </Grid>
//             <Grid item xs={12}>
//               <TextField
//                 fullWidth
//                 label="Confirm New Password"
//                 type="password"
//                 value={confirmPassword}
//                 onChange={(e) => setConfirmPassword(e.target.value)}
//                 error={!!errors.confirmPassword}
//                 helperText={errors.confirmPassword}
//                 required
//               />
//             </Grid>
//             <Grid item xs={12}>
//               <Button type="submit" variant="contained" color="primary">
//                 Change Password
//               </Button>
//             </Grid>
//           </Grid>
//         </form>
//       </CardContent>
//     </Card>
//   );
// };

// export default ChangePasswordCard;
