// import type { App, Component, InjectionKey, Plugin, PropType } from 'vue'
// import { createApp, defineComponent, h, inject } from 'vue'

// export interface DialogOptions {
// 	title?: string
// 	content?: string | Component
// 	dismissable?: boolean
// 	width?: string
// 	actions?: Array<{
// 		label: string
// 		onClick: () => void
// 		variant?: 'primary' | 'secondary' | 'danger'
// 	}>
// }

// export interface DialogApi {
// 	show: (options: DialogOptions) => void
// 	hide: () => void
// }

// const DialogSymbol: InjectionKey<DialogApi> = Symbol('dialog')

// export function useDialog(): DialogApi {
// 	const api = inject(DialogSymbol)
// 	if (!api) throw new Error('Dialog plugin not installed')
// 	return api
// }

// const Dialog = defineComponent({
// 	props: {
// 		options: {
// 			type: Object as () => DialogOptions,
// 			required: true
// 		},
// 		onClose: {
// 			type: Function as PropType<(event?: MouseEvent) => void>,
// 			required: true
// 		}
// 	},
// 	setup(props) {
// 		return () => h('div', {
// 			class: 'dialog-overlay',
// 			onClick: (e: MouseEvent) => {
// 				if (props.options.dismissable && e.target === e.currentTarget) {
// 					props.onClose()
// 				}
// 			}
// 		}, [
// 			h('div', {
// 				class: ['dialog', props.options.width ? `w-${props.options.width}` : 'w-96']
// 			}, [
// 				h('div', { class: 'dialog-header' }, [
// 					h('h3', { class: 'dialog-title' }, props.options.title),
// 					props.options.dismissable && h('button', {
// 						class: 'dialog-close',
// 						onClick: props.onClose
// 					}, '×')
// 				]),
// 				h('div', { class: 'dialog-content' }, [
// 					typeof props.options.content === 'string'
// 						? props.options.content
// 						: h(props.options.content as any)
// 				]),
// 				props.options.actions && h('div', { class: 'dialog-actions' }, props.options.actions.map(action => h('button', {
// 					class: ['dialog-btn', action.variant],
// 					onClick: () => {
// 						action.onClick()
// 						props.onClose()
// 					}
// 				}, action.label)
// 				))
// 			])
// 		])
// 	}
// })

// export const DialogPlugin: Plugin = {
// 	install: (app: App) => {
// 		// Create a div to mount our dialog
// 		const dialogContainer = document.createElement('div')
// 		document.body.appendChild(dialogContainer)

// 		let currentDialog: any = null

// 		const api: DialogApi = {
// 			show: (options: DialogOptions) => {
// 				// Remove existing dialog if any
// 				if (currentDialog) {
// 					currentDialog.unmount()
// 				}

// 				// Create new dialog instance
// 				const dialogApp = createApp(Dialog, {
// 					options,
// 					onClose: () => { api.hide() }
// 				})

// 				// Mount it
// 				currentDialog = dialogApp.mount(dialogContainer)
// 			},
// 			hide: () => {
// 				if (currentDialog) {
// 					currentDialog.unmount()
// 					currentDialog = null
// 				}
// 			}
// 		}

// 		app.provide(DialogSymbol, api)
// 	}
// }

// // Add some basic styles
// const style = document.createElement('style')
// style.textContent = `
// .dialog-overlay {
//   position: fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   background: rgba(0, 0, 0, 0.5);
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   z-index: 1000;
// }

// .dialog {
//   background: white;
//   border-radius: 0.5rem;
//   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
//   max-width: 90vw;
//   max-height: 90vh;
//   overflow: auto;
// }

// .dialog-header {
//   padding: 1rem;
//   border-bottom: 1px solid #e5e7eb;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }

// .dialog-title {
//   margin: 0;
//   font-size: 1.25rem;
//   font-weight: 600;
// }

// .dialog-close {
//   background: none;
//   border: none;
//   font-size: 1.5rem;
//   cursor: pointer;
//   padding: 0.25rem;
// }

// .dialog-content {
//   padding: 1rem;
// }

// .dialog-actions {
//   padding: 1rem;
//   border-top: 1px solid #e5e7eb;
//   display: flex;
//   justify-content: flex-end;
//   gap: 0.5rem;
// }

// .dialog-btn {
//   padding: 0.5rem 1rem;
//   border-radius: 0.375rem;
//   border: 1px solid #e5e7eb;
//   background: white;
//   cursor: pointer;
// }

// .dialog-btn.primary {
//   background: #3b82f6;
//   color: white;
//   border-color: #3b82f6;
// }

// .dialog-btn.danger {
//   background: #ef4444;
//   color: white;
//   border-color: #ef4444;
// }
// `
// document.head.appendChild(style)