'use client'

import { CheckCircle } from 'lucide-react'
import { useState, useEffect } from 'react'

import { useAuth } from '@/hooks/useAuth'

import { CabinetSelectStep } from './cabinet-select-step'
import { ConfirmationStep } from './confirmation-step'
import { InnStep } from './inn-step'
import { MarketplaceApiStep } from './marketplace-api-step'
import { PhoneStep } from './phone-step'
import { SmsStep } from './sms-step'

type AuthStep = 'phone' | 'sms' | 'cabinet-select' | 'inn' | 'marketplace-api' | 'confirmation' | 'complete'
type CabinetType = 'fulfillment' | 'seller' | 'logist' | 'wholesale'

interface OrganizationData {
  name?: string
  fullName?: string
  address?: string
  isActive?: boolean
}

interface ApiKeyValidation {
  sellerId?: string
  sellerName?: string
  tradeMark?: string
  isValid?: boolean
}

interface AuthData {
  phone: string
  smsCode: string
  cabinetType: CabinetType | null
  inn: string
  organizationData: OrganizationData | null
  wbApiKey: string
  wbApiValidation: ApiKeyValidation | null
  ozonApiKey: string
  ozonApiValidation: ApiKeyValidation | null
  isAuthenticated: boolean
  partnerCode?: string | null
  referralCode?: string | null
}

interface AuthFlowProps {
  partnerCode?: string | null
  referralCode?: string | null
}

