'use client'

import { Package, UserCheck, Phone, FileText, Key, ArrowLeft, Check, Zap, Truck, Building2 } from 'lucide-react'
import { useState } from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { useAuth } from '@/hooks/useAuth'

import { AuthLayout } from './auth-layout'

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

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

interface ConfirmationStepProps {
  data: {
    phone: string
    cabinetType: 'fulfillment' | 'seller' | 'logist' | 'wholesale'
    inn?: string
    organizationData?: OrganizationData
    wbApiKey?: string
    wbApiValidation?: ApiKeyValidation
    ozonApiKey?: string
    ozonApiValidation?: ApiKeyValidation
    referralCode?: string | null
    partnerCode?: string | null
  }
  onConfirm: () => void
  onBack: () => void
}

export function ConfirmationStep({ data, onConfirm, onBack }: ConfirmationStepProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const { registerFulfillmentOrganization, registerSellerOrganization } = useAuth()

  // Преобразование типа кабинета в тип организации
  const getOrganizationType = (cabinetType: string): 'FULFILLMENT' | 'LOGIST' | 'WHOLESALE' => {
    switch (cabinetType) {
      case 'fulfillment':
        return 'FULFILLMENT'
      case 'logist':
        return 'LOGIST'
      case 'wholesale':
        return 'WHOLESALE'
      default:
        return 'FULFILLMENT'
    }
  }

  const formatPhone = (phone: string) => {
    return phone || '+7 (___) ___-__-__'
  }

  const handleConfirm = async () => {
    setIsLoading(true)
    setError(null)

    if (process.env.NODE_ENV === 'development') {
      console.warn('📝 ConfirmationStep - Данные для регистрации:', {
        cabinetType: data.cabinetType,
        inn: data.inn,
        referralCode: data.referralCode,
        partnerCode: data.partnerCode,
      })
    }

    try {
      let result

      if (
        (data.cabinetType === 'fulfillment' || data.cabinetType === 'logist' || data.cabinetType === 'wholesale') &&
        data.inn
      ) {
        if (process.env.NODE_ENV === 'development') {
          console.warn('📝 ConfirmationStep - Вызов registerFulfillmentOrganization с кодами:', {
            referralCode: data.referralCode,
            partnerCode: data.partnerCode,
          })
        }

        result = await registerFulfillmentOrganization(
          data.phone.replace(/\D/g, ''),
          data.inn,
          getOrganizationType(data.cabinetType),
          data.referralCode,
          data.partnerCode,
        )
      } else if (data.cabinetType === 'seller') {
        result = await registerSellerOrganization({
          phone: data.phone.replace(/\D/g, ''),
          wbApiKey: data.wbApiKey,
          ozonApiKey: data.ozonApiKey,
          referralCode: data.referralCode,
          partnerCode: data.partnerCode,
        })
      }

      if (result?.success) {
        onConfirm()
      } else {
        setError(result?.message || 'Ошибка при регистрации организации')
      }
    } catch (error: unknown) {
      console.error('Registration error:', error)
      setError('Произошла ошибка при регистрации. Попробуйте еще раз.')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <AuthLayout
      title="Подтверждение данных"
      description="Проверьте введенные данные перед завершением"
      currentStep={5}
      totalSteps={5}
      stepName="Подтверждение"
    >
      <div className="space-y-4">
        {/* Объединенная карточка с данными */}
        <div className="glass-card p-4 space-y-3">
          {/* Телефон */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Phone className="h-4 w-4 text-white" />
              <span className="text-white text-sm">Телефон:</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-white/70 text-sm">{formatPhone(data.phone)}</span>
              <Badge
                variant="outline"
                className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1"
              >
                <Check className="h-3 w-3" />
              </Badge>
            </div>
          </div>

          {/* Тип кабинета */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              {data.cabinetType === 'fulfillment' ? (
                <Package className="h-4 w-4 text-white" />
              ) : data.cabinetType === 'logist' ? (
                <Truck className="h-4 w-4 text-white" />
              ) : data.cabinetType === 'wholesale' ? (
                <Building2 className="h-4 w-4 text-white" />
              ) : (
                <UserCheck className="h-4 w-4 text-white" />
              )}
              <span className="text-white text-sm">Кабинет:</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-white/70 text-sm">
                {data.cabinetType === 'fulfillment'
                  ? 'Фулфилмент'
                  : data.cabinetType === 'logist'
                    ? 'Логистика'
                    : data.cabinetType === 'wholesale'
                      ? 'Поставщик'
                      : 'Селлер'}
              </span>
              <Badge
                variant="secondary"
                className={`glass-secondary text-xs flex items-center gap-1 ${
                  data.cabinetType === 'fulfillment'
                    ? 'text-blue-300 border-blue-400/30'
                    : data.cabinetType === 'logist'
                      ? 'text-green-300 border-green-400/30'
                      : data.cabinetType === 'wholesale'
                        ? 'text-orange-300 border-orange-400/30'
                        : 'text-purple-300 border-purple-400/30'
                }`}
              >
                {data.cabinetType === 'fulfillment' ? (
                  <Package className="h-3 w-3" />
                ) : data.cabinetType === 'logist' ? (
                  <Truck className="h-3 w-3" />
                ) : data.cabinetType === 'wholesale' ? (
                  <Building2 className="h-3 w-3" />
                ) : (
                  <UserCheck className="h-3 w-3" />
                )}
              </Badge>
            </div>
          </div>

          {/* Данные организации */}
          {(data.cabinetType === 'fulfillment' || data.cabinetType === 'logist' || data.cabinetType === 'wholesale') &&
            data.inn && (
              <>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <FileText className="h-4 w-4 text-white" />
                    <span className="text-white text-sm">ИНН:</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-white/70 text-sm font-mono">{data.inn}</span>
                    <Badge
                      variant="outline"
                      className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1"
                    >
                      <Check className="h-3 w-3" />
                    </Badge>
                  </div>
                </div>

                {/* Данные организации из DaData */}
                {data.organizationData && (
                  <>
                    {data.organizationData.name && (
                      <div className="flex items-center justify-between pl-6">
                        <span className="text-white/60 text-sm">Название:</span>
                        <span className="text-white/90 text-sm max-w-[240px] text-right truncate">
                          {data.organizationData.name}
                        </span>
                      </div>
                    )}

                    {data.organizationData.fullName &&
                      data.organizationData.fullName !== data.organizationData.name && (
                        <div className="flex items-center justify-between pl-6">
                          <span className="text-white/60 text-sm">Полное название:</span>
                          <span className="text-white/70 text-xs max-w-[200px] text-right truncate">
                            {data.organizationData.fullName}
                          </span>
                        </div>
                      )}

                    {data.organizationData.address && (
                      <div className="flex items-center justify-between pl-6">
                        <span className="text-white/60 text-sm">Адрес:</span>
                        <span className="text-white/70 text-xs max-w-[200px] text-right truncate">
                          {data.organizationData.address}
                        </span>
                      </div>
                    )}

                    <div className="flex items-center justify-between pl-6">
                      <span className="text-white/60 text-sm">Статус:</span>
                      <Badge
                        variant="outline"
                        className={`text-xs flex items-center gap-1 ${
                          data.organizationData.isActive
                            ? 'glass-secondary text-green-300 border-green-400/30'
                            : 'glass-secondary text-red-300 border-red-400/30'
                        }`}
                      >
                        {data.organizationData.isActive ? (
                          <>
                            <Check className="h-3 w-3" />
                            Активна
                          </>
                        ) : (
                          <>
                            <FileText className="h-3 w-3" />
                            Неактивна
                          </>
                        )}
                      </Badge>
                    </div>
                  </>
                )}
              </>
            )}

          {/* API ключи для селлера */}
          {data.cabinetType === 'seller' && (data.wbApiKey || data.ozonApiKey) && (
            <>
              <div className="flex items-center gap-2 pt-1">
                <Key className="h-4 w-4 text-white" />
                <span className="text-white text-sm">API ключи:</span>
                <Badge
                  variant="outline"
                  className="glass-secondary text-yellow-300 border-yellow-400/30 text-xs ml-auto flex items-center gap-1"
                >
                  <Zap className="h-3 w-3" />
                  Активны
                </Badge>
              </div>

              {data.wbApiKey && (
                <div className="space-y-2 pl-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <span className="text-white/60 text-sm">Wildberries</span>
                      <Badge variant="outline" className="glass-secondary text-purple-300 border-purple-400/30 text-xs">
                        WB
                      </Badge>
                    </div>
                    {data.wbApiValidation?.tradeMark || data.wbApiValidation?.sellerName ? (
                      <span className="text-white/70 text-xs max-w-[120px] text-right truncate">
                        {data.wbApiValidation.tradeMark || data.wbApiValidation.sellerName}
                      </span>
                    ) : (
                      <Badge
                        variant="outline"
                        className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1"
                      >
                        <Check className="h-3 w-3" />
                        Подключен
                      </Badge>
                    )}
                  </div>

                  {data.wbApiValidation && (
                    <>
                      {data.wbApiValidation.tradeMark && (
                        <div className="flex items-center justify-between pl-4">
                          <span className="text-white/50 text-xs">Торговая марка:</span>
                          <span className="text-white/70 text-xs max-w-[160px] text-right truncate">
                            {data.wbApiValidation.tradeMark}
                          </span>
                        </div>
                      )}
                      {data.wbApiValidation.sellerName &&
                        data.wbApiValidation.sellerName !== data.wbApiValidation.tradeMark && (
                          <div className="flex items-center justify-between pl-4">
                            <span className="text-white/50 text-xs">Продавец:</span>
                            <span className="text-white/70 text-xs max-w-[160px] text-right truncate">
                              {data.wbApiValidation.sellerName}
                            </span>
                          </div>
                        )}
                      {data.wbApiValidation.sellerId && (
                        <div className="flex items-center justify-between pl-4">
                          <span className="text-white/50 text-xs">ID продавца:</span>
                          <span className="text-white/70 text-xs font-mono">{data.wbApiValidation.sellerId}</span>
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}

              {data.ozonApiKey && (
                <div className="space-y-2 pl-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <span className="text-white/60 text-sm">Ozon</span>
                      <Badge variant="outline" className="glass-secondary text-blue-300 border-blue-400/30 text-xs">
                        OZ
                      </Badge>
                    </div>
                    <Badge
                      variant="outline"
                      className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1"
                    >
                      <Check className="h-3 w-3" />
                      Подключен
                    </Badge>
                  </div>

                  {data.ozonApiValidation && (
                    <>
                      {data.ozonApiValidation.sellerName && (
                        <div className="flex items-center justify-between pl-4">
                          <span className="text-white/50 text-xs">Магазин:</span>
                          <span className="text-white/70 text-xs max-w-[160px] text-right truncate">
                            {data.ozonApiValidation.sellerName}
                          </span>
                        </div>
                      )}
                      {data.ozonApiValidation.sellerId && (
                        <div className="flex items-center justify-between pl-4">
                          <span className="text-white/50 text-xs">ID продавца:</span>
                          <span className="text-white/70 text-xs font-mono">{data.ozonApiValidation.sellerId}</span>
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}
            </>
          )}
        </div>

        {error && (
          <div className="glass-card p-3 border-red-400/30">
            <p className="text-red-400 text-sm text-center">{error}</p>
          </div>
        )}

        <div className="space-y-3">
          <Button
            onClick={handleConfirm}
            variant="glass"
            size="lg"
            className="w-full h-12 flex items-center gap-2"
            disabled={isLoading}
          >
            <Check className="h-4 w-4" />
            {isLoading ? 'Создание организации...' : 'Подтвердить и завершить'}
          </Button>

          <Button
            type="button"
            variant="glass-secondary"
            onClick={onBack}
            className="w-full flex items-center gap-2"
            disabled={isLoading}
          >
            <ArrowLeft className="h-4 w-4" />
            Назад
          </Button>
        </div>
      </div>
    </AuthLayout>
  )
}