"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { ClassAssignmentsTab } from "@/components/teacher/ClassAssignmentsTab";
import { ClassReportsTab } from "@/components/teacher/ClassReportsTab";
import { ClassAttendanceTab } from "@/components/teacher/ClassAttendanceTab";
import { ClassContextAlerts } from "@/components/teacher/ClassContextAlerts";
import { ClassGradesTab } from "@/components/teacher/ClassGradesTab";
import { ClassLogTab } from "@/components/teacher/ClassLogTab";
import { ClassResourcesTab } from "@/components/teacher/ClassResourcesTab";
import { ClassStudentsTab, type ClassStudent } from "@/components/teacher/ClassStudentsTab";
import { ClassWeeklyScheduleTab } from "@/components/teacher/ClassWeeklyScheduleTab";
import { ClassExamsTab } from "@/components/teacher/ClassExamsTab";
import { TeacherHeroHeader } from "@/components/teacher/ui/TeacherHeroHeader";
import { TeacherTabBar } from "@/components/teacher/ui/TeacherTabBar";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import { apiGet } from "@/lib/api";

const TABS = [
  { id: "students", label: "دانش‌آموزان" },
  { id: "attendance", label: "حضور و غیاب" },
  { id: "grades", label: "نمرات" },
  { id: "classlog", label: "دفتر کلاسی" },
  { id: "resources", label: "منابع" },
  { id: "assignments", label: "تکالیف" },
  { id: "reports", label: "گزارشات" },
  { id: "exams", label: "برنامه آزمون" },
  { id: "schedule", label: "برنامه هفتگی" },
] as const;

export type WorkspaceTab = (typeof TABS)[number]["id"];

const MODE_LABELS: Record<string, string> = {
  in_person: "حضوری",
  online: "آنلاین",
  offline: "آفلاین",
};

export function ClassWorkspaceTabs({
  activeTab,
  onTabChange,
  classRoomId,
  subjectId,
  scheduleId,
  students,
  attendanceDate,
  overview,
  subject,
  deliveryMode = "in_person",
}: {
  activeTab: WorkspaceTab;
  onTabChange: (tab: WorkspaceTab) => void;
  classRoomId: number;
  subjectId?: number | null;
  scheduleId?: number | null;
  students: ClassStudent[];
  attendanceDate?: string;
  overview?: {
    code?: string | null;
    grade_label?: string | null;
    students_count?: number;
  };
  subject?: {
    name: string;
    image_url?: string | null;
  } | null;
  deliveryMode?: string | null;
}) {
  const router = useRouter();
  const [openingSocial, setOpeningSocial] = useState(false);
  const mode = deliveryMode || "in_person";

  const openSocial = async () => {
    if (!subjectId) return;
    setOpeningSocial(true);
    try {
      const data = await apiGet<{ group_id: number; channel_id: number }>(
        `/social/pairs/resolve?class_room_id=${classRoomId}&subject_id=${subjectId}`,
      );
      const qs = new URLSearchParams();
      if (scheduleId) qs.set("schedule_id", String(scheduleId));
      router.push(`/social/${data.group_id}?${qs.toString()}`);
    } finally {
      setOpeningSocial(false);
    }
  };

  return (
    <div className="space-y-4">
      <TeacherHeroHeader
        leading={
          subject ? (
            <SubjectAvatar name={subject.name} imageUrl={subject.image_url} size="xl" className="ring-2 ring-white/30" />
          ) : undefined
        }
        title={subject?.name ?? overview?.code ?? String(classRoomId)}
        subtitle={`${overview?.code ?? "—"} · ${overview?.grade_label ?? "—"} | ${overview?.students_count ?? students.length} دانش‌آموز`}
        badge={
          <span className="rounded-full bg-white/20 px-3 py-1 text-xs font-medium backdrop-blur-sm">
            {MODE_LABELS[mode] ?? mode}
          </span>
        }
        actions={
          <div className="flex flex-wrap gap-2">
            {subjectId ? (
              <button
                type="button"
                disabled={openingSocial}
                onClick={() => void openSocial()}
                className="inline-flex items-center gap-1.5 rounded-xl bg-white/15 px-3.5 py-2 text-sm font-semibold text-white backdrop-blur-sm transition hover:bg-white/25 disabled:opacity-60"
              >
                {openingSocial ? "…" : "شبکه اجتماعی"}
              </button>
            ) : null}
            <Link
              href="/dashboard"
              className="inline-flex items-center gap-1.5 rounded-xl bg-white/15 px-3.5 py-2 text-sm font-semibold text-white backdrop-blur-sm transition hover:bg-white/25"
            >
              بازگشت به داشبورد
            </Link>
          </div>
        }
      />

      <ClassContextAlerts
        classRoomId={classRoomId}
        subjectId={subjectId}
        date={attendanceDate}
      />

      <div className="sticky top-[7.5rem] z-20 lg:top-[8.5rem]">
        <TeacherTabBar tabs={[...TABS]} active={activeTab} onChange={onTabChange} />
      </div>

      <div className="min-h-[320px] pb-28">
        {activeTab === "schedule" ? (
          <ClassWeeklyScheduleTab classRoomId={classRoomId} subjectId={subjectId} />
        ) : null}
        {activeTab === "exams" ? (
          <ClassExamsTab classRoomId={classRoomId} subjectId={subjectId} />
        ) : null}
        {activeTab === "students" ? (
          <ClassStudentsTab
            students={students}
            classRoomId={classRoomId}
            subjectId={subjectId}
            attendanceDate={attendanceDate}
          />
        ) : null}
        {activeTab === "attendance" ? (
          <ClassAttendanceTab
            classRoomId={classRoomId}
            scheduleId={scheduleId}
            subjectId={subjectId}
            attendanceDate={attendanceDate}
          />
        ) : null}
        {activeTab === "grades" ? (
          <ClassGradesTab classRoomId={classRoomId} subjectId={subjectId} students={students} />
        ) : null}
        {activeTab === "classlog" ? (
          <ClassLogTab
            classRoomId={classRoomId}
            subjectId={subjectId}
            logDate={attendanceDate ?? new Date().toISOString().slice(0, 10)}
            onHistoryDateSelect={(d) => {
              const params = new URLSearchParams();
              params.set("tab", "classlog");
              params.set("date", d);
              if (subjectId) params.set("subject_id", String(subjectId));
              if (scheduleId) params.set("schedule_id", String(scheduleId));
              router.push(`/teacher/classes/${classRoomId}?${params.toString()}`);
            }}
          />
        ) : null}
        {activeTab === "resources" ? (
          <ClassResourcesTab
            classRoomId={classRoomId}
            subjectId={subjectId}
            scheduleId={scheduleId}
            classLabel={[overview?.grade_label, overview?.code].filter(Boolean).join(" - ")}
          />
        ) : null}
        {activeTab === "assignments" ? (
          <ClassAssignmentsTab
            classRoomId={classRoomId}
            subjectId={subjectId}
            scheduleId={scheduleId}
          />
        ) : null}
        {activeTab === "reports" ? (
          <ClassReportsTab classRoomId={classRoomId} subjectId={subjectId} />
        ) : null}
      </div>
    </div>
  );
}