'use client'

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

interface ContactInfoPanelProps {
  contact: Contact | undefined
  conversation: Conversation
  onClose: () => void
  isDark: boolean
}

export function ContactInfoPanel({ contact, conversation, onClose, isDark }: ContactInfoPanelProps) {
  return (
    <div className={`w-80 backdrop-blur-2xl border-l flex flex-col ${
      isDark
        ? 'bg-white/5 border-white/10'
        : 'bg-white/90 border-slate-200'
    }`}>
      {/* Header */}
      <div className={`p-4 border-b ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
        <div className="flex items-center justify-between">
          <span className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Info</span>
          <button
            onClick={onClose}
            className={`p-2 rounded-xl transition-colors ${
              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>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-4">
        {/* Avatar & Name */}
        <div className="text-center mb-6">
          <div className={`w-20 h-20 mx-auto rounded-full flex items-center justify-center text-2xl font-bold mb-3 ${
            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'
          }`}>
            {conversation.title ? getContactInitials(conversation.title) : '?'}
          </div>
          <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            {conversation.title}
          </h3>
          {contact && (
            <span className={`text-sm px-2 py-1 rounded-full ${getRoleColor(contact.role, isDark)}`}>
              {getRoleLabel(contact.role)}
            </span>
          )}
        </div>

        {/* Contact Details */}
        {contact && (
          <div className="space-y-4">
            {contact.email && (
              <InfoField isDark={isDark} label="E-Mail" value={contact.email} />
            )}
            {contact.phone && (
              <InfoField isDark={isDark} label="Telefon" value={contact.phone} />
            )}
            {contact.student_name && (
              <InfoField isDark={isDark} label="Schueler/in"
                value={`${contact.student_name} (${contact.class_name})`} />
            )}
            {contact.tags.length > 0 && (
              <div className={`p-3 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
                <span className={`text-xs block mb-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Tags</span>
                <div className="flex flex-wrap gap-1">
                  {contact.tags.map(tag => (
                    <span key={tag} className={`text-xs px-2 py-1 rounded-full ${
                      isDark ? 'bg-white/10 text-white/80' : 'bg-slate-200 text-slate-700'
                    }`}>
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {/* Group Members */}
        {conversation.is_group && (
          <div className={`p-3 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
            <span className={`text-xs block mb-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
              {conversation.participant_ids.length} Mitglieder
            </span>
          </div>
        )}
      </div>
    </div>
  )
}

function InfoField({ isDark, label, value }: { isDark: boolean; label: string; value: string }) {
  return (
    <div className={`p-3 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
      <span className={`text-xs block mb-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{label}</span>
      <span className={`text-sm ${isDark ? 'text-white' : 'text-slate-900'}`}>{value}</span>
    </div>
  )
}