'use client';

import { Suspense, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { Container, Row, Col, Card, Form, Button, Alert, Spinner } from 'react-bootstrap';
import Link from 'next/link';
import { verifyEmail, resendVerificationCode } from '@/services/authService';
import '../connexion/auth.css';

export default function VerificationEmailPage() {
  return (
    <Suspense fallback={<Container className="py-5 text-center"><Spinner animation="border" /></Container>}>
      <VerificationEmailContent />
    </Suspense>
  );
}

function VerificationEmailContent() {
  const t = useTranslations('AuthPages');
  const router = useRouter();
  const searchParams = useSearchParams();
  const email = searchParams.get('email') || '';

  const [code, setCode] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [loading, setLoading] = useState(false);
  const [resendSuccess, setResendSuccess] = useState(false);

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

    try {
      await verifyEmail(email, parseInt(code, 10));
      setSuccess(t('verify_success'));
      setTimeout(() => router.push('/connexion'), 2000);
    } catch {
      setError(t('verify_error'));
    } finally {
      setLoading(false);
    }
  };

  const handleResend = async () => {
    setResendSuccess(false);
    try {
      await resendVerificationCode(email);
      setResendSuccess(true);
    } catch {
      setError(t('verify_error'));
    }
  };

  return (
    <div className="auth-page">
      <Container>
        <Row className="justify-content-center my-5">
          <Col xs={12} md={8} lg={5}>
            <Card className="auth-card">
              <Card.Body className="p-4">
                <div className="text-center mb-4">
                  <h1 className="auth-title">{t('verify_email_title')}</h1>
                  <p className="tk-text-muted">{t('verify_email_subtitle')}</p>
                  {email && <p className="fw-bold">{email}</p>}
                </div>

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

                <Form onSubmit={handleSubmit}>
                  <Form.Group className="mb-3">
                    <Form.Label>{t('verify_code_label')}</Form.Label>
                    <Form.Control
                      type="text"
                      inputMode="numeric"
                      pattern="\d{6}"
                      maxLength={6}
                      placeholder={t('verify_code_placeholder')}
                      value={code}
                      onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
                      disabled={loading}
                      required
                      className="text-center fs-4 letter-spacing-2"
                    />
                  </Form.Group>

                  <div className="d-grid mb-3">
                    <Button
                      variant="primary"
                      type="submit"
                      disabled={loading || code.length !== 6}
                      size="lg"
                    >
                      {loading ? t('loading') : t('verify_button')}
                    </Button>
                  </div>
                </Form>

                <div className="text-center">
                  <Button variant="link" onClick={handleResend} disabled={loading}>
                    {t('resend_code')}
                  </Button>
                </div>

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