import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { ShieldCheck, PencilLine, GraduationCap, UserRound, KeyRound, ArrowRight, CheckCircle2 } from "lucide-react";
import { getSession } from "@/lib/auth";
import { login } from "@/lib/actions";
import { ActionForm, SubmitBtn } from "@/components/ui-client";

export const dynamic = "force-dynamic";
export const metadata = { title: "ورود به سامانه" };

const ROLES = [
  { key: "admin", label: "مدیریت", icon: ShieldCheck },
  { key: "teacher", label: "دبیر", icon: PencilLine },
  { key: "student", label: "دانش‌آموز", icon: GraduationCap },
];

export default async function LoginPage({ searchParams }: { searchParams: Promise<{ as?: string; setup?: string }> }) {
  const sp = await searchParams;
  const s = await getSession();
  if (s) redirect(s.role === "admin" ? "/admin" : s.role === "teacher" ? "/teacher" : "/student");
  const active = ROLES.some((r) => r.key === sp.as) ? sp.as! : "student";

  return (
    <div className="pattern-hero arabesque min-h-screen p-4">
      <div className="mx-auto flex min-h-[calc(100vh-2rem)] max-w-5xl flex-col items-center justify-center">
        <Link href="/" className="mb-6 flex items-center gap-3">
          <Image src="/images/logo.png" alt="لوگو" width={56} height={56} className="rounded-full ring-2 ring-amber-400/60 shadow-lg" />
          <div className="text-white">
            <div className="text-base font-black">مدرسهٔ شهید باهنر ملوران</div>
            <div className="text-[11px] text-emerald-100/70">ورود به سامانهٔ آموزشی</div>
          </div>
        </Link>

        <div className="glass anim-pop w-full max-w-md rounded-3xl border border-white/30 p-7 shadow-2xl sm:p-8">
          {/* نقش‌ها */}
          <div className="mb-6 grid grid-cols-3 gap-2">
            {ROLES.map((r) => {
              const Icon = r.icon;
              const isA = r.key === active;
              return (
                <Link key={r.key} href={`/login?as=${r.key}`}
                  className={`flex flex-col items-center gap-1.5 rounded-2xl border px-2 py-3 text-xs font-extrabold transition ${isA ? "border-emerald-700 bg-emerald-700 text-white shadow-md" : "border-emerald-900/12 bg-white/60 text-emerald-900 hover:bg-white"}`}>
                  <Icon size={19} />
                  {r.label}
                </Link>
              );
            })}
          </div>

          {sp.setup && (
            <div className="mb-4 flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-xs font-bold text-emerald-700">
              <CheckCircle2 size={15} /> نصب با موفقیت انجام شد. حالا وارد شوید.
            </div>
          )}

          <ActionForm action={login} className="space-y-4">
            <label className="block">
              <span className="mb-1.5 flex items-center gap-1.5 text-xs font-extrabold text-emerald-900/80">
                <UserRound size={14} /> {active === "admin" ? "نام کاربری (admin)" : "کد ملی"}
              </span>
              <input name="code" required placeholder={active === "admin" ? "admin" : "کد ملی ۱۰ رقمی"} inputMode={active === "admin" ? "text" : "numeric"}
                className="w-full rounded-xl border border-emerald-900/15 bg-white px-4 py-3 text-sm font-bold text-emerald-950 outline-none focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/25" dir="ltr" />
            </label>
            <label className="block">
              <span className="mb-1.5 flex items-center gap-1.5 text-xs font-extrabold text-emerald-900/80"><KeyRound size={14} /> رمز عبور</span>
              <input name="password" type="password" required placeholder="••••••••"
                className="w-full rounded-xl border border-emerald-900/15 bg-white px-4 py-3 text-sm text-emerald-950 outline-none focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/25" dir="ltr" />
            </label>
            <SubmitBtn className="w-full py-3.5">ورود به پنل</SubmitBtn>
          </ActionForm>

          <p className="mt-4 rounded-xl bg-emerald-900/5 px-4 py-2.5 text-center text-[11px] leading-5 text-emerald-800/70">
            رمز اولیهٔ دبیران و دانش‌آموزان، همان <b>کد ملی</b> است؛ پس از نخستین ورود باید آن را تغییر دهید.
          </p>
        </div>

        <Link href="/" className="mt-6 inline-flex items-center gap-1.5 text-xs font-bold text-emerald-100/80 transition hover:text-white">
          <ArrowRight size={14} /> بازگشت به صفحهٔ اصلی
        </Link>
      </div>
    </div>
  );
}