'use client';

import { useEffect, useRef, useState } from 'react';
import { api } from '@/lib/api';
import type { AdminUser } from '@/types';

interface Group {
  id: number;
  name: string;
}

interface GroupsModalProps {
  isOpen: boolean;
  userId: number;
  user: AdminUser | null;
  onClose: () => void;
  onSuccess?: () => void;
}

const GROUP_COLORS: Record<string, string> = {
  ADMIN: 'bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-300',
  RECRUITER: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300',
  INTERVIEWER: 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300',
  CANDIDATE: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300',
};

export default function GroupAssignmentModal({
  isOpen,
  userId,
  user,
  onClose,
  onSuccess,
}: GroupsModalProps) {
  const [availableGroups, setAvailableGroups] = useState<Group[]>([]);
  const [assignedGroups, setAssignedGroups] = useState<Set<number>>(new Set());
  const [selectedGroups, setSelectedGroups] = useState<Set<number>>(new Set());
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchDropdownOpen, setSearchDropdownOpen] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');
  const [successMsg, setSuccessMsg] = useState('');
  const searchRef = useRef<HTMLDivElement>(null);

  // Close search dropdown on outside click
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
        setSearchDropdownOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  // Load groups
  useEffect(() => {
    if (!isOpen || !userId) return;

    const loadGroups = async () => {
      setLoading(true);
      setErrorMsg('');
      try {
        const res = await api.get(`/users/admin/users/${userId}/groups/`) as any;
        const assigned = new Set<number>(res.data.assigned_groups.map((g: Group) => g.id));
        setAvailableGroups(res.data.available_groups);
        setAssignedGroups(assigned);
        setSelectedGroups(new Set(assigned));
      } catch (err) {
        setErrorMsg(err instanceof Error ? err.message : 'Failed to load groups');
      } finally {
        setLoading(false);
      }
    };

    loadGroups();
  }, [isOpen, userId]);

  // Handle Escape key
  useEffect(() => {
    if (!isOpen) return;
    const handleEscapeKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };
    window.addEventListener('keydown', handleEscapeKey);
    return () => window.removeEventListener('keydown', handleEscapeKey);
  }, [isOpen, onClose]);

  const toggleGroup = (groupId: number) => {
    setSelectedGroups((prev) => {
      const next = new Set(prev);
      if (next.has(groupId)) next.delete(groupId);
      else next.add(groupId);
      return next;
    });
  };

  const selectAll = () => {
    setSelectedGroups(new Set(filteredGroups.map((g) => g.id)));
  };

  const clearAll = () => {
    setSelectedGroups(new Set());
  };

  const handleSave = async () => {
    if (selectedGroups.size === 0) {
      setErrorMsg('At least one group must be selected.');
      return;
    }

    setSaving(true);
    setErrorMsg('');
    setSuccessMsg('');

    try {
      await api.patch(`/users/admin/users/${userId}/groups/`, {
        group_ids: Array.from(selectedGroups),
      });
      setSuccessMsg('Groups updated successfully!');
      setTimeout(() => {
        onClose();
        onSuccess?.();
      }, 1500);
    } catch (err) {
      setErrorMsg(err instanceof Error ? err.message : 'Failed to update groups');
    } finally {
      setSaving(false);
    }
  };

  const filteredGroups = availableGroups.filter((g) =>
    g.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div className="fixed inset-0 bg-slate-950/40 dark:bg-slate-950/80 backdrop-blur-sm" onClick={onClose} />

      {/* Modal */}
      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col relative z-10">
        {/* Header */}
        <div className="bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-800/50 border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex items-center justify-between flex-shrink-0">
          <div className="flex-1">
            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Assign Groups</h2>
            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
              Add or remove groups for this user
            </p>
          </div>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-2xl font-light transition cursor-pointer"
            title="Close (Esc)"
          >
            ✕
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4">
          {/* User Info */}
          {user && (
            <div className="bg-slate-50 dark:bg-slate-800/30 border border-slate-200 dark:border-slate-700 rounded-none p-4">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-sm font-bold text-white">
                  {(user.full_name || user.email).charAt(0).toUpperCase()}
                </div>
                <div className="flex-1">
                  <p className="font-semibold text-slate-900 dark:text-white">
                    {user.full_name || user.email}
                  </p>
                  <p className="text-sm text-slate-500 dark:text-slate-400">{user.email}</p>
                </div>
              </div>
            </div>
          )}

          {/* Messages */}
          {errorMsg && (
            <div className="p-3 bg-rose-50 dark:bg-rose-950/40 border border-rose-200 dark:border-rose-800 text-rose-700 dark:text-rose-400 text-sm rounded-none">
              {errorMsg}
            </div>
          )}
          {successMsg && (
            <div className="p-3 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 text-sm rounded-none">
              {successMsg}
            </div>
          )}

          {/* Search + Select All + Clear All — single row */}
          <div className="flex items-center gap-2">
            {/* Search with assigned-groups dropdown */}
            <div className="flex-1 relative" ref={searchRef}>
              <div className="flex items-center gap-2 bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus-within:border-indigo-500 rounded-none px-3 py-2 transition">
                <i className="fa-solid fa-magnifying-glass text-slate-400 text-xs shrink-0" />
                <input
                  type="text"
                  placeholder="Search groups..."
                  value={searchQuery}
                  onChange={(e) => { setSearchQuery(e.target.value); setSearchDropdownOpen(true); }}
                  onFocus={() => setSearchDropdownOpen(true)}
                  className="flex-1 bg-transparent text-sm outline-none text-slate-900 dark:text-white placeholder-slate-400"
                />
                {searchQuery && (
                  <button onClick={() => setSearchQuery('')} className="text-slate-400 hover:text-slate-600 text-xs cursor-pointer">
                    <i className="fa-solid fa-xmark" />
                  </button>
                )}
                <button
                  type="button"
                  onClick={() => setSearchDropdownOpen((v) => !v)}
                  className="text-slate-400 hover:text-slate-600 text-xs cursor-pointer pl-1 border-l border-slate-200 dark:border-slate-700 ml-1"
                >
                  <i className={`fa-solid fa-chevron-down transition-transform duration-150 ${searchDropdownOpen ? 'rotate-180' : ''}`} />
                </button>
              </div>

              {/* Dropdown: assigned groups */}
              {searchDropdownOpen && (
                <div className="absolute top-full left-0 right-0 mt-1 z-[300] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-none shadow-2xl overflow-hidden">
                  {/* Header */}
                  <div className="px-3 py-2 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
                    <span className="text-[10px] font-black uppercase tracking-wider text-slate-400">
                      Assigned Groups ({Array.from(selectedGroups).length})
                    </span>
                    {selectedGroups.size > 0 && (
                      <button
                        onClick={() => { clearAll(); setSearchDropdownOpen(false); }}
                        className="text-[10px] font-bold text-rose-500 hover:text-rose-700 cursor-pointer"
                      >
                        Remove all
                      </button>
                    )}
                  </div>

                  {/* Assigned group chips */}
                  <div className="p-3 max-h-48 overflow-y-auto">
                    {selectedGroups.size === 0 ? (
                      <p className="text-xs text-slate-400 text-center py-3">No groups assigned yet.</p>
                    ) : (
                      <div className="flex flex-wrap gap-2">
                        {availableGroups
                          .filter((g) => selectedGroups.has(g.id))
                          .map((g) => (
                            <span
                              key={g.id}
                              className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold ${GROUP_COLORS[g.name] || 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300'}`}
                            >
                              {g.name}
                              <button
                                onClick={() => toggleGroup(g.id)}
                                className="hover:opacity-70 cursor-pointer leading-none"
                              >
                                <i className="fa-solid fa-xmark text-[10px]" />
                              </button>
                            </span>
                          ))}
                      </div>
                    )}
                  </div>

                  {/* Filtered search results if query typed */}
                  {searchQuery && (
                    <>
                      <div className="px-3 py-1.5 border-t border-slate-100 dark:border-slate-800">
                        <span className="text-[10px] font-black uppercase tracking-wider text-slate-400">Search Results</span>
                      </div>
                      <div className="max-h-40 overflow-y-auto">
                        {filteredGroups.length === 0 ? (
                          <p className="text-xs text-slate-400 text-center py-3">No groups match &ldquo;{searchQuery}&rdquo;</p>
                        ) : (
                          filteredGroups.map((g) => (
                            <button
                              key={g.id}
                              type="button"
                              onClick={() => { toggleGroup(g.id); setSearchQuery(''); setSearchDropdownOpen(false); }}
                              className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800 transition text-left ${selectedGroups.has(g.id) ? 'bg-indigo-50 dark:bg-indigo-950/30' : ''}`}
                            >
                              <input type="checkbox" readOnly checked={selectedGroups.has(g.id)} className="accent-indigo-600 w-3.5 h-3.5 pointer-events-none" />
                              <span className={`px-2.5 py-0.5 rounded-full text-xs font-bold ${GROUP_COLORS[g.name] || 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300'}`}>
                                {g.name}
                              </span>
                            </button>
                          ))
                        )}
                      </div>
                    </>
                  )}
                </div>
              )}
            </div>

            {/* Select All checkbox */}
            <label className="flex items-center gap-1.5 px-3 py-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-900/50 rounded-none hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition cursor-pointer whitespace-nowrap select-none">
              <input
                type="checkbox"
                className="accent-indigo-600 w-3.5 h-3.5 cursor-pointer"
                checked={filteredGroups.length > 0 && filteredGroups.every((g) => selectedGroups.has(g.id))}
                onChange={(e) => e.target.checked ? selectAll() : clearAll()}
              />
              Select All
            </label>

            {/* Clear All */}
            <button
              onClick={clearAll}
              className="px-3 py-2 text-sm font-semibold text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-none hover:bg-slate-200 dark:hover:bg-slate-700 transition cursor-pointer whitespace-nowrap"
            >
              Clear All
            </button>
          </div>

          <p className="text-xs text-slate-500 dark:text-slate-400 font-semibold -mt-1">
            Selected Groups: {selectedGroups.size}
          </p>

          {/* Groups List */}
          {loading ? (
            <div className="flex items-center justify-center py-12">
              <div className="flex flex-col items-center gap-3">
                <div className="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full "></div>
                <p className="text-sm text-slate-500 dark:text-slate-400">Loading groups...</p>
              </div>
            </div>
          ) : filteredGroups.length === 0 ? (
            <div className="bg-slate-50 dark:bg-slate-800/30 border border-slate-200 dark:border-slate-700 rounded-none p-8 text-center text-slate-400">
              <p>No groups found.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-96 overflow-y-auto pr-2">
              {filteredGroups.map((group) => (
                <label
                  key={group.id}
                  className="flex items-center gap-3 p-3 rounded-none border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800/50 cursor-pointer transition"
                >
                  <input
                    type="checkbox"
                    checked={selectedGroups.has(group.id)}
                    onChange={() => toggleGroup(group.id)}
                    className="accent-indigo-600 w-4 h-4 cursor-pointer"
                  />
                  <div className="flex-1">
                    <span className={`inline-block px-2.5 py-1 rounded-full text-xs font-bold ${GROUP_COLORS[group.name] || 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300'}`}>
                      {group.name}
                    </span>
                  </div>
                </label>
              ))}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="border-t border-slate-200 dark:border-slate-700 px-6 py-4 flex justify-end gap-3 bg-slate-50 dark:bg-slate-800/30 flex-shrink-0">
          <button
            onClick={onClose}
            disabled={saving}
            className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 rounded-none transition cursor-pointer disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            disabled={saving || selectedGroups.size === 0}
            className="px-6 py-2 text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-500 rounded-none transition cursor-pointer disabled:bg-indigo-400 disabled:opacity-50"
          >
            {saving ? 'Saving...' : 'Save Changes'}
          </button>
        </div>
      </div>
    </div>
  );
}