"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Search, MapPin, Calendar, Users, X } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import { destinations, moreDestinations } from "@/lib/destinations-data"

export default function ToursSearchSection() {
  const [searchQuery, setSearchQuery] = useState("")
  const [searchResults, setSearchResults] = useState<any[]>([])
  const [showResults, setShowResults] = useState(false)

  const allDestinations = [...destinations, ...moreDestinations]

  const handleSearch = (query: string) => {
    setSearchQuery(query)

    if (query.trim() === "") {
      setSearchResults([])
      setShowResults(false)
      return
    }

    const filtered = allDestinations.filter(
      (destination) =>
        destination.name.toLowerCase().includes(query.toLowerCase()) ||
        destination.location.toLowerCase().includes(query.toLowerCase()) ||
        destination.highlights.some((highlight) => highlight.toLowerCase().includes(query.toLowerCase())) ||
        destination.shortDescription.toLowerCase().includes(query.toLowerCase()),
    )

    setSearchResults(filtered)
    setShowResults(true)
  }

  const clearSearch = () => {
    setSearchQuery("")
    setSearchResults([])
    setShowResults(false)
  }

  return (
    <section className="py-20 bg-gradient-to-br from-gray-50 to-white relative">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-12"
        >
          <h2 className="text-4xl font-bold text-gray-900 mb-4">Find Your Perfect Safari</h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Search through our amazing destinations and find the adventure that speaks to your soul
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="relative"
        >
          <Card className="shadow-2xl border-0 bg-white/80 backdrop-blur-sm">
            <CardContent className="p-8">
              <div className="relative">
                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
                <Input
                  type="text"
                  placeholder="Search destinations... (e.g., Serengeti, Ngorongoro, Zanzibar)"
                  value={searchQuery}
                  onChange={(e) => handleSearch(e.target.value)}
                  className="pl-12 pr-12 py-4 text-lg border-2 border-gray-200 focus:border-yellow-500 rounded-full"
                />
                {searchQuery && (
                  <button
                    onClick={clearSearch}
                    className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                  >
                    <X className="h-5 w-5" />
                  </button>
                )}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div className="flex items-center space-x-3 text-gray-600">
                  <MapPin className="h-5 w-5 text-yellow-500" />
                  <div>
                    <p className="font-semibold">16 Destinations</p>
                    <p className="text-sm">Across Tanzania</p>
                  </div>
                </div>
                <div className="flex items-center space-x-3 text-gray-600">
                  <Calendar className="h-5 w-5 text-yellow-500" />
                  <div>
                    <p className="font-semibold">Year-round</p>
                    <p className="text-sm">Best seasons available</p>
                  </div>
                </div>
                <div className="flex items-center space-x-3 text-gray-600">
                  <Users className="h-5 w-5 text-yellow-500" />
                  <div>
                    <p className="font-semibold">All Group Sizes</p>
                    <p className="text-sm">From couples to families</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Search Results */}
          {showResults && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
              className="absolute top-full left-0 right-0 z-50 mt-2"
            >
              <Card className="shadow-2xl border-0 bg-white max-h-96 overflow-y-auto">
                <CardContent className="p-4">
                  {searchResults.length > 0 ? (
                    <div className="space-y-3">
                      <p className="text-sm text-gray-600 font-medium">
                        Found {searchResults.length} destination{searchResults.length !== 1 ? "s" : ""}
                      </p>
                      {searchResults.map((destination) => (
                        <Link
                          key={destination.id}
                          href={`/tours/${destination.slug}`}
                          onClick={clearSearch}
                          className="block p-3 rounded-lg hover:bg-gray-50 transition-colors"
                        >
                          <div className="flex items-center space-x-3">
                            <div className="flex-1">
                              <h4 className="font-semibold text-gray-900">{destination.name}</h4>
                              <p className="text-sm text-gray-600">{destination.location}</p>
                              <div className="flex items-center space-x-2 mt-1">
                                <Badge variant="secondary" className="text-xs">
                                  {destination.duration}
                                </Badge>
                                <Badge variant="secondary" className="text-xs">
                                  ⭐ {destination.rating}
                                </Badge>
                              </div>
                            </div>
                          </div>
                        </Link>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8">
                      <p className="text-gray-500">No destinations found matching "{searchQuery}"</p>
                      <p className="text-sm text-gray-400 mt-2">
                        Try searching for "Serengeti", "Ngorongoro", or "Zanzibar"
                      </p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </motion.div>
          )}
        </motion.div>
      </div>
    </section>
  )
}