"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { AnimatedButton } from "@/components/ui/animated-button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AnimatedCard } from "@/components/ui/animated-card"
import { Badge } from "@/components/ui/badge"
import { X, Lock, UserPlus, Heart, Star, Eye, Shield, Users } from "lucide-react"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"

interface GuestBrowseOverlayProps {
  isVisible: boolean
  onClose: () => void
  facilitiesCount: number
}

export function GuestBrowseOverlay({ isVisible, onClose, facilitiesCount }: GuestBrowseOverlayProps) {
  const [currentFeature, setCurrentFeature] = useState(0)
  
  const features = [
    {
      icon: Heart,
      title: "Save Your Favorites",
      description: "Keep track of facilities that interest you and compare them easily."
    },
    {
      icon: Star,
      title: "Write Reviews",
      description: "Share your experiences to help other families make informed decisions."
    },
    {
      icon: Eye,
      title: "View All Results",
      description: `See all ${facilitiesCount}+ facilities in your area without limitations.`
    },
    {
      icon: Shield,
      title: "Privacy Protected",
      description: "We never sell your data. Your information stays completely private."
    }
  ]

  return (
    <AnimatePresence>
      {isVisible && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
            onClick={onClose}
          />
          
          {/* Modal */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4"
          >
            <div className="w-full max-w-2xl max-h-[90vh] overflow-y-auto">
              <AnimatedCard className="bg-white/95 backdrop-blur-sm border-2 border-blue-200/50 shadow-2xl">
                <CardHeader className="relative pb-6">
                  <button
                    onClick={onClose}
                    className="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition-colors"
                  >
                    <X className="h-5 w-5 text-gray-500" />
                  </button>
                  
                  <div className="text-center">
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ delay: 0.2, type: "spring", stiffness: 300 }}
                      className="mx-auto mb-6 w-20 h-20 rounded-full bg-gradient-to-br from-[#3F5CEA] to-[#09183D] flex items-center justify-center"
                    >
                      <Lock className="h-10 w-10 text-white" />
                    </motion.div>
                    
                    <CardTitle className="font-primary text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                      You're browsing as a guest
                    </CardTitle>
                    
                    <p className="font-body text-xl text-gray-600 leading-relaxed">
                      You're seeing a limited preview. Create your free account to unlock the full Geezer Guide experience.
                    </p>
                  </div>
                </CardHeader>

                <CardContent className="space-y-8">
                  {/* Guest Limitations */}
                  <div className="bg-gradient-to-r from-orange-50 to-red-50 border border-orange-200 rounded-xl p-6">
                    <h3 className="font-primary text-xl font-bold text-orange-900 mb-4 flex items-center gap-2">
                      <Eye className="h-5 w-5" />
                      Guest Browsing Limitations
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="flex items-center gap-3">
                        <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                        <span className="font-body text-orange-800">Limited to 5 search results</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                        <span className="font-body text-orange-800">No facility reviews visible</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                        <span className="font-body text-orange-800">Cannot save favorites</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                        <span className="font-body text-orange-800">No contact information</span>
                      </div>
                    </div>
                  </div>

                  {/* Features Showcase */}
                  <div className="space-y-6">
                    <h3 className="font-primary text-2xl font-bold text-gray-900 text-center">
                      Unlock These Features with a Free Account
                    </h3>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {features.map((feature, index) => {
                        const Icon = feature.icon
                        return (
                          <motion.div
                            key={index}
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.1 * index }}
                            className="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/50 rounded-xl p-6 hover:shadow-lg transition-all duration-300"
                          >
                            <div className="flex items-start gap-4">
                              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-[#3F5CEA] to-[#09183D] flex items-center justify-center flex-shrink-0">
                                <Icon className="h-6 w-6 text-white" />
                              </div>
                              <div>
                                <h4 className="font-primary text-lg font-bold text-gray-900 mb-2">
                                  {feature.title}
                                </h4>
                                <p className="font-body text-gray-600 leading-relaxed">
                                  {feature.description}
                                </p>
                              </div>
                            </div>
                          </motion.div>
                        )
                      })}
                    </div>
                  </div>

                  {/* Trust Indicators */}
                  <div className="bg-gradient-to-r from-green-50 to-blue-50 border border-green-200 rounded-xl p-6">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                      <div>
                        <div className="font-primary text-3xl font-bold text-green-700">15,000+</div>
                        <div className="font-body text-green-600">Verified Facilities</div>
                      </div>
                      <div>
                        <div className="font-primary text-3xl font-bold text-blue-700">75,000+</div>
                        <div className="font-body text-blue-600">Family Reviews</div>
                      </div>
                      <div>
                        <div className="font-primary text-3xl font-bold text-purple-700">100%</div>
                        <div className="font-body text-purple-600">Privacy Protected</div>
                      </div>
                    </div>
                  </div>

                  {/* Action Buttons */}
                  <div className="space-y-4">
                    <Link href="/register" className="block">
                      <AnimatedButton className="w-full h-14 text-xl bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white font-body">
                        <UserPlus className="h-5 w-5 mr-3" />
                        Create Free Account
                      </AnimatedButton>
                    </Link>
                    
                    <Link href="/login" className="block">
                      <Button variant="outline" className="w-full h-14 text-xl border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white font-body">
                        Already have an account? Sign In
                      </Button>
                    </Link>
                    
                    <Button 
                      variant="ghost" 
                      onClick={onClose}
                      className="w-full h-12 text-lg text-gray-600 hover:text-gray-800 font-body"
                    >
                      Continue as Guest (Limited)
                    </Button>
                  </div>

                  {/* Privacy Note */}
                  <div className="text-center pt-4 border-t border-gray-200">
                    <p className="font-body text-sm text-gray-500">
                      <Shield className="h-4 w-4 inline mr-1" />
                      We never sell your personal information. 
                      <Link href="/privacy" className="underline hover:text-gray-700 ml-1">
                        Learn more about our privacy policy
                      </Link>
                    </p>
                  </div>
                </CardContent>
              </AnimatedCard>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}