'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { updateAccountProfile, type ProfileFormState } from '@/app/account/actions';

const initialState: ProfileFormState = undefined;

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="btn-primary disabled:opacity-60">
      {pending ? 'Saving…' : 'Save Changes'}
    </button>
  );
}

export function ProfileForm({ initialName, initialPhone }: { initialName: string; initialPhone: string }) {
  const [state, formAction] = useFormState(updateAccountProfile, initialState);
  const errors = state?.errors ?? {};

  return (
    <form action={formAction} className="mt-5 space-y-5">
      {state?.success && (
        <div className="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
          Profile updated.
        </div>
      )}

      {Object.keys(errors).length > 0 && (
        <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <ul className="list-inside list-disc">
            {Object.values(errors).flat().map((error) => (
              <li key={error}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label className="block text-sm font-semibold text-navy-800">Full Name</label>
          <input
            type="text"
            name="name"
            defaultValue={initialName}
            required
            className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">Phone Number</label>
          <input
            type="tel"
            name="phone_number"
            defaultValue={initialPhone}
            className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
          />
        </div>
      </div>

      <div className="border-t border-navy-100 pt-5">
        <p className="text-xs font-semibold uppercase tracking-wide text-navy-500">Change Password (optional)</p>
        <div className="mt-3 grid gap-5 sm:grid-cols-3">
          <div>
            <label className="block text-sm font-semibold text-navy-800">Current Password</label>
            <input
              type="password"
              name="current_password"
              className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
            />
          </div>
          <div>
            <label className="block text-sm font-semibold text-navy-800">New Password</label>
            <input
              type="password"
              name="password"
              className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
            />
          </div>
          <div>
            <label className="block text-sm font-semibold text-navy-800">Confirm New Password</label>
            <input
              type="password"
              name="password_confirmation"
              className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
            />
          </div>
        </div>
      </div>

      <SubmitButton />
    </form>
  );
}