"use client";

import { useMemo } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { AppShell } from "@/components/app/AppShell";
import { ServiceSectionCard, ServiceTile } from "@/components/app/ServiceTile";
import { ApiErrorLog } from "@/components/virtual-classes/ApiErrorLog";
import { Button } from "@/components/ui/Button";
import { useModules } from "@/components/app/ModulesProvider";
import { ONLINE_CLASS_SECTION, filterItems } from "@/lib/menu";
import { getActiveRole } from "@/lib/session-context";

export default function OnlineClassHubPage() {
  const router = useRouter();
  const params = useSearchParams();
  const branchId = params.get("branchId");
  const role = getActiveRole();
  const { enabledKeys } = useModules();

  const items = useMemo(() => {
    const filtered = filterItems(ONLINE_CLASS_SECTION.items, role ? [role] : [], enabledKeys);
    if (!branchId) return filtered;
    return filtered.map((item) => {
      if (!item.href) return item;
      const url = new URL(item.href, "http://local");
      url.searchParams.set("branchId", branchId);
      return { ...item, href: `${url.pathname}${url.search}` };
    });
  }, [branchId, enabledKeys, role]);

  return (
    <AppShell
      title="کلاس آنلاین"
      subtitle={branchId ? `مدرسه #${branchId}` : "اتاق‌ها، جلسات، سرویس‌ها و عملیات زنده"}
    >
      <div className="mb-4 flex flex-wrap gap-2">
        <Button type="button" onClick={() => router.push("/virtual-classes/rooms/new")}>
          + افزودن اتاق
        </Button>
        <Button type="button" variant="secondary" onClick={() => router.push("/virtual-classes/sessions/new")}>
          + افزودن جلسه
        </Button>
      </div>
      <ServiceSectionCard title={ONLINE_CLASS_SECTION.title} tone={ONLINE_CLASS_SECTION.tone}>
        {items.map((item) => (
          <ServiceTile key={item.id} item={item} />
        ))}
      </ServiceSectionCard>
      <ApiErrorLog />
    </AppShell>
  );
}