import { signIn, useSession, getSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import { useNDKContext } from '@/context/NDKContext';
import GenericButton from '@/components/buttons/GenericButton';
import Image from 'next/image';
import { InputText } from 'primereact/inputtext';

export default function SignIn() {
  const [email, setEmail] = useState('');
  const [nsec, setNsec] = useState('');
  const [showEmailInput, setShowEmailInput] = useState(false);
  const [showRecoveryInput, setShowRecoveryInput] = useState(false);
  const { ndk, addSigner } = useNDKContext();
  const { data: session, status } = useSession();
  const router = useRouter();

  const handleEmailSignIn = async e => {
    e.preventDefault();
    await signIn('email', { email, callbackUrl: '/profile' });
  };

  const handleNostrSignIn = async e => {
    e.preventDefault();
    if (!ndk.signer) {
      await addSigner();
    }
    try {
      const user = await ndk.signer.user();
      const pubkey = user?._pubkey;
      signIn('nostr', { pubkey, callbackUrl: '/profile' });
    } catch (error) {
      console.error('Error signing Nostr event:', error);
    }
  };

  const handleAnonymousSignIn = async e => {
    e.preventDefault();

    // Check if we have keys in local storage
    const storedPubkey = localStorage.getItem('anonymousPubkey');
    const storedPrivkey = localStorage.getItem('anonymousPrivkey');

    try {
      const result = await signIn('anonymous', {
        pubkey: storedPubkey,
        privkey: storedPrivkey,
        redirect: false,
        callbackUrl: '/profile',
      });

      if (result?.ok) {
        // Wait a moment for the session to be updated
        await new Promise(resolve => setTimeout(resolve, 1000));

        // Fetch the session
        const session = await getSession();

        if (session?.user?.pubkey && session?.user?.privkey) {
          localStorage.setItem('anonymousPubkey', session.user.pubkey);
          localStorage.setItem('anonymousPrivkey', session.user.privkey);
          router.push('/profile');
        } else {
          console.error('Session data incomplete:', session);
        }
      } else {
        console.error('Anonymous login failed:', result?.error);
      }
    } catch (error) {
      console.error('Sign in error:', error);
    }
  };

  const handleRecoverySignIn = async e => {
    e.preventDefault();
    try {
      const result = await signIn('recovery', {
        nsec,
        redirect: false,
        callbackUrl: '/profile',
      });

      if (result?.ok) {
        router.push('/profile');
      } else {
        console.error('Recovery login failed:', result?.error);
      }
    } catch (error) {
      console.error('Recovery sign in error:', error);
    }
  };

  useEffect(() => {
    // Redirect if already signed in
    if (session?.user) {
      router.push('/profile');
    }
  }, [session, router]);

  return (
    <div className="w-[100vw] min-bottom-bar:w-[86vw] mx-auto mt-24 flex flex-col justify-center">
      <h1 className="text-center mb-8">Sign In</h1>
      <GenericButton
        label={'login with nostr'}
        icon={
          <Image
            src="/images/nostr-icon-white.png"
            width={20}
            height={20}
            alt="Nostr"
            className="mr-2"
          />
        }
        className="text-[#f8f8ff] w-[250px] my-4 mx-auto"
        rounded
        onClick={handleNostrSignIn}
      />
      <GenericButton
        label={'login with email'}
        icon="pi pi-envelope"
        className="text-[#f8f8ff] w-[250px] my-4 mx-auto"
        rounded
        onClick={() => setShowEmailInput(!showEmailInput)}
      />
      <GenericButton
        label={'login with github'}
        icon="pi pi-github"
        className="text-[#f8f8ff] w-[250px] my-4 mx-auto"
        rounded
        onClick={() => signIn('github')}
      />
      {showEmailInput && (
        <form
          onSubmit={handleEmailSignIn}
          className="flex flex-col items-center bg-gray-700 w-fit mx-auto p-4 rounded-lg"
        >
          <InputText
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
            placeholder="Enter your email"
            className="w-[250px] my-4"
          />
          <GenericButton
            type="submit"
            label={'Submit'}
            icon="pi pi-check"
            className="text-[#f8f8ff] w-fit my-4"
            rounded
          />
        </form>
      )}
      <GenericButton
        label={'login anonymously'}
        icon="pi pi-eye-slash"
        className="text-[#f8f8ff] w-[250px] my-4 mx-auto"
        rounded
        onClick={handleAnonymousSignIn}
      />
      <GenericButton
        label={'recover account'}
        icon="pi pi-key"
        className="text-[#f8f8ff] w-[250px] my-4 mx-auto"
        rounded
        onClick={() => setShowRecoveryInput(!showRecoveryInput)}
      />
      {showRecoveryInput && (
        <form
          onSubmit={handleRecoverySignIn}
          className="flex flex-col items-center bg-gray-700 w-fit mx-auto p-4 rounded-lg"
        >
          <div className="text-center mb-4 max-w-[350px]">
            <p className="text-yellow-400 mb-2">⚠️ Recovery Notice</p>
            <p className="text-gray-200 mb-2">
              🔑 This recovery option is only for accounts created through:
            </p>
            <ul className="text-gray-300 mb-2 text-left list-none">
              <li>📧 Email Login</li>
              <li>👤 Anonymous Login</li>
              <li>🐙 GitHub Login</li>
            </ul>
            <p className="text-red-400 text-sm">
              ⛔ Do NOT enter your personal Nostr nsec here! Only use the recovery key provided by
              PlebDevs (available on your profile page).
            </p>
          </div>
          <InputText
            type="password"
            value={nsec}
            onChange={e => setNsec(e.target.value)}
            placeholder="Enter recovery key (nsec or hex)"
            className="w-[250px] my-4"
          />
          <GenericButton
            type="submit"
            label={'Recover Account'}
            icon="pi pi-lock-open"
            className="text-[#f8f8ff] w-fit my-4"
            rounded
          />
        </form>
      )}
    </div>
  );
}