"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { AuthLayout } from "./auth-layout"
import { Package, UserCheck, Phone, FileText, Key, ArrowLeft, Check, Zap, Truck, Building2 } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { useAuth } from '@/hooks/useAuth'

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
  }
  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)

    try {
      let result

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

      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>
  )
} 