import { useEffect, useState } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { authService } from '@/lib/auth-service';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react';

/**
 * Legacy magic-link verification. New registrations use OTP on `/register` instead.
 */
export default function VerifyEmailPage() {
  const [searchParams] = useSearchParams();
  const token = (searchParams.get('token') ?? '').trim();

  const [status, setStatus] = useState<'idle' | 'loading' | 'ok' | 'err'>(
    token ? 'loading' : 'err',
  );
  const [message, setMessage] = useState(
    token
      ? ''
      : 'Đăng ký mới dùng mã OTP gửi qua email. Trang này chỉ dành cho liên kết cũ. Vui lòng mở /register hoặc kiểm tra email có chứa token.',
  );

  useEffect(() => {
    if (!token) return;

    let cancelled = false;
    (async () => {
      const r = await authService.verifyEmail(token);
      if (cancelled) return;
      if (r.success) {
        setStatus('ok');
        setMessage(r.message || 'Email đã xác minh.');
      } else {
        setStatus('err');
        setMessage(r.error || 'Xác minh thất bại.');
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [token]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Xác minh email (liên kết cũ)</CardTitle>
          <CardDescription>
            Luồng hiện tại: nhập mã OTP trên trang{' '}
            <Link to="/register" className="text-primary underline-offset-4 hover:underline">
              Đăng ký
            </Link>
            .
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {status === 'loading' && (
            <div className="flex items-center gap-2 text-muted-foreground text-sm">
              <Loader2 className="h-4 w-4 animate-spin" />
              Đang xác minh…
            </div>
          )}
          {status === 'ok' && (
            <Alert>
              <CheckCircle2 className="h-4 w-4 text-green-600" />
              <AlertDescription>{message}</AlertDescription>
            </Alert>
          )}
          {status === 'err' && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{message}</AlertDescription>
            </Alert>
          )}
          <div className="flex flex-col gap-2">
            <Button asChild variant="default">
              <Link to="/login">Đăng nhập</Link>
            </Button>
            <Button asChild variant="ghost">
              <Link to="/register">Đăng ký với OTP</Link>
            </Button>
            <Button asChild variant="ghost">
              <Link to="/">Về trang chủ</Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
