'use client'

import React, { useState } from 'react'
import {
  DSRCommunication,
  CommunicationType,
  CommunicationChannel,
  DSRSendCommunicationRequest
} from '@/lib/sdk/dsr/types'

interface DSRCommunicationLogProps {
  communications: DSRCommunication[]
  onSendMessage?: (message: DSRSendCommunicationRequest) => Promise<void>
  isLoading?: boolean
}

const CHANNEL_ICONS: Record<CommunicationChannel, string> = {
  email: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
  letter: 'M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5',
  phone: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z',
  portal: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9',
  internal_note: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
}

const TYPE_COLORS: Record<CommunicationType, { bg: string; border: string; icon: string }> = {
  incoming: { bg: 'bg-blue-50', border: 'border-blue-200', icon: 'text-blue-600' },
  outgoing: { bg: 'bg-green-50', border: 'border-green-200', icon: 'text-green-600' },
  internal: { bg: 'bg-gray-50', border: 'border-gray-200', icon: 'text-gray-600' }
}

const CHANNEL_LABELS: Record<CommunicationChannel, string> = {
  email: 'E-Mail',
  letter: 'Brief',
  phone: 'Telefon',
  portal: 'Portal',
  internal_note: 'Interne Notiz'
}

function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

export function DSRCommunicationLog({
  communications,
  onSendMessage,
  isLoading = false
}: DSRCommunicationLogProps) {
  const [showComposeForm, setShowComposeForm] = useState(false)
  const [newMessage, setNewMessage] = useState<DSRSendCommunicationRequest>({
    type: 'outgoing',
    channel: 'email',
    subject: '',
    content: ''
  })
  const [isSending, setIsSending] = useState(false)

  const sortedCommunications = [...communications].sort(
    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  )

  const handleSendMessage = async () => {
    if (!onSendMessage || !newMessage.content.trim()) return

    setIsSending(true)
    try {
      await onSendMessage(newMessage)
      setNewMessage({ type: 'outgoing', channel: 'email', subject: '', content: '' })
      setShowComposeForm(false)
    } catch (error) {
      console.error('Failed to send message:', error)
    } finally {
      setIsSending(false)
    }
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-gray-900">Kommunikation</h3>
        {onSendMessage && (
          <button
            onClick={() => setShowComposeForm(!showComposeForm)}
            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Nachricht
          </button>
        )}
      </div>

      {/* Compose Form */}
      {showComposeForm && (
        <div className="bg-white rounded-xl border border-gray-200 p-4 space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
              <select
                value={newMessage.type}
                onChange={(e) => setNewMessage({ ...newMessage, type: e.target.value as CommunicationType })}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
              >
                <option value="outgoing">Ausgehend</option>
                <option value="incoming">Eingehend</option>
                <option value="internal">Interne Notiz</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Kanal</label>
              <select
                value={newMessage.channel}
                onChange={(e) => setNewMessage({ ...newMessage, channel: e.target.value as CommunicationChannel })}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
              >
                <option value="email">E-Mail</option>
                <option value="letter">Brief</option>
                <option value="phone">Telefon</option>
                <option value="portal">Portal</option>
                <option value="internal_note">Interne Notiz</option>
              </select>
            </div>
          </div>

          {newMessage.type !== 'internal' && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Betreff</label>
              <input
                type="text"
                value={newMessage.subject || ''}
                onChange={(e) => setNewMessage({ ...newMessage, subject: e.target.value })}
                placeholder="Betreff eingeben..."
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
              />
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Inhalt</label>
            <textarea
              value={newMessage.content}
              onChange={(e) => setNewMessage({ ...newMessage, content: e.target.value })}
              placeholder="Nachricht eingeben..."
              rows={4}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
            />
          </div>

          <div className="flex items-center justify-end gap-3">
            <button
              onClick={() => setShowComposeForm(false)}
              className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
            >
              Abbrechen
            </button>
            <button
              onClick={handleSendMessage}
              disabled={!newMessage.content.trim() || isSending}
              className={`
                px-4 py-2 rounded-lg font-medium transition-colors
                ${newMessage.content.trim() && !isSending
                  ? 'bg-purple-600 text-white hover:bg-purple-700'
                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                }
              `}
            >
              {isSending ? 'Sende...' : 'Speichern'}
            </button>
          </div>
        </div>
      )}

      {/* Communication Timeline */}
      {isLoading ? (
        <div className="flex items-center justify-center py-8">
          <svg className="animate-spin w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
        </div>
      ) : sortedCommunications.length === 0 ? (
        <div className="bg-gray-50 rounded-xl p-8 text-center">
          <div className="w-12 h-12 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-3">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
          </div>
          <p className="text-gray-500">Noch keine Kommunikation vorhanden</p>
        </div>
      ) : (
        <div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200" />

          {/* Timeline Items */}
          <div className="space-y-4">
            {sortedCommunications.map((comm) => {
              const colors = TYPE_COLORS[comm.type]

              return (
                <div key={comm.id} className="relative pl-12">
                  {/* Timeline Dot */}
                  <div className={`
                    absolute left-3 w-5 h-5 rounded-full border-2 ${colors.border} ${colors.bg}
                    flex items-center justify-center
                  `}>
                    <svg className={`w-3 h-3 ${colors.icon}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={CHANNEL_ICONS[comm.channel]} />
                    </svg>
                  </div>

                  {/* Content Card */}
                  <div className={`${colors.bg} border ${colors.border} rounded-xl p-4`}>
                    {/* Header */}
                    <div className="flex items-start justify-between mb-2">
                      <div>
                        <div className="flex items-center gap-2">
                          <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${colors.bg} ${colors.icon} border ${colors.border}`}>
                            {comm.type === 'incoming' ? 'Eingehend' :
                             comm.type === 'outgoing' ? 'Ausgehend' : 'Intern'}
                          </span>
                          <span className="text-xs text-gray-500">
                            {CHANNEL_LABELS[comm.channel]}
                          </span>
                        </div>
                        {comm.subject && (
                          <div className="font-medium text-gray-900 mt-1">
                            {comm.subject}
                          </div>
                        )}
                      </div>
                      <div className="text-xs text-gray-500">
                        {formatDate(comm.createdAt)}
                      </div>
                    </div>

                    {/* Content */}
                    <div className="text-sm text-gray-700 whitespace-pre-wrap">
                      {comm.content}
                    </div>

                    {/* Attachments */}
                    {comm.attachments && comm.attachments.length > 0 && (
                      <div className="mt-3 pt-3 border-t border-gray-200">
                        <div className="text-xs text-gray-500 mb-2">Anhaenge:</div>
                        <div className="flex flex-wrap gap-2">
                          {comm.attachments.map((attachment, idx) => (
                            <a
                              key={idx}
                              href={attachment.url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="flex items-center gap-1 px-2 py-1 bg-white rounded border border-gray-200 text-xs text-gray-600 hover:bg-gray-50"
                            >
                              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                              </svg>
                              {attachment.name}
                            </a>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Footer */}
                    {comm.sentBy && (
                      <div className="mt-2 text-xs text-gray-500">
                        Von: {comm.sentBy}
                      </div>
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      )}
    </div>
  )
}