export function debugEnvironment() {
  console.group('🔧 Environment Debug Info')
  console.log('Mode:', import.meta.env.MODE)
  console.log('Base URL:', import.meta.env.BASE_URL)
  console.log('Production:', import.meta.env.PROD)
  console.log('Development:', import.meta.env.DEV)

  // Log any custom VITE_ variables you've added
  // console.log('API Base URL:', import.meta.env.VITE_API_BASE_URL)
  // console.log('App Name:', import.meta.env.VITE_APP_NAME)

  console.groupEnd()
}

// Call in main.ts during development
if (import.meta.env.DEV) {
  debugEnvironment()
}

// ❌ Common mistakes
const tableData = ref()  // undefined
const tableData = ref({}) // object instead of array
const tableData = ref([{ id: 1, user_name: 'John' }]) // snake_case keys

// ✅ Correct data format
const tableData = ref<User[]>([
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' }
])

// ✅ Column definitions must match data keys
const columns: ColumnDef<User>[] = [
  { accessorKey: 'name', header: 'Name' },      // matches data.name
  { accessorKey: 'email', header: 'Email' },    // matches data.email
  // ❌ { accessorKey: 'user_name', header: 'Name' } // key doesn't exist
]

// ✅ Handle async data properly
const { data: users, loading } = useAsyncData('users', () => fetchUsers())
const tableData = computed(() => users.value || [])

// ❌ Common column configuration mistakes
const columns = [
  { accessorKey: 'name', header: 'Name', sortable: true }, // ❌ sortable should be enableSorting
  { key: 'email', title: 'Email' }, // ❌ wrong property names
  { accessorKey: 'status', header: 'Status', cell: 'BadgeCell' } // ❌ cell should be function
]

// ✅ Correct column configuration
import { h } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
    enableSorting: true,
    meta: { displayName: 'Full Name' } // For column visibility
  },
  {
    accessorKey: 'email',
    header: 'Email Address',
    enableSorting: true,
    cell: ({ getValue }) => {
      const email = getValue() as string
      return h('a', {
        href: `mailto:\${email}`,
        class: 'text-blue-600 hover:underline'
      }, email)
    }
  },
  {
    accessorKey: 'status',
    header: 'Status',
    enableSorting: false,
    cell: ({ row }) => {
      const status = row.getValue('status') as string
      return h(Badge, {
        variant: status === 'active' ? 'default' : 'secondary'
      }, () => status)
    }
  },
  {
    id: 'actions',
    header: 'Actions',
    enableSorting: false,
    enableHiding: false,
    cell: ({ row }) => {
      return h('div', { class: 'flex gap-2' }, [
        h(Button, {
          size: 'sm',
          variant: 'outline',
          onClick: () => editUser(row.original.id)
        }, () => 'Edit'),
        h(Button, {
          size: 'sm',
          variant: 'destructive',
          onClick: () => deleteUser(row.original.id)
        }, () => 'Delete')
      ])
    }
  }
]

// ❌ Performance anti-patterns
const columns = computed(() => [ // ❌ columns recreated on every render
  { accessorKey: 'name', header: 'Name' }
])

const data = computed(() => rawData.value.map(item => ({ // ❌ data transformed on every render
  ...item,
  displayName: processName(item.name) // expensive operation
})))

// ✅ Optimized patterns
const columns = shallowRef<ColumnDef<User>[]>([ // ✅ stable reference
  {
    accessorKey: 'name',
    header: 'Name',
    cell: ({ getValue }) => {
      const name = getValue() as string
      // ✅ lightweight operations only
      return h('span', { class: 'font-medium' }, name)
    }
  }
])

// ✅ Pre-process data when it changes, not on every render
const processedData = computed(() => {
  return rawData.value.map(item => ({
    ...item,
    searchableText: `\${item.name} \${item.email}`.toLowerCase(), // pre-compute for search
    displayDate: formatDate(item.createdAt) // pre-compute expensive formatting
  }))
})

// ✅ Debounce search to avoid excessive filtering
const searchTerm = ref('')
const debouncedSearch = useDebounceFn((value: string) => {
  tableRef.value?.table.setGlobalFilter(value)
}, 300)

watch(searchTerm, debouncedSearch)

// ✅ Virtual scrolling for very large datasets
const virtualizedConfig = computed(() => ({
  ...baseConfig,
  virtualization: {
    enabled: processedData.value.length > 1000,
    itemHeight: 48
  }
}))

// ❌ Common Zod schema mistakes
const schema = z.object({
  email: z.string(), // ❌ no email validation
  age: z.string().min(18), // ❌ string instead of number
  role: z.string().oneOf(['admin', 'user']), // ❌ should use enum
  confirmPassword: z.string() // ❌ no password confirmation logic
})

