"use client";

import { AppShell } from "@/components/app/AppShell";
import { ServiceSectionCard, ServiceTile } from "@/components/app/ServiceTile";
import { useBranding } from "@/components/app/BrandingProvider";
import { useModules } from "@/components/app/ModulesProvider";
import { TeacherShell } from "@/components/teacher/TeacherShell";
import { TodaySchedulePage } from "@/components/teacher/TodaySchedulePage";
import { getStoredUser } from "@/lib/api";
import { DASHBOARD_SECTIONS, filterSections } from "@/lib/menu";
import { getActiveRole } from "@/lib/session-context";
import { isTeacherRole } from "@/lib/teacher";

export default function DashboardPage() {
  const branding = useBranding();
  const user = getStoredUser();
  const activeRole = getActiveRole();
  const roles = activeRole ? [activeRole] : (user as { roles?: string[] })?.roles ?? [];
  const { enabledKeys } = useModules();
  const sections = filterSections(DASHBOARD_SECTIONS, roles, enabledKeys);
  const teacherView = isTeacherRole();

  const content = (
    <div className="space-y-3 sm:space-y-4">
      {teacherView ? <TodaySchedulePage /> : null}
      {sections.map((section) => (
        <ServiceSectionCard key={section.id} title={section.title} tone={section.tone}>
          {section.items.map((item) => (
            <ServiceTile key={item.id} item={item} />
          ))}
        </ServiceSectionCard>
      ))}
    </div>
  );

  if (teacherView) {
    return (
      <TeacherShell showBack={false} title="داشبورد معلم" subtitle={branding.name}>
        {content}
      </TeacherShell>
    );
  }

  return (
    <AppShell showBack={false} title="داشبورد" subtitle={branding.name}>
      {content}
    </AppShell>
  );
}