import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { useState } from 'react';

import { useAuth } from '../../store/auth';

export function ChangePasswordPanel() {
  const changePassword = useAuth((s) => s.changePassword);
  const [current, setCurrent] = useState('');
  const [next, setNext] = useState('');
  const [confirm, setConfirm] = useState('');
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setMsg(null);
    if (next.length < 6) {
      setMsg({ ok: false, text: 'New password must be at least 6 characters.' });
      return;
    }
    if (next !== confirm) {
      setMsg({ ok: false, text: 'New passwords do not match.' });
      return;
    }
    setBusy(true);
    const err = await changePassword(current, next);
    setBusy(false);
    if (err) {
      setMsg({ ok: false, text: err });
    } else {
      setMsg({ ok: true, text: 'Password changed successfully.' });
      setCurrent('');
      setNext('');
      setConfirm('');
    }
  };

  return (
    <Box>
      <Typography variant="h5">Change password</Typography>
      <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
        Keep your account secure — update the default password.
      </Typography>
      <Box component="form" onSubmit={submit} sx={{ maxWidth: 480 }}>
        {msg && (
          <Alert severity={msg.ok ? 'success' : 'error'} sx={{ mb: 2 }}>
            {msg.text}
          </Alert>
        )}
        <Stack spacing={2.5}>
          <TextField label="Current password" type="password" value={current} onChange={(e) => setCurrent(e.target.value)} required fullWidth />
          <TextField label="New password" type="password" value={next} onChange={(e) => setNext(e.target.value)} required fullWidth />
          <TextField label="Confirm new password" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required fullWidth />
          <Box>
            <Button type="submit" variant="contained" disabled={busy}>
              {busy ? 'Updating…' : 'Update password'}
            </Button>
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}