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

'use client'

import { ArrowUpCircle, Calendar, X } 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, REQUEST_STATUSES, type OutgoingRequestsBlockProps } from '../types'

export const OutgoingRequestsBlock = React.memo(function OutgoingRequestsBlock({
  requests,
  loading,
  onCancel,
}: OutgoingRequestsBlockProps) {
  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="h-8 w-16 bg-white/10 rounded"></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">
            <ArrowUpCircle 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-orange-400/50">
          <div className="flex items-start justify-between">
            <div className="flex items-start space-x-4 flex-1">
              {/* Аватар получателя */}
              <OrganizationAvatar organization={request.receiver} 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.receiver.name || request.receiver.fullName}
                  </h3>
                  <Badge variant="outline" className="border-white/20 text-white/80">
                    {ORGANIZATION_TYPES[request.receiver.type]}
                  </Badge>
                  <Badge
                    className={
                      request.status === 'PENDING'
                        ? 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30'
                        : request.status === 'ACCEPTED'
                          ? 'bg-green-500/20 text-green-300 border-green-500/30'
                          : 'bg-red-500/20 text-red-300 border-red-500/30'
                    }
                  >
                    {REQUEST_STATUSES[request.status]}
                  </Badge>
                </div>

                {/* ИНН получателя */}
                <p className="text-sm text-white/70 mb-2">ИНН: {request.receiver.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">
              {request.status === 'PENDING' && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => onCancel(request.id)}
                  className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 hover:border-red-400/50"
                >
                  <X className="h-4 w-4 mr-1" />
                  Отменить
                </Button>
              )}

              {request.status === 'ACCEPTED' && (
                <Badge className="bg-green-500/20 text-green-300 border-green-500/30">Принята</Badge>
              )}

              {request.status === 'REJECTED' && (
                <Badge className="bg-red-500/20 text-red-300 border-red-500/30">Отклонена</Badge>
              )}
            </div>
          </div>
        </Card>
      ))}

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

OutgoingRequestsBlock.displayName = 'OutgoingRequestsBlock'
