'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { toast } from 'sonner';
import { registerSchema, type RegisterInput } from '@/lib/validations/auth';
import { createClient } from '@/lib/supabase/client';
import { generateReferralCode } from '@/lib/utils/referral';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export default function RegisterPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [submitting, setSubmitting] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<RegisterInput>({
    resolver: zodResolver(registerSchema),
    defaultValues: { referralCode: searchParams.get('ref') ?? '' },
  });

  async function onSubmit(values: RegisterInput) {
    setSubmitting(true);
    const supabase = createClient();

    // 1. Create the auth user. Supabase sends the email verification link automatically
    //    when email confirmations are enabled in the project's auth settings.
    const { data, error } = await supabase.auth.signUp({
      email: values.email,
      password: values.password,
      options: {
        data: {
          full_name: values.fullName,
          phone: values.phone,
        },
      },
    });

    if (error) {
      toast.error(error.message);
      setSubmitting(false);
      return;
    }

    // 2. Resolve referrer (if a valid code was supplied) before creating the profile.
    let referredBy: string | null = null;
    if (values.referralCode) {
      const { data: referrer } = await supabase
        .from('profiles')
        .select('id')
        .eq('referral_code', values.referralCode.toUpperCase())
        .maybeSingle();
      referredBy = referrer?.id ?? null;
      if (!referredBy) {
        toast.warning('Referral code not recognised — continuing without it.');
      }
    }

    // 3. Create the profile row. Retries the code on the rare unique-constraint collision.
    if (data.user) {
      let created = false;
      for (let attempt = 0; attempt < 3 && !created; attempt++) {
        const { error: profileError } = await supabase.from('profiles').insert({
          id: data.user.id,
          full_name: values.fullName,
          phone: values.phone,
          referral_code: generateReferralCode(),
          referred_by: referredBy,
        });
        if (!profileError) created = true;
        else if (!profileError.message.includes('duplicate')) {
          toast.error(profileError.message);
          break;
        }
      }
    }

    toast.success('Account created — check your email to verify.');
    router.push('/verify-otp?email=' + encodeURIComponent(values.email));
    setSubmitting(false);
  }

  return (
    <div>
      <h1 className="font-display text-2xl text-ink dark:text-paper">Create your account</h1>
      <p className="mt-1 text-sm text-ink-muted dark:text-slate-muted">
        Start topping up in under two minutes.
      </p>

      <form onSubmit={handleSubmit(onSubmit)} className="mt-8 space-y-4" noValidate>
        <Input label="Full name" placeholder="Adaeze Okafor" {...register('fullName')} error={errors.fullName?.message} />
        <Input label="Phone number" placeholder="08012345678" {...register('phone')} error={errors.phone?.message} />
        <Input label="Email" type="email" placeholder="you@example.com" {...register('email')} error={errors.email?.message} />
        <Input label="Password" type="password" {...register('password')} error={errors.password?.message} />
        <Input label="Confirm password" type="password" {...register('confirmPassword')} error={errors.confirmPassword?.message} />
        <Input label="Referral code (optional)" placeholder="ABC1234" {...register('referralCode')} error={errors.referralCode?.message} />

        <Button type="submit" isLoading={submitting} className="w-full mt-2">
          Create account
        </Button>
      </form>

      <p className="mt-6 text-sm text-ink-muted dark:text-slate-muted">
        Already have an account?{' '}
        <Link href="/login" className="text-azure font-medium">
          Log in
        </Link>
      </p>
    </div>
  );
}