"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { TeacherEmptyState } from "@/components/teacher/ui/TeacherEmptyState";
import { TeacherPanel } from "@/components/teacher/ui/TeacherPanel";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import { ApiError, apiGet } from "@/lib/api";

const DAY_NAMES = ["شنبه", "یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنجشنبه", "جمعه"];

interface ScheduleItem {
  id: number;
  day_of_week: number;
  starts_at?: string | null;
  ends_at?: string | null;
  room?: string | null;
  week_type_label?: string | null;
  subject?: { id: number; name: string; image_url?: string | null } | null;
  teacher?: { first_name?: string | null; last_name?: string | null } | null;
  period?: { title?: string | null } | null;
}

function teacherName(item: ScheduleItem) {
  const n = [item.teacher?.first_name, item.teacher?.last_name].filter(Boolean).join(" ");
  return n || "—";
}

export function ClassWeeklyScheduleTab({
  classRoomId,
  subjectId,
}: {
  classRoomId: number;
  subjectId?: number | null;
}) {
  const [items, setItems] = useState<ScheduleItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const rows = await apiGet<ScheduleItem[]>(`/schedules?class_room_id=${classRoomId}`);
      setItems(rows ?? []);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری برنامه");
    } finally {
      setLoading(false);
    }
  }, [classRoomId]);

  useEffect(() => {
    void load();
  }, [load]);

  const grouped = useMemo(() => {
    return DAY_NAMES.map((label, day) => ({
      day,
      label,
      items: items
        .filter((row) => row.day_of_week === day)
        .sort((a, b) => String(a.starts_at ?? "").localeCompare(String(b.starts_at ?? ""))),
    }));
  }, [items]);

  if (loading) return <PageContentSkeleton rows={6} />;

  return (
    <div className="space-y-4">
      {error ? <Alert tone="error">{error}</Alert> : null}

      {!items.length ? (
        <TeacherEmptyState title="برنامه‌ای ثبت نشده" description="برای این کلاس هنوز جلسه هفتگی تعریف نشده است." />
      ) : (
        <div className="grid gap-3 lg:grid-cols-2">
          {grouped.map((group) => (
            <TeacherPanel key={group.day}>
              <div className="mb-3">
                <h3 className="text-sm font-bold text-slate-800">{group.label}</h3>
              </div>
              {!group.items.length ? (
                <p className="text-sm text-slate-400">جلسه‌ای نیست.</p>
              ) : (
                <ul className="space-y-2">
                  {group.items.map((item) => {
                    const current = subjectId != null && item.subject?.id === subjectId;
                    return (
                      <li
                        key={item.id}
                        className={`flex items-center justify-between gap-3 rounded-2xl border px-3 py-2.5 ${
                          current
                            ? "border-teal-300 bg-teal-50 ring-1 ring-teal-200"
                            : "border-slate-100 bg-slate-50/70"
                        }`}
                      >
                        <div className="flex min-w-0 items-center gap-2.5">
                          <SubjectAvatar
                            name={item.subject?.name ?? "درس"}
                            imageUrl={item.subject?.image_url}
                            size="sm"
                          />
                          <div className="min-w-0">
                            <div className="truncate text-sm font-bold text-slate-900">
                              {item.subject?.name ?? "—"}
                            </div>
                            <div className="text-xs text-slate-500">
                              {teacherName(item)}
                              {item.room ? ` · ${item.room}` : ""}
                            </div>
                          </div>
                        </div>
                        <div className="shrink-0 text-left">
                          <div className="flex items-baseline justify-end gap-1.5">
                            {item.period?.title ? (
                              <span className="text-sm font-bold text-slate-800">{item.period.title}</span>
                            ) : null}
                            <span className="text-xs font-medium text-slate-400">
                              {item.starts_at ?? "—"}–{item.ends_at ?? "—"}
                            </span>
                          </div>
                        </div>
                      </li>
                    );
                  })}
                </ul>
              )}
            </TeacherPanel>
          ))}
        </div>
      )}
    </div>
  );
}