'use client';

import Button from '@/components/ui/button/Button';
import { ArrowLeft, MailCheck, ShieldCheck } from 'lucide-react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';

export default function CheckEmailModule() {
  const searchParams = useSearchParams();
  const email = searchParams.get('email')?.trim().toLowerCase() || '';
  const signupHref = email ? `/signup?email=${encodeURIComponent(email)}` : '/signup';

  return (
    <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
      <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-sm dark:border-gray-800 dark:bg-gray-900 sm:p-8">
        <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
          <MailCheck className="h-7 w-7" />
        </div>

        <div className="mb-6">
          <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold uppercase text-brand-700 dark:border-brand-500/20 dark:bg-brand-500/10 dark:text-brand-300">
            <ShieldCheck className="h-3.5 w-3.5" />
            Email Verification
          </div>
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
            Check your email
          </h1>
          <p className="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
            We sent a verification link{email ? ' to ' : ' to your inbox'}
            {email && <span className="font-semibold text-gray-800 dark:text-white"> {email}</span>}.
            Open the link to finish creating your account.
          </p>
        </div>

        <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-white/[0.03]">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
            The link expires soon. If it is no longer valid, return to sign up and submit the form
            again to receive a fresh link.
          </p>
        </div>

        <div className="mt-6">
          <Button asChild className="w-full" size="sm" variant="outline">
            <Link href={signupHref}>
              <ArrowLeft className="h-4 w-4" />
              Back to Sign Up
            </Link>
          </Button>
        </div>
      </div>
    </div>
  );
}