import { useState, useEffect } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { 
  Shield,
  ChevronDown,
  AlertCircle,
  Check,
  X,
  Info,
  Database,
  User,
  Mail,
  Calendar,
  FileText,
  Settings,
  Lock
} from 'lucide-react'

interface Permission {
  id: string
  name: string
  description: string
  icon: React.ElementType
  required: boolean
}

const AuthorizePage = () => {
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
  const { user } = useAuth()
  
  const [isLoading, setIsLoading] = useState(false)
  const [appInfo, setAppInfo] = useState<any>(null)
  const [selectedPermissions, setSelectedPermissions] = useState<Set<string>>(new Set())
  const [showDetails, setShowDetails] = useState(false)

  // OAuth parameters
  const clientId = searchParams.get('client_id')
  const redirectUri = searchParams.get('redirect_uri')
  const responseType = searchParams.get('response_type')
  const scope = searchParams.get('scope')
  const state = searchParams.get('state')

  const permissions: Permission[] = [
    {
      id: 'profile',
      name: '프로필 정보',
      description: '이름, 이메일, 프로필 사진 등 기본 정보',
      icon: User,
      required: true
    },
    {
      id: 'email',
      name: '이메일 주소',
      description: '이메일 주소 확인 및 알림 전송',
      icon: Mail,
      required: true
    },
    {
      id: 'offline_access',
      name: '오프라인 액세스',
      description: '사용자가 오프라인일 때도 액세스 유지',
      icon: Database,
      required: false
    },
    {
      id: 'calendar',
      name: '캘린더 접근',
      description: '캘린더 일정 읽기 및 수정',
      icon: Calendar,
      required: false
    },
    {
      id: 'files',
      name: '파일 접근',
      description: '파일 읽기, 쓰기 및 공유',
      icon: FileText,
      required: false
    },
    {
      id: 'settings',
      name: '설정 관리',
      description: '애플리케이션 설정 읽기 및 수정',
      icon: Settings,
      required: false
    }
  ]

  useEffect(() => {
    if (!user) {
      // Redirect to login with return URL
      const returnUrl = encodeURIComponent(window.location.href)
      navigate(`/login?return_url=${returnUrl}`)
      return
    }

    if (!clientId) {
      // Invalid request
      navigate('/error?type=invalid_request')
      return
    }

    // Fetch application information
    fetchAppInfo(clientId)

    // Parse requested scopes and set initial permissions
    if (scope) {
      const requestedScopes = scope.split(' ')
      const initialPermissions = new Set<string>()
      
      permissions.forEach(perm => {
        if (perm.required || requestedScopes.includes(perm.id)) {
          initialPermissions.add(perm.id)
        }
      })
      
      setSelectedPermissions(initialPermissions)
    }
  }, [user, clientId, scope, navigate])

  const fetchAppInfo = async (clientId: string) => {
    try {
      const response = await fetch(`/api/v1/applications/${clientId}`)
      if (response.ok) {
        const data = await response.json()
        setAppInfo(data)
      }
    } catch (error) {
      console.error('Failed to fetch app info:', error)
      // Use default app info for demo
      setAppInfo({
        name: 'Project Default Service Account',
        developer: 'AiMond Developer',
        website: 'https://aimond.io',
        verified: true
      })
    }
  }

  const handleAccept = async () => {
    setIsLoading(true)
    
    try {
      // Send authorization request to backend
      const response = await fetch('/api/v1/auth/authorize', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('access_token')}`
        },
        body: JSON.stringify({
          client_id: clientId,
          redirect_uri: redirectUri,
          response_type: responseType,
          scope: Array.from(selectedPermissions).join(' '),
          state: state
        })
      })

      if (response.ok) {
        const data = await response.json()
        
        // Redirect back to the application with authorization code
        const redirectUrl = new URL(redirectUri || '/')
        redirectUrl.searchParams.append('code', data.code)
        if (state) {
          redirectUrl.searchParams.append('state', state)
        }
        
        window.location.href = redirectUrl.toString()
      }
    } catch (error) {
      console.error('Authorization error:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleCancel = () => {
    // Redirect back to the application with error
    const redirectUrl = new URL(redirectUri || '/')
    redirectUrl.searchParams.append('error', 'access_denied')
    if (state) {
      redirectUrl.searchParams.append('state', state)
    }
    
    window.location.href = redirectUrl.toString()
  }

  const togglePermission = (permId: string) => {
    const permission = permissions.find(p => p.id === permId)
    if (permission?.required) return // Can't uncheck required permissions

    const newPermissions = new Set(selectedPermissions)
    if (newPermissions.has(permId)) {
      newPermissions.delete(permId)
    } else {
      newPermissions.add(permId)
    }
    setSelectedPermissions(newPermissions)
  }

  if (!user || !appInfo) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    )
  }

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 px-4 py-3">
        <div className="max-w-3xl mx-auto flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <Shield className="w-8 h-8 text-blue-600" />
            <span className="text-xl font-semibold text-gray-900">AiMond</span>
          </div>
          <div className="flex items-center space-x-4 text-sm">
            <span className="text-gray-600">{user.email}</span>
            <ChevronDown size={16} className="text-gray-400" />
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="flex-1 flex items-center justify-center py-12 px-4">
        <div className="max-w-md w-full">
          {/* App Info Card */}
          <div className="bg-white rounded-lg shadow-md border border-gray-200 p-6">
            {/* App Header */}
            <div className="text-center mb-6">
              <h1 className="text-2xl font-semibold text-gray-900 mb-2">
                {appInfo.name}
              </h1>
              <p className="text-gray-600">이 앱에서 다음 권한을 요청합니다:</p>
            </div>

            {/* Permissions List */}
            <div className="space-y-3 mb-6">
              {permissions.map(permission => {
                const Icon = permission.icon
                const isSelected = selectedPermissions.has(permission.id)
                const isRequired = permission.required

                return (
                  <div
                    key={permission.id}
                    className={`flex items-start space-x-3 p-3 rounded-lg border ${
                      isRequired ? 'bg-gray-50 border-gray-200' : 'border-gray-200 cursor-pointer hover:bg-gray-50'
                    }`}
                    onClick={() => !isRequired && togglePermission(permission.id)}
                  >
                    <div className="flex-shrink-0 mt-0.5">
                      {isRequired ? (
                        <div className="w-5 h-5 bg-blue-600 rounded flex items-center justify-center">
                          <Check size={14} className="text-white" />
                        </div>
                      ) : (
                        <input
                          type="checkbox"
                          checked={isSelected}
                          onChange={() => togglePermission(permission.id)}
                          className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                          onClick={(e) => e.stopPropagation()}
                        />
                      )}
                    </div>
                    <div className="flex-shrink-0">
                      <Icon size={20} className="text-gray-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center space-x-2">
                        <p className="text-sm font-medium text-gray-900">
                          {permission.name}
                        </p>
                        {isRequired && (
                          <span className="text-xs text-gray-500 bg-gray-200 px-2 py-0.5 rounded">
                            필수
                          </span>
                        )}
                      </div>
                      <p className="text-xs text-gray-600 mt-0.5">
                        {permission.description}
                      </p>
                    </div>
                  </div>
                )
              })}
            </div>

            {/* Info Box */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-6">
              <div className="flex items-start space-x-2">
                <Info size={16} className="text-blue-600 flex-shrink-0 mt-0.5" />
                <div className="text-xs text-blue-800">
                  <p className="font-medium mb-1">앱 권한 정보</p>
                  <p>이 앱은 선택한 권한에만 접근할 수 있으며, 언제든지 계정 설정에서 권한을 취소할 수 있습니다.</p>
                </div>
              </div>
            </div>

            {/* Action Buttons */}
            <div className="flex space-x-3">
              <button
                onClick={handleCancel}
                className="flex-1 py-2.5 px-4 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition duration-200"
              >
                취소
              </button>
              <button
                onClick={handleAccept}
                disabled={isLoading || selectedPermissions.size === 0}
                className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isLoading ? '처리 중...' : '허용'}
              </button>
            </div>

            {/* Additional Info */}
            <button
              onClick={() => setShowDetails(!showDetails)}
              className="w-full mt-4 text-center text-xs text-gray-500 hover:text-gray-700"
            >
              {showDetails ? '상세 정보 숨기기' : '상세 정보 보기'}
            </button>

            {showDetails && (
              <div className="mt-4 pt-4 border-t border-gray-200 space-y-2 text-xs text-gray-600">
                <div className="flex justify-between">
                  <span>개발자:</span>
                  <span className="font-medium">{appInfo.developer}</span>
                </div>
                <div className="flex justify-between">
                  <span>웹사이트:</span>
                  <a href={appInfo.website} className="text-blue-600 hover:underline">
                    {appInfo.website}
                  </a>
                </div>
                <div className="flex justify-between">
                  <span>인증 상태:</span>
                  <span className="flex items-center space-x-1">
                    {appInfo.verified ? (
                      <>
                        <Check size={12} className="text-green-600" />
                        <span className="text-green-600">인증됨</span>
                      </>
                    ) : (
                      <>
                        <AlertCircle size={12} className="text-yellow-600" />
                        <span className="text-yellow-600">미인증</span>
                      </>
                    )}
                  </span>
                </div>
              </div>
            )}
          </div>

          {/* Privacy Notice */}
          <div className="mt-6 text-center">
            <p className="text-xs text-gray-500">
              계속 진행하면 AiMond의{' '}
              <a href="#" className="text-blue-600 hover:underline">서비스 약관</a> 및{' '}
              <a href="#" className="text-blue-600 hover:underline">개인정보처리방침</a>에 동의하는 것입니다.
            </p>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="py-4 px-4 border-t border-gray-200 bg-white">
        <div className="max-w-7xl mx-auto flex items-center justify-between text-xs text-gray-600">
          <div className="flex items-center space-x-4">
            <span>한국어</span>
            <ChevronDown size={16} />
          </div>
          <div className="flex items-center space-x-6">
            <a href="#" className="hover:text-gray-900">도움말</a>
            <a href="#" className="hover:text-gray-900">개인정보처리방침</a>
            <a href="#" className="hover:text-gray-900">약관</a>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default AuthorizePage