import type { TerminalLine } from '$lib/components/tui/types';
import { user } from '$lib/config';

const sampleTableHeaders = ['Name', 'Type', 'Status'];
const sampleTableRows = [
    ['Button', 'Interactive', 'Ready'],
    ['Progress', 'Display', 'Active'],
    ['Card', 'Container', 'Ready']
];

const sampleAccordionItems = [
    { title: 'What is this?', content: 'A showcase of all TUI components available in this terminal.' },
    { title: 'How to use?', content: 'Copy the code examples and customize for your needs.' },
    { title: 'Can I add more?', content: 'Yes! Check the types.ts file for the full API.' }
];

// Build comprehensive component showcase
export const lines: TerminalLine[] = [
    // Header
    { type: 'command', content: 'cat ~/components/README.md' },
    { type: 'blank', content: '' },
    { type: 'header', content: '(&primary,bold)Terminal UI Components(&)' },
    { type: 'output', content: '(&muted)A comprehensive showcase of all available TUI components(&)' },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TEXT FORMATTING
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TEXT FORMATTING', id: 'text-formatting' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Colors(&)' },
    { type: 'output', content: '(&red)red(&) (&green)green(&) (&yellow)yellow(&) (&blue)blue(&) (&magenta)magenta(&) (&cyan)cyan(&) (&orange)orange(&) (&pink)pink(&)' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Semantic Colors(&)' },
    { type: 'output', content: '(&primary)primary(&) (&accent)accent(&) (&muted)muted(&) (&error)error(&) (&success)success(&) (&warning)warning(&) (&info)info(&)' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Text Styles(&)' },
    { type: 'output', content: '(&bold)bold(&) (&dim)dim(&) (&italic)italic(&) (&underline)underline(&) (&strikethrough)strikethrough(&)' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Combined Styles(&)' },
    { type: 'output', content: '(&bold,red)bold red(&) (&italic,cyan)italic cyan(&) (&bold,underline,yellow)bold underline yellow(&)' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Inline Icons(&)' },
    { type: 'output', content: '(&icon, mdi:github) GitHub (&icon, mdi:twitter) Twitter (&icon, mdi:heart) Love (&icon, mdi:star) Star' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Background Colors(&)' },
    { type: 'output', content: '(&bg-surface)surface bg(&) (&bg-red)red bg(&) (&bg-blue)blue bg(&) (&bg-green)green bg(&)' },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // LINE TYPES
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'LINE TYPES' },
    { type: 'blank', content: '' },

    { type: 'command', content: 'echo "This is a command line"' },
    { type: 'output', content: 'This is an output line' },
    { type: 'info', content: 'This is an info line' },
    { type: 'success', content: 'This is a success line' },
    { type: 'warning', content: 'This is a warning line' },
    { type: 'error', content: 'This is an error line' },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // BUTTONS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'BUTTONS', id: 'buttons' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Button Styles(&)' },
    {
        type: 'button',
        content: 'Primary Button',
        icon: 'mdi:check',
        style: 'primary',
        action: () => console.log('Primary clicked')
    },
    {
        type: 'button',
        content: 'Secondary Button',
        icon: 'mdi:information',
        style: 'secondary',
        action: () => console.log('Secondary clicked')
    },
    {
        type: 'button',
        content: 'Accent Button',
        icon: 'mdi:star',
        style: 'accent',
        action: () => console.log('Accent clicked')
    },
    {
        type: 'button',
        content: 'Warning Button',
        icon: 'mdi:alert',
        style: 'warning',
        action: () => console.log('Warning clicked')
    },
    {
        type: 'button',
        content: 'Error Button',
        icon: 'mdi:close-circle',
        style: 'error',
        action: () => console.log('Error clicked')
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Link Buttons(&)' },
    {
        type: 'button',
        content: 'External Link (GitHub)',
        icon: 'mdi:github',
        style: 'primary',
        href: 'https://github.com',
        external: true
    },
    {
        type: 'button',
        content: 'Internal Link (Home)',
        icon: 'mdi:home',
        style: 'accent',
        href: '/'
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // LINKS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'LINKS' },
    { type: 'blank', content: '' },

    {
        type: 'link',
        content: 'Click here to visit GitHub',
        href: 'https://github.com',
        icon: 'mdi:github',
        external: true
    },
    {
        type: 'link',
        content: 'Go to portfolio page',
        href: '/portfolio',
        icon: 'mdi:folder'
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // PROGRESS BARS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'PROGRESS BARS' },
    { type: 'blank', content: '' },

    {
        type: 'progress',
        content: 'Loading...',
        progress: 25,
        progressLabel: 'Installing packages'
    },
    {
        type: 'progress',
        content: '',
        progress: 50,
        progressLabel: 'Building project'
    },
    {
        type: 'progress',
        content: '',
        progress: 75,
        progressLabel: 'Running tests'
    },
    {
        type: 'progress',
        content: '',
        progress: 100,
        progressLabel: 'Complete!'
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // GROUPS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'GROUPS' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Horizontal Group (Row)(&)' },
    {
        type: 'group',
        content: '',
        groupDirection: 'row',
        groupAlign: 'center',
        groupGap: '1rem',
        children: [
            { type: 'output', content: '(&primary,bold)Status:(&)', inline: true },
            { type: 'success', content: '(&success)Online(&)', inline: true },
            { type: 'button', content: 'Refresh', icon: 'mdi:refresh', style: 'accent', inline: true, action: () => console.log('Refresh clicked') }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Vertical Group (Column)(&)' },
    {
        type: 'group',
        content: '',
        groupDirection: 'column',
        groupAlign: 'start',
        groupGap: '0.25rem',
        children: [
            { type: 'header', content: '(&accent,bold)User Profile(&)' },
            { type: 'output', content: '(&muted)Name:(&) John Doe' },
            { type: 'output', content: '(&muted)Role:(&) Developer' },
            { type: 'output', content: '(&muted)Status:(&) (&success)Active(&)' }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Group with Links(&)' },
    {
        type: 'group',
        content: '',
        groupAlign: 'start',
        groupGap: '1rem',
        children: [
            { type: 'output', content: '(&primary,bold)Quick Links:(&)', inline: true },
            { type: 'link', href: '#text-formatting', content: '(&bg-blue,black)Formatting(&)', inline: true },
            { type: 'link', href: '#buttons', content: '(&bg-green,black)Buttons(&)', inline: true },
            { type: 'link', href: '#terminal-api', content: '(&bg-orange,black)API(&)', inline: true }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Nested Groups(&)' },
    {
        type: 'group',
        content: '',
        groupDirection: 'column',
        groupGap: '0.5rem',
        children: [
            { type: 'header', content: '(&cyan,bold)Settings Panel(&)' },
            {
                type: 'group',
                content: '',
                groupDirection: 'row',
                groupGap: '1rem',
                children: [
                    { type: 'output', content: '(&muted)Theme:(&)', inline: true },
                    { type: 'button', content: 'Dark', icon: 'mdi:weather-night', style: 'primary', inline: true, action: () => { } },
                    { type: 'button', content: 'Light', icon: 'mdi:weather-sunny', style: 'accent', inline: true, action: () => { } }
                ]
            },
            {
                type: 'group',
                content: '',
                groupDirection: 'row',
                groupGap: '1rem',
                children: [
                    { type: 'output', content: '(&muted)Speed:(&)', inline: true },
                    { type: 'button', content: 'Slow', style: 'secondary', inline: true, action: () => { } },
                    { type: 'button', content: 'Normal', style: 'primary', inline: true, action: () => { } },
                    { type: 'button', content: 'Fast', style: 'accent', inline: true, action: () => { } }
                ]
            }
        ]
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // INLINE COMPONENTS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'INLINE COMPONENTS' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Inline Cards(&)' },
    { type: 'output', content: '(&muted)Cards can be displayed inline for compact layouts:(&)' },
    {
        type: 'group',
        content: '',
        groupDirection: 'row',
        groupAlign: 'start',
        groupGap: '1rem',
        children: [
            {
                type: 'card',
                content: 'Small card 1',
                cardTitle: 'Card A',
                inline: true
            },
            {
                type: 'card',
                content: 'Small card 2',
                cardTitle: 'Card B',
                style: 'accent',
                inline: true
            },
            {
                type: 'card',
                content: 'Small card 3',
                cardTitle: 'Card C',
                style: 'warning',
                inline: true
            }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Inline Tables(&)' },
    { type: 'output', content: '(&muted)Tables can also be inline:(&)' },
    {
        type: 'group',
        content: '',
        groupDirection: 'row',
        groupAlign: 'start',
        groupGap: '1rem',
        children: [
            {
                type: 'table',
                content: 'Server 1',
                tableHeaders: ['Metric', 'Value'],
                tableRows: [['CPU', '45%'], ['RAM', '2.4GB']],
                inline: true
            },
            {
                type: 'table',
                content: 'Server 2',
                tableHeaders: ['Metric', 'Value'],
                tableRows: [['CPU', '12%'], ['RAM', '1.1GB']],
                inline: true
            }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Inline Accordions(&)' },
    {
        type: 'group',
        content: '',
        groupDirection: 'row',
        groupAlign: 'start',
        groupGap: '1rem',
        children: [
            {
                type: 'accordion',
                content: 'Details A',
                accordionItems: [{ title: 'More Info', content: 'Hidden details here.' }],
                inline: true
            },
            {
                type: 'accordion',
                content: 'Details B',
                accordionItems: [{ title: 'More Info', content: 'Hidden details here.' }],
                inline: true
            }
        ]
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // IMAGES
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'IMAGES' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Image with Caption(&)' },
    {
        type: 'image',
        content: 'User Avatar',
        image: user.avatar,
        imageAlt: 'Profile picture',
        imageWidth: 100
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // CARDS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'CARDS' },
    { type: 'blank', content: '' },

    {
        type: 'card',
        content: 'This is card content. Cards can contain formatted text and are great for highlighting information.',
        cardTitle: 'Card Title',
        cardFooter: 'Card Footer'
    },
    { type: 'blank', content: '' },
    {
        type: 'card',
        content: 'Cards can now include images and icons directly.',
        cardTitle: 'Rich Card',
        cardFooter: 'Updated Feature',
        icon: 'mdi:star',
        image: 'https://placehold.co/600x200/1e1e2e/cdd6f4?text=Card+Image',
        imageAlt: 'Placeholder image',
        children: [
            {
                type: 'button',
                content: 'View on GitHub',
                href: 'https://github.com/adithyakrishnan2004',
                icon: 'mdi:github',
                style: 'primary'
            }
        ],
        display: 'flex'
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TABLES
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TABLES' },
    { type: 'blank', content: '' },

    {
        type: 'table',
        content: '',
        tableHeaders: sampleTableHeaders,
        tableRows: sampleTableRows
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // ACCORDIONS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'ACCORDIONS' },
    { type: 'blank', content: '' },

    {
        type: 'accordion',
        content: '',
        accordionItems: sampleAccordionItems,
        accordionOpen: false
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TOOLTIPS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TOOLTIPS' },
    { type: 'blank', content: '' },

    {
        type: 'tooltip',
        content: 'Hover over me for more info!',
        tooltipText: 'This is tooltip content that appears on hover.',
        tooltipPosition: 'top'
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // DIVIDERS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'DIVIDER STYLES' },
    { type: 'blank', content: '' },

    { type: 'output', content: '(&muted)Dividers are simple horizontal separators with optional text:(&)' },
    { type: 'divider', content: 'SECTION A' },
    { type: 'output', content: '(&muted)Content for section A...(&)' },
    { type: 'divider', content: 'SECTION B' },
    { type: 'output', content: '(&muted)Content for section B...(&)' },
    { type: 'divider', content: '' },
    { type: 'output', content: '(&muted)Empty divider above (no text)(&)' },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // FORM INPUTS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'FORM INPUTS' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Text Input(&)' },
    {
        type: 'input',
        content: 'Username:',
        icon: 'mdi:account',
        inputPlaceholder: 'Enter your username',
        style: 'primary'
    },
    {
        type: 'input',
        content: 'Email:',
        icon: 'mdi:email',
        inputPlaceholder: 'you@example.com',
        inputType: 'email',
        style: 'accent'
    },
    {
        type: 'input',
        content: 'With prefix/suffix:',
        inputPlaceholder: '100',
        inputPrefix: '$',
        inputSuffix: '.00',
        inputType: 'number'
    },
    {
        type: 'input',
        content: 'Error state:',
        inputPlaceholder: 'Invalid input',
        inputError: true,
        inputErrorMessage: 'This field is required',
        style: 'error'
    },
    {
        type: 'input',
        content: 'Disabled:',
        inputPlaceholder: 'Cannot edit',
        inputDisabled: true
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TEXTAREA
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TEXTAREA' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Multi-line Text Area(&)' },
    {
        type: 'textarea',
        content: 'Message:',
        icon: 'mdi:message-text',
        inputPlaceholder: 'Type your message here...',
        textareaRows: 4,
        style: 'primary'
    },
    {
        type: 'textarea',
        content: 'With character limit:',
        inputPlaceholder: 'Limited to 100 characters',
        textareaRows: 3,
        textareaMaxLength: 100,
        style: 'accent'
    },
    { type: 'blank', content: '' },
    {
        type: 'textarea',
        content: 'Error state:',
        inputPlaceholder: 'Invalid input...',
        textareaRows: 2,
        style: 'error',
        inputError: true,
        inputErrorMessage: 'Message is too short'
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // CHECKBOX
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'CHECKBOXES' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Checkbox Options(&)' },
    {
        type: 'checkbox',
        content: 'Enable notifications',
        icon: 'mdi:bell',
        style: 'primary'
    },
    {
        type: 'checkbox',
        content: 'Accept terms and conditions',
        style: 'accent'
    },
    {
        type: 'checkbox',
        content: 'Indeterminate state',
        checkboxIndeterminate: true,
        style: 'warning'
    },
    {
        type: 'checkbox',
        content: 'Disabled checkbox',
        inputDisabled: true
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // RADIO BUTTONS
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'RADIO BUTTONS' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Radio Group (Vertical)(&)' },
    {
        type: 'radio',
        content: 'Select theme:',
        icon: 'mdi:palette',
        style: 'primary',
        radioOptions: [
            { value: 'dark', label: 'Dark Mode', icon: 'mdi:weather-night' },
            { value: 'light', label: 'Light Mode', icon: 'mdi:weather-sunny' },
            { value: 'system', label: 'System Default', icon: 'mdi:desktop-mac' }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Radio Group (Horizontal)(&)' },
    {
        type: 'radio',
        content: 'Size:',
        style: 'accent',
        radioHorizontal: true,
        radioOptions: [
            { value: 'sm', label: 'Small' },
            { value: 'md', label: 'Medium' },
            { value: 'lg', label: 'Large' },
            { value: 'xl', label: 'Extra Large', disabled: true }
        ]
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // SELECT DROPDOWN
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'SELECT DROPDOWN' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Basic Select(&)' },
    {
        type: 'select',
        content: 'Country:',
        icon: 'mdi:earth',
        inputPlaceholder: 'Select a country...',
        style: 'primary',
        selectOptions: [
            { value: 'us', label: 'United States', icon: 'emojione-v1:flag-for-united-states' },
            { value: 'uk', label: 'United Kingdom', icon: 'emojione-v1:flag-for-united-kingdom' },
            { value: 'de', label: 'Germany', icon: 'emojione-v1:flag-for-germany' },
            { value: 'fr', label: 'France', icon: 'emojione-v1:flag-for-france' },
            { value: 'jp', label: 'Japan', icon: 'emojione-v1:flag-for-japan' }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Searchable Select(&)' },
    {
        type: 'select',
        content: 'Programming Language:',
        icon: 'mdi:code-braces',
        inputPlaceholder: 'Search languages...',
        style: 'accent',
        selectSearchable: true,
        selectOptions: [
            { value: 'ts', label: 'TypeScript', icon: 'mdi:language-typescript' },
            { value: 'js', label: 'JavaScript', icon: 'mdi:language-javascript' },
            { value: 'py', label: 'Python', icon: 'mdi:language-python' },
            { value: 'rs', label: 'Rust', icon: 'mdi:language-rust' },
            { value: 'go', label: 'Go', icon: 'mdi:language-go' },
            { value: 'cpp', label: 'C++', icon: 'mdi:language-cpp' },
            { value: 'java', label: 'Java', icon: 'mdi:language-java' }
        ]
    },
    { type: 'blank', content: '' },
    {
        type: 'select',
        content: 'Error state:',
        inputPlaceholder: 'Select something...',
        style: 'error',
        inputError: true,
        inputErrorMessage: 'Selection required',
        selectOptions: [
            { value: '1', label: 'Option 1' }
        ]
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TOGGLE SWITCH
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TOGGLE SWITCHES' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Toggle Options(&)' },
    {
        type: 'toggle',
        content: 'Dark Mode',
        icon: 'mdi:theme-light-dark',
        style: 'primary'
    },
    {
        type: 'toggle',
        content: 'Airplane Mode',
        icon: 'mdi:airplane',
        style: 'accent',
        toggleOnLabel: 'ON',
        toggleOffLabel: 'OFF'
    },
    {
        type: 'toggle',
        content: 'Custom Labels',
        icon: 'mdi:toggle-switch',
        style: 'warning',
        toggleOnLabel: 'YES',
        toggleOffLabel: 'NO'
    },
    {
        type: 'toggle',
        content: 'No Labels',
        toggleShowLabels: false,
        style: 'accent'
    },
    {
        type: 'toggle',
        content: 'Disabled Toggle',
        inputDisabled: true
    },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // USAGE EXAMPLES
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'USAGE' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Code Example(&)' },
    { type: 'output', content: "(&muted)// Text formatting(&)" },
    { type: 'output', content: "{ type: 'output', content: '(&green)colored text(&)' }" },
    { type: 'blank', content: '' },
    { type: 'output', content: "(&muted)// Button with action(&)" },
    { type: 'output', content: "{ type: 'button', content: 'Click', icon: 'mdi:check', style: 'primary', action: () => {} }" },
    { type: 'blank', content: '' },
    { type: 'output', content: "(&muted)// Form input(&)" },
    { type: 'output', content: "{ type: 'input', content: 'Label:', inputPlaceholder: 'Enter value...', style: 'primary' }" },
    { type: 'blank', content: '' },
    { type: 'output', content: "(&muted)// Checkbox(&)" },
    { type: 'output', content: "{ type: 'checkbox', content: 'Enable option', style: 'accent' }" },
    { type: 'blank', content: '' },
    { type: 'output', content: "(&muted)// Group with children(&)" },
    { type: 'output', content: "{ type: 'group', groupDirection: 'row', groupGap: '1rem', children: [...] }" },
    { type: 'blank', content: '' },
    { type: 'output', content: "(&muted)// Select dropdown(&)" },
    { type: 'output', content: "{ type: 'select', content: 'Choose:', selectOptions: [{ value: 'a', label: 'Option A' }] }" },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TERMINAL API
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TERMINAL API', id: 'terminal-api' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Reactive Terminal Control(&)' },
    { type: 'output', content: 'The (&cyan)TerminalAPI(&) allows programmatic control of terminal content.' },
    { type: 'output', content: 'Use (&primary)bind:terminal(&) to access the API from your component.' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Writing Lines(&)' },
    { type: 'output', content: "(&muted)terminal.write({ type: 'output', content: 'Hello!' })(&)  (&dim)// Append line(&)" },
    { type: 'output', content: "(&muted)terminal.writeLines([...lines])(&)                       (&dim)// Append multiple(&)" },
    { type: 'output', content: "(&muted)terminal.clear()(&)                                      (&dim)// Clear all(&)" },
    { type: 'output', content: "(&muted)terminal.setLines([...lines])(&)                         (&dim)// Replace all(&)" },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Updating Lines(&)' },
    { type: 'output', content: "(&muted)terminal.update(0, { content: 'New text' })(&)           (&dim)// Update by index(&)" },
    { type: 'output', content: "(&muted)terminal.updateContent(0, 'New text')(&)                 (&dim)// Update content only(&)" },
    { type: 'output', content: "(&muted)terminal.updateById('my-id', { content: 'New' })(&)      (&dim)// Update by ID(&)" },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Removing Lines(&)' },
    { type: 'output', content: "(&muted)terminal.remove(0)(&)                                    (&dim)// Remove by index(&)" },
    { type: 'output', content: "(&muted)terminal.removeRange(0, 3)(&)                            (&dim)// Remove range(&)" },
    { type: 'output', content: "(&muted)terminal.removeById('my-id')(&)                          (&dim)// Remove by ID(&)" },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Navigation & Control(&)' },
    { type: 'output', content: "(&muted)terminal.scrollToBottom()(&)                             (&dim)// Scroll to end(&)" },
    { type: 'output', content: "(&muted)terminal.scrollToLine(5)(&)                              (&dim)// Scroll to line(&)" },
    { type: 'output', content: "(&muted)terminal.skip()(&)                                       (&dim)// Skip animation(&)" },
    { type: 'output', content: "(&muted)terminal.restart()(&)                                    (&dim)// Restart animation(&)" },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Reading State(&)' },
    { type: 'output', content: "(&muted)terminal.getLine(0)(&)                                   (&dim)// Get line by index(&)" },
    { type: 'output', content: "(&muted)terminal.getLines()(&)                                   (&dim)// Get all lines(&)" },
    { type: 'output', content: "(&muted)terminal.getLineCount()(&)                               (&dim)// Get count(&)" },
    { type: 'output', content: "(&muted)terminal.findById('my-id')(&)                            (&dim)// Find index by ID(&)" },
    { type: 'output', content: "(&muted)terminal.isAnimating()(&)                                (&dim)// Check if typing(&)" },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Usage Example(&)' },
    { type: 'output', content: "(&dim)// In your Svelte component:(&)" },
    { type: 'output', content: "(&cyan)import(&) TerminalTUI (&cyan)from(&) '(&green)$lib/components/TerminalTUI.svelte(&)';" },
    { type: 'output', content: "(&cyan)import type(&) { TerminalAPI } (&cyan)from(&) '(&green)$lib(&)';" },
    { type: 'output', content: "" },
    { type: 'output', content: "(&magenta)let(&) terminal = (&yellow)$state(&)<TerminalAPI>();" },
    { type: 'output', content: "(&magenta)let(&) lines = (&yellow)$state(&)([{ type: '(&green)output(&)', content: '(&green)Hello!(&)' }]);" },
    { type: 'output', content: "" },
    { type: 'output', content: "(&dim)// In template:(&)" },
    { type: 'output', content: "<TerminalTUI (&cyan)bind:terminal(&) (&cyan)bind:lines(&) />" },
    { type: 'output', content: "" },
    { type: 'output', content: "(&dim)// Then use the API:(&)" },
    { type: 'output', content: "terminal?.write({ type: '(&green)success(&)', content: '(&green)Done!(&)' });" },
    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // DISPLAY & NESTING
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'DISPLAY & NESTING' },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Inline Grouping Logic(&)' },
    { type: 'output', content: '(&muted)Consecutive inline elements are grouped. Non-consecutive are separated.(&)' },
    { type: 'output', content: '(&muted)1(&)', inline: true },
    { type: 'output', content: '(&muted)2(&)', inline: true },
    { type: 'blank', content: '' },
    { type: 'output', content: '(&muted)3(&)', inline: true },
    { type: 'output', content: '(&muted)4(&)', inline: true },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Card with Nested Children (Grid)(&)' },
    {
        type: 'card',
        content: 'This card contains other cards in a grid layout.',
        cardTitle: 'Parent Card (Grid)',
        display: 'grid',
        children: [
            { type: 'card', content: 'Child 1', cardTitle: 'C1' },
            { type: 'card', content: 'Child 2', cardTitle: 'C2' },
            { type: 'card', content: 'Child 3', cardTitle: 'C3' },
            { type: 'card', content: 'Child 4', cardTitle: 'C4' }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Accordion with Nested Children (Flex)(&)' },
    {
        type: 'accordion',
        content: 'Open to see nested items',
        display: 'flex',
        children: [
            { type: 'button', content: 'Action 1', style: 'primary', icon: 'mdi:check' },
            { type: 'button', content: 'Action 2', style: 'secondary', icon: 'mdi:close' },
            { type: 'button', content: 'Action 3', style: 'accent', icon: 'mdi:star' }
        ]
    },
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Group with Grid Layout(&)' },
    {
        type: 'group',
        content: '',
        display: 'grid',
        groupGap: '1rem',
        children: [
            { type: 'card', content: 'Grid Item 1', cardTitle: 'G1' },
            { type: 'card', content: 'Grid Item 2', cardTitle: 'G2' },
            { type: 'card', content: 'Grid Item 3', cardTitle: 'G3' }
        ]
    },
    { type: 'blank', content: '' },

    // End
    { type: 'success', content: '(&success)Component showcase complete!(&)' }
];