<template>
    <div :class="cardClasses">
        <slot />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

export interface CardProps {
    /** Visual variant */
    variant?: 'elevated' | 'outlined' | 'filled' | 'soft'
    /** Color scheme */
    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'error'
    /** Padding size */
    padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
    /** Border radius */
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
    /** Interactive state */
    interactive?: boolean
    /** Disabled state */
    disabled?: boolean
}

const props = withDefaults(defineProps<CardProps>(), {
    variant: 'elevated',
    color: 'neutral',
    padding: 'md',
    rounded: 'lg',
    interactive: false,
    disabled: false,
})

/**
 * Tailwind class maps using new design tokens
 */
const baseClasses = `
    relative transition-all duration-micro ease-micro
    disabled:opacity-50 disabled:pointer-events-none
`.trim().replace(/\s+/g, ' ')

const variantClasses: Record<string, string> = {
    elevated: 'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-soft',
    outlined: 'bg-transparent border-2 border-neutral-300 dark:border-neutral-700',
    filled: 'bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700',
    soft: 'bg-white/60 dark:bg-neutral-900/60 backdrop-blur-sm border border-white/20 dark:border-neutral-700/30 shadow-soft',
}

const colorClasses: Record<string, Record<string, string>> = {
    neutral: {
        elevated: 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800',
        outlined: 'border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-neutral-100',
        filled: 'bg-neutral-50 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
        soft: 'bg-white/60 dark:bg-neutral-900/60 border-white/20 dark:border-neutral-700/30',
    },
    primary: {
        elevated: 'bg-primary-50 dark:bg-primary-950 border-primary-200 dark:border-primary-800',
        outlined: 'border-primary-300 dark:border-primary-700 text-primary-900 dark:text-primary-100',
        filled: 'bg-primary-100 dark:bg-primary-900 border-primary-200 dark:border-primary-800',
        soft: 'bg-primary-50/60 dark:bg-primary-950/60 border-primary-200/30 dark:border-primary-800/30',
    },
    success: {
        elevated: 'bg-success-50 dark:bg-success-950 border-success-200 dark:border-success-800',
        outlined: 'border-success-300 dark:border-success-700 text-success-900 dark:text-success-100',
        filled: 'bg-success-100 dark:bg-success-900 border-success-200 dark:border-success-800',
        soft: 'bg-success-50/60 dark:bg-success-950/60 border-success-200/30 dark:border-success-800/30',
    },
    warning: {
        elevated: 'bg-warning-50 dark:bg-warning-950 border-warning-200 dark:border-warning-800',
        outlined: 'border-warning-300 dark:border-warning-700 text-warning-900 dark:text-warning-100',
        filled: 'bg-warning-100 dark:bg-warning-900 border-warning-200 dark:border-warning-800',
        soft: 'bg-warning-50/60 dark:bg-warning-950/60 border-warning-200/30 dark:border-warning-800/30',
    },
    error: {
        elevated: 'bg-error-50 dark:bg-error-950 border-error-200 dark:border-error-800',
        outlined: 'border-error-300 dark:border-error-700 text-error-900 dark:text-error-100',
        filled: 'bg-error-100 dark:bg-error-900 border-error-200 dark:border-error-800',
        soft: 'bg-error-50/60 dark:bg-error-950/60 border-error-200/30 dark:border-error-800/30',
    },
}

const paddingClasses: Record<string, string> = {
    none: 'p-0',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
    xl: 'p-8',
}

const roundedClasses: Record<string, string> = {
    none: 'rounded-none',
    sm: 'rounded-sm',
    md: 'rounded-md',
    lg: 'rounded-lg',
    xl: 'rounded-xl',
    full: 'rounded-full',
}

const interactiveClasses = `
    cursor-pointer hover:shadow-medium hover:scale-[1.02] active:scale-[0.98]
    focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
    transform-gpu
`.trim().replace(/\s+/g, ' ')

const cardClasses = computed(() => {
    const classes = [baseClasses]

    // Base variant and color
    const variantClass = variantClasses[props.variant] || variantClasses.elevated
    const colorClass = colorClasses[props.color]?.[props.variant] || ''

    // Replace color-specific classes if color is not neutral
    if (props.color !== 'neutral') {
        classes.push(variantClass.replace(/bg-\S+|border-\S+|text-\S+/g, ''))
        classes.push(colorClass)
    } else {
        classes.push(variantClass)
    }

    // Padding
    classes.push(paddingClasses[props.padding] || paddingClasses.md)

    // Rounded
    classes.push(roundedClasses[props.rounded] || roundedClasses.lg)

    // Interactive
    if (props.interactive && !props.disabled) {
        classes.push(interactiveClasses)
    }

    // Disabled
    if (props.disabled) {
        classes.push('opacity-50 pointer-events-none')
    }

    return classes.join(' ')
})
</script>

<style scoped>
/* Additional styles if needed */
</style>