// view_examples.ts
import type {AttrID, HotspotID, SectionView, ViewID} from '../types/all.ts';

// ============================================================================
// EJEMPLOS DE USO
// ============================================================================

/**
 * EJEMPLO 1: Salón con 3 vistas
 */
export const ejemploSalonVistas: SectionView[] = [
    // Vista 1: Frontal (por defecto)
    {
        id: "vw:salon_frontal" as ViewID,
        name: { es: "Vista Frontal", en: "Front View" },
        description: { es: "Vista principal del salón" },
        type: "front",
        isDefault: true,
        order: 1,

        visualConfig: {
            strategy: "dynamic_image",
            basePath: "/images/sections/salon",
            imageUrlTemplate: "{basePath}/frontal_{global.suelo}_{global.zocalo}_{section.mobiliario}.jpg",
            globalAttributeDependencies: [
                "at:suelo" as AttrID,
                "at:zocalo" as AttrID
            ],
            sectionAttributeDependencies: [
                "at:mobiliario_salon" as AttrID,
                "at:iluminacion_salon" as AttrID
            ]
        },

        // Hotspots en vista frontal
        hotspots: [
            {
                id: "hs:salon_suelo" as HotspotID,
                name: { es: "Suelo" },
                x: 50,
                y: 85,
                radius: 30,
                color: "#FFD700",
                icon: "floor",
                scopeType: "global",
                targetAttributeId: "at:suelo" as AttrID,
                tooltip: { es: "Configurar tipo de suelo" },
                zIndex: 1
            },
            {
                id: "hs:salon_muebles" as HotspotID,
                name: { es: "Mobiliario" },
                x: 40,
                y: 50,
                radius: 40,
                color: "#4CAF50",
                icon: "sofa",
                scopeType: "section",
                targetAttributeId: "at:mobiliario_salon" as AttrID,
                tooltip: { es: "Elegir mobiliario del salón" },
                zIndex: 2
            },
            {
                id: "hs:salon_lampara" as HotspotID,
                name: { es: "Iluminación" },
                x: 50,
                y: 15,
                radius: 25,
                color: "#FFC107",
                icon: "lightbulb",
                scopeType: "section",
                targetAttributeId: "at:iluminacion_salon" as AttrID,
                tooltip: { es: "Configurar iluminación" },
                zIndex: 3
            }
        ]
    },

    // Vista 2: Lateral
    {
        id: "vw:salon_lateral" as ViewID,
        name: { es: "Vista Lateral", en: "Side View" },
        type: "side",
        order: 2,

        visualConfig: {
            strategy: "dynamic_image",
            basePath: "/images/sections/salon",
            imageUrlTemplate: "{basePath}/lateral_{global.suelo}_{section.mobiliario}.jpg",
            globalAttributeDependencies: ["at:suelo" as AttrID],
            sectionAttributeDependencies: ["at:mobiliario_salon" as AttrID]
        },

        // Esta vista tiene menos hotspots
        hotspots: [
            {
                id: "hs:salon_lateral_suelo" as HotspotID,
                name: { es: "Suelo" },
                x: 50,
                y: 90,
                radius: 30,
                scopeType: "global",
                targetAttributeId: "at:suelo" as AttrID
            }
        ]
    },

    // Vista 3: Cenital (sin hotspots)
    {
        id: "vw:salon_cenital" as ViewID,
        name: { es: "Plano", en: "Floor Plan" },
        type: "top",
        order: 3,

        visualConfig: {
            strategy: "static_image",
            basePath: "/images/sections/salon",
            imageUrlTemplate: "{basePath}/plano.jpg"
        }

        // Sin hotspots - solo visualización
    }
];

/**
 * EJEMPLO 2: Coche con vista 360°
 */
export const ejemploCocheVista360: SectionView = {
    id: "vw:coche_360" as ViewID,
    name: { es: "Vista 360°" },
    type: "panoramic",
    isDefault: true,

    visualConfig: {
        strategy: "three_d",
        threeDConfig: {
            modelUrl: "/models/coche.glb",
            cameraPosition: { x: 5, y: 2, z: 5 },
            textureAttributes: [
                {
                    attributeId: "at:color" as AttrID,
                    scope: "global"
                },
                {
                    attributeId: "at:llantas" as AttrID,
                    scope: "section"
                }
            ]
        }
    },

    // Hotspots en modelo 3D (coordenadas 3D)
    hotspots: [
        {
            id: "hs:puerta" as HotspotID,
            name: { es: "Puerta" },
            x: 30,  // Coordenadas relativas al canvas
            y: 50,
            scopeType: "section",
            targetAttributeId: "at:tipo_puerta" as AttrID
        }
    ]
};

/**
 * EJEMPLO 3: Vista condicional (solo visible con cierta opción)
 */
export const ejemploVistaCondicional: SectionView = {
    id: "vw:terraza_exterior" as ViewID,
    name: { es: "Vista Exterior" },
    type: "front",

    // Solo visible si tiene_terraza = true
    visible: {
        "==": [
            { "var": "attributes.tiene_terraza" },
            "opt:si"
        ]
    },

    visualConfig: {
        strategy: "dynamic_image",
        imageUrlTemplate: "/images/terraza_exterior_{section.suelo_terraza}.jpg",
        sectionAttributeDependencies: ["at:suelo_terraza" as AttrID]
    }
};

/**
 * EJEMPLO 4: Vista de detalle con zoom
 */
export const ejemploVistaDetalle: SectionView = {
    id: "vw:cocina_encimera_detalle" as ViewID,
    name: { es: "Detalle Encimera" },
    type: "detail",

    visualConfig: {
        strategy: "dynamic_image",
        imageUrlTemplate: "/images/cocina/detalle_encimera_{section.encimera}.jpg",
        sectionAttributeDependencies: ["at:encimera" as AttrID]
    },

    // Hotspot específico de la encimera
    hotspots: [
        {
            id: "hs:encimera_material" as HotspotID,
            name: { es: "Material Encimera" },
            x: 50,
            y: 50,
            radius: 50,
            scopeType: "section",
            targetAttributeId: "at:encimera" as AttrID,
            tooltip: { es: "Cambiar material de la encimera" }
        }
    ]
};