import { useState } from 'react';
import {
    Page,
    Block,
    Panel,
    Popup,
    Button,
    List,
    ListItem
} from '@cap-rel/smartcommon';

export const ProductsPage = () => {
    const [selectedProduct, setSelectedProduct] = useState(null);
    const [showDeletePopup, setShowDeletePopup] = useState(false);
    const [showFilters, setShowFilters] = useState(false);

    const products = [
        { id: 1, label: 'Produit A', price: 29.99 },
        { id: 2, label: 'Produit B', price: 49.99 },
        { id: 3, label: 'Produit C', price: 19.99 }
    ];

    const handleDelete = async () => {
        // Supprimer le produit
        console.log('Suppression de', selectedProduct);
        setShowDeletePopup(false);
        setSelectedProduct(null);
    };

    return (
        <Page title="Produits">
            {/* Actions */}
            <Block>
                <Button onClick={() => setShowFilters(true)}>
                    Filtres
                </Button>
            </Block>

            {/* Liste */}
            <Block title="Catalogue">
                <List>
                    {products.map(product => (
                        <ListItem
                            key={product.id}
                            title={product.label}
                            subtitle={`${product.price} €`}
                            onClick={() => setSelectedProduct(product)}
                            actions={
                                <Button
                                    size="sm"
                                    variant="danger"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        setSelectedProduct(product);
                                        setShowDeletePopup(true);
                                    }}
                                >
                                    Supprimer
                                </Button>
                            }
                        />
                    ))}
                </List>
            </Block>

            {/* Panneau filtres */}
            <Panel
                isOpen={showFilters}
                onClose={() => setShowFilters(false)}
                title="Filtres"
                position="right"
            >
                <p>Options de filtrage ici</p>
            </Panel>

            {/* Popup confirmation */}
            <Popup
                isOpen={showDeletePopup}
                onClose={() => setShowDeletePopup(false)}
                title="Confirmer la suppression"
            >
                <p>
                    Supprimer "{selectedProduct?.label}" ?
                </p>
                <div className="flex gap-2 mt-4">
                    <Button onClick={() => setShowDeletePopup(false)}>
                        Annuler
                    </Button>
                    <Button variant="danger" onClick={handleDelete}>
                        Supprimer
                    </Button>
                </div>
            </Popup>
        </Page>
    );
};