import Image from "next/image";
import { redirect } from "next/navigation";
import { KeyRound, ShieldAlert } from "lucide-react";
import { getSession } from "@/lib/auth";
import { changePassword } from "@/lib/actions";
import { ActionForm, SubmitBtn } from "@/components/ui-client";

export const dynamic = "force-dynamic";
export const metadata = { title: "تغییر رمز عبور" };

export default async function ChangePasswordPage() {
  const s = await getSession();
  if (!s) redirect("/login");
  return (
    <div className="pattern-hero arabesque flex min-h-screen items-center justify-center p-4">
      <div className="glass anim-pop w-full max-w-md rounded-3xl border border-white/30 p-8 shadow-2xl">
        <div className="flex flex-col items-center text-center">
          <Image src="/images/logo.png" alt="لوگو" width={72} height={72} className="rounded-full ring-4 ring-amber-400/60 shadow-xl" />
          <h1 className="mt-4 text-xl font-black text-emerald-950">تغییر رمز عبور</h1>
          <p className="mt-1.5 flex items-center gap-1.5 text-xs font-bold text-amber-700">
            <ShieldAlert size={14} /> به دلایل امنیتی، در نخستین ورود باید رمز خود را تغییر دهید.
          </p>
        </div>
        <ActionForm action={changePassword} className="mt-6 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"><KeyRound size={14} /> رمز فعلی (کد ملی)</span>
            <input name="oldPassword" type="password" required className="w-full rounded-xl border border-emerald-900/15 bg-white px-4 py-3 text-sm 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="newPassword" type="password" required minLength={6} className="w-full rounded-xl border border-emerald-900/15 bg-white px-4 py-3 text-sm 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="newPassword2" type="password" required minLength={6} className="w-full rounded-xl border border-emerald-900/15 bg-white px-4 py-3 text-sm 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-3 text-center text-[11px] text-emerald-800/60">کاربر: {s.name}</p>
      </div>
    </div>
  );
}