'use client';

import { useActionState, useEffect, useRef } from 'react';
import { CheckCircle2 } from 'lucide-react';
import { changePassword, updateProfile } from '@/app/actions/profile';
import { useMessages } from '@/i18n/client';
import { Field, SubmitButton } from '@/components/ui/Field';

function Saved({ text }: { text: string }) {
  return (
    <p role="status" className="flex items-center gap-1.5 text-[13px] font-medium text-wood">
      <CheckCircle2 className="size-4" aria-hidden />
      {text}
    </p>
  );
}

export function NameForm({ name, email }: { name: string; email: string }) {
  const t = useMessages().dash.profile;
  const [state, action] = useActionState(updateProfile, undefined);
  return (
    <form action={action} className="space-y-5">
      <Field label={t.name} name="name" defaultValue={name} autoComplete="name" errors={state?.errors?.name} required />
      <Field label={t.email} type="email" value={email} readOnly disabled hint={t.emailHint} />
      <div className="flex items-center gap-4">
        <SubmitButton className="w-auto px-6">{t.save}</SubmitButton>
        {state?.ok && <Saved text={t.saved} />}
      </div>
    </form>
  );
}

export function PasswordForm() {
  const t = useMessages().dash.profile;
  const [state, action] = useActionState(changePassword, undefined);
  const ref = useRef<HTMLFormElement>(null);
  useEffect(() => {
    if (state?.ok) ref.current?.reset();
  }, [state]);
  return (
    <form ref={ref} action={action} className="space-y-5">
      <Field label={t.current} name="current" type="password" autoComplete="current-password" errors={state?.errors?.current} required />
      <div className="grid gap-5 sm:grid-cols-2">
        <Field label={t.newPassword} name="password" type="password" autoComplete="new-password" errors={state?.errors?.password} required />
        <Field label={t.confirm} name="confirm" type="password" autoComplete="new-password" errors={state?.errors?.confirm} required />
      </div>
      <div className="flex items-center gap-4">
        <SubmitButton className="w-auto px-6">{t.changePassword}</SubmitButton>
        {state?.ok && <Saved text={t.passwordSaved} />}
      </div>
    </form>
  );
}