import React, { useMemo, useState } from 'react'

/**
 * Left panel: searchable, paginated list of conversations.
 */
export default function ConversationList({ conversations, loading, activeId, currentUserId, onSelect }) {
  const [search, setSearch] = useState('')

  const filtered = useMemo(() => {
    const q = search.toLowerCase().trim()
    if (!q) return conversations
    return conversations.filter(conv => {
      const label = convLabel(conv, currentUserId).toLowerCase()
      const last  = (conv.latest_message?.[0]?.body ?? '').toLowerCase()
      return label.includes(q) || last.includes(q)
    })
  }, [conversations, search, currentUserId])

  return (
    <div className="flex flex-col flex-1 overflow-hidden">
      {/* Search */}
      <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
        <input
          type="search"
          placeholder="Search conversations…"
          value={search}
          onChange={e => setSearch(e.target.value)}
          className="w-full rounded-lg bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      {/* List */}
      <ul className="flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
        {loading && (
          <li className="px-4 py-8 text-center text-sm text-gray-400">Loading…</li>
        )}
        {!loading && filtered.length === 0 && (
          <li className="px-4 py-8 text-center text-sm text-gray-400">
            {search ? 'No matches found.' : 'No conversations yet.'}
          </li>
        )}
        {filtered.map(conv => (
          <ConversationRow
            key={conv.id}
            conv={conv}
            isActive={conv.id === activeId}
            currentUserId={currentUserId}
            onClick={() => onSelect(conv.id)}
          />
        ))}
      </ul>
    </div>
  )
}

function ConversationRow({ conv, isActive, currentUserId, onClick }) {
  const label       = convLabel(conv, currentUserId)
  const lastMsg     = Array.isArray(conv.latest_message) ? conv.latest_message[0] : conv.latest_message
  const preview     = lastMsg ? truncate(lastMsg.body, 60) : 'No messages yet'
  const unread      = conv.unread_count ?? 0
  const myParticipant = conv.all_participants?.find(p => p.user_id === currentUserId)
  const isArchived  = myParticipant?.is_archived ?? false
  const isPinned    = myParticipant?.is_pinned ?? false

  return (
    <li>
      <button
        onClick={onClick}
        className={`w-full text-left px-4 py-3 flex gap-3 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors ${isActive ? 'bg-blue-50 dark:bg-blue-900/30' : ''} ${isArchived ? 'opacity-60' : ''}`}
      >
        {/* Avatar placeholder */}
        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium">
          {label.charAt(0).toUpperCase()}
        </div>

        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between gap-1">
            <div className="flex items-center gap-1 min-w-0">
              {isPinned && <span className="text-xs" title="Pinned">📌</span>}
              <span className={`text-sm font-medium truncate ${isActive ? 'text-blue-700 dark:text-blue-300' : 'text-gray-900 dark:text-gray-100'}`}>
                {label}
              </span>
            </div>
            {conv.last_message_at && (
              <span className="text-xs text-gray-400 flex-shrink-0">
                {relativeTime(conv.last_message_at)}
              </span>
            )}
          </div>
          <div className="flex items-center justify-between gap-1 mt-0.5">
            <span className="text-xs text-gray-400 truncate">{preview}</span>
            {unread > 0 && (
              <span className="flex-shrink-0 min-w-[1.25rem] h-5 rounded-full bg-blue-500 text-white text-xs font-medium flex items-center justify-center px-1">
                {unread > 99 ? '99+' : unread}
              </span>
            )}
          </div>
        </div>
      </button>
    </li>
  )
}

// ── Helpers ──────────────────────────────────────────────────────────────────

function convLabel(conv, currentUserId) {
  if (conv.type === 'group') return conv.title ?? 'Group'
  const other = conv.all_participants?.find(p => p.user_id !== currentUserId)
  return other?.user?.username ?? 'Direct message'
}

function truncate(str, max) {
  if (!str) return ''
  return str.length > max ? str.slice(0, max) + '…' : str
}

function relativeTime(iso) {
  const diff = (Date.now() - new Date(iso).getTime()) / 1000
  if (diff < 60) return 'now'
  if (diff < 3600) return `${Math.floor(diff / 60)}m`
  if (diff < 86400) return `${Math.floor(diff / 3600)}h`
  return `${Math.floor(diff / 86400)}d`
}