"use client";

import { MessageSquare } from "lucide-react";

interface DMConversation {
  id: string;
  user: {
    name: string;
    avatarColor?: string;
  };
  lastMessage: string;
  unread?: number;
  online?: boolean;
}

// Mock data — no DM endpoint in backend yet
const MOCK_DMS: DMConversation[] = [
  {
    id: "dm-1",
    user: { name: "Ana García", avatarColor: "bg-slack-blue" },
    lastMessage: "¿Viste el último reporte?",
    unread: 2,
    online: true,
  },
  {
    id: "dm-2",
    user: { name: "Carlos Ruiz", avatarColor: "bg-slack-green" },
    lastMessage: "Gracias por la ayuda 👍",
    online: true,
  },
  {
    id: "dm-3",
    user: { name: "María López", avatarColor: "bg-slack-yellow" },
    lastMessage: "Nos vemos mañana en la reunión",
  },
  {
    id: "dm-4",
    user: { name: "Diego Torres", avatarColor: "bg-slack-red" },
    lastMessage: "He subido los archivos al canal",
    unread: 1,
  },
];

interface DMListProps {
  onSelect?: (dm: DMConversation) => void;
  selectedId?: string;
}

export function DMList({ onSelect, selectedId }: DMListProps) {
  return (
    <div className="py-2">
      <div className="px-3 py-1 text-xs font-semibold text-white/50 uppercase tracking-wide flex items-center justify-between">
        <span>Direct Messages</span>
        <MessageSquare size={12} className="opacity-50" />
      </div>
      <ul>
        {MOCK_DMS.map((dm) => {
          const isActive = dm.id === selectedId;
          const initials = dm.user.name
            .split(" ")
            .map((w) => w[0])
            .join("")
            .substring(0, 2)
            .toUpperCase();
          return (
            <li key={dm.id}>
              <button
                onClick={() => onSelect?.(dm)}
                className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors ${
                  isActive
                    ? "bg-white/15 text-white font-medium"
                    : "text-white/70 hover:bg-white/5 hover:text-white"
                }`}
              >
                {/* Avatar with online indicator */}
                <div className="relative flex-shrink-0">
                  <div
                    className={`w-5 h-5 rounded-full ${dm.user.avatarColor || "bg-slack-lightpurple"} text-white flex items-center justify-center text-[10px] font-bold`}
                  >
                    {initials}
                  </div>
                  {dm.online && (
                    <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-slack-green rounded-full border border-slack-aubergine" />
                  )}
                </div>
                <div className="flex-1 min-w-0">
                  <span className="truncate block">
                    {dm.user.name}
                    {dm.unread ? (
                      <span className="ml-1.5 inline-flex items-center justify-center w-4 h-4 rounded-full bg-slack-red text-white text-[9px] font-bold align-middle">
                        {dm.unread}
                      </span>
                    ) : null}
                  </span>
                  <span className="block truncate text-xs text-white/40">
                    {dm.lastMessage}
                  </span>
                </div>
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}