"use client";

import { ChangePasswordForm } from "@school/ui";
import { useRouter } from "next/navigation";
import { useMemo } from "react";
import { BrandingStyles } from "@/components/app/BrandingStyles";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { AdminUser, changeOwnPassword, clearToken, getStoredUser, requestPasswordChangeOtp } from "@/lib/api";
import { useBranding } from "@/components/app/BrandingProvider";
import { brandingLogoUrl } from "@/lib/branding";

export default function ChangePasswordPage() {
  const router = useRouter();
  const branding = useBranding();
  const logoSrc = brandingLogoUrl(branding.logo_url);
  const user = getStoredUser<AdminUser>();
  const reasons = user?.password_change_reasons ?? [];
  const forced = Boolean(user?.password_change_required);

  const api = useMemo(
    () => ({
      requestOtp: requestPasswordChangeOtp,
      changePassword: changeOwnPassword,
    }),
    [],
  );

  return (
    <div className="flex min-h-screen flex-col">
      <BrandingStyles branding={branding} />
      <header className="px-4 py-8 text-center text-white" style={{ background: "var(--header-gradient)" }}>
        {logoSrc ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={logoSrc} alt="" className="mx-auto mb-3 h-14 w-14 rounded-2xl bg-white object-contain" />
        ) : null}
        <h1 className="text-xl font-bold">{branding.admin_title}</h1>
        <p className="mt-1 text-sm text-white/80">تغییر رمز عبور</p>
      </header>
      <main className="mx-auto w-full max-w-md flex-1 px-4 py-6">
        <div className="rounded-2xl border border-[var(--border)] bg-white p-5 shadow-card">
          {!user ? (
            <Alert tone="warning">برای تغییر رمز ابتدا وارد شوید.</Alert>
          ) : (
            <ChangePasswordForm
              api={api}
              forced={forced}
              reasons={reasons}
              onSuccess={() => {
                router.replace("/select-context");
              }}
            />
          )}
          <Button
            variant="secondary"
            className="mt-4 w-full"
            onClick={() => {
              clearToken();
              router.replace("/login");
            }}
          >
            خروج
          </Button>
        </div>
      </main>
    </div>
  );
}