import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { db } from "@/db";
import {
  announcements as anns, slides as slidesT, surveys, riddles, contests, games,
  users, scores, settings, books, questions,
} from "@/db/schema";
import { eq, desc, asc, sql, and } from "drizzle-orm";
import {
  GraduationCap, Users, BookOpen, FileQuestion, ShieldCheck, PencilLine,
  Library, Trophy, Medal, Crown, Landmark, Phone, MapPin,
} from "lucide-react";
import { faNum } from "@/lib/jalali";
import { LiveClock, NewsTicker, HeroSlider, ActionButtons, AutoPopup, LoginLink, PWARegister, InstallAppButton, PwaInstallBanner } from "@/components/home-client";
import { Badge } from "@/components/ui";

export const dynamic = "force-dynamic";

async function safe<T>(fn: () => Promise<T>, fallback: T): Promise<T> {
  try { return await fn(); } catch { return fallback; }
}

export default async function HomePage() {
  // اگر مدیر وجود ندارد → نصب
  const admin = await safe(async () => {
    const r = await db.select({ id: users.id }).from(users).where(eq(users.role, "admin")).limit(1);
    return r[0] ?? null;
  }, "ERR" as unknown as null);
  if (admin === ("ERR" as unknown as null) || !admin) redirect("/setup");

  const setts = await db.select().from(settings);
  const get = (k: string, d: string) => setts.find((s) => s.key === k)?.value ?? d;
  const schoolName = get("schoolName", "دبیرستان دورهٔ اول شهید باهنر ملوران");
  const motto = get("motto", "علم، ایمان، تلاش — مدرسه‌ای برای آینده‌سازان");

  const [annList, slideList, surveyRow, riddleRow, contestList, gameList] = await Promise.all([
    db.select().from(anns).where(eq(anns.active, true)).orderBy(desc(anns.createdAt)).limit(6),
    db.select().from(slidesT).where(eq(slidesT.active, true)).orderBy(asc(slidesT.sort)).limit(8),
    db.select().from(surveys).where(eq(surveys.active, true)).orderBy(desc(surveys.createdAt)).limit(1),
    db.select().from(riddles).where(eq(riddles.active, true)).orderBy(desc(riddles.createdAt)).limit(1),
    db.select({ id: contests.id, title: contests.title }).from(contests).where(eq(contests.active, true)).orderBy(desc(contests.createdAt)).limit(12),
    db.select({ id: games.id, title: games.title }).from(games).where(eq(games.active, true)).orderBy(asc(games.title)).limit(12),
  ]);

  const popupData = {
    survey: surveyRow[0] ? { id: surveyRow[0].id, title: surveyRow[0].title, question: surveyRow[0].question, options: surveyRow[0].options } : null,
    riddle: riddleRow[0] ? { id: riddleRow[0].id, question: riddleRow[0].question } : null,
    contests: contestList,
    games: gameList,
  };

  const tops = await db
    .select({ firstName: users.firstName, lastName: users.lastName, avg: sql<number>`round(avg(${scores.score})::numeric, 1)` })
    .from(scores).innerJoin(users, eq(scores.studentId, users.id))
    .groupBy(users.id).orderBy(sql`avg(${scores.score}) desc`).limit(3);

  const [{ c: studentCount }] = await db.select({ c: sql<number>`count(*)::int` }).from(users).where(eq(users.role, "student"));
  const [{ c: teacherCount }] = await db.select({ c: sql<number>`count(*)::int` }).from(users).where(eq(users.role, "teacher"));
  const [{ c: bookCount }] = await db.select({ c: sql<number>`count(*)::int` }).from(books);
  const [{ c: qCount }] = await db.select({ c: sql<number>`count(*)::int` }).from(questions);

  const loginCards = [
    { role: "مدیریت", desc: "پنل کامل مدیریت مدرسه", icon: <ShieldCheck size={24} />, href: "/login?as=admin", ring: "ring-amber-500/30" },
    { role: "دبیران", desc: "آزمون، نمره و بانک سوالات", icon: <PencilLine size={24} />, href: "/login?as=teacher", ring: "ring-emerald-500/30" },
    { role: "دانش‌آموزان", desc: "کارنامه، آزمون و فعالیت‌ها", icon: <GraduationCap size={24} />, href: "/login?as=student", ring: "ring-sky-500/30" },
  ];

  return (
    <div className="min-h-screen bg-transparent">
      <PWARegister />
      <PwaInstallBanner />
      {/* ---------- هدر ---------- */}
      <header className="home-public-header arabesque relative overflow-hidden pb-16">
        <div className="pointer-events-none absolute -right-24 -top-24 size-80 rounded-full bg-amber-400/10 blur-3xl" />
        <div className="pointer-events-none absolute -left-24 bottom-0 size-72 rounded-full bg-emerald-400/10 blur-3xl" />
        <div className="relative mx-auto max-w-6xl px-4 pt-6">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="site-eyebrow flex items-center gap-2 text-xs font-black">
              <Landmark size={14} />
              در خدمت تعلیم و تربیت نسل آینده
            </div>
            <LiveClock />
          </div>
          <div className="mt-8 flex flex-col items-center text-center">
            <div className="anim-float relative">
              <div className="absolute inset-0 -m-3 rounded-full bg-amber-400/25 blur-xl" />
              <Image src="/images/logo.png" alt="لوگوی مدرسه شهید باهنر" width={104} height={104} priority
                className="relative rounded-full ring-4 ring-amber-400/60 shadow-2xl shadow-black/40" />
            </div>
            <h1 className="site-school-title anim-fade-up mt-5 text-3xl font-black leading-tight sm:text-4xl md:text-5xl">
              {schoolName}
            </h1>
            <p className="site-motto anim-fade-up d1 mt-3 max-w-xl text-sm font-extrabold leading-7 sm:text-base">
              {motto}
            </p>
            <div className="anim-fade-up d2 mt-6 flex flex-wrap items-center justify-center gap-3">
              <LoginLink />
              <InstallAppButton />
            </div>
          </div>
        </div>
      </header>

      {/* ---------- اطلاعیه متحرک ---------- */}
      <div className="relative z-20">
        <NewsTicker items={annList.map((a) => ({ id: a.id, title: a.title, body: a.body }))} />
      </div>

      <main className="mx-auto max-w-6xl px-4 pb-16">
        {/* ---------- اسلایدر ---------- */}
        <section className="anim-fade-up d2">
          <HeroSlider slides={slideList.map((s) => ({ id: s.id, imageUrl: s.imageUrl, caption: s.caption }))} />
        </section>

        {/* ---------- دکمه‌های فعالیت ---------- */}
        <section className="mt-10">
          <div className="mb-4 text-center">
            <h2 className="text-xl font-black text-emerald-950 sm:text-2xl">فعالیت‌های دانش‌آموزی</h2>
            <p className="mt-1 text-sm text-emerald-800/60">با وارد کردن کد ملی شرکت کنید — پاسخ شما در سامانه ذخیره می‌شود</p>
          </div>
          <ActionButtons data={popupData} />
          {(popupData.survey || popupData.riddle) && <AutoPopup data={popupData} />}
        </section>

        {/* ---------- ورود ---------- */}
        <section className="mt-12">
          <div className="mb-4 flex items-center gap-2">
            <span className="h-5 w-1.5 rounded-full bg-gradient-to-b from-amber-400 to-amber-600" />
            <h2 className="text-xl font-black text-emerald-950">ورود به پنل‌ها</h2>
          </div>
          <div className="grid gap-4 sm:grid-cols-3">
            {loginCards.map((c, i) => (
              <Link key={c.role} href={c.href}
                className={`anim-fade-up d${i + 1} group rounded-2xl border border-emerald-900/10 bg-white/85 p-6 shadow-sm ring-1 ${c.ring} backdrop-blur transition hover:-translate-y-1 hover:shadow-xl`}>
                <div className="mb-3 grid size-12 place-items-center rounded-2xl bg-gradient-to-br from-emerald-700 to-emerald-900 text-amber-300 shadow-md transition group-hover:scale-110">{c.icon}</div>
                <h3 className="text-lg font-black text-emerald-950">{c.role}</h3>
                <p className="mt-1 text-xs leading-6 text-emerald-800/65">{c.desc}</p>
                <span className="mt-3 inline-flex items-center gap-1 text-xs font-extrabold text-amber-700">ورود ←</span>
              </Link>
            ))}
          </div>
        </section>

        {/* ---------- برترین‌ها ---------- */}
        <section className="mt-12">
          <div className="mb-4 flex items-center gap-2">
            <span className="h-5 w-1.5 rounded-full bg-gradient-to-b from-amber-400 to-amber-600" />
            <h2 className="text-xl font-black text-emerald-950">برترین‌های تحصیلی</h2>
            <Badge tone="amber">رتبه‌بندی بر اساس میانگین نمرات</Badge>
          </div>
          {tops.length === 0 ? (
            <div className="rounded-2xl border border-dashed border-emerald-900/20 bg-white/70 px-4 py-10 text-center text-sm text-emerald-800/60">
              به‌زودی برترین‌های ماه اینجا معرفی می‌شوند...
            </div>
          ) : (
            <div className="mx-auto grid max-w-3xl grid-cols-3 items-end gap-3 sm:gap-5">
              {[tops[1], tops[0], tops[2]].map((t, i) => {
                if (!t) return <div key={i} />;
                const rank = i === 1 ? 1 : i === 0 ? 2 : 3;
                const heights = rank === 1 ? "pt-10 pb-8" : rank === 2 ? "pt-7 pb-6" : "pt-6 pb-5";
                const medal = rank === 1 ? <Crown className="text-amber-400" size={26} /> : rank === 2 ? <Medal className="text-slate-400" size={24} /> : <Trophy className="text-amber-700" size={22} />;
                return (
                  <div key={i} className={`anim-fade-up d${rank} relative rounded-t-3xl bg-gradient-to-b ${rank === 1 ? "from-amber-300/90 to-amber-500/80 shadow-xl shadow-amber-900/20" : "from-emerald-600 to-emerald-800 shadow-lg"} px-2 text-center text-white ${heights}`}>
                    <div className="absolute -top-5 right-1/2 translate-x-1/2 grid size-11 place-items-center rounded-full bg-white shadow-lg ring-4 ring-white/60">{medal}</div>
                    <div className="mt-2 text-sm font-black sm:text-base">{t.firstName} {t.lastName}</div>
                    <div className="mt-1 inline-block rounded-full bg-black/15 px-3 py-0.5 text-xs font-black" dir="ltr">{faNum(t.avg)} / ۲۰</div>
                    {rank === 1 && <div className="mt-1.5 text-[10px] font-black tracking-widest text-amber-950/70">برترین ماه</div>}
                  </div>
                );
              })}
            </div>
          )}
        </section>

        {/* ---------- آمار ---------- */}
        <section className="mt-12 grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
          {[
            { icon: <GraduationCap size={22} />, v: studentCount, l: "دانش‌آموز" },
            { icon: <Users size={22} />, v: teacherCount, l: "دبیر" },
            { icon: <BookOpen size={22} />, v: bookCount, l: "کتاب درسی" },
            { icon: <FileQuestion size={22} />, v: qCount, l: "سؤال در بانک" },
          ].map((s, i) => (
            <div key={i} className={`anim-fade-up d${i + 1} rounded-2xl border border-emerald-900/10 bg-white/85 p-5 text-center shadow-sm backdrop-blur`}>
              <div className="mx-auto mb-2 grid size-11 place-items-center rounded-xl bg-emerald-700/10 text-emerald-800">{s.icon}</div>
              <div className="text-2xl font-black text-emerald-950">{faNum(s.v)}</div>
              <div className="text-xs font-bold text-emerald-800/60">{s.l}</div>
            </div>
          ))}
        </section>

        {/* ---------- امکانات ---------- */}
        <section className="mt-12">
          <div className="mb-4 flex items-center gap-2">
            <span className="h-5 w-1.5 rounded-full bg-gradient-to-b from-amber-400 to-amber-600" />
            <h2 className="text-xl font-black text-emerald-950">امکانات سامانه</h2>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {[
              { icon: <Library size={20} />, t: "بانک سوالات جامع", d: "صدها سؤال تستی، صحیح‌غلط، کوتاه‌پاسخ و تشریحی برای درس‌های پایه‌های هفتم تا نهم" },
              { icon: <FileQuestion size={20} />, t: "آزمون آنلاین", d: "برگزاری آزمون با زمان‌بندی دقیق، تصحیح خودکار و کارنامهٔ لحظه‌ای" },
              { icon: <Trophy size={20} />, t: "مسابقات هیجانی", d: "مسابقه‌های موضوعی با رتبه‌بندی و جوایز مدیریت مدرسه" },
              { icon: <Users size={20} />, t: "حضور و غیاب و انضباط", d: "ثبت روزانهٔ حضور، غیبت و موارد انضباطی مثبت و منفی" },
            ].map((f, i) => (
              <div key={i} className={`anim-fade-up d${(i % 3) + 1} rounded-2xl border border-emerald-900/10 bg-white/85 p-5 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-md`}>
                <div className="mb-2.5 inline-grid size-10 place-items-center rounded-xl bg-gradient-to-br from-amber-400 to-amber-600 text-white shadow">{f.icon}</div>
                <h3 className="text-sm font-black text-emerald-950">{f.t}</h3>
                <p className="mt-1 text-xs leading-6 text-emerald-800/65">{f.d}</p>
              </div>
            ))}
          </div>
        </section>
      </main>

      {/* ---------- فوتر ---------- */}
      <footer className="pattern-hero arabesque relative mt-4 text-emerald-50">
        <div className="mx-auto max-w-6xl px-4 py-10">
          <div className="flex flex-col items-center gap-4 text-center sm:flex-row sm:justify-between sm:text-right">
            <div className="flex items-center gap-3">
              <Image src="/images/logo.png" alt="لوگو" width={48} height={48} className="rounded-full ring-2 ring-amber-400/50" />
              <div>
                <div className="text-sm font-black">{schoolName}</div>
                <div className="text-xs text-emerald-100/60">{motto}</div>
              </div>
            </div>
            <div className="space-y-1 text-xs text-emerald-100/70">
              <div className="flex items-center justify-center gap-1.5 sm:justify-start"><MapPin size={13} className="text-amber-300" /> خوزستان، ملوران</div>
              <div className="flex items-center justify-center gap-1.5 sm:justify-start"><Phone size={13} className="text-amber-300" /> دفتر مدرسه: ۰۶۱-۰۰۰۰۰۰۰</div>
            </div>
          </div>
          <div className="mt-6 border-t border-white/10 pt-4 text-center text-[11px] text-emerald-100/50">
            سامانهٔ آموزشی مدرسهٔ شهید باهنر ملوران — سال تحصیلی جاری • ورود {faNum(1403)}
          </div>
        </div>
      </footer>
    </div>
  );
}