import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { db } from "@/db";
import { contests, games } from "@/db/schema";
import { eq } from "drizzle-orm";
import { getParticipant } from "@/lib/auth";
import { ContestTaker, GameRunner } from "@/components/game-engines";
import { faNum } from "@/lib/jalali";
import { ArrowRight, UserRound } from "lucide-react";

export const metadata = { title: "فعالیت آموزشی" };
export const dynamic = "force-dynamic";

export default async function PlayPage({ params }: { params: Promise<{ kind: string; id: string }> }) {
  const { kind, id } = await params;
  const me = await getParticipant();
  if (!me) redirect("/login?as=student");

  const numId = Number(id);

  let content: React.ReactNode = null;
  if (kind === "contest") {
    const c = (await db.select().from(contests).where(eq(contests.id, numId)).limit(1))[0];
    if (!c || !c.active) return <Blocked msg="این مسابقه فعال نیست." />;
    content = <ContestTaker contestId={c.id} title={c.title} timeMin={c.timeMin} questions={c.questions} />;
  } else if (kind === "game") {
    const g = (await db.select().from(games).where(eq(games.id, numId)).limit(1))[0];
    if (!g || !g.active) return <Blocked msg="این بازی فعال نیست." />;
    const words = (g.config?.words as string[] | undefined) ?? [];
    content = <GameRunner gameId={g.id} title={g.title} engine={g.engine} level={g.level} words={words} />;
  } else {
    return <Blocked msg="آدرس نامعتبر است." />;
  }

  return (
    <div className="pattern-hero arabesque min-h-screen px-4 py-6">
      <div className="mx-auto max-w-2xl">
        <div className="mb-5 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2.5 text-white">
            <Image src="/images/logo.png" alt="لوگو" width={40} height={40} className="rounded-full shadow ring-2 ring-amber-400/60" />
            <span className="text-sm font-black drop-shadow">مدرسهٔ شهید باهنر ملوران</span>
          </Link>
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-white/12 px-3.5 py-1.5 text-xs font-extrabold text-white ring-1 ring-white/20">
              <UserRound size={13} className="text-amber-300" /> {me.name}
            </span>
            <Link href="/" className="grid size-9 place-items-center rounded-full bg-white/12 text-white ring-1 ring-white/20 transition hover:bg-white/20"><ArrowRight size={16} /></Link>
          </div>
        </div>
        {content}
      </div>
    </div>
  );
}

function Blocked({ msg }: { msg: string }) {
  return (
    <div className="pattern-hero flex min-h-screen items-center justify-center p-4">
      <div className="glass w-full max-w-sm rounded-3xl p-8 text-center shadow-2xl">
        <p className="text-sm font-black text-emerald-950">{msg}</p>
        <Link href="/" className="mt-4 inline-block rounded-xl bg-emerald-700 px-6 py-2.5 text-xs font-black text-white">بازگشت</Link>
      </div>
    </div>
  );
}