import {
    Page,
    Block,
    String,
    Text,
    Number,
    Datetime,
    Tags,
    Tag,
    Files,
    Button,
    Carousel,
    CarouselItem
} from '@cap-rel/smartcommon';
import { useNavigation } from '@cap-rel/smartcommon';

export const ProductDetailPage = ({ product }) => {
    const navigate = useNavigation();

    return (
        <Page title={product.label}>
            {/* Photos */}
            {product.photos?.length > 0 && (
                <Carousel>
                    {product.photos.map((photo, index) => (
                        <CarouselItem key={index}>
                            <img src={photo.url} alt={`Photo ${index + 1}`} />
                        </CarouselItem>
                    ))}
                </Carousel>
            )}

            {/* Informations principales */}
            <Block>
                <div className="flex justify-between items-start">
                    <div>
                        <h1 className="text-2xl font-bold">
                            <String value={product.label} />
                        </h1>
                        <Tags value={product.categories} />
                    </div>
                    <Tag color={product.isActive ? 'green' : 'gray'}>
                        {product.isActive ? 'Actif' : 'Inactif'}
                    </Tag>
                </div>

                <div className="mt-4 text-3xl font-bold text-primary">
                    <Number value={product.price} suffix=" €" />
                </div>
            </Block>

            {/* Description */}
            <Block title="Description">
                <Text value={product.description} />
            </Block>

            {/* Détails */}
            <Block title="Détails">
                <dl className="space-y-2">
                    <div className="flex justify-between">
                        <dt className="text-gray-500">Référence</dt>
                        <dd><String value={product.ref} /></dd>
                    </div>
                    <div className="flex justify-between">
                        <dt className="text-gray-500">Stock</dt>
                        <dd><Number value={product.stock} /></dd>
                    </div>
                    <div className="flex justify-between">
                        <dt className="text-gray-500">Créé le</dt>
                        <dd><Datetime value={product.createdAt} format="date" /></dd>
                    </div>
                    <div className="flex justify-between">
                        <dt className="text-gray-500">Modifié le</dt>
                        <dd><Datetime value={product.updatedAt} format="relative" /></dd>
                    </div>
                </dl>
            </Block>

            {/* Documents */}
            {product.documents?.length > 0 && (
                <Block title="Documents">
                    <Files value={product.documents} />
                </Block>
            )}

            {/* Actions */}
            <Block>
                <div className="flex gap-2">
                    <Button
                        variant="outline"
                        onClick={() => navigate(`/products/${product.id}/edit`)}
                    >
                        Modifier
                    </Button>
                    <Button variant="primary">
                        Commander
                    </Button>
                </div>
            </Block>
        </Page>
    );
};