// ✅ Correct Zod schema with proper validation
const schema = z.object({
  email: z.string()
    .min(1, 'Email is required')
    .email('Please enter a valid email address'),

  age: z.preprocess(
    (val) => val === '' ? undefined : Number(val), // Handle empty strings
    z.number()
      .min(18, 'Must be at least 18 years old')
      .max(120, 'Must be less than 120 years old')
  ),

  role: z.enum(['admin', 'user', 'moderator'], {
    errorMap: () => ({ message: 'Please select a valid role' })
  }),

  password: z.string()
    .min(8, 'Password must be at least 8 characters')
    .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, 'Password must contain uppercase, lowercase, and number'),

  confirmPassword: z.string()
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords don't match",
  path: ["confirmPassword"] // Show error on confirmPassword field
})

// ✅ Optional fields with defaults
const optionalSchema = z.object({
  name: z.string().min(1),
  bio: z.string().max(500).optional().default(''),
  newsletter: z.boolean().default(false),
  preferences: z.object({
    theme: z.enum(['light', 'dark']).default('light'),
    language: z.string().default('en')
  }).optional().default({})
})

// ❌ Common field configuration mistakes
const fields = [
  { name: 'email', type: 'email' }, // ❌ type should be 'input' with inputType: 'email'
  { name: 'role', type: 'select' }, // ❌ missing options
  { name: 'active', type: 'boolean' }, // ❌ type should be 'checkbox' or 'switch'
  { name: 'skills', type: 'multiselect' } // ❌ type doesn't exist
]

// ✅ Correct field configurations
const fields: FormFieldConfig[] = [
  {
    type: 'input',
    name: 'email',
    label: 'Email Address',
    inputType: 'email', // ✅ specify input type
    placeholder: 'Enter your email',
    required: true
  },
  {
    type: 'select',
    name: 'role',
    label: 'User Role',
    placeholder: 'Select a role',
    options: [ // ✅ required for select fields
      { label: 'Administrator', value: 'admin' },
      { label: 'Regular User', value: 'user' },
      { label: 'Moderator', value: 'moderator' }
    ],
    required: true
  },
  {
    type: 'switch', // ✅ or 'checkbox' for boolean values
    name: 'active',
    label: 'Active Status',
    text: 'Enable user account'
  },
  {
    type: 'combobox', // ✅ use combobox for searchable multi-select
    name: 'skills',
    label: 'Technical Skills',
    placeholder: 'Select skills',
    searchPlaceholder: 'Search skills...',
    options: [
      { label: 'Vue.js', value: 'vue' },
      { label: 'React', value: 'react' },
      { label: 'TypeScript', value: 'typescript' }
    ]
  },
  {
    type: 'input',
    name: 'salary',
    label: 'Salary Range',
    inputType: 'number',
    min: 0,
    max: 1000000,
    step: 1000
  }
]

// ✅ Conditional field example
const conditionalField: FormFieldConfig = {
  type: 'input',
  name: 'companyName',
  label: 'Company Name',
  placeholder: 'Enter company name',
  condition: {
    field: 'hasJob', // Field to watch
    value: true,     // Value to match
    operator: 'eq'   // Comparison operator
  }
}

// ❌ Common state management mistakes
const formData = ref({}) // ❌ not reactive to field changes
const handleSubmit = (data) => { // ❌ not using TypeScript
  console.log(data)
}

// ✅ Proper form state management
interface UserFormData {
  name: string
  email: string
  role: 'admin' | 'user'
  active: boolean
}

const formRef = ref<InstanceType<typeof HiForm>>()

// ✅ Handle form submission with proper typing
const handleSubmit = async (data: UserFormData) => {
  try {
    isSubmitting.value = true

    // Validate data one more time (optional)
    const validatedData = schema.parse(data)

    // Submit to API
    await userService.createUser(validatedData)

    // Show success message
    toast.success('User created successfully!')

    // Reset form or redirect
    formRef.value?.reset()
    // or router.push('/users')

  } catch (error) {
    if (error instanceof z.ZodError) {
      // Handle validation errors
      toast.error('Please check your input and try again')
    } else {
      // Handle API errors
      console.error('Submission error:', error)
      toast.error('Failed to create user. Please try again.')
    }
  } finally {
    isSubmitting.value = false
  }
}

// ✅ Watch form changes for auto-save or validation
const handleFormChange = useDebounceFn((data: Partial<UserFormData>) => {
  // Auto-save draft
  localStorage.setItem('user-form-draft', JSON.stringify(data))

  // Real-time validation feedback
  validatePartialData(data)
}, 500)

