<script lang="ts">
	import TerminalTUI from '$lib/components/TerminalTUI.svelte';
	import type { TerminalLine } from '$lib/components/tui/types';
	import { user } from '$lib/config';
	import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';

	const speed = getPageSpeedMultiplier('components');
	const autoscroll = getPageAutoscroll('components');

	// Sample data for examples
	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
	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' },
		{ 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' },
		{ 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: '' },

		// ═══════════════════════════════════════════════════════════════
		// 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: '' },

		// ═══════════════════════════════════════════════════════════════
		// 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: '' },

		// ═══════════════════════════════════════════════════════════════
		// 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)// Progress bar(&)" },
		{ type: 'output', content: "{ type: 'progress', progress: 75, progressLabel: 'Loading...' }" },
		{ type: 'blank', content: '' },

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

<svelte:head>
	<title>Components | {user.name}</title>
	<meta name="description" content="Terminal UI Components Showcase" />
</svelte:head>

<div class="components-container">
	<TerminalTUI {lines} title="~/components" interactive={true} {speed} {autoscroll} />
</div>

<style>
	.components-container {
		padding: 2rem 1rem;
		min-height: calc(100vh - 60px);
	}
</style>
