// static/js/admin.Panel.jsx

function AdminPanel() {
  const { token } = useContext(AuthContext);
  const [tab, setTab] = useState("employees");

  return (
    <div>
      <div className="flex border-b mb-6">
        <button
          onClick={() => setTab("employees")}
          className={`px-4 py-2 ${
            tab === "employees"
              ? "border-b-2 border-blue-500 font-bold"
              : ""
          }`}
        >
          Сотрудники
        </button>

        <button
          onClick={() => setTab("tests")}
          className={`px-4 py-2 ${
            tab === "tests" ? "border-b-2 border-blue-500 font-bold" : ""
          }`}
        >
          Тесты
        </button>

        <button
          onClick={() => setTab("analytics")}
          className={`px-4 py-2 ${
            tab === "analytics"
              ? "border-b-2 border-blue-500 font-bold"
              : ""
          }`}
        >
          Аналитика
        </button>

        <button
          onClick={() => setTab("company")}
          className={`px-4 py-2 ${
            tab === "company"
              ? "border-b-2 border-blue-500 font-bold"
              : ""
          }`}
        >
          Компания
        </button>
      </div>

      {tab === "employees" && <AdminEmployees token={token} />}
      {tab === "tests" && <AdminTests token={token} />}
      {tab === "analytics" && <AdminAnalytics token={token} />}
      {tab === "company" && <AdminOrganization token={token} />}
    </div>
  );
}

function AdminOrganization({ token }) {
  const [org, setOrg] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");

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

    async function loadOrganization() {
      try {
        setLoading(true);
        setError("");
        setSuccess("");
        const data = await API.getOrganization(token);
        if (isMounted) {
          setOrg(data);
        }
      } catch (e) {
        if (isMounted) {
          setError(e.message || "Не удалось загрузить профиль компании");
        }
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    }

    if (token) {
      loadOrganization();
    } else {
      setLoading(false);
    }

    return () => {
      isMounted = false;
    };
  }, [token]);

  if (loading) return <div>Загрузка профиля компании...</div>;
  if (!org)
    return (
      <div className="text-red-600">
        Не удалось получить данные компании.
      </div>
    );

  const handleChange = (field, value) => {
    setOrg((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      setError("");
      setSuccess("");

      const updated = await API.updateOrganization(token, {
        name: org.name,
        description: org.description,
        contact_email: org.contact_email,
        contact_phone: org.contact_phone,
        website: org.website,
        logo_url: org.logo_url,
      });

      setOrg(updated);
      setSuccess("Изменения успешно сохранены");
    } catch (e) {
      setError(e.message || "Ошибка сохранения профиля компании");
    } finally {
      setSaving(false);
    }
  };

  const handleRegenerateInvite = async () => {
    const confirmResult = window.confirm(
      "Сгенерировать новый инвайт-код?\nСтарый код перестанет работать."
    );
    if (!confirmResult) return;

    try {
      setSaving(true);
      setError("");
      setSuccess("");

      const updated = await API.regenerateInviteCode(token);
      setOrg(updated);
      setSuccess("Новый инвайт-код сгенерирован");
    } catch (e) {
      setError(e.message || "Ошибка генерации инвайт-кода");
    } finally {
      setSaving(false);
    }
  };

  const handleCopyInvite = () => {
    if (!org.invite_code) return;

    navigator.clipboard
      .writeText(org.invite_code)
      .then(() => setSuccess("Инвайт-код скопирован"))
      .catch(() => setError("Не удалось скопировать инвайт-код"));
  };

  return (
    <div className="max-w-2xl bg-white shadow rounded p-4">
      <h2 className="text-xl font-bold mb-4">Профиль компании</h2>

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

      <div className="space-y-4">
        {/* ID */}
        <div>
          <label className="block text-sm font-medium mb-1">ID компании</label>
          <input
            className="border p-2 w-full bg-gray-100"
            value={org.id}
            disabled
          />
        </div>

        {/* Название */}
        <div>
          <label className="block text-sm font-medium mb-1">Название</label>
          <input
            className="border p-2 w-full"
            value={org.name || ""}
            onChange={(e) => handleChange("name", e.target.value)}
          />
        </div>

        {/* slug */}
        <div>
          <label className="block text-sm font-medium mb-1">Slug</label>
          <input
            className="border p-2 w-full bg-gray-100"
            value={org.slug || ""}
            disabled
          />
        </div>

        {/* Описание */}
        <div>
          <label className="block text-sm font-medium mb-1">Описание</label>
          <textarea
            className="border p-2 w-full"
            rows={3}
            value={org.description || ""}
            onChange={(e) => handleChange("description", e.target.value)}
          />
        </div>

        {/* Email / телефон */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input
            className="border p-2 w-full"
            value={org.contact_email || ""}
            placeholder="Email"
            onChange={(e) => handleChange("contact_email", e.target.value)}
          />
          <input
            className="border p-2 w-full"
            value={org.contact_phone || ""}
            placeholder="Телефон"
            onChange={(e) => handleChange("contact_phone", e.target.value)}
          />
        </div>

        {/* Website */}
        <div>
          <label className="block text-sm font-medium mb-1">Сайт</label>
          <input
            className="border p-2 w-full"
            value={org.website || ""}
            onChange={(e) => handleChange("website", e.target.value)}
          />
        </div>

        {/* Логотип */}
        <div>
          <label className="block text-sm font-medium mb-1">Логотип</label>
          <input
            className="border p-2 w-full"
            value={org.logo_url || ""}
            onChange={(e) => handleChange("logo_url", e.target.value)}
          />
        </div>

        {/* Инвайт-код */}
        <div className="border-t pt-4 mt-4">
          <label className="block text-sm font-medium mb-1">Инвайт-код</label>

          <div className="flex gap-2">
            <input
              type="text"
              className="border p-2 flex-1 bg-gray-100"
              value={org.invite_code || "не задан"}
              readOnly
            />
            {org.invite_code && (
              <button
                className="px-3 py-2 border rounded"
                onClick={handleCopyInvite}
              >
                Копировать
              </button>
            )}
          </div>

          <button
            className="mt-3 px-4 py-2 bg-yellow-500 text-white rounded"
            onClick={handleRegenerateInvite}
            disabled={saving}
          >
            Сгенерировать новый
          </button>
        </div>

        {/* Сохранение */}
        <div className="border-t pt-4 mt-4 flex justify-between">
          <div className="text-sm text-gray-500">
            Создана:{" "}
            {org.created_at
              ? new Date(org.created_at).toLocaleString()
              : "—"}
          </div>

          <button
            className="px-4 py-2 bg-blue-600 text-white rounded"
            onClick={handleSave}
            disabled={saving}
          >
            {saving ? "Сохранение..." : "Сохранить"}
          </button>
        </div>
      </div>
    </div>
  );
}