'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '../../../shared/components';
import ClientForm from './ClientForm.js';
import { useToast } from '@hykocx/zen/toast';

/**
 * Client Create Page Component
 * Page for creating a new client
 */
const ClientCreatePage = ({ user }) => {
    const router = useRouter();
    const toast = useToast();
    const [saving, setSaving] = useState(false);

    const handleSubmit = async (formData) => {
        try {
            setSaving(true);

            const response = await fetch('/zen/api/admin/clients', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify({ client: formData })
            });

            const data = await response.json();

            if (data.success) {
                toast.success('Client créé avec succès');
                router.push('/admin/clients/list');
            } else {
                toast.error(data.message || 'Échec de la création du client');
            }
        } catch (error) {
            console.error('Error creating client:', error);
            toast.error('Échec de la création du client');
        } finally {
            setSaving(false);
        }
    };

    return (
        <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
            {/* Header */}
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Créer un client</h1>
                    <p className="mt-1 text-xs text-neutral-400">Remplissez les détails pour créer un nouveau client</p>
                </div>
                <Button
                    variant="secondary"
                    size="sm"
                    onClick={() => router.push('/admin/clients/list')}
                >
                    ← Retour aux clients
                </Button>
            </div>

            {/* Form */}
            <ClientForm
                onSubmit={handleSubmit}
                onCancel={() => router.push('/admin/clients/list')}
                isEdit={false}
                saving={saving}
                users={[]}
            />
        </div>
    );
};

export default ClientCreatePage;