'use client';

import { useEffect, useState, useCallback } from 'react';
import { api } from '@/lib/api';
import type { AdminUser } from '@/types';
import SearchableSelect from '@/components/SearchableSelect';
import { formatDate } from '@/lib/dates';

const ROLE_BADGE: Record<string, string> = {
  ADMIN: 'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-950/40 border-rose-200 dark:border-rose-900/50',
  RECRUITER: 'text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/40 border-indigo-200 dark:border-indigo-900/50',
  INTERVIEWER: 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/40 border-amber-200 dark:border-amber-900/50',
  CANDIDATE: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/40 border-emerald-200 dark:border-emerald-900/50',
  USER: 'text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700',
};

const inputCls = 'w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white';

interface RoleUsersModalProps {
  isOpen: boolean;
  roleId: string;
  roleName: string;
  onClose: () => void;
}

export default function RoleUsersModal({ isOpen, roleId, roleName, onClose }: RoleUsersModalProps) {
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(false);
  const [statusFilter, setStatusFilter] = useState('');
  const [sortBy, setSortBy] = useState('name');
  const [selectedUserIds, setSelectedUserIds] = useState<Set<number>>(new Set());
  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
  const [menuPos, setMenuPos] = useState<{ top: number; right: number } | null>(null);
  const [successMsg, setSuccessMsg] = useState('');
  const [errorMsg, setErrorMsg] = useState('');

  // Confirm modal state
  const [confirmModal, setConfirmModal] = useState({
    isOpen: false,
    type: 'delete' as 'delete' | 'remove' | 'activate' | 'deactivate' | 'bulk-delete' | 'bulk-deactivate',
    title: '',
    message: '',
    onConfirm: async () => {},
  });

  // Close floating menu on scroll
  useEffect(() => {
    const close = () => { setOpenMenuId(null); setMenuPos(null); };
    window.addEventListener('scroll', close, true);
    return () => window.removeEventListener('scroll', close, true);
  }, []);

  const loadUsers = useCallback(async () => {
    if (!isOpen) return;
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set('role', roleId.toUpperCase());
      if (statusFilter) params.set('is_active', statusFilter === 'active' ? 'true' : 'false');
      if (sortBy === 'name') params.set('ordering', 'full_name');
      if (sortBy === 'date') params.set('ordering', '-date_joined');
      const res = await api.get('/users/admin/users/?' + params.toString());
      setUsers((res as { data?: { results?: AdminUser[] } }).data?.results || []);
    } catch (err) {
      setErrorMsg(err instanceof Error ? err.message : 'Failed to load users');
    } finally {
      setLoading(false);
    }
  }, [roleId, statusFilter, sortBy, isOpen]);

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

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

  const toggleSelect = (id: number) => {
    setSelectedUserIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const allSelected = users.length > 0 && selectedUserIds.size === users.length;
  const toggleSelectAll = () => {
    setSelectedUserIds(allSelected ? new Set() : new Set(users.map((u) => u.id)));
  };

  const handleDelete = (u: AdminUser) => {
    setConfirmModal({
      isOpen: true, type: 'delete',
      title: 'Delete ' + u.email + '?',
      message: 'This will permanently remove the user.',
      onConfirm: async () => {
        try {
          await api.delete('/users/admin/users/' + u.id + '/');
          setSuccessMsg('User deleted ✓');
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Delete failed');
        }
        setConfirmModal((m) => ({ ...m, isOpen: false }));
      },
    });
  };

  const handleActivateDeactivate = (u: AdminUser) => {
    const action = u.is_active ? 'Deactivate' : 'Activate';
    setConfirmModal({
      isOpen: true, type: u.is_active ? 'deactivate' : 'activate',
      title: action + ' ' + u.email + '?',
      message: '',
      onConfirm: async () => {
        try {
          await api.patch('/users/admin/users/' + u.id + '/', { is_active: !u.is_active });
          setSuccessMsg('User ' + (u.is_active ? 'deactivated' : 'activated') + ' ✓');
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Failed to update user');
        }
        setConfirmModal((m) => ({ ...m, isOpen: false }));
      },
    });
  };

  const handleRemoveFromRole = (u: AdminUser) => {
    setConfirmModal({
      isOpen: true, type: 'remove',
      title: 'Remove ' + u.email + ' from ' + roleName.toUpperCase() + '?',
      message: "User will lose this role's permissions.",
      onConfirm: async () => {
        try {
          await api.patch('/users/admin/users/' + u.id + '/', { role: 'CANDIDATE' });
          setSuccessMsg('User removed from role ✓');
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Failed to remove user');
        }
        setConfirmModal((m) => ({ ...m, isOpen: false }));
      },
    });
  };

  const handleBulkDelete = () => {
    const count = selectedUserIds.size;
    if (count === 0) return;
    setConfirmModal({
      isOpen: true, type: 'bulk-delete',
      title: 'Delete ' + count + ' user' + (count > 1 ? 's' : '') + '?',
      message: 'This will permanently remove all selected users.',
      onConfirm: async () => {
        try {
          await Promise.all(Array.from(selectedUserIds).map((id) => api.delete('/users/admin/users/' + id + '/')));
          setSuccessMsg(count + ' user' + (count > 1 ? 's' : '') + ' deleted ✓');
          setSelectedUserIds(new Set());
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Bulk delete failed');
        }
        setConfirmModal((m) => ({ ...m, isOpen: false }));
      },
    });
  };

  const handleBulkDeactivate = () => {
    const count = selectedUserIds.size;
    if (count === 0) return;
    setConfirmModal({
      isOpen: true, type: 'bulk-deactivate',
      title: 'Deactivate ' + count + ' user' + (count > 1 ? 's' : '') + '?',
      message: 'Selected users will be deactivated.',
      onConfirm: async () => {
        try {
          await Promise.all(Array.from(selectedUserIds).map((id) => api.patch('/users/admin/users/' + id + '/', { is_active: false })));
          setSuccessMsg(count + ' user' + (count > 1 ? 's' : '') + ' deactivated ✓');
          setSelectedUserIds(new Set());
          await loadUsers();
        } catch (err) {
          setErrorMsg(err instanceof Error ? err.message : 'Bulk deactivate failed');
        }
        setConfirmModal((m) => ({ ...m, isOpen: false }));
      },
    });
  };

  if (!isOpen) return null;

  const hasSelection = selectedUserIds.size > 0;

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

      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none shadow-2xl w-full max-w-5xl max-h-[90vh] 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">
            <div className="flex items-center gap-3">
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white">{roleName} Users</h2>
              <span className={`text-xs tracking-widest font-black uppercase px-2.5 py-1 rounded-none border ${ROLE_BADGE[roleName] || ROLE_BADGE.CANDIDATE}`}>
                {roleName}
              </span>
            </div>
            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">Total Users: {users.length}</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">

          {/* Toolbar */}
          <div className="flex items-center gap-3 bg-slate-50 dark:bg-slate-800/30 p-4 rounded-none border border-slate-200 dark:border-slate-700">
              <SearchableSelect
                value={statusFilter}
                onChange={setStatusFilter}
                className="w-40"
                placeholder="All statuses"
                options={[
                  { value: '', label: 'All statuses' },
                  { value: 'active', label: 'Active' },
                  { value: 'inactive', label: 'Inactive' },
                ]}
              />
              <SearchableSelect
                value={sortBy}
                onChange={setSortBy}
                className="w-44"
                isClearable={false}
                options={[
                  { value: 'name', label: 'Sort by Name' },
                  { value: 'date', label: 'Sort by Created Date' },
                ]}
              />

            {/* Bulk Actions */}
            <div className="flex items-center gap-2 ml-auto">
              <button
                onClick={toggleSelectAll}
                className="px-3 py-2 text-xs 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"
              >
                {allSelected ? 'Deselect All' : 'Select All'}
              </button>
              <button
                onClick={handleBulkDeactivate}
                disabled={!hasSelection}
                className="px-3 py-2 text-xs font-semibold text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900/50 rounded-none hover:bg-amber-100 dark:hover:bg-amber-900/50 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
              >
                ⏸ Deactivate{hasSelection ? ` (${selectedUserIds.size})` : ''}
              </button>
              <button
                onClick={handleBulkDelete}
                disabled={!hasSelection}
                className="px-3 py-2 text-xs font-semibold text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-950/30 border border-rose-200 dark:border-rose-900/50 rounded-none hover:bg-rose-100 dark:hover:bg-rose-900/50 transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
              >
                🗑 Delete{hasSelection ? ` (${selectedUserIds.size})` : ''}
              </button>
            </div>
          </div>


          {/* Messages */}
          {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>
          )}
          {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>
          )}

          {/* Data Table */}
          {loading ? (
            <div className="flex items-center justify-center py-12">
              <div className="flex flex-col items-center gap-3">
                
                <p className="text-sm text-slate-500 dark:text-slate-400">Loading users...</p>
              </div>
            </div>
          ) : users.length === 0 ? (
            <div className="bg-slate-50 dark:bg-slate-800/30 border border-slate-200 dark:border-slate-700 rounded-none p-12 text-center text-slate-400">
              <p>No users are assigned to this role.</p>
            </div>
          ) : (
            <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none overflow-hidden">
              {/* Table Head */}
              <div className="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700 px-4 py-3 grid grid-cols-12 gap-3 items-center sticky top-0 z-10">
                <div className="col-span-1 flex items-center">
                  <input
                    type="checkbox"
                    checked={allSelected}
                    onChange={toggleSelectAll}
                    className="accent-indigo-600 w-4 h-4 cursor-pointer"
                  />
                </div>
                <div className="col-span-1 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400"></div>
                <div className="col-span-2 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Name</div>
                <div className="col-span-3 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Email</div>
                <div className="col-span-2 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Created</div>
                <div className="col-span-1 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Last Login</div>
                <div className="col-span-1 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Status</div>
                <div className="col-span-1 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-right">Actions</div>
              </div>

              {/* Table Rows */}
              <div className="divide-y divide-slate-100 dark:divide-slate-800">
                {users.map((u) => (
                  <div
                    key={u.id}
                    className={`px-4 py-3 grid grid-cols-12 gap-3 items-center hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors ${selectedUserIds.has(u.id) ? 'bg-indigo-50/40 dark:bg-indigo-950/20' : ''}`}
                  >
                    {/* Checkbox */}
                    <div className="col-span-1">
                      <input
                        type="checkbox"
                        checked={selectedUserIds.has(u.id)}
                        onChange={() => toggleSelect(u.id)}
                        className="accent-indigo-600 w-4 h-4 cursor-pointer"
                      />
                    </div>

                    {/* Avatar */}
                    <div className="col-span-1">
                      <div className="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-xs font-bold text-white">
                        {(u.full_name || u.email).charAt(0).toUpperCase()}
                      </div>
                    </div>

                    {/* Name */}
                    <div className="col-span-2">
                      <p className="text-sm font-semibold text-slate-900 dark:text-white truncate">{u.full_name || '—'}</p>
                    </div>

                    {/* Email */}
                    <div className="col-span-3">
                      <p className="text-sm text-slate-500 dark:text-slate-400 truncate">{u.email}</p>
                    </div>

                    {/* Created */}
                    <div className="col-span-2">
                      <p className="text-sm text-slate-500 dark:text-slate-400">
                        {u.date_joined ? formatDate(u.date_joined) : '—'}
                      </p>
                    </div>

                    {/* Last Login */}
                    <div className="col-span-1">
                      <p className="text-sm text-slate-500 dark:text-slate-400 truncate">
                        {u.last_login ? formatDate(u.last_login) : '—'}
                      </p>
                    </div>

                    {/* Status */}
                    <div className="col-span-1">
                      {u.is_active ? (
                        <span className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
                          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>Active
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1 text-xs font-semibold text-slate-400 dark:text-slate-500">
                          <span className="w-1.5 h-1.5 rounded-full bg-slate-400"></span>Inactive
                        </span>
                      )}
                    </div>

                    {/* Row Actions */}
                    <div className="col-span-1 flex justify-end">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          if (openMenuId === u.id) { setOpenMenuId(null); setMenuPos(null); }
                          else {
                            const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
                            setMenuPos({ top: rect.bottom + 6, right: window.innerWidth - rect.right });
                            setOpenMenuId(u.id);
                          }
                        }}
                        className="bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-bold px-2.5 py-1.5 rounded-none transition cursor-pointer"
                      >
                        ⋯
                      </button>

                      {openMenuId === u.id && menuPos && (
                        <>
                          <div className="fixed inset-0 z-[60]" onClick={() => { setOpenMenuId(null); setMenuPos(null); }} />
                          <div
                            className="fixed z-[70] bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-none shadow-2xl w-48 overflow-y-auto"
                            style={{ top: menuPos.top, right: menuPos.right, maxHeight: '280px' }}
                          >
                            <button
                              onClick={() => { setOpenMenuId(null); handleActivateDeactivate(u); }}
                              className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50"
                            >
                              {u.is_active ? '⏸ Deactivate' : '▶ Activate'}
                            </button>
                            <button
                              onClick={() => { setOpenMenuId(null); handleRemoveFromRole(u); }}
                              className="w-full px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition cursor-pointer border-b border-slate-100 dark:border-slate-700/50"
                            >
                              ✕ Remove From Role
                            </button>
                            <button
                              onClick={() => { setOpenMenuId(null); handleDelete(u); }}
                              className="w-full px-4 py-2.5 text-left text-sm text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/40 transition cursor-pointer"
                            >
                              🗑 Delete User
                            </button>
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="border-t border-slate-200 dark:border-slate-700 px-6 py-4 flex items-center justify-between bg-slate-50 dark:bg-slate-800/30 flex-shrink-0">
          <p className="text-xs text-slate-400">
            {hasSelection ? `${selectedUserIds.size} of ${users.length} selected` : `${users.length} user${users.length !== 1 ? 's' : ''}`}
          </p>
          <button onClick={onClose} className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-none transition cursor-pointer">
            Close
          </button>
        </div>
      </div>

      {/* Confirm Modal */}
      {confirmModal.isOpen && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
          <div className="fixed inset-0 bg-slate-950/40 dark:bg-slate-950/80 backdrop-blur-sm" onClick={() => setConfirmModal((m) => ({ ...m, isOpen: false }))} />
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-md rounded-none p-6 relative z-10 shadow-2xl text-slate-800 dark:text-slate-100">
            <h3 className="text-xl font-bold mb-2 text-slate-900 dark:text-white">{confirmModal.title}</h3>
            {confirmModal.message && <p className="text-sm text-slate-500 dark:text-slate-400 mb-6">{confirmModal.message}</p>}
            <div className="flex justify-end gap-3 mt-6">
              <button type="button" onClick={() => setConfirmModal((m) => ({ ...m, isOpen: false }))} className="px-4 py-2 text-sm text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition cursor-pointer">Cancel</button>
              <button
                onClick={confirmModal.onConfirm}
                className={
                  confirmModal.type === 'activate'
                    ? 'bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none transition cursor-pointer'
                    : 'bg-rose-600 hover:bg-rose-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none transition cursor-pointer'
                }
              >
                {confirmModal.type === 'delete' || confirmModal.type === 'bulk-delete' ? 'Delete'
                  : confirmModal.type === 'remove' ? 'Remove'
                  : confirmModal.type === 'activate' ? 'Activate'
                  : 'Deactivate'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}