"use client";

import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/Button";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import { TeacherModal } from "@/components/teacher/ui/TeacherModal";

export interface TodayScheduleItem {
  schedule_id: number;
  class_room_id: number;
  subject_id: number;
  delivery_mode?: string;
  subject_name?: string | null;
  subject_image_url?: string | null;
  class_code?: string | null;
  class_name?: string | null;
  grade_label?: string | null;
  students_count: number;
  starts_at?: string | null;
  ends_at?: string | null;
  period_title?: string | null;
  room?: string | null;
  day_name?: string | null;
  date?: string | null;
}

export function SessionQuickModal({
  item,
  onClose,
}: {
  item: TodayScheduleItem | null;
  onClose: () => void;
}) {
  const router = useRouter();

  if (!item) return null;

  const openClass = () => {
    const params = new URLSearchParams({
      subject_id: String(item.subject_id),
      schedule_id: String(item.schedule_id),
    });
    if (item.date) params.set("date", item.date);
    if (item.delivery_mode) params.set("delivery_mode", item.delivery_mode);
    router.push(`/teacher/classes/${item.class_room_id}?${params.toString()}`);
  };

  return (
    <TeacherModal
      open
      onClose={onClose}
      title={item.subject_name ?? "جلسه"}
      subtitle={`کد کلاس: ${item.class_code ?? "—"}`}
      footer={
        <div className="flex gap-2">
          <Button block onClick={openClass}>
            مشاهده کلاس
          </Button>
          <Button variant="secondary" block onClick={onClose}>
            بستن
          </Button>
        </div>
      }
    >
      <div className="flex items-center gap-3">
        <SubjectAvatar
          name={item.subject_name ?? "درس"}
          imageUrl={item.subject_image_url}
          size="lg"
        />
        <div className="flex flex-wrap gap-2">
        <span className="rounded-lg bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-800">
          برنامه‌ریزی شده
        </span>
        {item.day_name ? (
          <span className="rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">
            {item.day_name}
          </span>
        ) : null}
        </div>
      </div>

      <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
        <InfoCard label="زمان" value={`${item.starts_at ?? "—"} – ${item.ends_at ?? "—"}`} />
        <InfoCard label="پایه" value={item.grade_label || "—"} />
        <InfoCard label="دانش‌آموزان" value={`${item.students_count} نفر`} />
        <InfoCard label="شناسه" value={String(item.schedule_id)} />
      </div>
    </TeacherModal>
  );
}

function InfoCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-xl border border-slate-200 bg-slate-50 p-3">
      <div className="text-xs font-medium text-slate-500">{label}</div>
      <div className="mt-1 font-bold text-slate-900">{value}</div>
    </div>
  );
}