'use client';

import { useEffect, useMemo, useState } from 'react';
import { meetingAttendanceApi } from '@/services/api/meeting-attendance';
import { useTranslation } from '@/hooks/useTranslation';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export interface MeetingUser {
  id: string;
  displayName: string;
  email: string;
  department?: { id: string; name: string; code?: string | null } | null;
  position?: { id: string; name: string; level?: number | null } | null;
}

interface MeetingUserSelectorProps {
  selectedUsers: MeetingUser[];
  onUsersChange: (users: MeetingUser[]) => void;
}

export function MeetingUserSelector({ selectedUsers, onUsersChange }: MeetingUserSelectorProps) {
  const { t } = useTranslation();
  const [searchTerm, setSearchTerm] = useState('');
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState<MeetingUser[]>([]);

  useEffect(() => {
    let active = true;

    const fetchUsers = async () => {
      if (!searchTerm || searchTerm.trim().length < 2) {
        setResults([]);
        return;
      }

      setLoading(true);
      try {
        const response = await meetingAttendanceApi.searchMeetingUsers({ q: searchTerm.trim(), limit: 20 });
        if (active) {
          setResults(response.users || []);
        }
      } catch (error) {
        console.error('Failed to search meeting users:', error);
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    };

    const timeout = setTimeout(fetchUsers, 300);
    return () => {
      active = false;
      clearTimeout(timeout);
    };
  }, [searchTerm]);

  const selectedIds = useMemo(() => new Set(selectedUsers.map((user) => user.id)), [selectedUsers]);

  const addUser = (user: MeetingUser) => {
    if (selectedIds.has(user.id)) {
      return;
    }
    onUsersChange([...selectedUsers, user]);
  };

  const removeUser = (userId: string) => {
    onUsersChange(selectedUsers.filter((user) => user.id !== userId));
  };

  return (
    <div className="space-y-3">
      <div>
        <Input
          value={searchTerm}
          onChange={(event) => setSearchTerm(event.target.value)}
          placeholder={t.meetingAttendance.attendees.searchPlaceholder}
        />
        {loading && (
          <p className="text-xs text-gray-500 mt-1">{t.meetingAttendance.common.loading}</p>
        )}
      </div>

      {results.length > 0 && (
        <div className="border border-gray-200 rounded-md max-h-56 overflow-y-auto">
          {results.map((user) => (
            <button
              key={user.id}
              type="button"
              className="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center justify-between"
              onClick={() => addUser(user)}
            >
              <div>
                <div className="text-sm font-medium text-gray-900">{user.displayName}</div>
                <div className="text-xs text-gray-500">{user.email}</div>
              </div>
              <span className="text-xs text-blue-600">
                {selectedIds.has(user.id) ? t.meetingAttendance.attendees.selected : t.meetingAttendance.attendees.add}
              </span>
            </button>
          ))}
        </div>
      )}

      {selectedUsers.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {selectedUsers.map((user) => (
            <span key={user.id} className="inline-flex items-center rounded-full bg-blue-50 text-blue-700 text-xs px-2 py-1">
              {user.displayName}
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="ml-1 h-5 w-5 p-0"
                onClick={() => removeUser(user.id)}
              >
                ×
              </Button>
            </span>
          ))}
        </div>
      )}
    </div>
  );
}