'use client';

import { Suspense, useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { Container, Card, Alert, Spinner } from 'react-bootstrap';
import Link from 'next/link';
import { getPaymentResult, PaymentResultResponse } from '@/services/adhesionService';

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

function ConfirmationContent() {
  const t = useTranslations('Adhesion');
  const searchParams = useSearchParams();
  const token = searchParams.get('paylinetoken') || '';

  const [result, setResult] = useState<PaymentResultResponse | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!token) {
      setLoading(false);
      return;
    }
    getPaymentResult(token)
      .then(setResult)
      .catch(() => setResult(null))
      .finally(() => setLoading(false));
  }, [token]);

  if (loading) {
    return (
      <Container className="py-5 text-center">
        <Spinner animation="border" />
        <p>{t('loading')}</p>
      </Container>
    );
  }

  if (!result || !result.success) {
    return (
      <Container className="py-5" style={{ maxWidth: 600 }}>
        <Alert variant="danger">
          <h4>{t('failure_title')}</h4>
        </Alert>
        <Link href="/adhesion" className="btn btn-primary">
          {t('failure_retry')}
        </Link>
      </Container>
    );
  }

  const amountEuros = (result.amount / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2 });

  return (
    <Container className="py-5" style={{ maxWidth: 600 }}>
      <Alert variant="success">
        <h4>{t('confirmation_title')}</h4>
      </Alert>
      <Card className="p-4">
        <p><strong>{result.firstName} {result.lastName}</strong></p>
        <p>{amountEuros} € — {result.type}</p>
        <p>{t('confirmation_email')}</p>
        {result.wantsMemberCard && <p>{t('confirmation_card')}</p>}
      </Card>
    </Container>
  );
}