-- SQL Ballet: How I visualize UI components as database relationships
-- As a frontend developer who loves both beautiful interfaces and structured data

-- Create a schema that represents UI components hierarchy
CREATE TABLE ui_components (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    type VARCHAR(50) NOT NULL,
    parent_id INTEGER REFERENCES ui_components(id),
    z_index INTEGER DEFAULT 0,
    is_visible BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    last_modified TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Component styling properties (think CSS in SQL form)
CREATE TABLE component_styles (
    component_id INTEGER REFERENCES ui_components(id),
    property VARCHAR(50) NOT NULL,
    value TEXT NOT NULL,
    media_query VARCHAR(100),
    PRIMARY KEY (component_id, property, COALESCE(media_query, ''))
);

-- Animations - the soul of delightful interfaces
CREATE TABLE animations (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    keyframes JSON NOT NULL,
    duration INTEGER NOT NULL, -- in milliseconds
    easing VARCHAR(50) DEFAULT 'ease-in-out'
);

-- Link components to animations
CREATE TABLE component_animations (
    component_id INTEGER REFERENCES ui_components(id),
    animation_id INTEGER REFERENCES animations(id),
    trigger_event VARCHAR(50) NOT NULL, -- hover, click, etc.
    PRIMARY KEY (component_id, animation_id, trigger_event)
);

-- Insert a beautiful header component
INSERT INTO ui_components (name, type) VALUES ('Header', 'container');

-- Get the ID of the header
DO $$
DECLARE
    header_id INTEGER;
BEGIN
    SELECT id INTO header_id FROM ui_components WHERE name = 'Header';
    
    -- Add a logo to the header
    INSERT INTO ui_components (name, type, parent_id) 
    VALUES ('Logo', 'image', header_id);
    
    -- Add navigation to the header
    INSERT INTO ui_components (name, type, parent_id) 
    VALUES ('Navigation', 'nav', header_id);
    
    -- Style the header with a subtle gradient
    INSERT INTO component_styles (component_id, property, value)
    VALUES 
        (header_id, 'background', 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'),
        (header_id, 'padding', '20px'),
        (header_id, 'box-shadow', '0 4px 6px rgba(0, 0, 0, 0.1)'),
        (header_id, 'display', 'flex'),
        (header_id, 'justify-content', 'space-between'),
        (header_id, 'align-items', 'center');
    
    -- Create a subtle scroll animation
    INSERT INTO animations (name, keyframes, duration, easing)
    VALUES ('FadeInDown', 
            '{"0%": {"opacity": "0", "transform": "translateY(-20px)"}, "100%": {"opacity": "1", "transform": "translateY(0)"}}', 
            800, 
            'cubic-bezier(0.215, 0.610, 0.355, 1.000)');
            
    -- Attach animation to header
    INSERT INTO component_animations (component_id, animation_id, trigger_event)
    VALUES (header_id, 
            (SELECT id FROM animations WHERE name = 'FadeInDown'), 
            'onload');
            
    -- Let's add a media query for responsive design
    INSERT INTO component_styles (component_id, property, value, media_query)
    VALUES (header_id, 'flex-direction', 'column', '(max-width: 768px)');
    
    -- This is how I dance between frontend and data - structuring beauty
    -- The relationship between components is like a carefully choreographed dance
    -- Each element knows its place, its movement, its relationship to others
    -- Just as in ballet, timing is everything - animations must be precise
END $$;

-- Query to visualize the component hierarchy - like viewing the stage from above
WITH RECURSIVE component_tree AS (
    SELECT id, name, type, parent_id, 0 AS level
    FROM ui_components
    WHERE parent_id IS NULL
    
    UNION ALL
    
    SELECT c.id, c.name, c.type, c.parent_id, ct.level + 1
    FROM ui_components c
    JOIN component_tree ct ON c.parent_id = ct.id
)
SELECT 
    REPEAT('    ', level) || name AS component_hierarchy,
    type,
    id
FROM component_tree
ORDER BY level, name;

-- A beautiful interface is like a well-normalized database
-- Both require thought, structure, and an eye for the relationships between elements