'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 { toast } from 'sonner';
import { otpSchema, type OtpInput } from '@/lib/validations/auth';
import { createClient } from '@/lib/supabase/client';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export default function VerifyOtpPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const email = searchParams.get('email') ?? '';
  const next = searchParams.get('next') ?? '/dashboard';
  const [submitting, setSubmitting] = useState(false);
  const [resending, setResending] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<OtpInput>({ resolver: zodResolver(otpSchema) });

  async function onSubmit(values: OtpInput) {
    setSubmitting(true);
    const supabase = createClient();
    const { error } = await supabase.auth.verifyOtp({
      email,
      token: values.code,
      type: 'email',
    });

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

    toast.success('Verified!');
    router.push(next);
    setSubmitting(false);
  }

  async function resendCode() {
    setResending(true);
    const supabase = createClient();
    const { error } = await supabase.auth.resend({ type: 'signup', email });
    if (error) toast.error(error.message);
    else toast.success('Code resent.');
    setResending(false);
  }

  return (
    <div>
      <h1 className="font-display text-2xl text-ink dark:text-paper">Verify it's you</h1>
      <p className="mt-1 text-sm text-ink-muted dark:text-slate-muted">
        Enter the 6-digit code sent to <span className="font-medium">{email}</span>
      </p>

      <form onSubmit={handleSubmit(onSubmit)} className="mt-8 space-y-4" noValidate>
        <Input
          label="Verification code"
          inputMode="numeric"
          maxLength={6}
          placeholder="000000"
          className="tracking-[0.5em] text-center font-mono text-lg"
          {...register('code')}
          error={errors.code?.message}
        />
        <Button type="submit" isLoading={submitting} className="w-full">
          Verify
        </Button>
      </form>

      <button
        onClick={resendCode}
        disabled={resending}
        className="mt-6 text-sm text-azure font-medium disabled:opacity-50"
      >
        {resending ? 'Resending…' : "Didn't get a code? Resend"}
      </button>
    </div>
  );
}