<template>
  <HiTable
    :data="users"
    :columns="columns"
  />
</template>

<script setup lang="ts">
import { HiTable } from '@/components/HiTable'
import type { ColumnDef } from '@tanstack/vue-table'

interface User {
  id: string
  name: string
  email: string
  role: string
}

const users = ref<User[]>([
  { id: '1', name: 'John Doe', email: '[email protected]', role: 'Admin' },
  { id: '2', name: 'Jane Smith', email: '[email protected]', role: 'User' },
])

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    accessorKey: 'role',
    header: 'Role',
  },
]
</script>

<template>
  <HiTable
    :data="products"
    :columns="columns"
    :config="tableConfig"
    :loading="loading"
  />
</template>

<script setup lang="ts">
import type { TableConfig } from '@/components/HiTable/types'

const tableConfig: TableConfig = {
  pagination: {
    pageSize: 20,
    showPageInfo: true,
  },
  sorting: {
    enabled: true,
    multiSort: true,
  },
  filtering: {
    searchPlaceholder: 'Search products...',
    searchColumn: 'name',
  },
  rowSelection: {
    enabled: true,
  },
  styling: {
    compact: true,
    headerClass: 'font-semibold',
  },
  emptyState: {
    message: 'No products found. Try adjusting your search.',
  },
}
</script>

// useTable.ts - Core state management pattern
export function useTableInstance<T>(
  props: HiTableProps<T>,
  config: TableConfig = {}
) {
  // Reactive state for table features
  const sorting = ref<SortingState>([])
  const columnFilters = ref<ColumnFiltersState>([])
  const columnVisibility = ref<VisibilityState>({})
  const rowSelection = ref({})
  const expanded = ref<ExpandedState>({})

  // Configuration merging with sensible defaults
  const mergedConfig = computed(() => ({
    ...defaultConfig,
    ...config,
    // Deep merge for nested options
    pagination: { ...defaultConfig.pagination, ...config.pagination },
    // ... other feature configs
  }))

  // TanStack Table instance with all features
  const table = useVueTable({
    get data() { return props.data },
    get columns() { return props.columns },
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    // State binding
    onSortingChange: updaterOrValue => {
      sorting.value = valueUpdater(updaterOrValue, sorting.value)
    },
    // ... other state handlers
  })

  return { table, config: mergedConfig }
}

// Example: Creating reusable column patterns
import { h, type ColumnDef } from '@tanstack/vue-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'

// Example: Selection column pattern
const selectionColumn: ColumnDef<User> = {
  id: 'select',
  header: ({ table }) => h(Checkbox, {
    checked: table.getIsAllPageRowsSelected(),
    'onUpdate:checked': (value) => table.toggleAllPageRowsSelected(!!value),
    ariaLabel: 'Select all rows'
  }),
  cell: ({ row }) => h(Checkbox, {
    checked: row.getIsSelected(),
    'onUpdate:checked': (value) => row.toggleSelected(!!value),
    ariaLabel: `Select row ${row.index + 1}`
  }),
  enableSorting: false,
  enableHiding: false,
}

// Example: Status badge column pattern
const statusColumn: ColumnDef<User> = {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ getValue }) => {
    const status = getValue() as string
    const variants: Record<string, string> = {
      active: 'default',
      inactive: 'secondary',
      pending: 'outline'
    }
    return h(Badge, { variant: variants[status] || 'secondary' }, () => status)
  },
}

// Example: Actions column pattern
const actionsColumn: ColumnDef<User> = {
  id: 'actions',
  header: 'Actions',
  cell: ({ row }) => {
    return h('div', { class: 'flex gap-2' }, [
      h(Button, {
        variant: 'ghost',
        size: 'sm',
        onClick: () => console.log('Edit', row.original)
      }, () => 'Edit'),
      h(Button, {
        variant: 'ghost',
        size: 'sm',
        onClick: () => console.log('Delete', row.original)
      }, () => 'Delete')
    ])
  },
  enableSorting: false,
}

<template>
  <HiTable
    :data="users"
    :columns="columns"
    :config="tableConfig"
    :loading="isLoading"
  >
    <template #toolbar-actions="{ table }">
      <Button @click="refetchData" :disabled="isLoading">
        <RefreshCw :class="{ 'animate-spin': isLoading }" class="h-4 w-4 mr-2" />
        {{ isLoading ? 'Refreshing...' : 'Refresh' }}
      </Button>
    </template>
  </HiTable>
</template>

<script setup lang="ts">
// Reactive data fetching pattern
const users = ref<User[]>([])
const isLoading = ref(false)
const error = ref<string | null>(null)

// API integration composable
const { data, loading, error: apiError, refetch } = useAsyncData(
  'users',
  () => fetchUsers(),
  {
    transform: (data: APIResponse<User[]>) => data.items,
    onError: (err) => {
      console.error('Failed to fetch users:', err)
      toast.error('Failed to load user data')
    }
  }
)

// Sync reactive state
watchEffect(() => {
  users.value = data.value || []
  isLoading.value = loading.value
  error.value = apiError.value?.message || null
})

// Manual refresh with optimistic updates
const refetchData = async () => {
  try {
    await refetch()
    toast.success('Data refreshed successfully')
  } catch (err) {
    toast.error('Failed to refresh data')
  }
}

// Server-side pagination pattern
const handlePageChange = async (page: number, pageSize: number) => {
  try {
    const response = await fetchUsers({ page, limit: pageSize })
    users.value = response.items
    // Update pagination state
  } catch (err) {
    toast.error('Failed to load page')
  }
}
</script>

