workshop-manager/src/app/profile/ProfileForm.tsx

'use client';

import { useState, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { Input, Button } from '@/components/ui';
import { updateProfileAction } from '@/actions/profile';

interface ProfileFormProps {
  initialData: {
    name: string;
    email: string;
  };
}

export function ProfileForm({ initialData }: ProfileFormProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [name, setName] = useState(initialData.name);
  const [email, setEmail] = useState(initialData.email);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);

  const hasChanges = name !== initialData.name || email !== initialData.email;

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);

    startTransition(async () => {
      const result = await updateProfileAction({ name, email });

      if (result.success) {
        setMessage({ type: 'success', text: 'Profil mis à jour avec succès' });
        router.refresh();
      } else {
        setMessage({ type: 'error', text: result.error || 'Erreur lors de la mise à jour' });
      }
    });
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <Input
        id="name"
        type="text"
        label="Nom"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Votre nom"
      />

      <Input
        id="email"
        type="email"
        label="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />

      {message && (
        <p
          className={`text-sm ${message.type === 'success' ? 'text-success' : 'text-destructive'}`}
        >
          {message.text}
        </p>
      )}

      <Button type="submit" disabled={isPending || !hasChanges}>
        {isPending ? 'Enregistrement...' : 'Enregistrer les modifications'}
      </Button>
    </form>
  );
}