import Link from "next/link";
import { db } from "@/db";
import { exams, examAttempts, questions, scores, users } from "@/db/schema";
import { eq, sql, desc, inArray } from "drizzle-orm";
import { LayoutDashboard, FileQuestion, Library, ClipboardList, TrendingUp } from "lucide-react";
import { StatCard, Card, PageTitle, SectionTitle, Badge } from "@/components/ui";
import { BarChartBox } from "@/components/ui-client";
import { requireRole, getFullUser } from "@/lib/auth";
import { faNum, fmtJFull } from "@/lib/jalali";

export const metadata = { title: "داشبورد دبیر" };

export default async function TeacherDashboard() {
  const s = await requireRole("teacher");
  const u = await getFullUser();
  const subjects = u?.extra?.subjects ?? [];

  const myExams = await db.select().from(exams).where(eq(exams.teacherId, s.id)).orderBy(desc(exams.createdAt));
  const examIds = myExams.map((e) => e.id);
  const attempts = examIds.length
    ? await db.select().from(examAttempts).where(inArray(examAttempts.examId, examIds))
    : [];
  const myQuestions = await db.select({ id: questions.id }).from(questions).where(eq(questions.createdBy, s.id));
  const myScores = await db.select({ score: scores.score }).from(scores).where(eq(scores.teacherId, s.id));

  // نمودار: میانگین نمرهٔ دانش‌آموزان بر اساس نمرات ثبتی من، ۸ نفر اول
  const stScores = await db
    .select({ fn: users.firstName, ln: users.lastName, avg: sql<number>`round(avg(${scores.score})::numeric,1)` })
    .from(scores).innerJoin(users, eq(scores.studentId, users.id))
    .where(eq(scores.teacherId, s.id)).groupBy(users.id)
    .orderBy(sql`avg(${scores.score}) desc`).limit(8);

  const activeExamCount = myExams.filter((e) => e.active).length;

  return (
    <div>
      <PageTitle title={`سلام، ${s.name}`} subtitle={subjects.length ? `دروس شما: ${subjects.join("، ")}` : "داشبورد دبیر"} icon={<LayoutDashboard size={22} />} />

      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="آزمون‌های من" value={myExams.length} icon={<FileQuestion size={20} />} />
        <StatCard label="آزمون فعال" value={activeExamCount} icon={<FileQuestion size={20} />} tone="amber" />
        <StatCard label="سؤال‌های ثبتی من" value={myQuestions.length} icon={<Library size={20} />} tone="blue" />
        <StatCard label="نمرهٔ ثبت‌شده" value={myScores.length} icon={<ClipboardList size={20} />} tone="rose" />
      </div>

      <div className="mt-6 grid gap-4 lg:grid-cols-3">
        <Card className="p-5 lg:col-span-2">
          <div className="mb-3 flex items-center gap-2 text-sm font-extrabold text-emerald-950"><TrendingUp size={16} className="text-emerald-700" /> برترین دانش‌آموزان بر اساس نمرات شما</div>
          {stScores.length === 0 ? (
            <p className="py-10 text-center text-xs text-emerald-800/50">هنوز نمره‌ای ثبت نکرده‌اید. از «کلاس، نمره و انضباط» شروع کنید.</p>
          ) : (
            <BarChartBox data={stScores.map((x) => ({ نام: `${x.fn} ${x.ln[0]}.`, میانگین: x.avg }))} xKey="نام" yKey="میانگین" color="#d97706" />
          )}
        </Card>
        <Card className="p-5">
          <div className="mb-3 text-sm font-extrabold text-emerald-950">آزمون‌های اخیر</div>
          {myExams.length === 0 && <p className="py-10 text-center text-xs text-emerald-800/50">آزمونی نساخته‌اید.</p>}
          <ul className="space-y-2">
            {myExams.slice(0, 6).map((e) => (
              <li key={e.id} className="rounded-xl bg-emerald-50/70 px-3.5 py-2.5 text-xs">
                <div className="flex items-center justify-between">
                  <span className="font-extrabold text-emerald-950">{e.title}</span>
                  {e.active ? <Badge tone="green">فعال</Badge> : <Badge tone="gray">غیرفعال</Badge>}
                </div>
                <div className="mt-0.5 text-[10px] text-emerald-800/60">
                  شروع: {fmtJFull(e.startAt)} — مدت: {faNum(e.durationMin)} دقیقه
                </div>
              </li>
            ))}
          </ul>
          <Link href="/teacher/exams" className="mt-3 block text-center text-xs font-extrabold text-amber-700 hover:underline">مدیریت آزمون‌ها ←</Link>
        </Card>
      </div>

      <div className="mt-6 grid gap-4 sm:grid-cols-3">
        {[
          { href: "/teacher/bank", t: "بانک سوالات", d: "افزودن سؤال دستی یا اکسل برای درس‌های هر پایه", icon: <Library size={20} /> },
          { href: "/teacher/exams", t: "ساخت آزمون", d: "انتخاب سؤال از بانک، زمان‌بندی و تحلیل نتایج", icon: <FileQuestion size={20} /> },
          { href: "/teacher/class", t: "کلاس و نمرات", d: "ثبت نمرهٔ روزانه/ماهانه، انضباط و غیبت", icon: <ClipboardList size={20} /> },
        ].map((c) => (
          <Link key={c.href} href={c.href} className="group rounded-2xl border border-emerald-900/10 bg-white/85 p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg">
            <div className="mb-2.5 inline-grid size-10 place-items-center rounded-xl bg-gradient-to-br from-emerald-700 to-emerald-900 text-amber-300 transition group-hover:scale-110">{c.icon}</div>
            <div className="text-sm font-black text-emerald-950">{c.t}</div>
            <div className="mt-1 text-xs leading-6 text-emerald-800/60">{c.d}</div>
          </Link>
        ))}
      </div>
    </div>
  );
}