import { memo } from 'react';
import type { RoomWithCategory } from '@/contexts/room-context';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import { Hash, Lock, Plus } from 'lucide-react';

interface RoomWithUnread extends RoomWithCategory {
  unread_count?: number;
}

interface RoomListProps {
  projectDisplayName: string;
  rooms: RoomWithCategory[];
  selectedRoomId: string | null;
  onSelectRoom: (room: RoomWithCategory) => void;
  onCreateRoom: () => void;
}

export const RoomList = memo(function RoomList({
  projectDisplayName,
  rooms,
  selectedRoomId,
  onSelectRoom,
  onCreateRoom,
}: RoomListProps) {
  return (
    <aside
      className={cn(
        'border-r border-border/70 bg-card/60 flex h-full flex-col backdrop-blur',
        selectedRoomId ? 'hidden w-72 md:flex' : 'w-full md:w-72',
      )}
    >
      <header className="flex h-12 items-center justify-between border-b border-border/70 px-3">
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-foreground">{projectDisplayName}</p>
          <p className="text-[11px] uppercase tracking-wide text-muted-foreground">Text Channels</p>
        </div>
        <Button
          variant="secondary"
          size="icon"
          className="h-8 w-8 shrink-0 rounded-md"
          onClick={onCreateRoom}
          title="Create room"
        >
          <Plus className="h-4 w-4" />
        </Button>
      </header>

      <div className="flex-1 overflow-y-auto px-2 py-2">
        {rooms.length === 0 ? (
          <div className="rounded-lg border border-dashed border-border/70 bg-muted/20 px-4 py-6 text-center">
            <p className="text-sm font-medium text-foreground">No channels yet</p>
            <p className="mt-1 text-xs text-muted-foreground">Create one to start chatting.</p>
            <Button className="mt-4 h-8" size="sm" onClick={onCreateRoom}>
              <Plus className="mr-1 h-3.5 w-3.5" />
              Create Channel
            </Button>
          </div>
        ) : (
          <ul className="space-y-1">
            {rooms.map((room) => {
              const isSelected = selectedRoomId === room.id;
              const unreadCount = (room as RoomWithUnread).unread_count ?? 0;
              return (
                <li key={room.id}>
                  <button
                    type="button"
                    onClick={() => onSelectRoom(room)}
                    className={cn(
                      'group relative flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left transition-colors',
                      isSelected
                        ? 'bg-muted text-foreground'
                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
                    )}
                  >
                    {isSelected && (
                      <span className="absolute left-0 top-1.5 h-6 w-1 rounded-r bg-primary" />
                    )}
                    <Hash className="h-4 w-4 shrink-0" />
                    <span className="flex-1 truncate text-sm font-medium">{room.room_name}</span>
                    {!room.public && <Lock className="h-3.5 w-3.5 shrink-0 opacity-60" />}
                    {unreadCount > 0 && (
                      <Badge variant="secondary" className="h-5 min-w-5 justify-center rounded-full px-1.5 text-[10px] font-medium">
                        {unreadCount > 99 ? '99+' : unreadCount}
                      </Badge>
                    )}
                  </button>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </aside>
  );
});
