mnemo_cards/mnemo_cards_admin/src/pages/LoginPage.tsx

import { useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { useMutation } from '@tanstack/react-query'
import { toast } from 'sonner'
import { useAuthStore } from '@/stores/authStore'
import { authApi } from '@/api/auth'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import type { CodeStatusResponse } from '@/types/models'

const TELEGRAM_BOT_USERNAME = 'mnemo_cards_bot'
const TELEGRAM_BOT_DEEP_LINK_BASE = `https://t.me/${TELEGRAM_BOT_USERNAME}`

function telegramBotDeepLink(code: string): string {
  return `${TELEGRAM_BOT_DEEP_LINK_BASE}?start=${code}`
}

export default function LoginPage() {
  const navigate = useNavigate()
  const { login } = useAuthStore()
  const [code, setCode] = useState('')
  const [codeStatus, setCodeStatus] = useState<CodeStatusResponse | null>(null)
  const [countdown, setCountdown] = useState<number>(0)
  const [isVerifying, setIsVerifying] = useState(false)
  const statusPollIntervalRef = useRef<NodeJS.Timeout | null>(null)
  const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null)

  // Request code mutation
  const requestCodeMutation = useMutation({
    mutationFn: () => authApi.requestCode(),
    onSuccess: (data) => {
      if (data.success && data.code) {
        setCode(data.code)
        setCodeStatus({
          success: true,
          code: data.code,
          status: data.status || 'pending',
          expiresAt: data.expiresAt,
          remainingSeconds: data.remainingSeconds || 600,
          isClaimed: false,
          isUsed: false,
        })
        toast.success('Code generated! Send it to the Telegram bot.')
        
        // Open Telegram bot
        window.open(telegramBotDeepLink(data.code), '_blank')
        
        // Start polling for status
        startStatusPolling(data.code)
        startCountdown(data.remainingSeconds || 600)
      } else {
        toast.error(data.message || 'Failed to generate code')
      }
    },
    onError: (error: unknown) => {
      const errorMessage = 
        (error as { response?: { data?: { message?: string } } })?.response?.data?.message ||
        (error as { message?: string })?.message ||
        'Failed to generate code'
      toast.error(errorMessage)
    },
  })

  // Verify code mutation
  const verifyCodeMutation = useMutation({
    mutationFn: (code: string) => authApi.verifyCode(code),
    onSuccess: (data) => {
      console.log('Verify code response:', data)
      
      // Check if response has success field and it's false
      if (data.success === false) {
        const errorMsg = data.message || 'Verification failed'
        console.error('Verification failed:', errorMsg)
        toast.error(errorMsg)
        setIsVerifying(false)
        // Don't restart polling if verification failed - user needs to generate new code
        return
      }
      
      // Validate response structure
      if (!data.token || !data.user) {
        console.error('Invalid response structure:', data)
        toast.error('Invalid response from server')
        setIsVerifying(false)
        // Don't restart polling - this is a server error
        return
      }
      
      // Stop polling
      stopStatusPolling()
      stopCountdown()
      setIsVerifying(false)
      
      console.log('Login successful, setting token and user')
      login(data.token, data.user)
      toast.success('Welcome back!')
      navigate('/')
    },
    onError: (error: unknown) => {
      console.error('Verify code error:', error)
      setIsVerifying(false)
      const errorResponse = error as { response?: { data?: { message?: string }; status?: number } }
      const errorMessage = 
        errorResponse?.response?.data?.message ||
        (error as { message?: string })?.message ||
        'Invalid code'
      
      // If 403, it means code was claimed but user is not admin
      if (errorResponse?.response?.status === 403) {
        toast.error('Access denied: You are not an admin. Code was claimed but verification failed.')
        stopStatusPolling()
        stopCountdown()
      } else {
        toast.error(errorMessage)
        // Restart polling in case of other errors
        if (code) {
          startStatusPolling(code)
        }
      }
    },
  })

  const startStatusPolling = (code: string) => {
    stopStatusPolling()
    
    // Poll immediately
    checkCodeStatus(code)
    
    // Then poll every 3 seconds
    statusPollIntervalRef.current = setInterval(() => {
      checkCodeStatus(code)
    }, 3000)
  }

  const stopStatusPolling = () => {
    if (statusPollIntervalRef.current) {
      clearInterval(statusPollIntervalRef.current)
      statusPollIntervalRef.current = null
    }
  }

  const checkCodeStatus = async (codeToCheck: string) => {
    try {
      const status = await authApi.getCodeStatus(codeToCheck)
      
      // Check if response is successful
      if (!status.success) {
        console.error('Code status check failed:', status.message || status.error)
        if (status.error === 'NotFound') {
          stopStatusPolling()
          stopCountdown()
          toast.error('Code not found. Please generate a new one.')
        }
        return
      }
      
      setCodeStatus(status)
      
      console.log('Code status:', status.status, 'isClaimed:', status.isClaimed, 'isUsed:', status.isUsed)
      
      if (status.status === 'claimed' && !status.isUsed && !isVerifying) {
        // Code is claimed, automatically verify and login
        console.log('Code claimed, attempting login...')
        setIsVerifying(true)
        stopStatusPolling()
        verifyCodeMutation.mutate(codeToCheck)
      } else if (status.status === 'expired' || (status.remainingSeconds !== undefined && status.remainingSeconds <= 0)) {
        stopStatusPolling()
        stopCountdown()
        toast.error('Code expired. Please generate a new one.')
      } else if (status.isUsed) {
        stopStatusPolling()
        stopCountdown()
        toast.info('Code already used')
      } else {
        // Update countdown
        if (status.remainingSeconds !== undefined && status.remainingSeconds > 0) {
          setCountdown(status.remainingSeconds)
        }
      }
    } catch (error) {
      console.error('Failed to check code status:', error)
      // Don't stop polling on network errors, just log
    }
  }

  const startCountdown = (initialSeconds: number) => {
    stopCountdown()
    setCountdown(initialSeconds)
    
    countdownIntervalRef.current = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          stopCountdown()
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }

  const stopCountdown = () => {
    if (countdownIntervalRef.current) {
      clearInterval(countdownIntervalRef.current)
      countdownIntervalRef.current = null
    }
  }

  useEffect(() => {
    return () => {
      stopStatusPolling()
      stopCountdown()
    }
  }, [])

  const handleRequestCode = () => {
    requestCodeMutation.mutate()
  }

  const handleVerifyCode = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const trimmedCode = code.trim()
    
    if (!trimmedCode) {
      toast.error('Please enter verification code')
      return
    }
    
    // Validate code format: should be 6 digits
    if (!/^\d{6}$/.test(trimmedCode)) {
      toast.error('Code must be 6 digits')
      return
    }
    
    verifyCodeMutation.mutate(trimmedCode)
  }

  const handleBack = () => {
    stopStatusPolling()
    stopCountdown()
    setIsVerifying(false)
    setCode('')
    setCodeStatus(null)
    setCountdown(0)
  }

  const formatTime = (seconds: number): string => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }

  const getStatusLabel = (status: string): string => {
    switch (status) {
      case 'claimed':
        return 'Code confirmed. Logging in...'
      case 'used':
        return 'Code already used'
      case 'expired':
        return 'Code expired'
      case 'pending':
      default:
        return 'Waiting for code to be sent in bot...'
    }
  }

  const isCodeActive = codeStatus && 
    codeStatus.status !== 'expired' && 
    codeStatus.status !== 'used' &&
    countdown > 0

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold text-center">
            Mnemo Cards Admin
          </CardTitle>
          <CardDescription className="text-center">
            {codeStatus
              ? 'Send the code to the Telegram bot to continue'
              : 'Click the button below to generate a verification code'
            }
          </CardDescription>
        </CardHeader>
        <CardContent>
          {!codeStatus ? (
            <div className="space-y-4">
              <Button
                onClick={handleRequestCode}
                className="w-full"
                disabled={requestCodeMutation.isPending}
              >
                {requestCodeMutation.isPending ? 'Generating...' : 'Generate Code'}
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              {/* Code Display */}
              <div className="space-y-2">
                <Label>Verification Code</Label>
                <div className="flex items-center space-x-2">
                  <Input
                    type="text"
                    value={code}
                    readOnly
                    className="font-mono text-lg font-bold text-center"
                  />
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      navigator.clipboard.writeText(code)
                      toast.success('Code copied to clipboard!')
                    }}
                  >
                    Copy
                  </Button>
                </div>
              </div>

              {/* Status Card */}
              {codeStatus && (
                <div className="p-4 bg-gray-50 rounded-lg border">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Status:</span>
                      <span className={`text-sm font-semibold ${
                        codeStatus.status === 'claimed' ? (isVerifying ? 'text-blue-600' : 'text-green-600') :
                        codeStatus.status === 'expired' || codeStatus.status === 'used' ? 'text-red-600' :
                        'text-gray-600'
                      }`}>
                        {isVerifying ? 'Verifying and logging in...' : getStatusLabel(codeStatus.status)}
                      </span>
                    </div>
                    {isCodeActive && (
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Time remaining:</span>
                        <span className="text-sm font-mono font-semibold">
                          {formatTime(countdown)}
                        </span>
                      </div>
                    )}
                    {/* Debug info */}
                    {process.env.NODE_ENV === 'development' && (
                      <div className="mt-2 pt-2 border-t text-xs text-gray-500">
                        <div>Status: {codeStatus.status}</div>
                        <div>Claimed: {codeStatus.isClaimed ? 'Yes' : 'No'}</div>
                        <div>Used: {codeStatus.isUsed ? 'Yes' : 'No'}</div>
                        <div>Verifying: {isVerifying ? 'Yes' : 'No'}</div>
                      </div>
                    )}
                  </div>
                </div>
              )}

              {/* Manual Code Input (fallback) */}
              <form onSubmit={handleVerifyCode} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="code">Or enter code manually</Label>
                  <Input
                    id="code"
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]*"
                    placeholder="Enter 6-digit code"
                    value={code}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                      const value = e.target.value.replace(/\D/g, '')
                      setCode(value)
                    }}
                    maxLength={6}
                    disabled={verifyCodeMutation.isPending}
                    autoComplete="one-time-code"
                  />
                </div>
                <div className="flex space-x-2">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={handleBack}
                    disabled={verifyCodeMutation.isPending}
                    className="flex-1"
                  >
                    Generate New Code
                  </Button>
                  <Button
                    type="submit"
                    disabled={verifyCodeMutation.isPending || !code.trim()}
                    className="flex-1"
                  >
                    {verifyCodeMutation.isPending ? 'Verifying...' : 'Verify'}
                  </Button>
                </div>
              </form>

              {/* Open Bot Button */}
              <Button
                type="button"
                variant="outline"
                onClick={() => window.open(telegramBotDeepLink(code), '_blank')}
                className="w-full"
              >
                Open Telegram Bot
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}