import React, { useState, useEffect, useCallback } from "react";
import { agentApiService } from "@/modules/agent";
import type { TokenUser, TokenCreate, TokenUpdatePermissions, TokenPasswordReset } from "@/modules/agent";
import { FiUsers, FiUserPlus, FiEdit2, FiTrash2, FiUnlock, FiLock, FiKey, FiX, FiCheck, FiSearch } from "react-icons/fi";

export const AdminPage: React.FC = () => {
  const [users, setUsers] = useState<TokenUser[]>([]);
  const [inactiveUsers, setInactiveUsers] = useState<TokenUser[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<"active" | "inactive">("active");
  const [searchQuery, setSearchQuery] = useState("");
  
  // Modal states
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [selectedUser, setSelectedUser] = useState<TokenUser | null>(null);
  
  // Form states
  const [createData, setCreateData] = useState<TokenCreate>({
    login: "",
    name: "",
    last_name: "",
    password: "",
    permission_admin: false,
    permission_manage_agent: false,
    permission_view: false,
    is_active: false,
  });
  
  const [editData, setEditData] = useState<TokenUpdatePermissions>({
    is_active: false,
    permission_admin: false,
    permission_manage_agent: false,
    permission_view: false,
  });
  
  const [passwordData, setPasswordData] = useState<TokenPasswordReset>({
    new_password: "",
  });

  const fetchUsers = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const [active, inactive] = await Promise.all([
        agentApiService.getUsers(),
        agentApiService.getInactiveUsers(),
      ]);
      setUsers(active);
      setInactiveUsers(inactive);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка при загрузке пользователей");
    } finally {
      setIsLoading(false);
    }
  }, []);

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

  const handleCreateUser = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    try {
      await agentApiService.createUser(createData);
      setSuccessMessage("Пользователь успешно создан");
      setShowCreateModal(false);
      setCreateData({
        login: "",
        name: "",
        last_name: "",
        password: "",
        permission_admin: false,
        permission_manage_agent: false,
        permission_view: false,
        is_active: false,
      });
      await fetchUsers();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка при создании пользователя");
    }
  };

  const handleUpdatePermissions = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedUser) return;
    
    setError(null);
    try {
      await agentApiService.updateUserPermissions(selectedUser.login, editData);
      setSuccessMessage("Права пользователя обновлены");
      setShowEditModal(false);
      await fetchUsers();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка при обновлении прав");
    }
  };

  const handleResetPassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedUser) return;
    
    setError(null);
    try {
      await agentApiService.resetUserPassword(selectedUser.login, passwordData);
      setSuccessMessage("Пароль изменен");
      setShowPasswordModal(false);
      setPasswordData({ new_password: "" });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка при сбросе пароля");
    }
  };

  const handleActivateUser = async (login: string) => {
    setError(null);
    try {
      await agentApiService.activateUser(login);
      setSuccessMessage("Пользователь активирован");
      await fetchUsers();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка при активации пользователя");
    }
  };

  const handleDeactivateUser = async (login: string) => {
    setError(null);
    try {
      await agentApiService.deactivateUser(login);
      setSuccessMessage("Пользователь деактивирован");
      await fetchUsers();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка при деактивации пользователя");
    }
  };

  const handleDeleteUser = async (login: string) => {
    if (!confirm(`Вы уверены, что хотите удалить пользователя ${login}?`)) return;
    
    setError(null);
    try {
      await agentApiService.deleteUser(login);
      setSuccessMessage("Пользователь удален");
      await fetchUsers();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка при удалении пользователя");
    }
  };

  const openEditModal = (user: TokenUser) => {
    setSelectedUser(user);
    setEditData({
      is_active: user.is_active,
      permission_admin: user.permission_admin,
      permission_manage_agent: user.permission_manage_agent,
      permission_view: user.permission_view,
    });
    setShowEditModal(true);
  };

  const openPasswordModal = (user: TokenUser) => {
    setSelectedUser(user);
    setPasswordData({ new_password: "" });
    setShowPasswordModal(true);
  };

  const filteredUsers = (activeTab === "active" ? users : inactiveUsers).filter(
    (user) =>
      user.login.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.last_name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const inputStyle: React.CSSProperties = {
    width: "100%",
    padding: "10px 12px",
    border: "1px solid var(--border)",
    borderRadius: "8px",
    backgroundColor: "var(--input-bg)",
    color: "var(--text-primary)",
    fontSize: "14px",
  };

  const labelStyle: React.CSSProperties = {
    display: "block",
    marginBottom: "8px",
    color: "var(--text-secondary)",
    fontSize: "14px",
    fontWeight: 500,
  };

  const buttonBaseStyle: React.CSSProperties = {
    padding: "8px 16px",
    borderRadius: "8px",
    border: "none",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
  };

  return (
    <div
      className="min-h-screen py-8 px-4"
      style={{ backgroundColor: "var(--bg-primary)" }}
    >
      <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-4 mb-4">
            <div
              className="w-14 h-14 rounded-xl flex items-center justify-center"
              style={{ backgroundColor: "var(--bg-secondary)" }}
            >
              <FiUsers className="w-7 h-7" style={{ color: "var(--accent)" }} />
            </div>
            <div>
              <h1
                className="text-3xl font-bold mb-1"
                style={{ color: "var(--text-primary)" }}
              >
                Управление пользователями
              </h1>
              <p style={{ color: "var(--text-secondary)", fontSize: "16px" }}>
                Администрирование учетных записей
              </p>
            </div>
          </div>
        </div>

        {/* Messages */}
        {successMessage && (
          <div
            className="mb-6 p-4 rounded-lg border text-sm"
            style={{
              backgroundColor: "var(--success-bg)",
              borderColor: "var(--success-border)",
              color: "var(--success-text)",
            }}
          >
            <div className="flex items-center justify-between">
              <span>{successMessage}</span>
              <button onClick={() => setSuccessMessage(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
                <FiX size={16} />
              </button>
            </div>
          </div>
        )}

        {error && (
          <div
            className="mb-6 p-4 rounded-lg border text-sm"
            style={{
              backgroundColor: "var(--error-bg)",
              borderColor: "var(--error-border)",
              color: "var(--error-text)",
            }}
          >
            <div className="flex items-center justify-between">
              <span>{error}</span>
              <button onClick={() => setError(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
                <FiX size={16} />
              </button>
            </div>
          </div>
        )}

        {/* Tabs and Actions */}
        <div className="mb-6">
          <div className="flex items-center justify-between mb-4">
            {/* Tabs */}
            <div className="flex gap-2">
              <button
                onClick={() => setActiveTab("active")}
                className="px-4 py-2 rounded-lg border transition-all font-medium"
                style={{
                  backgroundColor: activeTab === "active" ? "var(--accent)" : "var(--input-bg)",
                  color: activeTab === "active" ? "var(--accent-text)" : "var(--text-primary)",
                  borderColor: activeTab === "active" ? "var(--accent)" : "var(--border)",
                }}
              >
                Активные ({users.length})
              </button>
              <button
                onClick={() => setActiveTab("inactive")}
                className="px-4 py-2 rounded-lg border transition-all font-medium"
                style={{
                  backgroundColor: activeTab === "inactive" ? "var(--accent)" : "var(--input-bg)",
                  color: activeTab === "inactive" ? "var(--accent-text)" : "var(--text-primary)",
                  borderColor: activeTab === "inactive" ? "var(--accent)" : "var(--border)",
                }}
              >
                Неактивные ({inactiveUsers.length})
              </button>
            </div>

            {/* Create Button */}
            <button
              onClick={() => setShowCreateModal(true)}
              className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all font-medium"
              style={{
                backgroundColor: "var(--button-primary)",
                color: "var(--button-primary-text)",
                boxShadow: "0 4px 14px var(--shadow-color)",
              }}
            >
              <FiUserPlus size={16} />
              Создать пользователя
            </button>
          </div>

          {/* Search */}
          <div className="relative">
            <FiSearch
              style={{
                position: "absolute",
                left: "12px",
                top: "50%",
                transform: "translateY(-50%)",
                color: "var(--text-muted)",
              }}
            />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Поиск по логину, имени или фамилии..."
              className="w-full pl-10 pr-4 py-2.5 rounded-lg border"
              style={{
                backgroundColor: "var(--input-bg)",
                borderColor: "var(--border)",
                color: "var(--text-primary)",
              }}
            />
          </div>
        </div>

        {/* Users Table */}
        {isLoading ? (
          <div className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
            Загрузка...
          </div>
        ) : filteredUsers.length === 0 ? (
          <div
            className="text-center py-12 rounded-xl border border-dashed"
            style={{ color: "var(--text-muted)", borderColor: "var(--border)" }}
          >
            Пользователи не найдены
          </div>
        ) : (
          <div
            className="rounded-xl border overflow-hidden"
            style={{
              backgroundColor: "var(--card-bg)",
              borderColor: "var(--border)",
            }}
          >
            <table className="w-full">
              <thead>
                <tr style={{ backgroundColor: "var(--bg-secondary)" }}>
                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Логин</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Имя</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Фамилия</th>
                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Админ</th>
                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Управление</th>
                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Просмотр</th>
                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Действия</th>
                </tr>
              </thead>
              <tbody>
                {filteredUsers.map((user, index) => (
                  <tr
                    key={user.id}
                    className="border-t"
                    style={{
                      borderColor: "var(--border)",
                      backgroundColor: index % 2 === 0 ? "var(--card-bg)" : "var(--bg-secondary)",
                    }}
                  >
                    <td className="px-4 py-3 font-mono text-sm" style={{ color: "var(--text-primary)" }}>{user.login}</td>
                    <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.name}</td>
                    <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.last_name}</td>
                    <td className="px-4 py-3 text-center">
                      {user.permission_admin ? (
                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
                      ) : (
                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
                      )}
                    </td>
                    <td className="px-4 py-3 text-center">
                      {user.permission_manage_agent ? (
                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
                      ) : (
                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
                      )}
                    </td>
                    <td className="px-4 py-3 text-center">
                      {user.permission_view ? (
                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
                      ) : (
                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
                      )}
                    </td>
                    <td className="px-4 py-3 text-center">
                      <div className="flex items-center justify-center gap-2">
                        <button
                          onClick={() => openEditModal(user)}
                          className="p-2 rounded-lg transition-all"
                          style={{
                            backgroundColor: "var(--accent)",
                            color: "var(--accent-text)",
                          }}
                          title="Редактировать права"
                        >
                          <FiEdit2 size={14} />
                        </button>
                        <button
                          onClick={() => openPasswordModal(user)}
                          className="p-2 rounded-lg transition-all"
                          style={{
                            backgroundColor: "var(--warning-bg)",
                            color: "var(--warning-text)",
                          }}
                          title="Сбросить пароль"
                        >
                          <FiKey size={14} />
                        </button>
                        {activeTab === "active" ? (
                          <button
                            onClick={() => handleDeactivateUser(user.login)}
                            className="p-2 rounded-lg transition-all"
                            style={{
                              backgroundColor: "var(--warning-bg)",
                              color: "var(--warning-text)",
                            }}
                            title="Деактивировать"
                          >
                            <FiLock size={14} />
                          </button>
                        ) : (
                          <button
                            onClick={() => handleActivateUser(user.login)}
                            className="p-2 rounded-lg transition-all"
                            style={{
                              backgroundColor: "var(--success-bg)",
                              color: "var(--success-text)",
                              border: "1px solid var(--success-border)",
                            }}
                            title="Активировать"
                          >
                            <FiUnlock size={14} />
                          </button>
                        )}
                        <button
                          onClick={() => handleDeleteUser(user.login)}
                          className="p-2 rounded-lg transition-all"
                          style={{
                            backgroundColor: "var(--error-bg)",
                            color: "var(--error-text)",
                            border: "1px solid var(--error-border)",
                          }}
                          title="Удалить"
                        >
                          <FiTrash2 size={14} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Create User Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div
            className="rounded-2xl shadow-2xl border w-full max-w-md"
            style={{ backgroundColor: "var(--card-bg)" }}
          >
            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Создать пользователя</h2>
              <button onClick={() => setShowCreateModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
                <FiX size={24} />
              </button>
            </div>
            <form onSubmit={handleCreateUser} className="p-6 space-y-4">
              <div>
                <label style={labelStyle}>Логин *</label>
                <input
                  type="text"
                  value={createData.login}
                  onChange={(e) => setCreateData({ ...createData, login: e.target.value })}
                  required
                  style={inputStyle}
                />
              </div>
              <div>
                <label style={labelStyle}>Имя *</label>
                <input
                  type="text"
                  value={createData.name}
                  onChange={(e) => setCreateData({ ...createData, name: e.target.value })}
                  required
                  style={inputStyle}
                />
              </div>
              <div>
                <label style={labelStyle}>Фамилия *</label>
                <input
                  type="text"
                  value={createData.last_name}
                  onChange={(e) => setCreateData({ ...createData, last_name: e.target.value })}
                  required
                  style={inputStyle}
                />
              </div>
              <div>
                <label style={labelStyle}>Пароль *</label>
                <input
                  type="password"
                  value={createData.password}
                  onChange={(e) => setCreateData({ ...createData, password: e.target.value })}
                  required
                  style={inputStyle}
                />
              </div>
              <div className="space-y-2">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={createData.permission_admin}
                    onChange={(e) => setCreateData({ ...createData, permission_admin: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Администратор</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={createData.permission_manage_agent}
                    onChange={(e) => setCreateData({ ...createData, permission_manage_agent: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={createData.permission_view}
                    onChange={(e) => setCreateData({ ...createData, permission_view: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Просмотр</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={createData.is_active}
                    onChange={(e) => setCreateData({ ...createData, is_active: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Активен сразу</span>
                </label>
              </div>
              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={() => setShowCreateModal(false)}
                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
                  style={{
                    backgroundColor: "var(--input-bg)",
                    color: "var(--text-primary)",
                  }}
                >
                  Отмена
                </button>
                <button
                  type="submit"
                  className="flex-1 px-4 py-2 rounded-lg transition-all"
                  style={{
                    backgroundColor: "var(--button-primary)",
                    color: "var(--button-primary-text)",
                  }}
                >
                  Создать
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Edit Permissions Modal */}
      {showEditModal && selectedUser && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div
            className="rounded-2xl shadow-2xl border w-full max-w-md"
            style={{ backgroundColor: "var(--card-bg)" }}
          >
            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
                Редактировать: {selectedUser.login}
              </h2>
              <button onClick={() => setShowEditModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
                <FiX size={24} />
              </button>
            </div>
            <form onSubmit={handleUpdatePermissions} className="p-6 space-y-4">
              <div className="space-y-2">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={editData.permission_admin || false}
                    onChange={(e) => setEditData({ ...editData, permission_admin: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Администратор</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={editData.permission_manage_agent || false}
                    onChange={(e) => setEditData({ ...editData, permission_manage_agent: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={editData.permission_view || false}
                    onChange={(e) => setEditData({ ...editData, permission_view: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Просмотр</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={editData.is_active || false}
                    onChange={(e) => setEditData({ ...editData, is_active: e.target.checked })}
                  />
                  <span style={{ color: "var(--text-primary)" }}>Активен</span>
                </label>
              </div>
              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={() => setShowEditModal(false)}
                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
                  style={{
                    backgroundColor: "var(--input-bg)",
                    color: "var(--text-primary)",
                  }}
                >
                  Отмена
                </button>
                <button
                  type="submit"
                  className="flex-1 px-4 py-2 rounded-lg transition-all"
                  style={{
                    backgroundColor: "var(--button-primary)",
                    color: "var(--button-primary-text)",
                  }}
                >
                  Сохранить
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Reset Password Modal */}
      {showPasswordModal && selectedUser && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div
            className="rounded-2xl shadow-2xl border w-full max-w-md"
            style={{ backgroundColor: "var(--card-bg)" }}
          >
            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
                Сброс пароля: {selectedUser.login}
              </h2>
              <button onClick={() => setShowPasswordModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
                <FiX size={24} />
              </button>
            </div>
            <form onSubmit={handleResetPassword} className="p-6 space-y-4">
              <div>
                <label style={labelStyle}>Новый пароль *</label>
                <input
                  type="password"
                  value={passwordData.new_password}
                  onChange={(e) => setPasswordData({ new_password: e.target.value })}
                  required
                  style={inputStyle}
                />
              </div>
              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={() => setShowPasswordModal(false)}
                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
                  style={{
                    backgroundColor: "var(--input-bg)",
                    color: "var(--text-primary)",
                  }}
                >
                  Отмена
                </button>
                <button
                  type="submit"
                  className="flex-1 px-4 py-2 rounded-lg transition-all"
                  style={{
                    backgroundColor: "var(--button-primary)",
                    color: "var(--button-primary-text)",
                  }}
                >
                  Сбросить
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};