"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { homeAppsConfig, isAppDisabledByPlan, type UserRole } from "@/config/homeAppsConfig";
import { getCurrentUser } from "@/services/api/lmsApi";
import { MacModuleContent } from "@/components/mac/MacModuleContent";

export default function AppRoutePage() {
  const params = useParams<{ appId: string }>();
  const appId = params.appId;
  const [role, setRole] = useState<UserRole | null>(null);

  useEffect(() => {
    getCurrentUser().then((user) => setRole(user.role));
  }, []);

  if (!role) return <div className="grid min-h-screen place-items-center bg-slate-950 text-white" dir="rtl">در حال بارگذاری...</div>;
  const app = homeAppsConfig.find((item) => item.id === appId);
  if (!app || !app.roleAccess.includes(role)) return <ForbiddenPage />;
  if (isAppDisabledByPlan(role, appId)) return <DisabledByPlanPage />;

  return (
    <main className="min-h-screen bg-slate-950 p-4 text-slate-900 dark:text-white" dir="rtl">
      <div className="mx-auto h-[calc(100vh-32px)] max-w-7xl">
        <MacModuleContent appId={appId} role={role} />
      </div>
    </main>
  );
}

function DisabledByPlanPage() {
  return (
    <main className="grid min-h-screen place-items-center bg-slate-950 p-6 text-white" dir="rtl">
      <section className="liquid-glass max-w-md rounded-[28px] p-6 text-center">
        <h1 className="text-xl font-black">این بخش در طرح فعلی سازمان فعال نیست.</h1>
        <p className="mt-3">برای فعال‌سازی، با مدیر آموزش سازمان یا پشتیبانی سامانه تماس بگیرید.</p>
      </section>
    </main>
  );
}

function ForbiddenPage() {
  return (
    <main className="grid min-h-screen place-items-center bg-slate-950 p-6 text-white" dir="rtl">
      <section className="liquid-glass max-w-md rounded-[28px] p-6 text-center">
        <h1 className="text-xl font-black">دسترسی غیرمجاز</h1>
        <p className="mt-3">شما به این بخش دسترسی ندارید.</p>
      </section>
    </main>
  );
}