// static/js/admin.SuperAdmin.jsx

/* ========================================================================================
    СУПЕР-АДМИН: Полное управление организациями и их сотрудниками
======================================================================================== */
function AdminOrganizationsSuper({ token }) {
  const [orgs, setOrgs] = useState([]);
  const [loadingOrgs, setLoadingOrgs] = useState(true);
  const [errorOrgs, setErrorOrgs] = useState("");

  const [selectedOrgId, setSelectedOrgId] = useState(null);
  const [users, setUsers] = useState([]);

  const [loadingUsers, setLoadingUsers] = useState(false);
  const [errorUsers, setErrorUsers] = useState("");

  // модалка организации
  const [modalOpen, setModalOpen] = useState(false);
  const [formOrg, setFormOrg] = useState(null);

  /* ---------------------------------------------
       ЗАГРУЗКА ОРГАНИЗАЦИЙ
  --------------------------------------------- */
  useEffect(() => {
    async function load() {
      try {
        setLoadingOrgs(true);
        setErrorOrgs("");
        const data = await API.superadminGetOrganizations(token);
        setOrgs(Array.isArray(data) ? data : []);
        if (data.length > 0) setSelectedOrgId(data[0].id);
      } catch (e) {
        setErrorOrgs(e.message || "Не удалось загрузить список организаций");
      } finally {
        setLoadingOrgs(false);
      }
    }
    if (token) {
      load();
    }
  }, [token]);

  /* ---------------------------------------------
       ЗАГРУЗКА СОТРУДНИКОВ ОРГАНИЗАЦИИ
  --------------------------------------------- */
  useEffect(() => {
    if (!selectedOrgId) return;

    async function load() {
      try {
        setLoadingUsers(true);
        setErrorUsers("");
        const data = await API.superadminGetOrgUsers(token, selectedOrgId);
        setUsers(Array.isArray(data) ? data : []);
      } catch (e) {
        setErrorUsers(e.message || "Не удалось загрузить сотрудников организации");
      } finally {
        setLoadingUsers(false);
      }
    }

    load();
  }, [token, selectedOrgId]);

  const selectedOrg = orgs.find((o) => o.id === selectedOrgId) || null;

  /* ---------------------------------------------
       УДАЛИТЬ ОРГАНИЗАЦИЮ
  --------------------------------------------- */
  const deleteOrg = async (org) => {
    if (
      !window.confirm(
        `Удалить организацию "${org.name}" вместе со всеми сотрудниками и тестами?`
      )
    )
      return;

    try {
      await API.superadminDeleteOrganization(token, org.id);
      setOrgs((prev) => prev.filter((o) => o.id !== org.id));
      if (selectedOrgId === org.id) {
        setSelectedOrgId(null);
        setUsers([]);
      }
    } catch (e) {
      alert(e.message || "Ошибка удаления организации");
    }
  };

  /* ---------------------------------------------
       МОДАЛКА РЕДАКТИРОВАНИЯ ОРГАНИЗАЦИИ
  --------------------------------------------- */
  const openModal = (org) => {
    setFormOrg({ ...org });
    setModalOpen(true);
  };

  const saveOrg = async () => {
    try {
      const updated = await API.superadminUpdateOrganization(
        token,
        formOrg.id,
        {
          name: formOrg.name,
          description: formOrg.description,
          contact_email: formOrg.contact_email,
          contact_phone: formOrg.contact_phone,
          website: formOrg.website,
          logo_url: formOrg.logo_url,
        }
      );
      setOrgs((prev) =>
        prev.map((o) => (o.id === updated.id ? updated : o))
      );
      setModalOpen(false);
    } catch (e) {
      alert(e.message || "Ошибка сохранения организации");
    }
  };

  /* ---------------------------------------------
       СОТРУДНИКИ: создание, редактирование, удаление
  --------------------------------------------- */
  const [newUser, setNewUser] = useState({
    email: "",
    first_name: "",
    last_name: "",
    role: "specialist",
    password: "",
  });

  const createUser = async () => {
    if (!selectedOrgId) return;
    try {
      const payload = { ...newUser, department_id: null };
      const created = await API.superadminCreateUser(
        token,
        selectedOrgId,
        payload
      );
      setUsers((prev) => [...prev, created]);
      setNewUser({
        email: "",
        first_name: "",
        last_name: "",
        role: "specialist",
        password: "",
      });
    } catch (e) {
      alert(e.message || "Ошибка создания сотрудника");
    }
  };

  const deleteUser = async (id) => {
    if (!window.confirm("Удалить сотрудника?")) return;

    try {
      await API.superadminDeleteUser(token, id);
      setUsers((prev) => prev.filter((u) => u.id !== id));
    } catch (e) {
      alert(e.message || "Ошибка удаления сотрудника");
    }
  };

  const [editUserId, setEditUserId] = useState(null);
  const [editUser, setEditUser] = useState({});

  const saveUser = async () => {
    try {
      const payload = { ...editUser };
      if (!payload.password) {
        delete payload.password;
      }
      const updated = await API.superadminUpdateUser(token, editUserId, payload);
      setUsers((prev) => prev.map((u) => (u.id === updated.id ? updated : u)));
      setEditUserId(null);
    } catch (e) {
      alert(e.message || "Ошибка сохранения сотрудника");
    }
  };

  /* ---------------------------------------------
       РЕНДЕР
  --------------------------------------------- */
  return (
    <div className="flex flex-col lg:flex-row gap-6">
      {/* ЛЕВАЯ КОЛОНКА — организации */}
      <div className="lg:w-1/3 w-full bg-white shadow rounded p-4">
        <h2 className="text-lg font-bold mb-3">Организации</h2>

        {errorOrgs && (
          <div className="mb-3 text-sm text-red-600 border border-red-300 rounded p-2">
            {errorOrgs}
          </div>
        )}

        {loadingOrgs ? (
          <div className="flex items-center gap-2 text-gray-600 text-sm">
            <div className="spinner" /> Загрузка организаций...
          </div>
        ) : orgs.length === 0 ? (
          <div className="text-sm text-gray-500">
            Пока нет ни одной организации.
          </div>
        ) : (
          <ul className="space-y-2">
            {orgs.map((org) => (
              <li
                key={org.id}
                className={`border rounded p-3 ${
                  org.id === selectedOrgId
                    ? "bg-blue-50 border-blue-500"
                    : "hover:bg-gray-50"
                }`}
              >
                <div className="flex justify-between items-start gap-2">
                  <div
                    className="cursor-pointer flex-1"
                    onClick={() => setSelectedOrgId(org.id)}
                  >
                    <div className="font-semibold text-sm">{org.name}</div>
                    <div className="text-xs text-gray-500">
                      ID: {org.id}
                      {org.slug ? ` · slug: ${org.slug}` : ""}
                    </div>
                    {org.contact_email && (
                      <div className="text-xs text-gray-500">
                        {org.contact_email}
                      </div>
                    )}
                  </div>

                  <div className="flex flex-col gap-1">
                    <button
                      className="text-xs border px-2 py-1 rounded"
                      onClick={() => openModal(org)}
                    >
                      Сведения
                    </button>
                    <button
                      className="text-xs border border-red-400 text-red-600 px-2 py-1 rounded"
                      onClick={() => deleteOrg(org)}
                    >
                      Удалить
                    </button>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* ПРАВАЯ КОЛОНКА — сотрудники выбранной организации */}
      <div className="lg:w-2/3 w-full bg-white shadow rounded p-4 overflow-x-auto">
        {selectedOrg ? (
          <>
            <h2 className="text-lg font-bold mb-3">
              Сотрудники организации: {selectedOrg.name}
            </h2>

            {errorUsers && (
              <div className="mb-3 text-sm text-red-600 border border-red-300 rounded p-2">
                {errorUsers}
              </div>
            )}

            {/* Блок создания сотрудника */}
            <div className="border rounded p-3 mb-4 bg-gray-50">
              <h3 className="font-medium mb-2 text-sm">
                Добавить сотрудника
              </h3>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-2">
                <input
                  className="border p-2 text-sm"
                  placeholder="Email"
                  value={newUser.email}
                  onChange={(e) =>
                    setNewUser((u) => ({ ...u, email: e.target.value }))
                  }
                />
                <input
                  className="border p-2 text-sm"
                  placeholder="Пароль"
                  value={newUser.password}
                  onChange={(e) =>
                    setNewUser((u) => ({ ...u, password: e.target.value }))
                  }
                />
                <input
                  className="border p-2 text-sm"
                  placeholder="Имя"
                  value={newUser.first_name}
                  onChange={(e) =>
                    setNewUser((u) => ({ ...u, first_name: e.target.value }))
                  }
                />
                <input
                  className="border p-2 text-sm"
                  placeholder="Фамилия"
                  value={newUser.last_name}
                  onChange={(e) =>
                    setNewUser((u) => ({ ...u, last_name: e.target.value }))
                  }
                />

                <select
                  className="border p-2 text-sm"
                  value={newUser.role}
                  onChange={(e) =>
                    setNewUser((u) => ({ ...u, role: e.target.value }))
                  }
                >
                  <option value="admin">Администратор</option>
                  <option value="manager">Руководитель</option>
                  <option value="specialist">Специалист</option>
                </select>
              </div>

              <button
                className="px-4 py-2 bg-blue-600 text-white rounded text-sm"
                onClick={createUser}
                disabled={!selectedOrgId}
              >
                Создать сотрудника
              </button>
            </div>

            {/* Таблица сотрудников */}
            {loadingUsers ? (
              <div className="flex items-center gap-2 text-gray-600 text-sm">
                <div className="spinner" /> Загрузка сотрудников...
              </div>
            ) : users.length === 0 ? (
              <div className="text-sm text-gray-500">
                В этой организации пока нет сотрудников.
              </div>
            ) : (
              <table className="min-w-full text-sm">
                <thead className="bg-gray-100 border-b">
                  <tr>
                    <th className="px-2 py-1 text-left">ID</th>
                    <th className="px-2 py-1 text-left">ФИО</th>
                    <th className="px-2 py-1 text-left">Email</th>
                    <th className="px-2 py-1 text-left">Роль</th>
                    <th className="px-2 py-1 text-left">Действия</th>
                  </tr>
                </thead>
                <tbody>
                  {users.map((u) =>
                    editUserId === u.id ? (
                      <tr key={u.id} className="border-b">
                        <td className="px-2 py-1 align-top">{u.id}</td>
                        <td className="px-2 py-1">
                          <input
                            className="border p-1 w-full text-xs mb-1"
                            value={editUser.first_name || ""}
                            onChange={(e) =>
                              setEditUser((x) => ({
                                ...x,
                                first_name: e.target.value,
                              }))
                            }
                          />
                          <input
                            className="border p-1 w-full text-xs"
                            value={editUser.last_name || ""}
                            onChange={(e) =>
                              setEditUser((x) => ({
                                ...x,
                                last_name: e.target.value,
                              }))
                            }
                          />
                        </td>
                        <td className="px-2 py-1">
                          <input
                            className="border p-1 w-full text-xs"
                            value={editUser.email || ""}
                            onChange={(e) =>
                              setEditUser((x) => ({
                                ...x,
                                email: e.target.value,
                              }))
                            }
                          />
                        </td>
                        <td className="px-2 py-1">
                          <select
                            className="border p-1 text-xs"
                            value={editUser.role || "specialist"}
                            onChange={(e) =>
                              setEditUser((x) => ({
                                ...x,
                                role: e.target.value,
                              }))
                            }
                          >
                            <option value="admin">Администратор</option>
                            <option value="manager">Руководитель</option>
                            <option value="specialist">Специалист</option>
                          </select>
                        </td>
                        <td className="px-2 py-1">
                          <div className="flex flex-wrap gap-2">
                            <button
                              className="px-2 py-1 bg-green-600 text-white rounded text-xs"
                              onClick={saveUser}
                            >
                              Сохранить
                            </button>
                            <button
                              className="px-2 py-1 border rounded text-xs"
                              onClick={() => setEditUserId(null)}
                            >
                              Отмена
                            </button>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      <tr key={u.id} className="border-b">
                        <td className="px-2 py-1 align-top text-xs text-gray-500">
                          {u.id}
                        </td>
                        <td className="px-2 py-1">
                          {u.first_name} {u.last_name}
                        </td>
                        <td className="px-2 py-1 text-xs">{u.email}</td>
                        <td className="px-2 py-1 text-xs uppercase text-gray-600">
                          {u.role}
                        </td>
                        <td className="px-2 py-1">
                          <div className="flex flex-wrap gap-2">
                            <button
                              className="px-2 py-1 border rounded text-xs"
                              onClick={() => {
                                setEditUserId(u.id);
                                setEditUser({
                                  email: u.email,
                                  first_name: u.first_name,
                                  last_name: u.last_name,
                                  role: u.role,
                                  password: "",
                                });
                              }}
                            >
                              Редактировать
                            </button>
                            <button
                              className="px-2 py-1 border border-red-400 text-red-600 rounded text-xs"
                              onClick={() => deleteUser(u.id)}
                            >
                              Удалить
                            </button>
                          </div>
                        </td>
                      </tr>
                    )
                  )}
                </tbody>
              </table>
            )}
          </>
        ) : (
          <div className="text-sm text-gray-500">
            Выберите организацию слева, чтобы увидеть сотрудников.
          </div>
        )}

        <p className="mt-4 text-xs text-gray-500">
          Как супер-админ вы можете создавать, редактировать и удалять
          сотрудников любой организации, а также менять их роли.
        </p>
      </div>

      {/* Модалка редактирования организации */}
      {modalOpen && formOrg && (
        <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
          <div className="bg-white rounded shadow-lg p-6 max-w-lg w-full">
            <h2 className="text-lg font-bold mb-4">
              Редактирование организации
            </h2>

            <input
              className="border p-2 w-full mb-3"
              value={formOrg.name || ""}
              onChange={(e) =>
                setFormOrg({ ...formOrg, name: e.target.value })
              }
              placeholder="Название"
            />

            <textarea
              className="border p-2 w-full mb-3"
              value={formOrg.description || ""}
              onChange={(e) =>
                setFormOrg({ ...formOrg, description: e.target.value })
              }
              placeholder="Описание"
            />

            <input
              className="border p-2 w-full mb-3"
              value={formOrg.contact_email || ""}
              onChange={(e) =>
                setFormOrg({ ...formOrg, contact_email: e.target.value })
              }
              placeholder="Email"
            />

            <input
              className="border p-2 w-full mb-3"
              value={formOrg.contact_phone || ""}
              onChange={(e) =>
                setFormOrg({ ...formOrg, contact_phone: e.target.value })
              }
              placeholder="Телефон"
            />

            <input
              className="border p-2 w-full mb-3"
              value={formOrg.website || ""}
              onChange={(e) =>
                setFormOrg({ ...formOrg, website: e.target.value })
              }
              placeholder="Сайт"
            />

            <input
              className="border p-2 w-full mb-4"
              value={formOrg.logo_url || ""}
              onChange={(e) =>
                setFormOrg({ ...formOrg, logo_url: e.target.value })
              }
              placeholder="URL логотипа"
            />

            <div className="flex justify-end gap-3">
              <button
                className="border px-4 py-2 rounded"
                onClick={() => setModalOpen(false)}
              >
                Отмена
              </button>
              <button
                className="bg-blue-600 text-white px-4 py-2 rounded"
                onClick={saveOrg}
              >
                Сохранить
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}