breakpilot-lehrer/studio-v2/app/messages/_components/ConversationList.tsx

'use client'

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

interface ConversationListProps {
  isDark: boolean
  filteredConversations: Conversation[]
  currentConversationId: string | null
  unreadCount: number
  searchQuery: string
  setSearchQuery: (q: string) => void
  setShowNewConversation: (show: boolean) => void
  selectConversation: (conv: Conversation) => void
  getConversationContact: (conv: Conversation) => Contact | undefined
}

export function ConversationList({
  isDark, filteredConversations, currentConversationId, unreadCount,
  searchQuery, setSearchQuery, setShowNewConversation,
  selectConversation, getConversationContact,
}: ConversationListProps) {
  return (
    <div className={`w-96 backdrop-blur-xl border rounded-3xl flex flex-col overflow-hidden ${
      isDark
        ? 'bg-white/10 border-white/20'
        : 'bg-white/70 border-black/10 shadow-xl'
    }`}>
      {/* Header */}
      <div className={`p-4 border-b ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
        <div className="flex items-center justify-between mb-4">
          <div>
            <h2 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
              Nachrichten
            </h2>
            {unreadCount > 0 && (
              <span className={`text-sm ${isDark ? 'text-green-400' : 'text-green-600'}`}>
                {unreadCount} ungelesen
              </span>
            )}
          </div>
          <button
            onClick={() => setShowNewConversation(true)}
            className="p-3 rounded-2xl transition-all shadow-lg bg-gradient-to-r from-green-500 to-emerald-500 text-white hover:shadow-green-500/30"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
          </button>
        </div>

        {/* Search */}
        <div className="relative">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Suchen..."
            className={`w-full px-4 py-3 pl-10 rounded-2xl border transition-all ${
              isDark
                ? 'bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-green-500/50'
                : 'bg-white border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-green-500'
            } focus:outline-none focus:ring-2 focus:ring-green-500/20`}
          />
          <svg className={`absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 ${
            isDark ? 'text-white/40' : 'text-slate-400'
          }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      {/* Conversation List */}
      <div className="flex-1 overflow-y-auto">
        {filteredConversations.length === 0 ? (
          <div className={`p-8 text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
            <div className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center text-3xl bg-gradient-to-br from-green-500/20 to-emerald-500/20">
              💬
            </div>
            <p className="font-medium">Keine Konversationen</p>
            <p className="text-sm mt-1">Starten Sie eine neue Unterhaltung!</p>
          </div>
        ) : (
          <div className="divide-y divide-white/5">
            {filteredConversations.map((conv) => (
              <ConversationItem key={conv.id} conv={conv} isDark={isDark}
                isActive={currentConversationId === conv.id}
                contact={getConversationContact(conv)}
                onClick={() => selectConversation(conv)} />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

function ConversationItem({ conv, isDark, isActive, contact, onClick }: {
  conv: Conversation; isDark: boolean; isActive: boolean
  contact: Contact | undefined; onClick: () => void
}) {
  return (
    <button
      onClick={onClick}
      className={`w-full p-4 text-left transition-all ${
        isActive
          ? isDark
            ? 'bg-gradient-to-r from-green-500/20 to-emerald-500/20'
            : 'bg-gradient-to-r from-green-100 to-emerald-100'
          : isDark
            ? 'hover:bg-white/5'
            : 'hover:bg-slate-50'
      }`}
    >
      <div className="flex items-start gap-3">
        {/* Avatar */}
        <div className="relative">
          <div className={`w-12 h-12 rounded-full flex items-center justify-center text-lg font-semibold ${
            conv.is_group
              ? isDark
                ? 'bg-gradient-to-br from-purple-500/30 to-pink-500/30 text-purple-300'
                : 'bg-gradient-to-br from-purple-100 to-pink-100 text-purple-700'
              : 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'
          }`}>
            {conv.title ? getContactInitials(conv.title) : '?'}
          </div>
          {!conv.is_group && 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>

        {/* Content */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between mb-1">
            <div className="flex items-center gap-2">
              {conv.pinned && <span className="text-xs">📌</span>}
              <span className={`font-semibold truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
                {conv.title || 'Unbenannt'}
              </span>
              {conv.muted && <span className={isDark ? 'text-white/40' : 'text-slate-400'}>🔕</span>}
            </div>
            {conv.last_message_time && (
              <span className={`text-xs flex-shrink-0 ${
                conv.unread_count > 0
                  ? isDark ? 'text-green-400' : 'text-green-600'
                  : isDark ? 'text-white/40' : 'text-slate-400'
              }`}>
                {formatMessageTime(conv.last_message_time)}
              </span>
            )}
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1 flex-1 min-w-0">
              {conv.typing ? (
                <span className={`text-sm italic ${isDark ? 'text-green-400' : 'text-green-600'}`}>
                  schreibt...
                </span>
              ) : (
                <p className={`text-sm truncate ${
                  conv.unread_count > 0
                    ? isDark ? 'text-white font-medium' : 'text-slate-900 font-medium'
                    : isDark ? 'text-white/60' : 'text-slate-500'
                }`}>
                  {conv.last_message}
                </p>
              )}
            </div>
            {conv.unread_count > 0 && (
              <span className="ml-2 min-w-[20px] h-5 px-1.5 rounded-full bg-green-500 text-white text-xs flex items-center justify-center font-medium">
                {conv.unread_count > 9 ? '9+' : conv.unread_count}
              </span>
            )}
          </div>
        </div>
      </div>
    </button>
  )
}