'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { Container, Row, Col, Card, Form, Button, Alert } from 'react-bootstrap';
import Link from 'next/link';
import { forgotPassword } from '@/services/passwordService';
import '../connexion/auth.css';

export default function ForgotPasswordPage() {
  const t = useTranslations('AuthPages');

  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [loading, setLoading] = useState(false);

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

    if (!email) {
      setError(t('email_required'));
      return;
    }

    setLoading(true);

    try {
      await forgotPassword(email);
      setSuccess(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : t('forgot_password_error'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-page">
      <Container>
        <Row className="justify-content-center my-5">
          <Col md={6} lg={5}>
            <Card className="auth-card">
              <Card.Body className="p-4">
                <div className="text-center mb-4">
                  <h1 className="auth-title">{t('forgot_password_title')}</h1>
                  <p className="text-muted">{t('forgot_password_subtitle')}</p>
                </div>

                {error && <Alert variant="danger">{error}</Alert>}
                {success && <Alert variant="success">{t('forgot_password_success')}</Alert>}

                {!success && (
                  <Form onSubmit={handleSubmit}>
                    <Form.Group className="mb-3">
                      <Form.Label>{t('email_label')}</Form.Label>
                      <Form.Control
                        type="email"
                        placeholder={t('email_placeholder')}
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        disabled={loading}
                        required
                      />
                    </Form.Group>

                    <div className="d-grid mb-3">
                      <Button
                        variant="primary"
                        type="submit"
                        disabled={loading}
                        size="lg"
                      >
                        {loading ? t('loading') : t('forgot_password_button')}
                      </Button>
                    </div>
                  </Form>
                )}

                <div className="text-center mt-4">
                  <small>
                    <Link href="/connexion">
                      {t('back_to_login')}
                    </Link>
                  </small>
                </div>
              </Card.Body>
            </Card>
          </Col>
        </Row>
      </Container>
    </div>
  );
}