"use client"

import { Button } from "@/components/ui/button"

import { Badge } from "@/components/ui/badge"
import { AuthLayout } from "./auth-layout"
import { Package, ShoppingCart, ArrowLeft, Truck, Building2 } from "lucide-react"

interface CabinetSelectStepProps {
  onNext: (cabinetType: 'fulfillment' | 'seller' | 'logist' | 'wholesale') => void
  onBack: () => void
}

export function CabinetSelectStep({ onNext, onBack }: CabinetSelectStepProps) {
  const cabinets = [
    {
      id: 'fulfillment' as const,
      title: 'Фулфилмент',
      description: 'Склады и логистика',
      icon: Package,
      features: ['Склады', 'Логистика', 'ИНН'],
      color: 'blue'
    },
    {
      id: 'seller' as const,
      title: 'Селлер',
      description: 'Продажи на маркетплейсах',
      icon: ShoppingCart,
      features: ['Wildberries', 'Ozon', 'Аналитика'],
      color: 'purple'
    },
    {
      id: 'logist' as const,
      title: 'Логистика',
      description: 'Логистические решения',
      icon: Truck,
      features: ['Доставка', 'Склады', 'ИНН'],
      color: 'green'
    },
    {
      id: 'wholesale' as const,
      title: 'Оптовик',
      description: 'Оптовые продажи',
      icon: Building2,
      features: ['Опт', 'Поставки', 'ИНН'],
      color: 'orange'
    }
  ]

  return (
    <AuthLayout 
      title="Выберите тип кабинета"
      description="Выберите кабинет для управления"
      currentStep={3}
      totalSteps={5}
      stepName="Тип кабинета"
    >
      <div className="space-y-4">
        <div className="grid grid-cols-2 gap-3">
          {cabinets.map((cabinet) => {
            const IconComponent = cabinet.icon
            return (
              <button
                key={cabinet.id}
                onClick={() => onNext(cabinet.id)}
                className="glass-card p-4 text-left transition-all hover:scale-[1.02] group relative h-full"
              >
                <div className="flex flex-col items-center text-center space-y-3">
                  <div className={`p-3 rounded-lg ${
                    cabinet.color === 'blue' ? 'bg-blue-500/20' : 
                    cabinet.color === 'purple' ? 'bg-purple-500/20' :
                    cabinet.color === 'green' ? 'bg-green-500/20' :
                    'bg-orange-500/20'
                  }`}>
                    <IconComponent className="h-6 w-6 text-white" />
                  </div>
                  
                  <div className="space-y-2">
                    <h3 className="text-sm font-semibold text-white">{cabinet.title}</h3>
                    <p className="text-white/70 text-xs">
                      {cabinet.description}
                    </p>
                    
                    <div className="flex flex-wrap gap-1 justify-center">
                      {cabinet.features.slice(0, 2).map((feature, index) => (
                        <Badge 
                          key={index}
                          variant="outline" 
                          className="glass-secondary text-white/60 border-white/20 text-xs px-1 py-0"
                        >
                          {feature}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              </button>
            )
          })}
        </div>

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