"use client";

import { useState } from "react";
import Image from "next/image";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { MapPin, Calendar, Clock, User, Building2, Star, ChevronRight } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

interface SearchResult {
  id: string;
  type: "instructor" | "school";
  name: string;
  sport: string;
  location: string;
  schedule?: string;
  rating?: number;
  image?: string;
  description?: string;
}

interface SearchResultsProps {
  results: SearchResult[];
  isLoading: boolean;
  hasSearched: boolean;
}

export default function SearchResults({ results, isLoading, hasSearched }: SearchResultsProps) {
  if (isLoading) {
    return (
      <div className="py-12">
        <div className="flex flex-col items-center justify-center space-y-4">
          <div className="animate-spin rounded-full h-12 w-12 border-4 border-[#0A2240] border-t-transparent"></div>
          <p className="text-gray-600 font-medium">Buscando...</p>
        </div>
      </div>
    );
  }

  if (!hasSearched) {
    return (
      <div className="py-16">
        <div className="text-center max-w-md mx-auto">
          <div className="w-24 h-24 mx-auto mb-6 bg-gray-100 rounded-full flex items-center justify-center">
            <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <h3 className="text-xl font-semibold text-gray-700 mb-2">
            Encuentra tu instructor o escuela ideal
          </h3>
          <p className="text-gray-500">
            Usa el botón de búsqueda para encontrar instructores y escuelas deportivas según tus preferencias.
          </p>
        </div>
      </div>
    );
  }

  if (results.length === 0) {
    return (
      <div className="py-16">
        <div className="text-center max-w-md mx-auto">
          <div className="w-24 h-24 mx-auto mb-6 bg-yellow-50 rounded-full flex items-center justify-center">
            <svg className="w-12 h-12 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M12 20a8 8 0 100-16 8 8 0 000 16z" />
            </svg>
          </div>
          <h3 className="text-xl font-semibold text-gray-700 mb-2">
            No se encontraron resultados
          </h3>
          <p className="text-gray-500">
            Intenta modificar los filtros de búsqueda para encontrar más opciones.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="py-8">
      <div className="flex items-center justify-between mb-6">
        <h3 className="text-lg font-semibold text-gray-800">
          {results.length} resultado{results.length !== 1 ? 's' : ''} encontrado{results.length !== 1 ? 's' : ''}
        </h3>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <AnimatePresence mode="popLayout">
          {results.map((result, index) => (
            <motion.div
              key={result.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
            >
              <Card className="overflow-hidden hover:shadow-lg transition-shadow duration-300 h-full">
                <div className="relative h-48 bg-gray-100">
                  {result.image ? (
                    <Image
                      src={result.image}
                      alt={result.name}
                      fill
                      className="object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-[#0A2240] to-[#1a3a5c]">
                      {result.type === "instructor" ? (
                        <User className="w-16 h-16 text-white/50" />
                      ) : (
                        <Building2 className="w-16 h-16 text-white/50" />
                      )}
                    </div>
                  )}
                  <Badge 
                    className={`absolute top-3 left-3 ${
                      result.type === "instructor" 
                        ? "bg-blue-500 hover:bg-blue-600" 
                        : "bg-green-500 hover:bg-green-600"
                    }`}
                  >
                    {result.type === "instructor" ? "Instructor" : "Escuela"}
                  </Badge>
                </div>

                <CardContent className="p-4">
                  <h4 className="font-semibold text-lg text-gray-800 mb-2 line-clamp-1">
                    {result.name}
                  </h4>

                  <div className="space-y-2 mb-4">
                    <div className="flex items-center text-sm text-gray-600">
                      <Badge variant="outline" className="mr-2">
                        {result.sport}
                      </Badge>
                    </div>
                    
                    <div className="flex items-center text-sm text-gray-600">
                      <MapPin className="w-4 h-4 mr-2 text-gray-400" />
                      <span className="line-clamp-1">{result.location}</span>
                    </div>

                    {result.schedule && (
                      <div className="flex items-center text-sm text-gray-600">
                        <Clock className="w-4 h-4 mr-2 text-gray-400" />
                        <span>{result.schedule}</span>
                      </div>
                    )}

                    {result.rating && (
                      <div className="flex items-center text-sm text-gray-600">
                        <Star className="w-4 h-4 mr-2 text-yellow-400 fill-yellow-400" />
                        <span>{result.rating.toFixed(1)}</span>
                      </div>
                    )}
                  </div>

                  {result.description && (
                    <p className="text-sm text-gray-500 line-clamp-2 mb-4">
                      {result.description}
                    </p>
                  )}

                  <Button 
                    variant="outline" 
                    size="sm" 
                    className="w-full rounded-full"
                  >
                    Ver más
                    <ChevronRight className="w-4 h-4 ml-1" />
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    </div>
  );
}