import { useState, type FC } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  Container,
  Paper,
  TextField,
  Button,
  Typography,
  Box,
  Alert,
  CircularProgress,
} from '@mui/material';
import { Lock as LockIcon } from '@mui/icons-material';
import { useAuthStore } from '../store/useStore';
import { unlockWithPassword, deriveAuthAndEncKeys, setEncKey } from '../crypto';

export const UnlockPage: FC = () => {
  const navigate = useNavigate();
  const { wrapped_dek, wrapped_dek_iv, user } = useAuthStore();
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [unlocking, setUnlocking] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setUnlocking(true);

    try {
      if (wrapped_dek && wrapped_dek_iv) {
        // Wrapped-DEK model: unwrap the DEK using the password.
        const { dek } = await unlockWithPassword(password, {
          data: wrapped_dek,
          iv: wrapped_dek_iv,
        });
        setEncKey(dek);
      } else {
        // Phase 1 compat: derive the key directly from the password.
        const { encKey } = await deriveAuthAndEncKeys(password);
        setEncKey(encKey);
      }
      navigate('/', { replace: true });
    } catch {
      setError('Incorrect password. Please try again.');
    } finally {
      setUnlocking(false);
    }
  };

  return (
    <Container maxWidth="xs">
      <Box
        sx={{
          mt: 8,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Paper
          elevation={3}
          sx={{
            p: 4,
            width: '100%',
            borderRadius: 2,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <LockIcon color="primary" sx={{ fontSize: 40, mb: 1 }} />
          <Typography component="h1" variant="h5" gutterBottom>
            Unlock
          </Typography>
          <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 3 }}>
            {user?.username
              ? `Welcome back, ${user.username}. Enter your password to decrypt your data.`
              : 'Enter your password to decrypt your data.'}
          </Typography>

          {error && (
            <Alert severity="error" sx={{ mb: 2, width: '100%' }}>
              {error}
            </Alert>
          )}

          <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
            <TextField
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoFocus
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={unlocking}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
              disabled={unlocking || !password}
            >
              {unlocking ? <CircularProgress size={24} /> : 'Unlock'}
            </Button>
            <Box sx={{ textAlign: 'center' }}>
              <Link to="/login">
                <Typography variant="body2">Sign in with a different account</Typography>
              </Link>
              <Link to="/recover">
                <Typography variant="body2" sx={{ mt: 0.5 }}>
                  Forgot password?
                </Typography>
              </Link>
            </Box>
          </Box>
        </Paper>
      </Box>
    </Container>
  );
};

export default UnlockPage;