// ✅ Programmatic form control
const fillTestData = () => {
  formRef.value?.setValues({
    name: 'John Doe',
    email: '[email protected]',
    role: 'user',
    active: true
  })
}

const validateForm = async () => {
  const isValid = await formRef.value?.validate()
  if (isValid) {
    toast.success('Form is valid!')
  } else {
    toast.error('Please fix the errors before submitting')
  }
}

<!-- ❌ Common Tailwind conflicts -->
<HiTable class="bg-blue-500" /> <!-- May be overridden by component styles -->
<div class="p-4 p-6"> <!-- Last class wins, p-6 will override p-4 -->

<!-- ✅ Solutions for Tailwind conflicts -->

<!-- Method 1: Use important modifier -->
<HiTable class="!bg-blue-500" /> <!-- Forces the style -->

<!-- Method 2: Use CSS-in-JS for complex styling -->
<HiTable :style="{ backgroundColor: 'rgb(59 130 246)' }" />

<!-- Method 3: Use component-specific classes -->
<HiTable class="custom-table-blue" />

<!-- Method 4: Use CSS custom properties -->
<HiTable
  class="custom-table"
  :style="{ '--table-bg': '#3b82f6' }"
/>

/* Method 1: Higher specificity */
.custom-table-blue.hi-table {
  @apply bg-blue-500;
}

/* Method 2: CSS custom properties */
.custom-table {
  background-color: var(--table-bg, theme('colors.white'));
}

/* Method 3: Component-specific overrides */
.hi-table.custom-styling {
  @apply bg-white border border-gray-200 rounded-lg shadow-sm;
}

.hi-table.custom-styling th {
  @apply bg-gray-50 font-semibold text-gray-900;
}

.hi-table.custom-styling td {
  @apply border-t border-gray-100;
}

/* Method 4: Dark mode considerations */
.dark .hi-table.custom-styling {
  @apply bg-gray-800 border-gray-700;
}

.dark .hi-table.custom-styling th {
  @apply bg-gray-700 text-gray-100;
}

.dark .hi-table.custom-styling td {
  @apply border-gray-600;
}

<!-- ❌ Global styles affecting components -->
<style>
.table { /* Too generic, affects all tables */
  border: 1px solid red;
}
</style>

<!-- ✅ Proper style isolation -->

<!-- Method 1: Scoped styles -->
<template>
  <div class="user-management">
    <HiTable class="custom-user-table" />
  </div>
</template>

<style scoped>
.user-management {
  @apply p-6 bg-white rounded-lg;
}

.custom-user-table {
  @apply border border-gray-200;
}

/* Scoped deep selectors for child components */
.custom-user-table :deep(.table-header) {
  @apply bg-blue-50;
}

.custom-user-table :deep(.table-row:hover) {
  @apply bg-blue-25;
}
</style>

<!-- Method 2: CSS Modules -->
<template>
  <div :class="$style.container">
    <HiTable :class="$style.table" />
  </div>
</template>

<style module>
.container {
  @apply p-6 bg-white rounded-lg shadow-sm;
}

.table {
  @apply border border-gray-200;

  /* Module-scoped custom properties */
  --table-hover-color: theme('colors.blue.50');
}

.table :global(.table-row:hover) {
  background-color: var(--table-hover-color);
}
</style>

<!-- Method 3: BEM methodology for global styles -->
<template>
  <div class="user-management">
    <HiTable class="user-management__table" />
  </div>
</template>

<style>
/* Global styles using BEM */
.user-management {
  @apply p-6 bg-white rounded-lg;
}

.user-management__table {
  @apply border border-gray-200;
}

.user-management__table .table-header {
  @apply bg-blue-50 font-semibold;
}

.user-management__table--compact {
  @apply text-sm;
}

.user-management__table--compact .table-cell {
  @apply py-2;
}
</style>

<!-- ❌ Hard-coded colors that don't respect theme -->
<div style="background: white; color: black;">
  Content
</div>

<!-- ✅ Theme-aware styling -->

<template>
  <div class="theme-aware-component">
    <HiTable
      :class="tableClasses"
      :config="themeAwareConfig"
    />
  </div>
</template>

<script setup lang="ts">
import { useTheme } from '@/shared/composables/useTheme'

const { isDark, theme } = useTheme()

// ✅ Computed classes based on theme
const tableClasses = computed(() => ({
  'table-light': !isDark.value,
  'table-dark': isDark.value,
  'table-high-contrast': theme.value === 'high-contrast'
}))