<script setup lang="ts">
// ✅ Good: Memoize column definitions
const columns = shallowRef<ColumnDef<User>[]>([
  {
    accessorKey: 'name',
    header: 'Name',
    // Memoize expensive cell renderers
    cell: ({ getValue }) => {
      const name = getValue() as string
      return h('span', { class: 'font-medium' }, name)
    }
  },
  {
    accessorKey: 'email',
    header: 'Email',
    // Use stable references for better performance
    meta: { className: 'text-muted-foreground' }
  }
])

// ✅ Good: Debounce search input
const searchTerm = ref('')
const debouncedSearch = useDebounceFn((value: string) => {
  // Apply search filter to table
  tableRef.value?.table.setGlobalFilter(value)
}, 300)

// Watch search term changes
watch(searchTerm, (newValue) => {
  debouncedSearch(newValue)
})

// ✅ Good: Cleanup watchers and subscriptions
onUnmounted(() => {
  // Clean up any subscriptions or timers
  debouncedSearch.cancel()
})

// ❌ Avoid: Creating columns in computed (causes re-renders)
// const columns = computed(() => [...]) // Don't do this

// ❌ Avoid: Heavy operations in cell renderers
// cell: ({ row }) => {
//   // Heavy computation on every render
//   const expensiveData = heavyCalculation(row.original)
//   return h('span', expensiveData)
// }

// ✅ Better: Pre-compute data or use computed properties
const processedData = computed(() =>
  rawData.value.map(item => ({
    ...item,
    computedField: heavyCalculation(item) // Computed once
  }))
)
</script>

// types/tableData.ts - Data validation schemas
import { z } from 'zod'

// Define data schemas for type safety
const UserSchema = z.object({
  id: z.string().min(1),
  name: z.string().min(2),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'moderator']),
  status: z.enum(['active', 'inactive', 'suspended']),
  createdAt: z.string().datetime(),
})

type User = z.infer<typeof UserSchema>

// Data validation utility
export function validateTableData<T>(data: unknown[], schema: z.ZodSchema<T>): T[] {
  const validatedData: T[] = []
  const errors: string[] = []

  data.forEach((item, index) => {
    try {
      const validItem = schema.parse(item)
      validatedData.push(validItem)
    } catch (error) {
      if (error instanceof z.ZodError) {
        errors.push(`Row ${index + 1}: ${error.errors.map(e => e.message).join(', ')}`)
      }
    }
  })

  if (errors.length > 0) {
    console.warn('Data validation errors:', errors)
    // Optionally show user notification
    toast.warning(`${errors.length} rows have validation errors`)
  }

  return validatedData
}

// Usage in component
const safeUserData = computed(() =>
  validateTableData(rawUserData.value, UserSchema)
)

<template>
  <div>
    <!-- Error state handling -->
    <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 p-4">
      <div class="flex">
        <AlertCircle class="h-5 w-5 text-red-400" />
        <div class="ml-3">
          <h3 class="text-sm font-medium text-red-800">Data Loading Error</h3>
          <p class="mt-1 text-sm text-red-700">{{ error }}</p>
          <div class="mt-4">
            <Button @click="retryLoad" variant="outline" size="sm">
              Try Again
            </Button>
          </div>
        </div>
      </div>
    </div>

    <!-- Table with fallback data -->
    <HiTable
      v-else
      :data="tableData"
      :columns="columns"
      :config="tableConfig"
      :loading="isLoading"
    >
      <!-- Custom empty state for different scenarios -->
      <template #empty-state>
        <div class="text-center py-12">
          <template v-if="isFiltered">
            <SearchX class="mx-auto h-12 w-12 text-muted-foreground" />
            <h3 class="mt-4 text-lg font-semibold">No results found</h3>
            <p class="mt-2 text-muted-foreground">
              No data matches your current filters.
            </p>
            <Button @click="clearFilters" class="mt-4" variant="outline">
              Clear Filters
            </Button>
          </template>
          <template v-else>
            <Database class="mx-auto h-12 w-12 text-muted-foreground" />
            <h3 class="mt-4 text-lg font-semibold">No data available</h3>
            <p class="mt-2 text-muted-foreground">
              Get started by adding your first entry.
            </p>
            <Button @click="createNew" class="mt-4">
              Add New Item
            </Button>
          </template>
        </div>
      </template>
    </HiTable>
  </div>
</template>

<script setup lang="ts">
import { AlertCircle, SearchX, Database } from 'lucide-vue-next'

const error = ref<string | null>(null)
const isLoading = ref(false)
const isFiltered = computed(() => {
  // Check if any filters are applied
  return tableRef.value?.table.getState().columnFilters.length > 0 ||
         tableRef.value?.table.getState().globalFilter
})

const retryLoad = async () => {
  error.value = null
  await loadData()
}

const clearFilters = () => {
  tableRef.value?.table.resetColumnFilters()
  tableRef.value?.table.setGlobalFilter('')
}

const createNew = () => {
  // Navigate to create form or open modal
  router.push('/users/create')
}

// Graceful error handling
const loadData = async () => {
  try {
    isLoading.value = true
    error.value = null
    const data = await fetchUsers()
    users.value = data
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'An unexpected error occurred'
    console.error('Failed to load table data:', err)
  } finally {
    isLoading.value = false
  }
}
</script>