'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Button, Card, Input, Select, Textarea, Loading } from '../../../../shared/components';
import { useToast } from '@hykocx/zen/toast';

/**
 * Item Edit Page Component
 * Page for editing an existing item
 */
const ItemEditPage = ({ itemId, user }) => {
    const router = useRouter();
    const toast = useToast();
    
    const [categories, setCategories] = useState([]);
    const [item, setItem] = useState(null);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    
    const [formData, setFormData] = useState({
        name: '',
        description: '',
        unit_price: '',
        sku: '',
        category_id: '',
        is_active: true
    });
    
    const [errors, setErrors] = useState({});

    useEffect(() => {
        loadCategoriesAndItem();
    }, [itemId]);

    const loadCategoriesAndItem = async () => {
        try {
            setLoading(true);
            
            // Load categories
            const categoriesResponse = await fetch('/zen/api/admin/categories?limit=1000&is_active=true', {
                credentials: 'include'
            });
            const categoriesData = await categoriesResponse.json();
            
            if (categoriesData.success) {
                setCategories(categoriesData.categories || []);
            }

            // Load item
            const itemResponse = await fetch(`/zen/api/admin/items?id=${itemId}`, {
                credentials: 'include'
            });
            const itemData = await itemResponse.json();

            if (itemData.success && itemData.item) {
                const loadedItem = itemData.item;
                setItem(loadedItem);
                
                setFormData({
                    name: loadedItem.name || '',
                    description: loadedItem.description || '',
                    unit_price: loadedItem.unit_price || '',
                    sku: loadedItem.sku || '',
                    category_id: loadedItem.category_id || '',
                    is_active: loadedItem.is_active !== undefined ? loadedItem.is_active : true
                });
            } else {
                toast.error("Article introuvable");
            }
        } catch (error) {
            console.error('Error loading data:', error);
            toast.error("Échec du chargement de l'article");
        } finally {
            setLoading(false);
        }
    };

    const handleInputChange = (field, value) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }));
        
        if (errors[field]) {
            setErrors(prev => ({
                ...prev,
                [field]: null
            }));
        }
    };

    const handleCheckboxChange = (e) => {
        const { name, checked } = e.target;
        setFormData(prev => ({ 
            ...prev, 
            [name]: checked 
        }));
    };

    const validateForm = () => {
        const newErrors = {};
        
        if (!formData.name.trim()) {
            newErrors.name = "Le nom de l'article est requis";
        }
        
        if (!formData.unit_price || formData.unit_price <= 0) {
            newErrors.unit_price = "Le prix unitaire doit être supérieur à 0";
        }

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        if (!validateForm()) {
            return;
        }

        try {
            setSaving(true);

            const submitData = {
                ...formData,
                category_id: formData.category_id === '' || formData.category_id === 'null' ? null : parseInt(formData.category_id)
            };

            const response = await fetch(`/zen/api/admin/items?id=${itemId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify(submitData)
            });

            const data = await response.json();

            if (data.success) {
                toast.success("Article mis à jour avec succès");
                router.push('/admin/invoice/items');
            } else {
                toast.error(data.message || "Échec de la mise à jour de l'article");
            }
        } catch (error) {
            console.error('Error updating item:', error);
            toast.error("Échec de la mise à jour de l'article");
        } finally {
            setSaving(false);
        }
    };

    if (loading) {
        return (
            <div className="min-h-64 flex items-center justify-center">
                <Loading />
            </div>
        );
    }

    if (!item) {
        return (
            <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'article</h1>
                        <p className="mt-1 text-xs text-neutral-400">Article introuvable</p>
                    </div>
                    <Button
                        variant="secondary"
                        size="sm"
                        onClick={() => router.push('/admin/invoice/items')}
                    >
                        ← Retour aux articles
                    </Button>
                </div>
                <Card>
                    <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg">
                        <p className="font-medium">Article introuvable</p>
                        <p className="text-sm mt-1">L'article que vous recherchez n'existe pas ou a été supprimé.</p>
                    </div>
                </Card>
            </div>
        );
    }

    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">Modifier l'article</h1>
                    <p className="mt-1 text-xs text-neutral-400">Article : {item.name}</p>
                </div>
                <Button
                    variant="secondary"
                    size="sm"
                    onClick={() => router.push('/admin/invoice/items')}
                >
                    ← Retour aux articles
                </Button>
            </div>

            {/* Form */}
            <form onSubmit={handleSubmit} className="space-y-6">
                {/* Item Information */}
                <Card>
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Informations de l'article</h2>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="md:col-span-2">
                                <Input
                                    label="Nom *"
                                    value={formData.name}
                                    onChange={(value) => handleInputChange('name', value)}
                                    placeholder="Saisir le nom de l'article..."
                                    error={errors.name}
                                />
                            </div>
                            
                            <div className="md:col-span-2">
                                <Textarea
                                    label="Description"
                                    value={formData.description}
                                    onChange={(value) => handleInputChange('description', value)}
                                    rows={3}
                                    placeholder="Décrivez l'article..."
                                />
                            </div>
                            
                            <Input
                                label="Prix unitaire *"
                                type="number"
                                value={formData.unit_price}
                                onChange={(value) => handleInputChange('unit_price', value)}
                                min="0"
                                step="0.01"
                                placeholder="0.00"
                                error={errors.unit_price}
                            />
                            
                            <Input
                                label="SKU"
                                value={formData.sku}
                                onChange={(value) => handleInputChange('sku', value)}
                                placeholder="Saisir le SKU..."
                            />
                            
                            <Select
                                label="Catégorie"
                                value={formData.category_id || ''}
                                onChange={(value) => handleInputChange('category_id', value)}
                                options={[
                                    { value: '', label: "Aucune" },
                                    ...categories.map((category) => ({
                                        value: category.id,
                                        label: category.parent_title 
                                            ? `${category.title} (${category.parent_title})`
                                            : category.title
                                    }))
                                ]}
                                disabled={loading}
                            />
                            
                            <div className="flex items-center pt-6">
                                <label className="flex items-center cursor-pointer">
                                    <input
                                        type="checkbox"
                                        name="is_active"
                                        checked={formData.is_active}
                                        onChange={handleCheckboxChange}
                                        className="w-5 h-5 text-blue-600 bg-neutral-100 dark:bg-neutral-800 border-neutral-300 dark:border-neutral-700 rounded focus:ring-2 focus:ring-blue-500"
                                    />
                                    <span className="ml-2 text-sm text-neutral-700 dark:text-neutral-300">
                                        Actif (disponible à l'utilisation)
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </Card>

                {/* Actions */}
                <div className="flex items-center justify-end gap-3">
                    <Button
                        type="button"
                        variant="secondary"
                        onClick={() => router.push('/admin/invoice/items')}
                        disabled={saving}
                    >
                        Annuler
                    </Button>
                    <Button
                        type="submit"
                        variant="success"
                        loading={saving}
                        disabled={saving}
                    >
                        {saving ? "Mise à jour..." : "Mettre à jour l'article"}
                    </Button>
                </div>
            </form>
        </div>
    );
};

export default ItemEditPage;