'use client';

import { useState, useEffect } from 'react';
import { userApi } from '@/lib/api';
import { cn, getStatusColor, formatDate } from '@/lib/utils';
import { Users, Circle, Search } from 'lucide-react';

export function MemberSidebar() {
  const [users, setUsers] = useState<any[]>([]);
  const [search, setSearch] = useState('');

  useEffect(() => {
    loadUsers();
  }, []);

  const loadUsers = async () => {
    try {
      const { data } = await userApi.getOnline();
      setUsers(data);
    } catch {}
  };

  const filtered = users.filter((u: any) =>
    u.displayName?.toLowerCase().includes(search.toLowerCase()) ||
    u.username?.toLowerCase().includes(search.toLowerCase())
  );

  const grouped = {
    ONLINE: filtered.filter((u: any) => u.onlineStatus === 'ONLINE'),
    IDLE: filtered.filter((u: any) => u.onlineStatus === 'IDLE'),
    BUSY: filtered.filter((u: any) => u.onlineStatus === 'BUSY'),
    OFFLINE: filtered.filter((u: any) => u.onlineStatus === 'OFFLINE'),
  };

  const labels: Record<string, string> = {
    ONLINE: 'Online',
    IDLE: 'Idle',
    BUSY: 'Busy',
    OFFLINE: 'Offline',
  };

  return (
    <div className="w-56 flex-shrink-0 bg-vault-darker/50 border-l border-vault-border/30 flex flex-col h-full">
      <div className="h-14 flex items-center gap-2 px-3 border-b border-vault-border/30">
        <Users className="w-4 h-4 text-vault-muted" />
        <span className="text-sm font-medium">Members</span>
        <span className="text-xs text-vault-muted">({filtered.length})</span>
      </div>

      <div className="px-3 py-2">
        <div className="flex items-center gap-2 bg-vault-surface/50 rounded-lg px-2 py-1.5">
          <Search className="w-3.5 h-3.5 text-vault-muted" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Find members..."
            className="flex-1 bg-transparent text-xs text-vault-text placeholder-vault-muted/50 focus:outline-none"
          />
        </div>
      </div>

      <div className="flex-1 overflow-y-auto scrollbar-thin px-2 pb-2">
        {Object.entries(grouped).map(([status, members]) =>
          members.length > 0 && (
            <div key={status} className="mb-3">
              <p className="text-[10px] font-semibold text-vault-muted uppercase tracking-wider mb-1 px-1">
                {labels[status]} — {members.length}
              </p>
              {members.map((member: any) => (
                <div
                  key={member.id}
                  className="flex items-center gap-2.5 px-2 py-1.5 rounded-lg hover:bg-vault-surface/30 transition-colors cursor-pointer group"
                >
                  <div className="relative">
                    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-primary-500/50 to-purple-600/50 flex items-center justify-center text-[10px] font-medium text-white">
                      {member.displayName?.[0] || member.username?.[0] || '?'}
                    </div>
                    <span className={cn('status-dot absolute -bottom-0.5 -right-0.5', getStatusColor(member.onlineStatus))} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-xs font-medium truncate">{member.displayName || member.username}</p>
                    <p className="text-[10px] text-vault-muted truncate">{member.role?.toLowerCase()}</p>
                  </div>
                </div>
              ))}
            </div>
          )
        )}
      </div>
    </div>
  );
}