// ✅ Theme-aware configuration
const themeAwareConfig = computed(() => ({
  styling: {
    containerClass: isDark.value
      ? 'bg-gray-800 border-gray-700'
      : 'bg-white border-gray-200',
    headerClass: isDark.value
      ? 'bg-gray-700 text-gray-100'
      : 'bg-gray-50 text-gray-900',
    rowClass: isDark.value
      ? 'hover:bg-gray-700 border-gray-600'
      : 'hover:bg-gray-50 border-gray-100'
  }
}))
</script>

<style scoped>
.theme-aware-component {
  /* Use CSS custom properties that respect theme */
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Theme-specific overrides */
.table-light {
  --table-bg: theme('colors.white');
  --table-text: theme('colors.gray.900');
  --table-border: theme('colors.gray.200');
}

.table-dark {
  --table-bg: theme('colors.gray.800');
  --table-text: theme('colors.gray.100');
  --table-border: theme('colors.gray.700');
}

.table-high-contrast {
  --table-bg: theme('colors.black');
  --table-text: theme('colors.white');
  --table-border: theme('colors.white');
}

/* Apply theme variables */
:deep(.hi-table) {
  background-color: var(--table-bg);
  color: var(--table-text);
  border-color: var(--table-border);
}
</style>

// ❌ Common TypeScript errors and fixes

// Error: Property 'data' does not exist on type 'never'
const tableData = ref([]) // ❌ TypeScript can't infer type
const tableData = ref<User[]>([]) // ✅ Explicit type annotation

// Error: Type 'string' is not assignable to type 'never'
const formData = reactive({}) // ❌ Empty object has no properties
const formData = reactive<UserFormData>({ // ✅ Type the reactive object
  name: '',
  email: '',
  role: 'user'
})

// Error: Cannot find module or its corresponding type declarations
import { SomeComponent } from './components' // ❌ Missing file extension or index
import { SomeComponent } from './components/SomeComponent.vue' // ✅ Explicit path
import { SomeComponent } from './components/index' // ✅ Using index file

// Error: 'ref' is declared but its value is never read
const tableRef = ref() // ❌ Unused ref
const tableRef = ref<InstanceType<typeof HiTable>>() // ✅ Typed and used

// ✅ Type-safe component refs
const formRef = ref<{
  validate: () => Promise<boolean>
  reset: () => void
  setValues: (values: any) => void
}>()

// ✅ Type-safe event handlers
const handleSubmit = (data: UserFormData) => { // ✅ Typed parameter
  console.log(data.name) // TypeScript knows about 'name' property
}

// ✅ Type-safe API responses
interface ApiResponse<T> {
  data: T
  message: string
  success: boolean
}

const fetchUsers = async (): Promise<ApiResponse<User[]>> => {
  const response = await fetch('/api/users')
  return response.json()
}

// vite.config.ts - optimized build configuration
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],

  // ✅ Path resolution
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },

  // ✅ Build optimization
  build: {
    // Increase chunk size warning limit
    chunkSizeWarningLimit: 1000,

    // Manual chunk splitting for better caching
    rollupOptions: {
      output: {
        manualChunks: {
          // Vendor libraries
          vue: ['vue'],
          router: ['vue-router'],
          pinia: ['pinia'],

          // UI libraries
          ui: ['@headlessui/vue', 'lucide-vue-next'],
          table: ['@tanstack/vue-table'],
          form: ['zod'],

          // Chart libraries (if using)
          charts: ['chart.js', 'vue-chartjs'],
        },

        // Asset naming
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(ext)) {
            return `assets/images/[name]-[hash].[ext]`
          }
          if (/woff2?|eot|ttf|otf/i.test(ext)) {
            return `assets/fonts/[name]-[hash].[ext]`
          }
          return `assets/[name]-[hash].[ext]`
        },
      },
    },

    // Source maps for production debugging
    sourcemap: false, // Set to true if needed

    // Minification
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // Remove console.log in production
        drop_debugger: true,
      },
    },
  },

  // ✅ Development server configuration
  server: {
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    },
  },

  // ✅ Dependency optimization
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia'],
    exclude: ['@vueuse/core'], // Exclude if causing issues
  },
})

// ✅ Environment-specific configuration
const config = defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    // Base configuration
    ...baseConfig,

    // Environment-specific overrides
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },

    ...(mode === 'development' && {
      // Development-specific config
      css: {
        devSourcemap: true,
      },
    }),

    ...(mode === 'production' && {
      // Production-specific config
      build: {
        ...baseConfig.build,
        reportCompressedSize: false, // Faster builds
      },
    }),
  }
})