"use client";

import { useEffect, useState } from "react";
import { getChannelMembers, ChannelMember } from "@/lib/api";
import { Search, User as UserIcon } from "lucide-react";

interface ChannelMembersListProps {
  channelId: string;
}

export function ChannelMembersList({ channelId }: ChannelMembersListProps) {
  const [members, setMembers] = useState<ChannelMember[]>([]);
  const [filtered, setFiltered] = useState<ChannelMember[]>([]);
  const [loading, setLoading] = useState(true);
  const [query, setQuery] = useState("");

  useEffect(() => {
    setLoading(true);
    getChannelMembers(channelId)
      .then((data) => {
        setMembers(data);
        setFiltered(data);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [channelId]);

  useEffect(() => {
    if (!query.trim()) {
      setFiltered(members);
    } else {
      setFiltered(
        members.filter((m) => {
          const name = (m.name || m.display_name || m.displayName || m.email || "").toLowerCase();
          return name.includes(query.toLowerCase());
        })
      );
    }
  }, [query, members]);

  const getDisplayName = (m: ChannelMember) =>
    m.display_name || m.displayName || m.name || m.email || "Unknown";

  return (
    <div className="space-y-2">
      <h4 className="text-xs font-semibold text-gray-500 uppercase mb-1">Members ({members.length})</h4>

      {/* Search */}
      <div className="relative">
        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search members..."
          className="w-full pl-8 pr-3 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-slack-purple text-sm"
        />
      </div>

      {/* List */}
      {loading ? (
        <div className="text-xs text-gray-400 animate-pulse">Loading members...</div>
      ) : filtered.length === 0 ? (
        <p className="text-xs text-gray-400">No members found.</p>
      ) : (
        <div className="space-y-0.5 max-h-64 overflow-y-auto">
          {filtered.map((member) => {
            const name = getDisplayName(member);
            const isActive = member.status !== "suspended" && member.status !== "offline";
            return (
              <div
                key={member.id}
                className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-50 cursor-pointer"
              >
                {/* Avatar with status */}
                <div className="relative flex-shrink-0">
                  {member.avatar_url ? (
                    <img src={member.avatar_url} alt={name} className="w-7 h-7 rounded-full" />
                  ) : (
                    <div className="w-7 h-7 rounded-full bg-slack-purple text-white flex items-center justify-center text-xs font-bold">
                      {name[0]?.toUpperCase() || "U"}
                    </div>
                  )}
                  <span
                    className={`absolute bottom-0 right-0 w-2 h-2 rounded-full border border-white ${
                      isActive ? "bg-slack-green" : "bg-gray-400"
                    }`}
                  />
                </div>

                {/* Name */}
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-gray-700 truncate">{name}</p>
                  {member.role && member.role !== "member" && (
                    <span className="text-xs text-slack-purple font-medium">{member.role}</span>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}