'use client'

import { ChevronDown, SlidersHorizontal, X } from 'lucide-react'
import { CourseSearch } from '@/components/course-search'
import { type CategoryFilter } from '@/lib/courses'
import { cn } from '@/lib/utils'

type CourseFiltersToolbarProps = {
  categories: CategoryFilter[]
  selectedCategory: string
  onCategoryChange: (category: string) => void
  searchQuery?: string
  onSearchQueryChange?: (query: string) => void
  resultCount: number
  searchPlaceholder?: string
  showSearch?: boolean
  sticky?: boolean
}

export function CategorySidebar({
  categories,
  selectedCategory,
  onCategoryChange,
  resultCount,
  onClear,
  className,
}: {
  categories: CategoryFilter[]
  selectedCategory: string
  onCategoryChange: (category: string) => void
  resultCount: number
  onClear?: () => void
  className?: string
}) {
  const hasActiveFilters = selectedCategory !== 'All'

  return (
    <aside className={cn('rounded-xl border border-border/70 bg-card p-4', className)}>
      <div className="mb-4 flex items-center justify-between gap-2">
        <h2 className="text-sm font-bold uppercase tracking-wider text-foreground">Categories</h2>
        <span className="text-xs font-medium text-muted-foreground">{resultCount} results</span>
      </div>
      <nav className="max-h-[calc(100vh-14rem)] space-y-1 overflow-y-auto pr-1" aria-label="Course categories">
        {categories.map((category) => {
          const isActive = selectedCategory === category.name
          return (
            <button
              key={category.name}
              type="button"
              onClick={() => onCategoryChange(category.name)}
              className={cn(
                'flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors',
                isActive
                  ? 'bg-primary font-semibold text-primary-foreground'
                  : 'text-foreground hover:bg-muted',
              )}
              aria-current={isActive ? 'true' : undefined}
            >
              <span className="line-clamp-2 leading-snug">{category.name}</span>
              <span
                className={cn(
                  'shrink-0 rounded-full px-2 py-0.5 text-xs font-medium tabular-nums',
                  isActive ? 'bg-white/20 text-primary-foreground' : 'bg-muted text-muted-foreground',
                )}
              >
                {category.count}
              </span>
            </button>
          )
        })}
      </nav>
      {hasActiveFilters && onClear && (
        <button
          type="button"
          onClick={onClear}
          className="mt-4 w-full rounded-lg border border-border px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        >
          Clear filters
        </button>
      )}
    </aside>
  )
}

export function CourseFiltersToolbar({
  categories,
  selectedCategory,
  onCategoryChange,
  searchQuery = '',
  onSearchQueryChange,
  resultCount,
  searchPlaceholder = 'Search by course name, category, or skill...',
  showSearch = true,
  sticky = true,
}: CourseFiltersToolbarProps) {
  const hasActiveFilters = selectedCategory !== 'All' || searchQuery.trim().length > 0

  return (
    <section
      className={cn(
        'border-b border-border bg-background/95 py-4 backdrop-blur-md md:py-5',
        sticky && 'sticky top-[4.25rem] z-30',
      )}
    >
      <div className="container-wide space-y-4">
        {showSearch && onSearchQueryChange && (
          <CourseSearch
            placeholder={searchPlaceholder}
            value={searchQuery}
            onQueryChange={onSearchQueryChange}
            className="w-full"
          />
        )}

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between lg:hidden">
          <label className="relative w-full sm:max-w-md">
            <span className="sr-only">Filter by category</span>
            <SlidersHorizontal className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <select
              value={selectedCategory}
              onChange={(event) => onCategoryChange(event.target.value)}
              className="h-11 w-full appearance-none rounded-xl border border-border bg-background pl-10 pr-10 text-sm font-medium text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
            >
              {categories.map((category) => (
                <option key={category.name} value={category.name}>
                  {category.name} ({category.count})
                </option>
              ))}
            </select>
            <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          </label>

          <p className="text-sm text-muted-foreground">
            <span className="font-semibold text-foreground">{resultCount}</span>{' '}
            {resultCount === 1 ? 'course' : 'courses'}
          </p>
        </div>

        {hasActiveFilters && (
          <div className="flex flex-wrap items-center gap-2 lg:hidden">
            {selectedCategory !== 'All' && (
              <button
                type="button"
                onClick={() => onCategoryChange('All')}
                className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary"
              >
                {selectedCategory}
                <X className="h-3.5 w-3.5" />
              </button>
            )}
            {searchQuery.trim() && onSearchQueryChange && (
              <button
                type="button"
                onClick={() => onSearchQueryChange('')}
                className="inline-flex items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-xs font-medium text-foreground"
              >
                Search: {searchQuery}
                <X className="h-3.5 w-3.5" />
              </button>
            )}
          </div>
        )}
      </div>
    </section>
  )
}

// Backward-compatible wrapper for pages that only need a simple toolbar
export function CourseFilters({
  categories,
  selectedCategory,
  onCategoryChange,
  searchPlaceholder,
  showSearch = true,
  sticky = true,
  resultCount = 0,
}: {
  categories: string[]
  selectedCategory: string
  onCategoryChange: (category: string) => void
  searchPlaceholder?: string
  showSearch?: boolean
  sticky?: boolean
  resultCount?: number
}) {
  const mappedCategories: CategoryFilter[] = categories.map((name, index) => ({
    name,
    slug: null,
    count: index === 0 ? resultCount : 0,
  }))

  return (
    <CourseFiltersToolbar
      categories={mappedCategories}
      selectedCategory={selectedCategory}
      onCategoryChange={onCategoryChange}
      resultCount={resultCount}
      searchPlaceholder={searchPlaceholder}
      showSearch={showSearch}
      sticky={sticky}
    />
  )
}