"use client"

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { 
  Phone, 
  Mail,
  MapPin,
  Calendar,
  Plus,
  Send,
  Trash2,
  User
} from 'lucide-react'
import { OrganizationAvatar } from './organization-avatar'
import { useState } from 'react'

interface Organization {
  id: string
  inn: string
  name?: string
  fullName?: string
  type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
  address?: string
  phones?: Array<{ value: string }>
  emails?: Array<{ value: string }>
  createdAt: string
  users?: Array<{ id: string, avatar?: string }>
  isCounterparty?: boolean
  isCurrentUser?: boolean
  hasOutgoingRequest?: boolean
  hasIncomingRequest?: boolean
}

interface OrganizationCardProps {
  organization: Organization
  onSendRequest?: (organizationId: string, message: string) => void
  onRemove?: (organizationId: string) => void
  showRemoveButton?: boolean
  actionButtonText?: string
  actionButtonColor?: string
  requestSending?: boolean
}

export function OrganizationCard({ 
  organization, 
  onSendRequest, 
  onRemove,
  showRemoveButton = false,
  actionButtonText = "Добавить",
  actionButtonColor = "green",
  requestSending = false
}: OrganizationCardProps) {
  const [requestMessage, setRequestMessage] = useState('')
  const [isDialogOpen, setIsDialogOpen] = useState(false)

  const formatDate = (dateString: string) => {
    if (!dateString) return ''
    try {
      let date: Date
      
      // Проверяем, является ли строка числом (Unix timestamp)
      if (/^\d+$/.test(dateString)) {
        // Если это Unix timestamp в миллисекундах
        const timestamp = parseInt(dateString, 10)
        date = new Date(timestamp)
      } else {
        // Обычная строка даты
        date = new Date(dateString)
      }
      
      if (isNaN(date.getTime())) {
        return 'Неверная дата'
      }
      
      return date.toLocaleDateString('ru-RU', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
          } catch {
      return 'Ошибка даты'
    }
  }

  const getTypeLabel = (type: string) => {
    switch (type) {
      case 'FULFILLMENT': return 'Фулфилмент'
      case 'SELLER': return 'Селлер'
      case 'LOGIST': return 'Логистика'
      case 'WHOLESALE': return 'Поставщик'
      default: return type
    }
  }

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'FULFILLMENT': return 'bg-blue-500/20 text-blue-300 border-blue-500/30'
      case 'SELLER': return 'bg-green-500/20 text-green-300 border-green-500/30'
      case 'LOGIST': return 'bg-orange-500/20 text-orange-300 border-orange-500/30'
      case 'WHOLESALE': return 'bg-purple-500/20 text-purple-300 border-purple-500/30'
      default: return 'bg-gray-500/20 text-gray-300 border-gray-500/30'
    }
  }

  const getActionButtonColor = (color: string, isDisabled: boolean) => {
    if (isDisabled) {
      return "bg-gray-500/20 text-gray-400 border-gray-500/30 cursor-not-allowed"
    }
    
    switch (color) {
      case 'green': return 'bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30'
      case 'orange': return 'bg-orange-500/20 hover:bg-orange-500/30 text-orange-300 border-orange-500/30'
      case 'yellow': return 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-300 border-yellow-500/30'
      case 'red': return 'bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30'
      case 'blue': return 'bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30'
      default: return 'bg-gray-500/20 hover:bg-gray-500/30 text-gray-300 border-gray-500/30'
    }
  }

  const handleSendRequest = () => {
    if (onSendRequest) {
      onSendRequest(organization.id, requestMessage)
      setRequestMessage('')
      setIsDialogOpen(false)
    }
  }

  const handleRemove = () => {
    if (onRemove) {
      onRemove(organization.id)
    }
  }

  return (
    <div className="glass-card p-4 w-full">
      <div className="flex flex-col space-y-4">
        <div className="flex items-start space-x-3">
          <OrganizationAvatar organization={organization} size="md" />
          <div className="flex-1 min-w-0">
            <div className="flex flex-col space-y-2 mb-3">
              <h4 className="text-white font-medium text-lg leading-tight">
                {organization.name || organization.fullName}
              </h4>
              <div className="flex items-center space-x-3">
                <Badge className={getTypeColor(organization.type)}>
                  {getTypeLabel(organization.type)}
                </Badge>
                {organization.isCurrentUser && (
                  <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">
                    Это вы
                  </Badge>
                )}
                {organization.isCounterparty && !organization.isCurrentUser && (
                  <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
                    Уже добавлен
                  </Badge>
                )}
              </div>
            </div>
            
            <div className="space-y-2">
              <p className="text-white/60 text-sm">ИНН: {organization.inn}</p>
              {organization.address && (
                <div className="flex items-center text-white/60 text-sm">
                  <MapPin className="h-4 w-4 mr-2 flex-shrink-0" />
                  <span className="truncate">{organization.address}</span>
                </div>
              )}
              {organization.phones && organization.phones.length > 0 && (
                <div className="flex items-center text-white/60 text-sm">
                  <Phone className="h-4 w-4 mr-2 flex-shrink-0" />
                  <span>{organization.phones[0].value}</span>
                </div>
              )}
              {organization.emails && organization.emails.length > 0 && (
                <div className="flex items-center text-white/60 text-sm">
                  <Mail className="h-4 w-4 mr-2 flex-shrink-0" />
                  <span className="truncate">{organization.emails[0].value}</span>
                </div>
              )}
              <div className="flex items-center text-white/40 text-xs">
                <Calendar className="h-4 w-4 mr-2 flex-shrink-0" />
                <span>{showRemoveButton ? 'Добавлен' : 'Зарегистрирован'} {formatDate(organization.createdAt)}</span>
              </div>
            </div>
          </div>
        </div>
        
        {showRemoveButton ? (
          <Button
            size="sm"
            variant="outline"
            onClick={handleRemove}
            className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer w-full"
          >
            <Trash2 className="h-4 w-4 mr-2" />
            Удалить из контрагентов
          </Button>
        ) : organization.isCurrentUser ? (
          <Button
            size="sm"
            variant="outline"
            disabled
            className="bg-blue-500/10 text-blue-300 border-blue-500/30 w-full opacity-50"
          >
            <User className="h-4 w-4 mr-2" />
            Ваша организация
          </Button>
        ) : (
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button
                size="sm"
                disabled={organization.isCounterparty || organization.hasOutgoingRequest || organization.hasIncomingRequest}
                className={`${getActionButtonColor(actionButtonColor, !!organization.isCounterparty || !!organization.hasOutgoingRequest || !!organization.hasIncomingRequest)} w-full cursor-pointer`}
              >
                <Plus className="h-4 w-4 mr-2" />
                {organization.isCounterparty ? 'Уже добавлен' : 
                 organization.hasOutgoingRequest ? 'Заявка отправлена' :
                 organization.hasIncomingRequest ? 'Уже подал заявку' :
                 actionButtonText}
              </Button>
            </DialogTrigger>
            
            <DialogContent className="bg-gray-900/95 backdrop-blur border-white/10 text-white">
              <DialogHeader>
                <DialogTitle className="text-white">
                  Отправить заявку в контрагенты
                </DialogTitle>
              </DialogHeader>
              
              <div className="space-y-4">
                <div className="p-4 bg-white/5 rounded-lg border border-white/10">
                  <div className="flex items-center space-x-3">
                    <OrganizationAvatar organization={organization} size="sm" />
                    <div>
                      <h4 className="text-white font-medium">
                        {organization.name || organization.fullName}
                      </h4>
                      <p className="text-white/60 text-sm">ИНН: {organization.inn}</p>
                    </div>
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-white mb-2">
                    Сообщение (необязательно)
                  </label>
                  <Input
                    placeholder="Добавьте комментарий к заявке..."
                    value={requestMessage}
                    onChange={(e) => setRequestMessage(e.target.value)}
                    className="glass-input text-white placeholder:text-white/40"
                  />
                </div>
                
                <div className="flex space-x-3 pt-4">
                  <Button
                    onClick={() => setIsDialogOpen(false)}
                    variant="outline"
                    className="flex-1 bg-white/5 hover:bg-white/10 text-white border-white/20 cursor-pointer"
                  >
                    Отмена
                  </Button>
                  <Button
                    onClick={handleSendRequest}
                    disabled={requestSending}
                    className="flex-1 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 cursor-pointer"
                  >
                    {requestSending ? (
                      "Отправка..."
                    ) : (
                      <>
                        <Send className="h-4 w-4 mr-2" />
                        Отправить
                      </>
                    )}
                  </Button>
                </div>
              </div>
            </DialogContent>
          </Dialog>
        )}
      </div>
    </div>
  )
}