'use client'

import { useState, useRef, useEffect } from 'react'
import Link from 'next/link'
import { Search, X, ArrowRight } from 'lucide-react'
import { searchCourses, formatPrice } from '@/lib/courses'

interface CourseSearchProps {
  placeholder?: string
  className?: string
  variant?: 'default' | 'compact'
  value?: string
  onQueryChange?: (query: string) => void
}

export function CourseSearch({
  placeholder = 'Search courses, categories, skills...',
  className = '',
  variant = 'default',
  value,
  onQueryChange,
}: CourseSearchProps) {
  const [internalQuery, setInternalQuery] = useState('')
  const query = value ?? internalQuery

  const setQuery = (nextQuery: string) => {
    if (onQueryChange) {
      onQueryChange(nextQuery)
    } else {
      setInternalQuery(nextQuery)
    }
  }
  const [results, setResults] = useState<ReturnType<typeof searchCourses>>([])
  const [open, setOpen] = useState(false)
  const [activeIndex, setActiveIndex] = useState(-1)
  const wrapperRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (query.length >= 2) {
      setResults(searchCourses(query))
      setOpen(true)
      setActiveIndex(-1)
    } else {
      setResults([])
      setOpen(false)
    }
  }, [query])

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
        setOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  function handleKeyDown(e: React.KeyboardEvent) {
    if (!open || results.length === 0) return
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      setActiveIndex((i) => (i < results.length - 1 ? i + 1 : 0))
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      setActiveIndex((i) => (i > 0 ? i - 1 : results.length - 1))
    } else if (e.key === 'Enter' && activeIndex >= 0) {
      e.preventDefault()
      window.location.href = `/courses/${results[activeIndex].slug}`
    } else if (e.key === 'Escape') {
      setOpen(false)
    }
  }

  const inputClass =
    variant === 'compact'
      ? 'w-full pl-9 pr-8 py-2 text-sm border border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/30'
      : 'w-full pl-11 pr-10 py-3 text-sm border border-border rounded-xl bg-background focus:outline-none focus:ring-2 focus:ring-primary/30 shadow-sm'

  return (
    <div ref={wrapperRef} className={`relative ${className}`}>
      <Search
        className={`absolute left-3 text-muted-foreground ${variant === 'compact' ? 'w-4 h-4 top-2.5' : 'w-5 h-5 top-3.5'}`}
      />
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onFocus={() => query.length >= 2 && setOpen(true)}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        className={inputClass}
        autoComplete="off"
        role="combobox"
        aria-expanded={open}
        aria-autocomplete="list"
      />
      {query && (
        <button
          onClick={() => { setQuery(''); setOpen(false) }}
          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
          aria-label="Clear search"
        >
          <X className="w-4 h-4" />
        </button>
      )}

      {open && results.length > 0 && (
        <ul
          className="absolute z-50 top-full mt-1 w-full bg-white border border-border rounded-xl shadow-xl overflow-hidden max-h-80 overflow-y-auto"
          role="listbox"
        >
          {results.map((course, i) => (
            <li key={course.id} role="option" aria-selected={i === activeIndex}>
              <Link
                href={`/courses/${course.slug}`}
                className={`flex items-center justify-between gap-3 px-4 py-3 hover:bg-primary/5 transition-colors ${
                  i === activeIndex ? 'bg-primary/5' : ''
                }`}
                onClick={() => setOpen(false)}
              >
                <div className="min-w-0">
                  <p className="text-sm font-medium text-foreground truncate">{course.title}</p>
                  <p className="text-xs text-muted-foreground">{course.category} · {course.duration}</p>
                </div>
                <span className="text-xs font-semibold text-primary shrink-0">{formatPrice(course.price)}</span>
              </Link>
            </li>
          ))}
          <li>
            <Link
              href={`/services/upcoming-courses?q=${encodeURIComponent(query)}`}
              className="flex items-center gap-2 px-4 py-2.5 text-xs font-semibold text-primary border-t border-border hover:bg-muted/50"
              onClick={() => setOpen(false)}
            >
              View all results
              <ArrowRight className="w-3 h-3" />
            </Link>
          </li>
        </ul>
      )}

      {open && query.length >= 2 && results.length === 0 && (
        <div className="absolute z-50 top-full mt-1 w-full bg-white border border-border rounded-xl shadow-xl p-4 text-sm text-muted-foreground text-center">
          No courses found for &ldquo;{query}&rdquo;
        </div>
      )}
    </div>
  )
}