import { Camera } from 'lucide-react'
import Image from 'next/image'
import React, { memo } from 'react'

import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Card } from '@/components/ui/card'

import type { ProfileBlockProps } from '../types/user-settings.types'

export const ProfileBlock = memo<ProfileBlockProps>(({ user, localAvatarUrl, isUploadingAvatar, onAvatarUpload }) => {
  const getInitials = () => {
    const orgName = user?.organization?.orgName || user?.organization?.name || user?.organization?.fullName
    if (orgName) {
      return orgName.charAt(0).toUpperCase()
    }
    return user?.phone ? String(user.phone).slice(-2).toUpperCase() : 'О'
  }

  const getCabinetTypeName = () => {
    if (!user?.organization?.type) return 'Не указан'

    switch (user.organization.type) {
      case 'FULFILLMENT':
        return 'Фулфилмент'
      case 'SELLER':
        return 'Селлер'
      case 'LOGIST':
        return 'Логистика'
      case 'WHOLESALE':
        return 'Поставщик'
      default:
        return 'Не указан'
    }
  }

  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      await onAvatarUpload(file)
    }
  }

  const avatarUrl = localAvatarUrl || user?.avatar

  return (
    <Card className="glass-card p-6">
      <div className="flex items-center space-x-6">
        <div className="relative">
          <Avatar className="w-20 h-20">
            {avatarUrl ? (
              <Image src={avatarUrl} alt="Аватар" width={80} height={80} className="rounded-full object-cover" />
            ) : (
              <AvatarFallback className="text-2xl bg-primary/20 text-primary">{getInitials()}</AvatarFallback>
            )}
          </Avatar>

          <div className="absolute -bottom-1 -right-1">
            <label htmlFor="avatar-upload" className="cursor-pointer">
              <div className="w-8 h-8 bg-primary hover:bg-primary/90 rounded-full flex items-center justify-center shadow-lg transition-colors">
                <Camera className="w-4 h-4 text-primary-foreground" />
              </div>
            </label>
            <input
              id="avatar-upload"
              type="file"
              accept="image/*"
              onChange={handleFileSelect}
              disabled={isUploadingAvatar}
              className="hidden"
            />
          </div>
        </div>

        <div className="flex-1">
          <h3 className="text-xl font-semibold text-foreground">
            {user?.organization?.orgName || user?.organization?.name || user?.organization?.fullName || 'Организация'}
          </h3>
          <p className="text-muted-foreground mb-2">{getCabinetTypeName()}</p>
          <p className="text-sm text-muted-foreground">Телефон: {user?.phone ? String(user.phone) : 'Не указан'}</p>

          {isUploadingAvatar && (
            <div className="mt-2">
              <div className="flex items-center space-x-2">
                <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                <span className="text-sm text-muted-foreground">Загрузка аватара...</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </Card>
  )
})

ProfileBlock.displayName = 'ProfileBlock'
