'use client';

import { useState, useEffect } from 'react';
import { userApi } from '@/lib/api';
import { User } from '@/types';
import { getStatusColor, formatDate } from '@/lib/utils';
import { motion } from 'framer-motion';
import { Search, Users, X, Circle } from 'lucide-react';

const roleColors: Record<string, string> = {
  OWNER: 'text-yellow-500 bg-yellow-500/10',
  ADMIN: 'text-primary-400 bg-primary-500/10',
  MEMBER: 'text-blue-400 bg-blue-500/10',
};

export default function TeamPage() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState('all');

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

  const loadUsers = async () => {
    try {
      const { data } = await userApi.getAll();
      setUsers(data);
    } catch {} finally {
      setLoading(false);
    }
  };

  const filtered = users.filter(u => {
    const matchSearch = (u.displayName || u.username).toLowerCase().includes(search.toLowerCase());
    const matchRole = roleFilter === 'all' || u.role === roleFilter;
    return matchSearch && matchRole;
  });

  const onlineCount = users.filter(u => u.onlineStatus === 'ONLINE').length;

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="flex items-center gap-3">
          <div className="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
          <p className="text-sm text-vault-muted">Loading team...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-3">
            <Users className="w-6 h-6" />
            Team
          </h1>
          <p className="text-sm text-vault-muted">{users.length} members • {onlineCount} online</p>
        </div>
      </div>

      <div className="flex items-center gap-3 mb-6">
        <div className="flex items-center gap-2 glass rounded-lg px-3 py-2 max-w-md">
          <Search className="w-4 h-4 text-vault-muted" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search team members..."
            className="flex-1 bg-transparent text-sm text-vault-text placeholder-vault-muted/50 focus:outline-none"
          />
          {search && <X className="w-4 h-4 text-vault-muted cursor-pointer" onClick={() => setSearch('')} />}
        </div>
        <div className="flex gap-1">
          {['all', 'OWNER', 'ADMIN', 'MEMBER'].map(r => (
            <button
              key={r}
              onClick={() => setRoleFilter(r)}
              className={`px-3 py-1.5 rounded-lg text-xs font-medium capitalize transition-colors ${
                roleFilter === r ? 'bg-primary-500/20 text-primary-400' : 'text-vault-muted hover:text-vault-text'
              }`}
            >
              {r.toLowerCase()}
            </button>
          ))}
        </div>
      </div>

      <div className="flex-1 overflow-y-auto scrollbar-thin">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {filtered.map((member) => (
            <motion.div
              key={member.id}
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              className="glass-card p-5 hover:border-primary-500/20 transition-all"
            >
              <div className="flex items-center gap-3 mb-3">
                <div className="relative">
                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white font-medium text-sm">
                    {member.displayName?.[0] || member.username?.[0] || '?'}
                  </div>
                  <span className={`status-dot absolute -bottom-0.5 -right-0.5 ${getStatusColor(member.onlineStatus)}`} />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium truncate">{member.displayName || member.username}</p>
                  <p className="text-[10px] text-vault-muted">@{member.username}</p>
                </div>
              </div>

              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${roleColors[member.role] || 'text-vault-muted'}`}>
                    {member.role}
                  </span>
                  <span className={`text-[10px] font-medium ${getStatusColor(member.onlineStatus).replace('bg-', 'text-')}`}>
                    {member.onlineStatus}
                  </span>
                </div>
                {member.department && (
                  <p className="text-xs text-vault-muted">{member.department}</p>
                )}
                {member.bio && (
                  <p className="text-xs text-vault-muted line-clamp-2">{member.bio}</p>
                )}
                <p className="text-[10px] text-vault-muted/50">Joined {formatDate(member.createdAt)}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}