// NOTE: This file is stable and usually should not be modified.
// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.

import { useState } from 'react';
import { User, UserPlus } from 'lucide-react';
import { Button } from '@/components/ui/button.tsx';
import LoginDialog from './LoginDialog';
import SignupDialog from './SignupDialog';
import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts';
import { AccountSwitcher } from './AccountSwitcher';
import { cn } from '@/lib/utils';

export interface LoginAreaProps {
  className?: string;
  /** Compact mode for mobile headers - smaller buttons without text */
  compact?: boolean;
}

export function LoginArea({ className, compact }: LoginAreaProps) {
  const { currentUser } = useLoggedInAccounts();
  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
  const [signupDialogOpen, setSignupDialogOpen] = useState(false);

  const handleLogin = () => {
    setLoginDialogOpen(false);
    setSignupDialogOpen(false);
  };

  return (
    <div className={cn("inline-flex items-center justify-center", className)}>
      {currentUser ? (
        <AccountSwitcher onAddAccountClick={() => setLoginDialogOpen(true)} />
      ) : compact ? (
        // Compact mode for mobile headers - icon only
        <div className="flex gap-1 justify-center">
          <Button
            onClick={() => setSignupDialogOpen(true)}
            size="icon"
            className='h-9 w-9 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
            title="Sign Up"
          >
            <UserPlus className='w-4 h-4' />
          </Button>
          <Button
            onClick={() => setLoginDialogOpen(true)}
            variant="outline"
            size="icon"
            className="h-9 w-9 rounded-full border border-gray-600 hover:border-[#ff0040]"
            title="Log In"
          >
            <User className='w-4 h-4' />
          </Button>
        </div>
      ) : (
        // Default full-size buttons
        <div className="flex gap-3 justify-center w-full">
          <Button
            onClick={() => setSignupDialogOpen(true)}
            className='flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold transition-all flex-1 sm:flex-none'
          >
            <UserPlus className='w-4 h-4' />
            <span>Sign Up</span>
          </Button>
          <Button
            onClick={() => setLoginDialogOpen(true)}
            variant="outline"
            className="flex items-center gap-2 px-5 py-2.5 rounded-full font-medium transition-all border-2 border-gray-600 hover:border-[#ff0040] flex-1 sm:flex-none"
          >
            <User className='w-4 h-4' />
            <span className='truncate'>Log In</span>
          </Button>
        </div>
      )}

      <LoginDialog
        isOpen={loginDialogOpen}
        onClose={() => setLoginDialogOpen(false)}
        onLogin={handleLogin}
        onSignup={() => setSignupDialogOpen(true)}
      />

      {/* One signup entry point. The old "Recovery Phrase vs Secret Key" method
          chooser was dead code (never opened) and pure jargon for a newcomer —
          SignupDialog owns the whole flow now. */}
      <SignupDialog
        isOpen={signupDialogOpen}
        onClose={() => setSignupDialogOpen(false)}
        onUseAmber={() => {
          setSignupDialogOpen(false);
          setLoginDialogOpen(true);
        }}
      />
    </div>
  );
}