'use client';
import { useState } from 'react';
import { useSession } from '@/lib/auth/auth-client';
import { Loader2 } from 'lucide-react';
import { StepItem } from '../step-item';
import SignIn from '@/app/(main)/payments/personal/_components/forms/sign-in';
import SignUp from '@/app/(main)/payments/personal/_components/forms/sign-up';

export default function Step_1() {
  const [isSignIn, setIsSignIn] = useState(true);
  const { data, isPending } = useSession();

  if (isPending) {
    return (
      <StepItem step='1/3' title='Opret Profil'>
        <div className='m-4 flex items-center justify-center gap-2'>
          <Loader2 className='size-8 animate-spin' /> Indlæser...
        </div>
      </StepItem>
    );
  }

  if (data?.user) {
    return (
      <StepItem step='1/3' title='Opret Profil'>
        <div>
          <p>Du er nu logget på med:</p>
          <p className='text-client-red'>{data?.user.email}</p>
        </div>
      </StepItem>
    );
  }

  return (
    <StepItem step='1/3' title='Opret Profil'>
      <div>
        <p className='mb-9'>
          Opret først en profil ved at logge ind med din Facebook eller
          Google-konto — eller ved at udfylde felterne herunder.
        </p>
        {isSignIn ? <SignIn /> : <SignUp />}
        <p className='text-sm'>
          {isSignIn
            ? 'Har du ikke en profil på MagasinetKBH — '
            : 'Jeg har allerede en profil på MagasinetKBH — '}
          <button
            className='underline hover:no-underline'
            onClick={() => setIsSignIn(!isSignIn)}
          >
            opret profil i stedet
          </button>
        </p>
      </div>
    </StepItem>
  );
}