"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import DataService from "@/config/axios";
import { Button } from "@/components/ui/button";

const BlockRolesPermissions = () => {
  const { app } = useParams() as { app: string };
  const [isSuper, setIsSuper] = useState(false);

  useEffect(() => {
    DataService.get("/user/me")
      .then((res) => setIsSuper(res.data?.data?.type === "super_admin"))
      .catch(() => setIsSuper(false));
  }, []);

  if (isSuper) {
    return (
      <div className="space-y-3 rounded-md border bg-white p-6">
        <p className="text-gray-700">
          As a super admin, you can define role names and which parent role each role is{" "}
          <strong>visible to</strong> (stored as a role ID, like <code className="rounded bg-gray-100 px-1">visible_for</code>
          ).
        </p>
        <Button asChild>
          <Link href={`/${app}/admin/roles`}>Open roles admin</Link>
        </Button>
      </div>
    );
  }

  return (
    <p className="text-gray-600">
      Role visibility is managed by a super admin. Contact your administrator if you need a new role.
    </p>
  );
};

export default BlockRolesPermissions;