/**
 * Блок входящих заявок на партнерство
 * Отображает заявки с возможностью принятия или отклонения
 */

'use client'

import { ArrowDownCircle, Calendar, CheckCircle, XCircle } from 'lucide-react'
import React from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'

import { OrganizationAvatar } from '../../organization-avatar'
import { ORGANIZATION_TYPES, type IncomingRequestsBlockProps } from '../types'

export const IncomingRequestsBlock = React.memo(function IncomingRequestsBlock({
  requests,
  loading,
  onAccept,
  onReject,
}: IncomingRequestsBlockProps) {
  if (loading) {
    return (
      <div className="space-y-4">
        {Array.from({ length: 2 }).map((_, i) => (
          <Card key={i} className="glass-card p-6">
            <div className="animate-pulse">
              <div className="flex items-center space-x-4">
                <div className="h-12 w-12 bg-white/10 rounded-full"></div>
                <div className="flex-1 space-y-2">
                  <div className="h-4 bg-white/10 rounded w-3/4"></div>
                  <div className="h-3 bg-white/10 rounded w-1/2"></div>
                </div>
                <div className="flex space-x-2">
                  <div className="h-8 w-16 bg-white/10 rounded"></div>
                  <div className="h-8 w-16 bg-white/10 rounded"></div>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    )
  }

  if (!requests.length) {
    return (
      <Card className="glass-card p-8 text-center">
        <div className="flex flex-col items-center space-y-4">
          <div className="h-16 w-16 bg-white/10 rounded-full flex items-center justify-center">
            <ArrowDownCircle className="h-8 w-8 text-white/40" />
          </div>
          <div>
            <h3 className="text-lg font-medium text-white">Входящих заявок нет</h3>
            <p className="text-white/60 mt-1">Когда другие организации отправят вам заявки, они появятся здесь</p>
          </div>
        </div>
      </Card>
    )
  }

  return (
    <div className="space-y-4">
      {requests.map((request) => (
        <Card key={request.id} className="glass-card p-6 border-l-4 border-l-blue-400/50">
          <div className="flex items-start justify-between">
            <div className="flex items-start space-x-4 flex-1">
              {/* Аватар отправителя */}
              <OrganizationAvatar organization={request.sender} size="lg" className="flex-shrink-0" />

              {/* Информация о заявке */}
              <div className="flex-1 min-w-0">
                <div className="flex items-center space-x-2 mb-2">
                  <h3 className="text-lg font-semibold text-white truncate">
                    {request.sender.name || request.sender.fullName}
                  </h3>
                  <Badge variant="outline" className="border-white/20 text-white/80">
                    {ORGANIZATION_TYPES[request.sender.type]}
                  </Badge>
                  <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">Новая заявка</Badge>
                </div>

                {/* ИНН отправителя */}
                <p className="text-sm text-white/70 mb-2">ИНН: {request.sender.inn}</p>

                {/* Сообщение заявки */}
                {request.message && (
                  <div className="bg-white/5 rounded-lg p-3 mb-3 border border-white/10">
                    <p className="text-sm text-white/80">{request.message}</p>
                  </div>
                )}

                {/* Дата заявки */}
                <div className="flex items-center space-x-2 text-xs text-white/50">
                  <Calendar className="h-3 w-3" />
                  <span>
                    Заявка от{' '}
                    {new Date(request.createdAt).toLocaleDateString('ru-RU', {
                      day: 'numeric',
                      month: 'long',
                      hour: '2-digit',
                      minute: '2-digit',
                    })}
                  </span>
                </div>
              </div>
            </div>

            {/* Действия */}
            <div className="flex items-center space-x-2 flex-shrink-0 ml-4">
              <Button
                variant="outline"
                size="sm"
                onClick={() => onAccept(request.id)}
                className="bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30 hover:border-green-400/50"
              >
                <CheckCircle className="h-4 w-4 mr-1" />
                Принять
              </Button>

              <Button
                variant="outline"
                size="sm"
                onClick={() => onReject(request.id)}
                className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 hover:border-red-400/50"
              >
                <XCircle className="h-4 w-4 mr-1" />
                Отклонить
              </Button>
            </div>
          </div>
        </Card>
      ))}

      {/* Статистика */}
      <div className="text-center text-sm text-white/50 pt-4">
        {requests.length} входящ{requests.length === 1 ? 'ая заявка' : requests.length < 5 ? 'ие заявки' : 'их заявок'}{' '}
        ожида{requests.length === 1 ? 'ет' : 'ют'} рассмотрения
      </div>
    </div>
  )
})

IncomingRequestsBlock.displayName = 'IncomingRequestsBlock'