export function AuthFlow({ partnerCode, referralCode }: AuthFlowProps = {}) {
  const { isAuthenticated, user } = useAuth()

  if (process.env.NODE_ENV === 'development') {
    console.warn('🎢 AuthFlow - Полученные props:', { partnerCode, referralCode })
    console.warn('🎢 AuthFlow - Статус авторизации:', { isAuthenticated, hasUser: !!user })
  }

  // Проверяем незавершенную регистрацию: если есть токен, но нет организации - очищаем токен
  useEffect(() => {
    // Выполняем только на клиенте после гидрации
    if (typeof window === 'undefined') return

    if (isAuthenticated && user && !user.organization) {
      if (process.env.NODE_ENV === 'development') {
        console.warn('🧹 AuthFlow - Обнаружена незавершенная регистрация, очищаем токен')
      }
      // Очищаем токен и данные пользователя
      localStorage.removeItem('authToken')
      localStorage.removeItem('userData')
      // Перезагружаем страницу чтобы сбросить состояние useAuth
      window.location.reload()
      return
    }
  }, [isAuthenticated, user])

  // Начинаем всегда с 'phone' для избежания гидрации,
  // а затем обновляем в useEffect после загрузки клиента
  const [step, setStep] = useState<AuthStep>('phone')

  // Определяем тип регистрации на основе параметров
  // Только один из них должен быть активен (валидация уже прошла в RegisterPage)
  const registrationType = partnerCode ? 'PARTNER' : referralCode ? 'REFERRAL' : null
  const activeCode = partnerCode || referralCode || null

  if (process.env.NODE_ENV === 'development') {
    console.warn('🎢 AuthFlow - Обработанные данные:', { registrationType, activeCode })
  }

  const [authData, setAuthData] = useState<AuthData>({
    phone: '',
    smsCode: '',
    cabinetType: null,
    inn: '',
    organizationData: null,
    wbApiKey: '',
    wbApiValidation: null,
    ozonApiKey: '',
    ozonApiValidation: null,
    isAuthenticated: false,
    // Сохраняем только активный код в правильное поле
    partnerCode: registrationType === 'PARTNER' ? activeCode : null,
    referralCode: registrationType === 'REFERRAL' ? activeCode : null,
  })

  if (process.env.NODE_ENV === 'development') {
    console.warn('🎢 AuthFlow - Сохраненные в authData:', {
      partnerCode: authData.partnerCode,
      referralCode: authData.referralCode,
    })
  }

  // Определяем правильный шаг после гидрации
  useEffect(() => {
    if (typeof window === 'undefined') return // Только на клиенте

    // Если у пользователя есть токен и организация - переходим к завершению
    if (isAuthenticated && user?.organization) {
      setStep('complete')
    }
    // Если есть токен но нет организации - переходим к выбору кабинета
    else if (isAuthenticated && !user?.organization) {
      setStep('cabinet-select')
    }
    // Иначе остаемся на шаге телефона
    else {
      setStep('phone')
    }
  }, [isAuthenticated, user])

  // Обновляем шаг при изменении статуса авторизации
  useEffect(() => {
    if (isAuthenticated && step === 'phone') {
      if (process.env.NODE_ENV === 'development') {
        console.warn('🎢 AuthFlow - Пользователь авторизовался, переход к выбору кабинета')
      }
      setStep('cabinet-select')
    }
  }, [isAuthenticated, step])

  // При завершении авторизации инициируем проверку и перенаправление
  useEffect(() => {
    if (step === 'complete') {
      const timer = setTimeout(() => {
        // Принудительно перенаправляем в дашборд
        window.location.href = '/dashboard'
      }, 2000) // Задержка для показа сообщения о завершении

      return () => clearTimeout(timer)
    }
  }, [step])

  const handlePhoneNext = (phone: string) => {
    setAuthData((prev) => ({ ...prev, phone }))
    setStep('sms')
  }

  const handleSmsNext = async (smsCode: string) => {
    setAuthData((prev) => ({ ...prev, smsCode, isAuthenticated: true }))

    // SMS код уже проверен в SmsStep компоненте
    // Просто переходим к следующему шагу
    setStep('cabinet-select')
  }

  const handleCabinetNext = (cabinetType: CabinetType) => {
    setAuthData((prev) => ({ ...prev, cabinetType }))
    if (cabinetType === 'fulfillment' || cabinetType === 'logist' || cabinetType === 'wholesale') {
      setStep('inn')
    } else {
      setStep('marketplace-api')
    }
  }

  const handleInnNext = (inn: string, organizationData?: OrganizationData) => {
    setAuthData((prev) => ({
      ...prev,
      inn,
      organizationData: organizationData || null,
    }))
    setStep('confirmation')
  }

  const handleMarketplaceApiNext = (apiData: {
    wbApiKey?: string
    wbApiValidation?: ApiKeyValidation
    ozonApiKey?: string
    ozonApiValidation?: ApiKeyValidation
  }) => {
    setAuthData((prev) => ({
      ...prev,
      wbApiKey: apiData.wbApiKey || '',
      wbApiValidation: apiData.wbApiValidation || null,
      ozonApiKey: apiData.ozonApiKey || '',
      ozonApiValidation: apiData.ozonApiValidation || null,
    }))
    setStep('confirmation')
  }

  const handleConfirmation = () => {
    setStep('complete')
  }

  const handleSmsBack = () => {
    setStep('phone')
  }

  const handleCabinetBack = () => {
    setStep('sms')
  }

  const handleInnBack = () => {
    setStep('cabinet-select')
  }

  const handleMarketplaceApiBack = () => {
    setStep('cabinet-select')
  }

  const handleConfirmationBack = () => {
    if (
      authData.cabinetType === 'fulfillment' ||
      authData.cabinetType === 'logist' ||
      authData.cabinetType === 'wholesale'
    ) {
      setStep('inn')
    } else {
      setStep('marketplace-api')
    }
  }

  if (step === 'complete') {
    return (
      <div className="min-h-screen bg-animated flex items-center justify-center p-4">
        {/* Floating Particles */}
        <div className="particles">
          <div className="particle"></div>
          <div className="particle"></div>
          <div className="particle"></div>
          <div className="particle"></div>
          <div className="particle"></div>
          <div className="particle"></div>
          <div className="particle"></div>
          <div className="particle"></div>
          <div className="particle"></div>
        </div>

        <div className="text-center text-white max-w-md relative z-10">
          <div className="bg-white/10 backdrop-blur rounded-2xl p-8 border border-white/20 glow-purple">
            <CheckCircle className="h-20 w-20 mx-auto mb-6 text-green-400 animate-pulse" />
            <h1 className="text-3xl font-bold text-gradient-bright mb-4">Добро пожаловать!</h1>
            <p className="text-white/80 mb-4">Регистрация успешно завершена</p>
            <div className="bg-white/5 rounded-lg p-4 mb-6">
              <p className="text-white/60 text-sm mb-2">Тип кабинета:</p>
              <p className="text-white font-medium">
                {authData.cabinetType === 'fulfillment'
                  ? 'Фулфилмент'
                  : authData.cabinetType === 'logist'
                    ? 'Логистика'
                    : authData.cabinetType === 'wholesale'
                      ? 'Поставщик'
                      : 'Селлер'}
              </p>
            </div>
            <div className="flex items-center justify-center gap-2 text-white/60 text-sm">
              <div className="animate-spin h-4 w-4 border-2 border-white/20 border-t-white/60 rounded-full"></div>
              Переход в личный кабинет...
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <>
      {step === 'phone' && (
        <PhoneStep onNext={handlePhoneNext} registrationType={registrationType} referrerCode={activeCode} />
      )}
      {step === 'sms' && <SmsStep phone={authData.phone} onNext={handleSmsNext} onBack={handleSmsBack} />}
      {step === 'cabinet-select' && <CabinetSelectStep onNext={handleCabinetNext} onBack={handleCabinetBack} />}
      {step === 'inn' && <InnStep onNext={handleInnNext} onBack={handleInnBack} />}
      {step === 'marketplace-api' && (
        <MarketplaceApiStep onNext={handleMarketplaceApiNext} onBack={handleMarketplaceApiBack} />
      )}
      {step === 'confirmation' && (
        <ConfirmationStep
          data={{
            phone: authData.phone,
            cabinetType: authData.cabinetType as 'fulfillment' | 'seller' | 'logist' | 'wholesale',
            inn: authData.inn || undefined,
            organizationData: authData.organizationData || undefined,
            wbApiKey: authData.wbApiKey || undefined,
            wbApiValidation: authData.wbApiValidation || undefined,
            ozonApiKey: authData.ozonApiKey || undefined,
            ozonApiValidation: authData.ozonApiValidation || undefined,
            referralCode: authData.referralCode,
            partnerCode: authData.partnerCode,
          }}
          onConfirm={handleConfirmation}
          onBack={handleConfirmationBack}
        />
      )}
      {(step as string) === 'complete' && (
        <div className="space-y-6 text-center">
          <div className="flex justify-center">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
              <CheckCircle className="w-10 h-10 text-green-600" />
            </div>
          </div>
          <div className="space-y-2">
            <h2 className="text-2xl font-bold text-gray-900">Регистрация завершена!</h2>
            <p className="text-gray-600">
              Ваш{' '}
              {authData.cabinetType === 'fulfillment'
                ? 'фулфилмент кабинет'
                : authData.cabinetType === 'seller'
                  ? 'селлер кабинет'
                  : authData.cabinetType === 'logist'
                    ? 'логистический кабинет'
                    : 'оптовый кабинет'}{' '}
              успешно создан
            </p>
          </div>
          <div className="animate-pulse">
            <p className="text-sm text-gray-500">Переход в личный кабинет...</p>
          </div>
        </div>
      )}
    </>
  )
}