import { h } from 'vue'
import type { IconSet, IconProps } from 'vuetify'

import {
    mdiAccount,
    mdiAccountPlus,
    mdiAlert,
    mdiArchive,
    mdiBackspace,
    mdiBookOpenPageVariant,
    mdiChartBar,
    mdiChartLine,
    mdiCheck,
    mdiCheckboxBlankOutline,
    mdiCheckboxMarked,
    mdiChevronDown,
    mdiChevronLeft,
    mdiChevronRight,
    mdiChevronUp,
    mdiClockOutline,
    mdiClose,
    mdiCloseCircle,
    mdiCodeArray,
    mdiCog,
    mdiCommentText,
    mdiConsole,
    mdiContentCopy,
    mdiContentSave,
    mdiDelete,
    mdiDeleteForever,
    mdiDeleteSweep,
    mdiDns,
    mdiDotsVertical,
    mdiDownload,
    mdiEye,
    mdiEyeOff,
    mdiFileDocumentOutline,
    mdiFileTree,
    mdiFingerprint,
    mdiFormatLineSpacing,
    mdiHeart,
    mdiHeartPulse,
    mdiImage,
    mdiInformation,
    mdiLock,
    mdiLogin,
    mdiLogout,
    mdiMagnify,
    mdiMenuDown,
    mdiMinus,
    mdiMonitor,
    mdiPalette,
    mdiPause,
    mdiPencil,
    mdiPlay,
    mdiPlus,
    mdiPlusBox,
    mdiPound,
    mdiPower,
    mdiPowerPlug,
    mdiRadioboxBlank,
    mdiRadioboxMarked,
    mdiRefresh,
    mdiShield,
    mdiSkipNext,
    mdiSkipPrevious,
    mdiTimer,
    mdiTimerSand,
    mdiUndo,
    mdiUnfoldLessHorizontal,
    mdiUnfoldMoreHorizontal,
    mdiUpload,
    mdiWeb,
    mdiWrap,
    mdiWrapDisabled,
} from '@mdi/js'

// Map kebab-case mdi icon names to SVG paths (tree-shakeable)
const iconMap: Record<string, string> = {
    'mdi-account': mdiAccount,
    'mdi-account-plus': mdiAccountPlus,
    'mdi-alert': mdiAlert,
    'mdi-archive': mdiArchive,
    'mdi-backspace': mdiBackspace,
    'mdi-book-open-page-variant': mdiBookOpenPageVariant,
    'mdi-chart-bar': mdiChartBar,
    'mdi-chart-line': mdiChartLine,
    'mdi-check': mdiCheck,
    'mdi-checkbox-blank-outline': mdiCheckboxBlankOutline,
    'mdi-checkbox-marked': mdiCheckboxMarked,
    'mdi-chevron-down': mdiChevronDown,
    'mdi-chevron-left': mdiChevronLeft,
    'mdi-chevron-right': mdiChevronRight,
    'mdi-chevron-up': mdiChevronUp,
    'mdi-clock-outline': mdiClockOutline,
    'mdi-close': mdiClose,
    'mdi-close-circle': mdiCloseCircle,
    'mdi-code-array': mdiCodeArray,
    'mdi-cog': mdiCog,
    'mdi-comment-text': mdiCommentText,
    'mdi-console': mdiConsole,
    'mdi-content-copy': mdiContentCopy,
    'mdi-content-save': mdiContentSave,
    'mdi-delete': mdiDelete,
    'mdi-delete-forever': mdiDeleteForever,
    'mdi-delete-sweep': mdiDeleteSweep,
    'mdi-dns': mdiDns,
    'mdi-dots-vertical': mdiDotsVertical,
    'mdi-download': mdiDownload,
    'mdi-eye': mdiEye,
    'mdi-eye-off': mdiEyeOff,
    'mdi-file-document-outline': mdiFileDocumentOutline,
    'mdi-file-tree': mdiFileTree,
    'mdi-fingerprint': mdiFingerprint,
    'mdi-format-line-spacing': mdiFormatLineSpacing,
    'mdi-heart': mdiHeart,
    'mdi-heart-pulse': mdiHeartPulse,
    'mdi-image': mdiImage,
    'mdi-information': mdiInformation,
    'mdi-lock': mdiLock,
    'mdi-login': mdiLogin,
    'mdi-logout': mdiLogout,
    'mdi-magnify': mdiMagnify,
    'mdi-menu-down': mdiMenuDown,
    'mdi-minus': mdiMinus,
    'mdi-monitor': mdiMonitor,
    'mdi-palette': mdiPalette,
    'mdi-pause': mdiPause,
    'mdi-pencil': mdiPencil,
    'mdi-play': mdiPlay,
    'mdi-plus': mdiPlus,
    'mdi-plus-box': mdiPlusBox,
    'mdi-pound': mdiPound,
    'mdi-power': mdiPower,
    'mdi-power-plug': mdiPowerPlug,
    'mdi-radiobox-blank': mdiRadioboxBlank,
    'mdi-radiobox-marked': mdiRadioboxMarked,
    'mdi-refresh': mdiRefresh,
    'mdi-shield': mdiShield,
    'mdi-skip-next': mdiSkipNext,
    'mdi-skip-previous': mdiSkipPrevious,
    'mdi-timer': mdiTimer,
    'mdi-timer-sand': mdiTimerSand,
    'mdi-undo': mdiUndo,
    'mdi-unfold-less-horizontal': mdiUnfoldLessHorizontal,
    'mdi-unfold-more-horizontal': mdiUnfoldMoreHorizontal,
    'mdi-upload': mdiUpload,
    'mdi-web': mdiWeb,
    'mdi-wrap': mdiWrap,
    'mdi-wrap-disabled': mdiWrapDisabled,
}

// Custom icon set: resolves both SVG path strings (from Vuetify aliases)
// and mdi-* kebab-case names (from component templates)
const component = (props: IconProps) => {
    const icon = props.icon as string
    // Vuetify aliases resolve to raw SVG path strings (start with 'M')
    const svgPath = icon.startsWith('M') ? icon : iconMap[icon]

    if (!svgPath) {
        console.warn(`[p3xr] Unknown MDI icon: ${icon}`)
        return h('span')
    }

    return h('svg', {
        class: 'v-icon__svg',
        xmlns: 'http://www.w3.org/2000/svg',
        viewBox: '0 0 24 24',
        role: 'img',
        'aria-hidden': 'true',
    }, [
        h('path', { d: svgPath, fill: 'currentColor' }),
    ])
}

export const mdiSvgIconSet: IconSet = { component }