import { useState } from 'react';
import Form from 'antd/es/form';
import Input from 'antd/es/input';
import Button from 'antd/es/button';
import Typography from 'antd/es/typography';
import Card from 'antd/es/card';
import Alert from 'antd/es/alert';
import { Link } from 'react-router-dom';
import { requestPasswordReset } from './customerApi';

const { Title, Paragraph, Text } = Typography;

export default function ForgotPassword() {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function onFinish(values: { email: string }) {
    setLoading(true);
    setError(null);
    try {
      await requestPasswordReset(values.email);
      setSent(true);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <Card style={{ maxWidth: 420, margin: '64px auto' }}>
      <Title level={3}>Reset your password</Title>

      {sent ? (
        <>
          {/* Worded so it reveals nothing about whether the address has an
              account — the server deliberately answers the same either way. */}
          <Alert
            type="success"
            showIcon
            message="Check your email"
            description="If an account exists for that address, we've sent a link to reset the password. The link expires in one hour."
          />
          <Paragraph style={{ marginTop: 16 }}>
            <Link to="/login">Back to sign in</Link>
          </Paragraph>
        </>
      ) : (
        <>
          <Paragraph type="secondary">
            Enter the email address for your account and we'll send you a link to choose a new password.
          </Paragraph>
          {error && <Alert type="error" showIcon message={error} style={{ marginBottom: 16 }} />}
          <Form layout="vertical" onFinish={onFinish}>
            <Form.Item
              name="email"
              label="Email"
              rules={[{ required: true, type: 'email', message: 'Enter a valid email address' }]}
            >
              <Input autoComplete="email" />
            </Form.Item>
            <Form.Item>
              <Button block type="primary" htmlType="submit" loading={loading}>
                Send reset link
              </Button>
            </Form.Item>
          </Form>
          <Text type="secondary">
            Remembered it? <Link to="/login">Sign in</Link>
          </Text>
        </>
      )}
    </Card>
  );
}