"use client"

import { ReactNode } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import { Truck, Package, ShoppingCart } from "lucide-react"

interface AuthLayoutProps {
  children: ReactNode
  title: string
  description?: string
  currentStep?: number
  totalSteps?: number
  stepName?: string
}

export function AuthLayout({ 
  children, 
  title, 
  description, 
  currentStep = 1,
  totalSteps = 5,
  stepName = "Авторизация"
}: AuthLayoutProps) {
  const progressValue = (currentStep / totalSteps) * 100
  const showProgress = currentStep > 1 // Показываем прогресс только после первого шага

  return (
    <div className="min-h-screen bg-animated flex items-center justify-center p-3">
      {/* 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="w-full max-w-7xl mx-auto flex items-center justify-center relative z-10">
        {/* Левая часть - Информация о продукте */}
        <div className="hidden lg:flex lg:w-1/2 items-center justify-center px-8">
          <div className="max-w-lg text-center">
            <h1 className="text-6xl font-bold text-gradient-bright glow-text mb-4 tracking-tight">
              SferaV
            </h1>
            <p className="text-white/90 text-xl font-medium mb-8">Управление бизнесом</p>
            
            <div className="space-y-6 text-left">
              <div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
                <div className="flex items-center gap-3 mb-2">
                  <Truck className="h-5 w-5 text-purple-400" />
                  <h3 className="text-white font-semibold">Фулфилмент</h3>
                </div>
                <p className="text-white/70 text-sm">Полный цикл обработки заказов от получения до доставки клиенту</p>
              </div>
              <div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
                <div className="flex items-center gap-3 mb-2">
                  <Package className="h-5 w-5 text-blue-400" />
                  <h3 className="text-white font-semibold">Логистика</h3>
                </div>
                <p className="text-white/70 text-sm">Управление складскими операциями и доставкой товаров</p>
              </div>
              <div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
                <div className="flex items-center gap-3 mb-2">
                  <ShoppingCart className="h-5 w-5 text-green-400" />
                  <h3 className="text-white font-semibold">Селлер</h3>
                </div>
                <p className="text-white/70 text-sm">Интеграция с маркетплейсами и управление продажами</p>
              </div>
            </div>
          </div>
        </div>
        
        {/* Правая часть - Форма авторизации */}
        <div className="w-full lg:w-1/2 flex items-center justify-center px-4 lg:px-8">
          <div className="max-w-md w-full">
            {/* Мобильный заголовок */}
            <div className="lg:hidden text-center mb-6">
              <h1 className="text-4xl font-bold text-gradient-bright glow-text mb-2 tracking-tight">
                SferaV
              </h1>
              <p className="text-white/90 text-sm font-medium">Управление бизнесом</p>
            </div>
            
            {/* Progress Section - показываем только после первого шага */}
            {showProgress && (
              <div className="mb-6 space-y-2">
                <div className="flex items-center justify-between">
                  <Badge variant="secondary" className="glass-secondary text-white/80 text-xs">
                    Шаг {currentStep} из {totalSteps}
                  </Badge>
                  <Badge variant="outline" className="glass-secondary text-white/60 border-white/20 text-xs">
                    {stepName}
                  </Badge>
                </div>
                <Progress 
                  value={progressValue} 
                  className="h-1.5 bg-white/10"
                />
              </div>
            )}
            
            <Card className="glass-card glow-purple">
              <CardHeader className="text-center pb-4">
                <CardTitle className="text-xl font-semibold text-white">
                  {title}
                </CardTitle>
                {description && (
                  <>
                    <Separator className="bg-white/20 my-2" />
                    <CardDescription className="text-white/70 text-sm">
                      {description}
                    </CardDescription>
                  </>
                )}
              </CardHeader>
              <CardContent className="space-y-4 pt-0">
                {children}
              </CardContent>
            </Card>
            
            {/* Дополнительная информация */}
            <div className="mt-6 text-center">
              <p className="text-white/60 text-xs">
                Регистрируясь, вы соглашаетесь с условиями использования
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
} 