'use client'

import {
  getContactInitials,
  getRoleLabel,
  getRoleColor,
  type Contact,
} from '@/lib/MessagesContext'

interface NewConversationModalProps {
  isDark: boolean
  contacts: Contact[]
  onStartConversation: (contact: Contact) => void
  onClose: () => void
}

export function NewConversationModal({ isDark, contacts, onStartConversation, onClose }: NewConversationModalProps) {
  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div className={`w-full max-w-md backdrop-blur-2xl border rounded-3xl overflow-hidden shadow-2xl ${
        isDark
          ? 'bg-slate-900/90 border-white/10'
          : 'bg-white border-slate-200'
      }`}>
        {/* Header */}
        <div className={`p-6 border-b ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
          <div className="flex items-center justify-between">
            <h3 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
              Neue Nachricht
            </h3>
            <button
              onClick={onClose}
              className={`p-2 rounded-xl transition-all ${
                isDark ? 'hover:bg-white/10 text-white/60' : 'hover:bg-slate-100 text-slate-400'
              }`}
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>

        {/* Contact List */}
        <div className="max-h-96 overflow-y-auto">
          {contacts.length === 0 ? (
            <div className={`p-8 text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
              <p>Keine Kontakte vorhanden</p>
            </div>
          ) : (
            <div>
              {contacts.map((contact) => (
                <button
                  key={contact.id}
                  onClick={() => onStartConversation(contact)}
                  className={`w-full p-4 text-left transition-all flex items-center gap-3 ${
                    isDark
                      ? 'hover:bg-white/5 border-b border-white/5'
                      : 'hover:bg-slate-50 border-b border-slate-100'
                  }`}
                >
                  <div className="relative">
                    <div className={`w-12 h-12 rounded-full flex items-center justify-center text-lg font-semibold ${
                      contact.online
                        ? isDark
                          ? 'bg-gradient-to-br from-green-500/30 to-emerald-500/30 text-green-300'
                          : 'bg-gradient-to-br from-green-100 to-emerald-100 text-green-700'
                        : isDark
                          ? 'bg-slate-700 text-slate-300'
                          : 'bg-slate-200 text-slate-600'
                    }`}>
                      {getContactInitials(contact.name)}
                    </div>
                    {contact.online && (
                      <span className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-slate-900" />
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-0.5">
                      <span className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        {contact.name}
                      </span>
                      <span className={`text-xs px-2 py-0.5 rounded-full ${getRoleColor(contact.role, isDark)}`}>
                        {getRoleLabel(contact.role)}
                      </span>
                    </div>
                    {contact.student_name && (
                      <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                        {contact.student_name} ({contact.class_name})
                      </p>
                    )}
                    {contact.email && (
                      <p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                        {contact.email}
                      </p>
                    )}
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}