import { useMemo, type ReactElement } from 'react';
import styled from '@lilith/ui-styled-components';
import { MessageSquare } from 'lucide-react';
import type { Contact, Conversation } from '@/types';
import { rankConversationsByQuery } from './rankConversations';

const Section = styled.div`
  border-bottom: 1px solid #2a2a38;
  background: #0b0b12;
`;

const SectionLabel = styled.div`
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a9a;
`;

const List = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
`;

const Item = styled.li<{ $selected: boolean }>`
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 16px;
  cursor: pointer;
  border-top: 1px solid #1e1e2a;
  background: ${({ $selected }) => ($selected ? 'rgba(201,168,76,0.12)' : 'transparent')};
  transition: background 0.1s;

  &:hover {
    background: ${({ $selected }) => ($selected ? 'rgba(201,168,76,0.14)' : '#13131a')};
  }
`;

const Name = styled.span<{ $selected: boolean }>`
  font-size: 13px;
  font-weight: 600;
  color: ${({ $selected }) => ($selected ? '#c9a84c' : '#e0e0f0')};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const Meta = styled.span`
  font-size: 10px;
  color: #8a8a9a;
`;

const MAX_MATCHES = 5;

interface ConversationMatchesProps {
  conversations: readonly Conversation[];
  contacts: readonly Contact[];
  query: string;
  selectedId: string | null;
  onSelect: (conversationId: string) => void;
}

export function ConversationMatches({
  conversations,
  contacts,
  query,
  selectedId,
  onSelect,
}: ConversationMatchesProps): ReactElement | null {
  const matches = useMemo(
    () => rankConversationsByQuery(conversations, contacts, query, MAX_MATCHES),
    [conversations, contacts, query],
  );

  if (matches.length === 0) return null;

  return (
    <Section>
      <SectionLabel>
        Conversations · {matches.length}
        {matches.length === MAX_MATCHES ? '+' : ''}
      </SectionLabel>
      <List role="listbox" aria-label="Matching conversations">
        {matches.map(({ conv, label }) => {
          const isSelected = conv.id === selectedId;
          return (
            <Item
              key={conv.id}
              $selected={isSelected}
              onClick={() => onSelect(conv.id)}
              role="option"
              aria-selected={isSelected}
              tabIndex={0}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  onSelect(conv.id);
                }
              }}
            >
              <Name $selected={isSelected}>
                <MessageSquare size={11} style={{ marginRight: 5, opacity: 0.5, verticalAlign: 'middle' }} />
                {label}
              </Name>
              <Meta>
                {conv.messageCount} msg{conv.messageCount !== 1 ? 's' : ''}
              </Meta>
            </Item>
          );
        })}
      </List>
    </Section>
  );
}
