import Link from "next/link";
import { Pencil } from "lucide-react";
import { redirect } from "next/navigation";
import { BackgroundBlobs } from "@/components/background-blobs";
import { getSessionUser } from "@/lib/auth";
import { listMathPoints, MODULES } from "@/lib/math";

// xuchao: 数学思维课程编辑列表——按七大模块分组,点击进入单课编辑
export default async function MathAdmin() {
  const parent = await getSessionUser();
  if (!parent) redirect("/login");
  if (parent.role !== "parent") redirect("/kid");

  const points = await listMathPoints();

  return (
    <main className="relative mx-auto max-w-2xl space-y-5 p-4 pb-10">
      <BackgroundBlobs />
      <header className="flex items-center justify-between">
        <Link href="/parent" className="text-sm font-medium text-indigo-600">
          ← 返回家长中心
        </Link>
        <h1 className="text-xl font-extrabold text-slate-900">数学思维课程编辑</h1>
      </header>
      <p className="rounded-lg border-l-4 border-indigo-400 bg-indigo-50 px-3 py-2 text-sm text-indigo-800">
        点击任意课程即可修改标题、目标与课文内容,保存后孩子端立即生效。
      </p>

      {MODULES.map((mod) => {
        const group = points.filter((p) => p.module === mod.id);
        if (group.length === 0) return null;
        return (
          <section key={mod.id} className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
            <h2 className="mb-3 text-lg font-extrabold text-slate-900">
              {mod.name}
              <span className="ml-1 text-amber-500">{"★".repeat(mod.stars)}</span>
            </h2>
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
              {group.map((p) => (
                <Link
                  key={p.pointId}
                  href={`/parent/math/${p.pointId}`}
                  className="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-indigo-300"
                >
                  <Pencil className="size-3.5 shrink-0 text-indigo-400" />
                  <span className="truncate">{p.title}</span>
                </Link>
              ))}
            </div>
          </section>
        );
      })}
    </main>
  );
}