import { useState, useEffect, useRef } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { Search, Clock, ArrowRight, Play, Loader2, TrendingUp, Sparkles, Zap } from 'lucide-react'
import { treesApi } from '@/api/trees'
import { sessionsApi } from '@/api/sessions'
import type { TreeListItem } from '@/types'
import type { Session } from '@/types/session'
import { cn } from '@/lib/utils'

function timeAgo(dateStr: string): string {
  const now = Date.now()
  const then = new Date(dateStr).getTime()
  const diffMs = now - then
  const minutes = Math.floor(diffMs / 60000)
  if (minutes < 1) return 'just now'
  if (minutes < 60) return `${minutes}m ago`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}h ago`
  const days = Math.floor(hours / 24)
  return `${days}d ago`
}

export function QuickStartPage() {
  const navigate = useNavigate()
  const [query, setQuery] = useState('')
  const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
  const [isSearching, setIsSearching] = useState(false)
  const [showResults, setShowResults] = useState(false)
  const [activeSessions, setActiveSessions] = useState<Session[]>([])
  const [recentTrees, setRecentTrees] = useState<{ tree_id: string; name: string; lastUsed: string }[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const searchRef = useRef<HTMLDivElement>(null)
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  // Load sessions on mount
  useEffect(() => {
    async function loadData() {
      try {
        const [active, recent] = await Promise.all([
          sessionsApi.list({ completed: false, size: 5 }),
          sessionsApi.list({ size: 10 }),
        ])
        setActiveSessions(active.slice(0, 3))

        // Deduplicate recent sessions by tree_id, max 5
        const seen = new Set<string>()
        const deduped: { tree_id: string; name: string; lastUsed: string }[] = []
        for (const s of recent) {
          if (!seen.has(s.tree_id) && deduped.length < 5) {
            seen.add(s.tree_id)
            deduped.push({
              tree_id: s.tree_id,
              name: s.tree_snapshot?.name || 'Unnamed Tree',
              lastUsed: s.started_at,
            })
          }
        }
        setRecentTrees(deduped)
      } catch (err) {
        console.error('Failed to load sessions:', err)
      } finally {
        setIsLoading(false)
      }
    }
    loadData()
  }, [])

  // Debounced search
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)

    if (query.length < 2) {
      setSearchResults([])
      setShowResults(false)
      setIsSearching(false)
      return
    }

    setIsSearching(true)
    setShowResults(true)
    debounceRef.current = setTimeout(async () => {
      try {
        const results = await treesApi.search(query, 8)
        setSearchResults(results)
      } catch (err) {
        console.error('Search failed:', err)
        setSearchResults([])
      } finally {
        setIsSearching(false)
      }
    }, 300)

    return () => {
      if (debounceRef.current) clearTimeout(debounceRef.current)
    }
  }, [query])

  // Close dropdown on outside click
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
        setShowResults(false)
      }
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [])

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
      {/* Animated background grid */}
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f12_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f12_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]" />
      
      <div className="relative container mx-auto px-4 py-12">
        {/* Hero Section */}
        <div className="mx-auto max-w-3xl">
          {/* Badge */}
          <div className="flex justify-center mb-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
            <div className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-violet-500/10 to-purple-500/10 px-4 py-2 border border-violet-500/20 backdrop-blur-sm">
              <Sparkles className="h-4 w-4 text-violet-400" />
              <span className="text-sm font-medium text-violet-300">AI-Powered Troubleshooting</span>
            </div>
          </div>

          {/* Title */}
          <h1 className="font-heading text-5xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-br from-white via-slate-200 to-slate-400 leading-tight animate-in fade-in slide-in-from-bottom-4 duration-700 delay-100">
            What are you troubleshooting?
          </h1>
          
          <p className="text-center text-slate-400 mt-4 text-lg animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
            Search our library of proven decision trees or continue where you left off
          </p>

          {/* Enhanced Search Bar */}
          <div ref={searchRef} className="relative mt-8 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">
            <div className="relative group">
              {/* Glow effect */}
              <div className="absolute -inset-0.5 bg-gradient-to-r from-violet-600 to-purple-600 rounded-xl blur opacity-20 group-hover:opacity-40 transition duration-300" />
              
              <div className="relative">
                <Search className="absolute left-5 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400 transition-colors group-hover:text-violet-400" />
                <input
                  type="text"
                  autoFocus
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  onFocus={() => query.length >= 2 && setShowResults(true)}
                  placeholder="Paste ticket subject or search for a tree..."
                  className={cn(
                    'w-full rounded-xl border border-slate-700/50 bg-slate-900/90 backdrop-blur-xl py-5 pl-14 pr-5 text-lg',
                    'text-white placeholder:text-slate-500',
                    'focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50',
                    'transition-all duration-300'
                  )}
                />
                {query && (
                  <Zap className="absolute right-5 top-1/2 h-5 w-5 -translate-y-1/2 text-violet-400 animate-pulse" />
                )}
              </div>
            </div>

            {/* Enhanced Search Results Dropdown */}
            {showResults && (
              <div className="absolute z-10 mt-2 w-full rounded-xl border border-slate-700/50 bg-slate-900/95 backdrop-blur-xl shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
                {isSearching ? (
                  <div className="flex items-center justify-center py-8">
                    <Loader2 className="h-6 w-6 animate-spin text-violet-400" />
                  </div>
                ) : searchResults.length === 0 ? (
                  <div className="px-4 py-8 text-center">
                    <div className="text-slate-400 text-sm">No results found</div>
                    <div className="text-slate-500 text-xs mt-1">Try a different search term</div>
                  </div>
                ) : (
                  <ul className="max-h-96 overflow-y-auto py-2">
                    {searchResults.map((tree, idx) => (
                      <li key={tree.id} style={{ animationDelay: `${idx * 50}ms` }} className="animate-in fade-in slide-in-from-top-1 duration-200">
                        <button
                          onClick={() => navigate(`/trees/${tree.id}/navigate`)}
                          className="w-full px-5 py-4 text-left transition-all hover:bg-slate-800/50 group border-b border-slate-800/50 last:border-0"
                        >
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1 min-w-0">
                              <div className="text-sm font-semibold text-white group-hover:text-violet-300 transition-colors">
                                {tree.name}
                              </div>
                              {tree.description && (
                                <div className="mt-1 line-clamp-2 text-xs text-slate-400">
                                  {tree.description}
                                </div>
                              )}
                            </div>
                            <ArrowRight className="h-4 w-4 flex-shrink-0 text-slate-600 group-hover:text-violet-400 group-hover:translate-x-1 transition-all" />
                          </div>
                        </button>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            )}
          </div>
        </div>

        {/* Continue Session Section */}
        {activeSessions.length > 0 && (
          <div className="mx-auto mt-16 max-w-6xl animate-in fade-in slide-in-from-bottom-4 duration-700 delay-500">
            <div className="flex items-center gap-3 mb-5">
              <div className="flex items-center gap-2">
                <div className="h-8 w-1 bg-gradient-to-b from-violet-500 to-purple-600 rounded-full" />
                <h2 className="font-heading text-xl font-bold text-white">
                  Continue Session
                </h2>
              </div>
              <div className="flex-1 h-px bg-gradient-to-r from-slate-700/50 to-transparent" />
            </div>
            
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {activeSessions.map((session, idx) => (
                <button
                  key={session.id}
                  onClick={() =>
                    navigate(`/trees/${session.tree_id}/navigate`, {
                      state: { sessionId: session.id },
                    })
                  }
                  style={{ animationDelay: `${(idx + 5) * 100}ms` }}
                  className="group relative rounded-xl border border-slate-700/50 bg-slate-900/50 backdrop-blur-sm p-5 text-left transition-all hover:border-violet-500/50 hover:shadow-lg hover:shadow-violet-500/10 hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-2 duration-500"
                >
                  {/* Animated corner accent */}
                  <div className="absolute top-0 right-0 h-16 w-16 bg-gradient-to-bl from-violet-500/20 to-transparent rounded-tr-xl opacity-0 group-hover:opacity-100 transition-opacity" />
                  
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-base font-semibold text-white group-hover:text-violet-300 transition-colors">
                        {session.tree_snapshot?.name || 'Unnamed Tree'}
                      </div>
                      {(session.ticket_number || session.client_name) && (
                        <div className="mt-1.5 truncate text-sm text-slate-400">
                          {[session.ticket_number, session.client_name]
                            .filter(Boolean)
                            .join(' • ')}
                        </div>
                      )}
                    </div>
                    <div className="flex-shrink-0 rounded-full bg-violet-500/10 p-2 group-hover:bg-violet-500/20 transition-colors">
                      <Play className="h-4 w-4 text-violet-400 group-hover:scale-110 transition-transform" />
                    </div>
                  </div>
                  
                  <div className="mt-4 flex items-center gap-2 text-xs text-slate-500">
                    <Clock className="h-3.5 w-3.5" />
                    <span>Started {timeAgo(session.started_at)}</span>
                  </div>

                  {/* Progress indicator (optional - you can remove this) */}
                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-slate-800/50 rounded-b-xl overflow-hidden">
                    <div className="h-full bg-gradient-to-r from-violet-500 to-purple-600 w-2/3" />
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Recent Trees Section */}
        {!isLoading && recentTrees.length > 0 && (
          <div className="mx-auto mt-12 max-w-6xl animate-in fade-in slide-in-from-bottom-4 duration-700 delay-700">
            <div className="flex items-center gap-3 mb-5">
              <div className="flex items-center gap-2">
                <TrendingUp className="h-5 w-5 text-violet-400" />
                <h2 className="font-heading text-xl font-bold text-white">
                  Recent Trees
                </h2>
              </div>
              <div className="flex-1 h-px bg-gradient-to-r from-slate-700/50 to-transparent" />
            </div>
            
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
              {recentTrees.map((tree, idx) => (
                <button
                  key={tree.tree_id}
                  onClick={() => navigate(`/trees/${tree.tree_id}/navigate`)}
                  style={{ animationDelay: `${(idx + 8) * 100}ms` }}
                  className="group relative rounded-xl border border-slate-700/50 bg-slate-900/30 backdrop-blur-sm p-4 text-left transition-all hover:border-violet-500/50 hover:bg-slate-900/50 hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-2 duration-500"
                >
                  <div className="truncate text-sm font-medium text-white group-hover:text-violet-300 transition-colors">
                    {tree.name}
                  </div>
                  <div className="mt-2 flex items-center gap-1.5 text-xs text-slate-500">
                    <Clock className="h-3 w-3" />
                    <span>{timeAgo(tree.lastUsed)}</span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Footer CTA */}
        <div className="mx-auto mt-16 max-w-4xl text-center animate-in fade-in duration-700 delay-1000">
          <Link
            to="/trees"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-violet-600 to-purple-600 text-white font-medium hover:from-violet-500 hover:to-purple-500 transition-all hover:shadow-lg hover:shadow-violet-500/25 hover:scale-105"
          >
            Browse All Trees
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </div>
  )
}

export default QuickStartPage