Spanglish/frontend/src/app/(public)/auth/claim-account/page.tsx

'use client';

import { useEffect, useState, Suspense } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';
import { useAuth } from '@/context/AuthContext';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { authApi } from '@/lib/api';
import { authClient } from '@/lib/auth-client';
import toast from 'react-hot-toast';

/**
 * Progressive-account claim. The claim email contains a magic link that signs
 * the user in (via /auth/magic-link) and redirects here; this page then asks
 * for a password and completes the claim against /api/auth-ext/claim-account.
 */
function ClaimAccountContent() {
  const router = useRouter();
  const { locale: language } = useLanguage();
  const { refreshUser } = useAuth();
  const [loading, setLoading] = useState(false);
  const [checking, setChecking] = useState(true);
  const [hasSession, setHasSession] = useState(false);
  const [alreadyClaimed, setAlreadyClaimed] = useState(false);
  const [formData, setFormData] = useState({
    password: '',
    confirmPassword: '',
  });

  useEffect(() => {
    let cancelled = false;
    authClient
      .getSession()
      .then(({ data }) => {
        if (cancelled) return;
        const user: any = data?.user;
        setHasSession(!!user);
        setAlreadyClaimed(!!user && user.isClaimed && user.accountStatus === 'active');
      })
      .finally(() => {
        if (!cancelled) setChecking(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (formData.password !== formData.confirmPassword) {
      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
      return;
    }

    if (formData.password.length < 10) {
      toast.error(
        language === 'es'
          ? 'La contraseña debe tener al menos 10 caracteres'
          : 'Password must be at least 10 characters'
      );
      return;
    }

    setLoading(true);

    try {
      await authApi.confirmClaimAccount(formData.password);
      await refreshUser();
      toast.success(language === 'es' ? '¡Cuenta activada!' : 'Account activated!');
      router.push('/dashboard');
    } catch (error: any) {
      toast.error(error.message || (language === 'es' ? 'Error' : 'Failed'));
    } finally {
      setLoading(false);
    }
  };

  if (checking) {
    return (
      <div className="section-padding min-h-[70vh] flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-secondary-blue"></div>
      </div>
    );
  }

  if (alreadyClaimed) {
    // Signed-in and already active: nothing to claim
    router.push('/dashboard');
    return null;
  }

  if (!hasSession) {
    return (
      <div className="section-padding min-h-[70vh] flex items-center">
        <div className="container-page">
          <div className="max-w-md mx-auto">
            <Card className="p-8 text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              <h2 className="text-xl font-semibold mb-2">
                {language === 'es' ? 'Enlace Inválido' : 'Invalid Link'}
              </h2>
              <p className="text-gray-600 mb-6">
                {language === 'es'
                  ? 'Este enlace de activación no es válido o ha expirado. Solicita uno nuevo con "Enlace por Email" en la página de inicio de sesión.'
                  : 'This activation link is invalid or has expired. Request a new one using "Email Link" on the login page.'}
              </p>
              <Link href="/login">
                <Button>
                  {language === 'es' ? 'Ir a Iniciar Sesión' : 'Go to Login'}
                </Button>
              </Link>
            </Card>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="section-padding min-h-[70vh] flex items-center">
      <div className="container-page">
        <div className="max-w-md mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold">
              {language === 'es' ? 'Activar tu Cuenta' : 'Activate Your Account'}
            </h1>
            <p className="mt-2 text-gray-600">
              {language === 'es'
                ? 'Configura una contraseña para acceder a tu cuenta'
                : 'Set a password to access your account'}
            </p>
          </div>

          <Card className="p-8">
            <div className="mb-6 p-4 bg-blue-50 rounded-lg">
              <p className="text-sm text-blue-800">
                {language === 'es'
                  ? 'Tu cuenta fue creada durante una reservación. Establece una contraseña para acceder a tu historial de entradas y más.'
                  : 'Your account was created during a booking. Set a password to access your ticket history and more.'}
              </p>
            </div>

            <form onSubmit={handleSubmit} className="space-y-6">
              <Input
                id="password"
                label={language === 'es' ? 'Contraseña' : 'Password'}
                type="password"
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                required
              />
              <p className="text-xs text-gray-500 -mt-4">
                {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
              </p>

              <Input
                id="confirmPassword"
                label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
                type="password"
                value={formData.confirmPassword}
                onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                required
              />

              <Button type="submit" className="w-full" size="lg" isLoading={loading}>
                {language === 'es' ? 'Activar Cuenta' : 'Activate Account'}
              </Button>
            </form>

            <p className="mt-6 text-center text-sm text-gray-600">
              {language === 'es' ? '¿Ya tienes acceso?' : 'Already have access?'}{' '}
              <Link href="/login" className="text-secondary-blue hover:underline font-medium">
                {language === 'es' ? 'Iniciar Sesión' : 'Log In'}
              </Link>
            </p>
          </Card>
        </div>
      </div>
    </div>
  );
}

function LoadingFallback() {
  return (
    <div className="section-padding min-h-[70vh] flex items-center justify-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-secondary-blue"></div>
    </div>
  );
}

export default function ClaimAccountPage() {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <ClaimAccountContent />
    </Suspense>
  );
}