eii-frontend / components / LoginButton.tsx

'use client'

import { useState, useEffect, useRef } from 'react'
import { LogIn, LogOut, User, FolderOpen } from 'lucide-react'
import Link from 'next/link'

interface UserProfile {
  did: string
  handle: string
  displayName?: string
  avatar?: string
  description?: string
}

interface LoginButtonProps {
  className?: string
}

export default function LoginButton({ className }: LoginButtonProps) {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [profile, setProfile] = useState<UserProfile | null>(null)
  const [handle, setHandle] = useState('')
  const [showLoginForm, setShowLoginForm] = useState(false)
  const [showProfileMenu, setShowProfileMenu] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const profileMenuRef = useRef<HTMLDivElement>(null)
  const loginFormRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    checkLoginStatus()
  }, [])

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
        setShowProfileMenu(false)
      }
      if (loginFormRef.current && !loginFormRef.current.contains(event.target as Node)) {
        setShowLoginForm(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  const checkLoginStatus = async () => {
    try {
      const response = await fetch('/api/status')
      if (response.ok) {
        const data = await response.json()
        if (data.did) {
          setIsLoggedIn(true)
          await fetchProfile()
        } else {
          setIsLoggedIn(false)
          setProfile(null)
        }
      }
    } catch (err) {
      console.error('Error checking login status:', err)
    }
  }

  const fetchProfile = async () => {
    try {
      const response = await fetch('/api/profile')
      if (response.ok) {
        const profileData = await response.json()
        setProfile(profileData)
      }
    } catch (err) {
      console.error('Error fetching profile:', err)
    }
  }

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!handle.trim()) return

    setLoading(true)
    setError(null)

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ handle: handle.trim() }),
      })

      if (response.ok) {
        const data = await response.json()
        window.location.href = data.redirectUrl
      } else {
        const errorData = await response.json()
        setError(errorData.error || 'Login failed')
      }
    } catch (err) {
      setError('Network error')
      console.error('Login failed:', err)
    } finally {
      setLoading(false)
    }
  }

  const handleLogout = async () => {
    try {
      await fetch('/api/logout', { method: 'POST' })
      setIsLoggedIn(false)
      setProfile(null)
      setShowProfileMenu(false)
      window.location.reload()
    } catch (err) {
      console.error('Logout failed:', err)
    }
  }

  if (isLoggedIn && profile) {
    return (
      <div className="relative" ref={profileMenuRef}>
        <button
          onClick={() => setShowProfileMenu(!showProfileMenu)}
          className={`flex items-center space-x-2 px-2 py-2 text-sm font-medium text-secondary hover:text-primary transition-colors rounded-lg ${className}`}
        >
          {profile.avatar ? (
            <img 
              src={profile.avatar} 
              alt={profile.displayName || profile.handle}
              className="h-7 w-7 rounded-full border-2 border-transparent hover:border-accent transition-colors"
            />
          ) : (
            <div className="h-7 w-7 rounded-full bg-accent-light flex items-center justify-center border-2 border-transparent hover:border-accent transition-colors">
              <User className="h-4 w-4 text-accent" />
            </div>
          )}
          <span className="hidden lg:inline">
            {profile.displayName || profile.handle}
          </span>
        </button>

        {showProfileMenu && (
          <div className="absolute right-0 top-full mt-2 w-64 p-4 bg-surface border border-border rounded-lg shadow-lg z-50">
            <div className="flex items-center space-x-3 mb-3">
              {profile.avatar ? (
                <img 
                  src={profile.avatar} 
                  alt={profile.displayName || profile.handle}
                  className="h-10 w-10 rounded-full"
                />
              ) : (
                <div className="h-10 w-10 rounded-full bg-accent-light flex items-center justify-center">
                  <User className="h-6 w-6 text-accent" />
                </div>
              )}
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-primary truncate">
                  {profile.displayName || profile.handle}
                </p>
                <p className="text-xs text-secondary truncate">
                  @{profile.handle}
                </p>
              </div>
            </div>
            
            {profile.description && (
              <p className="text-xs text-secondary mb-3 line-clamp-2">
                {profile.description}
              </p>
            )}

            <div className="space-y-2">
              <Link
                href={`/project/${encodeURIComponent(profile.did)}`}
                className="w-full flex items-center justify-center space-x-2 px-3 py-2 text-xs font-medium text-secondary hover:text-primary border border-border rounded-md transition-colors"
                onClick={() => setShowProfileMenu(false)}
              >
                <FolderOpen className="h-3 w-3" />
                <span>My Project</span>
              </Link>

              <button
                onClick={handleLogout}
                className="w-full flex items-center justify-center space-x-2 px-3 py-2 text-xs font-medium text-secondary hover:text-primary border border-border rounded-md transition-colors"
              >
                <LogOut className="h-3 w-3" />
                <span>Sign out</span>
              </button>
            </div>
          </div>
        )}
      </div>
    )
  }

  if (showLoginForm) {
    return (
      <div className="relative" ref={loginFormRef}>
        <div className="absolute right-0 top-full mt-2 w-72 p-4 bg-surface border border-border rounded-lg shadow-lg z-50">
          <form onSubmit={handleLogin} className="space-y-3">
            <div>
              <input
                type="text"
                placeholder="Enter your Bluesky handle"
                value={handle}
                onChange={(e) => setHandle(e.target.value)}
                className="w-full px-3 py-2 text-sm border border-border rounded-md bg-surface text-primary focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                required
                disabled={loading}
              />
            </div>
            {error && (
              <p className="text-xs text-red-500">{error}</p>
            )}
            <div className="flex space-x-2">
              <button
                type="submit"
                disabled={loading}
                className="flex-1 px-3 py-2 text-xs font-medium text-white bg-accent hover:bg-accent-hover disabled:opacity-50 rounded-md transition-colors"
              >
                {loading ? 'Signing in...' : 'Sign in'}
              </button>
              <button
                type="button"
                onClick={() => setShowLoginForm(false)}
                className="px-3 py-2 text-xs font-medium text-secondary hover:text-primary border border-border rounded-md transition-colors"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
    )
  }

  return (
    <button
      onClick={() => setShowLoginForm(true)}
      className={`flex items-center space-x-2 px-2 py-2 text-sm font-medium text-secondary hover:text-primary transition-colors rounded-lg ${className}`}
    >
      <LogIn className="h-4 w-4" />
      <span className="hidden lg:inline">Sign In</span>
    </button>
  )
}