"use client";

import { changeOwnAdminPasswordAction } from "@/app/admin/actions";
import { useActionState } from "react";

export default function AdminPasswordForm({ forced = false }: { forced?: boolean }) {
  const [state, action, pending] = useActionState(changeOwnAdminPasswordAction, null);

  return (
    <form action={action} className="space-y-5">
      {forced ? (
        <div className="rounded-2xl border border-ember/30 bg-ember/[0.07] p-4 text-sm leading-6 text-fg-secondary">
          Bu hesap geçici parolayla açıldı. Yönetim paneline devam etmeden önce yalnız sizin bildiğiniz güçlü bir parola belirleyin.
        </div>
      ) : null}
      <label className="block space-y-2">
        <span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-fg-muted">Mevcut parola</span>
        <input name="currentPassword" type="password" autoComplete="current-password" required maxLength={72} className="w-full rounded-2xl border border-border bg-white/[0.035] px-4 py-3 text-sm outline-none focus:border-ember/50" />
      </label>
      <label className="block space-y-2">
        <span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-fg-muted">Yeni parola</span>
        <input name="newPassword" type="password" autoComplete="new-password" required minLength={12} maxLength={72} className="w-full rounded-2xl border border-border bg-white/[0.035] px-4 py-3 text-sm outline-none focus:border-ember/50" />
      </label>
      <label className="block space-y-2">
        <span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-fg-muted">Yeni parola tekrarı</span>
        <input name="newPasswordConfirmation" type="password" autoComplete="new-password" required minLength={12} maxLength={72} className="w-full rounded-2xl border border-border bg-white/[0.035] px-4 py-3 text-sm outline-none focus:border-ember/50" />
      </label>
      <p className="text-xs leading-5 text-fg-muted">En az 12 karakter; büyük-küçük harf, sayı ve özel karakter içermeli, 72 UTF-8 baytını aşmamalıdır.</p>
      {state?.error ? <div className="rounded-2xl border border-red-500/25 bg-red-500/[0.07] p-4 text-sm text-red-300">{state.error}</div> : null}
      <button type="submit" disabled={pending} className="w-full rounded-full bg-ember px-5 py-3.5 text-xs font-semibold uppercase tracking-[0.15em] text-surface-0 disabled:opacity-50">
        {pending ? "Güvenli biçimde kaydediliyor…" : "Parolayı değiştir"}
      </button>
    </form>
  );
}