"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 { Input } from "@/components/ui/input"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Star,
  MapPin,
  Phone,
  Mail,
  Globe,
  Bed,
  Users,
  Car,
  Utensils,
  Activity,
  Heart,
  Shield,
  Award,
  DollarSign,
  X,
  Plus,
  Search,
  Download,
  Share,
  CheckCircle,
  XCircle,
  Calendar,
  Clock,
  Building,
  Stethoscope,
  Gamepad2,
  Wifi,
  PawPrint
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"

// Mock facility data
const mockFacilities = [
  {
    id: "fac_001",
    name: "Sunrise Senior Living",
    type: "Assisted Living",
    address: "123 Oak Street, Springfield, IL 62701",
    phone: "(555) 123-4567",
    email: "info@sunrisesenior.com",
    website: "www.sunrisesenior.com",
    rating: 4.8,
    reviews: 156,
    image: "/senior-living-facility-exterior.jpg",
    pricing: {
      baseRate: 3500,
      memoryRate: 4200,
      privateRoom: 800
    },
    capacity: {
      total: 120,
      available: 8
    },
    careTypes: ["Assisted Living", "Memory Care", "Respite Care"],
    amenities: [
      "24/7 Nursing Care", "Medication Management", "Physical Therapy",
      "Transportation", "Housekeeping", "Meals Included", "Activities",
      "Beauty Salon", "Library", "Garden", "Pet-Friendly", "WiFi"
    ],
    certifications: ["State Licensed", "Medicare Certified", "CARF Accredited"],
    established: 1998,
    staffRatio: "1:6",
    highlights: {
      specialized: ["Alzheimer's Care", "Diabetes Management"],
      activities: ["Art Therapy", "Music Programs", "Garden Club"],
      dining: ["Chef-prepared meals", "Special diets", "Family dining"]
    }
  },
  {
    id: "fac_002",
    name: "Golden Years Care Center",
    type: "Assisted Living",
    address: "456 Maple Avenue, Springfield, IL 62702",
    phone: "(555) 987-6543",
    email: "contact@goldenyears.com",
    website: "www.goldenyears.com",
    rating: 4.6,
    reviews: 203,
    image: "/placeholder.jpg",
    pricing: {
      baseRate: 3200,
      memoryRate: 3900,
      privateRoom: 600
    },
    capacity: {
      total: 85,
      available: 5
    },
    careTypes: ["Assisted Living", "Memory Care"],
    amenities: [
      "24/7 Nursing Care", "Medication Management", "Physical Therapy",
      "Transportation", "Housekeeping", "Meals Included", "Activities",
      "Library", "Garden", "WiFi"
    ],
    certifications: ["State Licensed", "Medicare Certified"],
    established: 2003,
    staffRatio: "1:8",
    highlights: {
      specialized: ["Memory Care", "Physical Rehabilitation"],
      activities: ["Fitness Programs", "Social Events", "Reading Club"],
      dining: ["Nutritious meals", "Flexible dining", "Snack availability"]
    }
  },
  {
    id: "fac_003",
    name: "Peaceful Pines Assisted Living",
    type: "Assisted Living",
    address: "789 Pine Street, Springfield, IL 62703",
    phone: "(555) 456-7890",
    email: "info@peacefulpines.com",
    website: "www.peacefulpines.com",
    rating: 4.7,
    reviews: 89,
    image: "/placeholder.jpg",
    pricing: {
      baseRate: 3800,
      memoryRate: 4500,
      privateRoom: 900
    },
    capacity: {
      total: 65,
      available: 3
    },
    careTypes: ["Assisted Living", "Memory Care", "Skilled Nursing"],
    amenities: [
      "24/7 Nursing Care", "Medication Management", "Physical Therapy",
      "Occupational Therapy", "Transportation", "Housekeeping",
      "Meals Included", "Activities", "Beauty Salon", "Chapel",
      "Garden", "Pet-Friendly", "WiFi"
    ],
    certifications: ["State Licensed", "Medicare Certified", "CARF Accredited", "Joint Commission"],
    established: 1995,
    staffRatio: "1:5",
    highlights: {
      specialized: ["Skilled Nursing", "Rehabilitation", "Hospice Care"],
      activities: ["Pet Therapy", "Spiritual Care", "Outdoor Activities"],
      dining: ["Farm-to-table", "Special occasions", "Family style"]
    }
  }
]

const searchableFacilities = [
  { id: "fac_004", name: "Heritage Manor", type: "Memory Care", location: "Springfield, IL" },
  { id: "fac_005", name: "Serenity Gardens", type: "Independent Living", location: "Springfield, IL" },
  { id: "fac_006", name: "Comfort Care Community", type: "Assisted Living", location: "Springfield, IL" },
  { id: "fac_007", name: "Willowbrook Senior Living", type: "Skilled Nursing", location: "Springfield, IL" }
]

export default function CompareFacilitiesPage() {
  const [selectedFacilities, setSelectedFacilities] = useState(mockFacilities.slice(0, 2))
  const [searchQuery, setSearchQuery] = useState("")
  const [showSearch, setShowSearch] = useState(false)
  const [filteredFacilities, setFilteredFacilities] = useState(searchableFacilities)

  const addFacility = (facility: any) => {
    if (selectedFacilities.length < 4 && !selectedFacilities.find(f => f.id === facility.id)) {
      setSelectedFacilities([...selectedFacilities, facility])
    }
    setShowSearch(false)
    setSearchQuery("")
  }

  const removeFacility = (facilityId: string) => {
    setSelectedFacilities(selectedFacilities.filter(f => f.id !== facilityId))
  }

  const handleSearch = (query: string) => {
    setSearchQuery(query)
    if (query.trim() === "") {
      setFilteredFacilities(searchableFacilities)
    } else {
      setFilteredFacilities(
        searchableFacilities.filter(facility =>
          facility.name.toLowerCase().includes(query.toLowerCase()) ||
          facility.type.toLowerCase().includes(query.toLowerCase()) ||
          facility.location.toLowerCase().includes(query.toLowerCase())
        )
      )
    }
  }

  const exportComparison = () => {
    // Export functionality
    console.log("Exporting comparison...")
  }

  const shareComparison = () => {
    // Share functionality
    console.log("Sharing comparison...")
  }

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star
        key={i}
        className={`h-4 w-4 ${i < Math.floor(rating) ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
          }`}
      />
    ))
  }

  const getIcon = (amenity: string) => {
    const iconMap: { [key: string]: any } = {
      "24/7 Nursing Care": Stethoscope,
      "Physical Therapy": Activity,
      "Transportation": Car,
      "Meals Included": Utensils,
      "Activities": Gamepad2,
      "Pet-Friendly": PawPrint,
      "WiFi": Wifi,
      "Garden": Activity,
      "Beauty Salon": Star,
      "Library": Building,
      "Chapel": Building
    }
    const IconComponent = iconMap[amenity] || CheckCircle
    return <IconComponent className="h-4 w-4" />
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
      <Header />

      <div className="container mx-auto px-4 py-8">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-8"
          >
            <h1 className="font-primary text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Compare Senior Living Facilities
            </h1>
            <p className="font-body text-lg text-gray-600 max-w-2xl mx-auto">
              Side-by-side comparison to help you make an informed decision for your loved one's care
            </p>
          </motion.div>

          {/* Action Bar */}
          <AnimatedCard className="mb-8">
            <CardContent className="p-6">
              <div className="flex flex-col md:flex-row items-center justify-between gap-4">
                <div className="flex items-center gap-4">
                  <span className="font-body text-sm text-gray-600">
                    Comparing {selectedFacilities.length} of 4 facilities
                  </span>
                  {selectedFacilities.length < 4 && (
                    <Button
                      onClick={() => setShowSearch(!showSearch)}
                      variant="outline"
                      className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white"
                    >
                      <Plus className="h-4 w-4 mr-2" />
                      Add Facility
                    </Button>
                  )}
                </div>

                <div className="flex gap-3">
                  <Button
                    onClick={shareComparison}
                    variant="outline"
                    className="border-gray-300 text-gray-700 hover:bg-gray-50"
                  >
                    <Share className="h-4 w-4 mr-2" />
                    Share
                  </Button>
                  <Button
                    onClick={exportComparison}
                    variant="outline"
                    className="border-gray-300 text-gray-700 hover:bg-gray-50"
                  >
                    <Download className="h-4 w-4 mr-2" />
                    Export PDF
                  </Button>
                  <Link href="/search">
                    <Button className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                      Back to Search
                    </Button>
                  </Link>
                </div>
              </div>

              {/* Search Interface */}
              <AnimatePresence>
                {showSearch && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    exit={{ opacity: 0, height: 0 }}
                    className="mt-6 pt-6 border-t border-gray-200"
                  >
                    <div className="relative mb-4">
                      <Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
                      <Input
                        placeholder="Search facilities to add..."
                        value={searchQuery}
                        onChange={(e) => handleSearch(e.target.value)}
                        className="pl-10 h-12"
                      />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-40 overflow-y-auto">
                      {filteredFacilities.map((facility) => (
                        <button
                          key={facility.id}
                          onClick={() => addFacility(facility)}
                          className="flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 rounded-lg text-left transition-colors"
                        >
                          <div>
                            <p className="font-body font-medium text-gray-900">{facility.name}</p>
                            <p className="font-body text-sm text-gray-600">{facility.type} • {facility.location}</p>
                          </div>
                          <Plus className="h-4 w-4 text-[#3F5CEA]" />
                        </button>
                      ))}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </CardContent>
          </AnimatedCard>

          {/* Comparison Table */}
          <AnimatedCard>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <div className="min-w-full">
                  {/* Headers */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h3 className="font-body font-semibold text-gray-900">Features</h3>
                    </div>
                    {selectedFacilities.map((facility, index) => (
                      <div key={facility.id} className="relative p-6 bg-gray-50 border-r border-gray-200 last:border-r-0">
                        <div className="flex items-start justify-between mb-4">
                          <div className="flex-1">
                            <h3 className="font-body font-semibold text-gray-900 mb-2">{facility.name}</h3>
                            <div className="flex items-center gap-1 mb-2">
                              {renderStars(facility.rating)}
                              <span className="font-body text-sm text-gray-600 ml-1">
                                ({facility.rating}) • {facility.reviews} reviews
                              </span>
                            </div>
                            <Badge className="bg-blue-100 text-blue-800">{facility.type}</Badge>
                          </div>
                          {selectedFacilities.length > 2 && (
                            <button
                              onClick={() => removeFacility(facility.id)}
                              className="text-gray-400 hover:text-red-600 transition-colors"
                            >
                              <X className="h-4 w-4" />
                            </button>
                          )}
                        </div>
                        <div className="aspect-video bg-gray-100 rounded-lg overflow-hidden mb-4">
                          <Image
                            src={facility.image}
                            alt={facility.name}
                            fill
                            className="object-cover"
                          />
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Basic Information */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Basic Information</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-basic`} className="p-6 border-r border-gray-200 last:border-r-0 space-y-3">
                        <div className="flex items-start gap-2">
                          <MapPin className="h-4 w-4 text-gray-500 mt-0.5" />
                          <span className="font-body text-sm text-gray-700">{facility.address}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Phone className="h-4 w-4 text-gray-500" />
                          <span className="font-body text-sm text-gray-700">{facility.phone}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Globe className="h-4 w-4 text-gray-500" />
                          <span className="font-body text-sm text-blue-600">{facility.website}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Calendar className="h-4 w-4 text-gray-500" />
                          <span className="font-body text-sm text-gray-700">Est. {facility.established}</span>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Pricing */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Pricing (Monthly)</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-pricing`} className="p-6 border-r border-gray-200 last:border-r-0 space-y-3">
                        <div className="flex justify-between">
                          <span className="font-body text-sm text-gray-700">Base Rate:</span>
                          <span className="font-body text-sm font-semibold text-gray-900">${facility.pricing.baseRate.toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-body text-sm text-gray-700">Memory Care:</span>
                          <span className="font-body text-sm font-semibold text-gray-900">${facility.pricing.memoryRate.toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-body text-sm text-gray-700">Private Room:</span>
                          <span className="font-body text-sm font-semibold text-gray-900">+${facility.pricing.privateRoom}</span>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Capacity & Availability */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Capacity & Availability</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-capacity`} className="p-6 border-r border-gray-200 last:border-r-0 space-y-3">
                        <div className="flex items-center gap-2">
                          <Bed className="h-4 w-4 text-gray-500" />
                          <span className="font-body text-sm text-gray-700">Total: {facility.capacity.total} beds</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <CheckCircle className={`h-4 w-4 ${facility.capacity.available > 0 ? "text-green-500" : "text-red-500"}`} />
                          <span className="font-body text-sm text-gray-700">
                            Available: {facility.capacity.available} beds
                          </span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Users className="h-4 w-4 text-gray-500" />
                          <span className="font-body text-sm text-gray-700">Staff Ratio: {facility.staffRatio}</span>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Care Types */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Care Types</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-care`} className="p-6 border-r border-gray-200 last:border-r-0">
                        <div className="flex flex-wrap gap-2">
                          {facility.careTypes.map((care) => (
                            <Badge key={care} variant="secondary" className="bg-green-100 text-green-800 text-xs">
                              {care}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Amenities */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Amenities & Services</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-amenities`} className="p-6 border-r border-gray-200 last:border-r-0">
                        <div className="space-y-2 max-h-48 overflow-y-auto">
                          {facility.amenities.map((amenity) => (
                            <div key={amenity} className="flex items-center gap-2">
                              {getIcon(amenity)}
                              <span className="font-body text-sm text-gray-700">{amenity}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Certifications */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Certifications</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-certs`} className="p-6 border-r border-gray-200 last:border-r-0">
                        <div className="space-y-2">
                          {facility.certifications.map((cert) => (
                            <div key={cert} className="flex items-center gap-2">
                              <Shield className="h-4 w-4 text-green-600" />
                              <span className="font-body text-sm text-gray-700">{cert}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Specialized Services */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Specialized Services</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-specialized`} className="p-6 border-r border-gray-200 last:border-r-0">
                        <div className="space-y-3">
                          {facility.highlights.specialized.map((service) => (
                            <div key={service} className="flex items-center gap-2">
                              <Award className="h-4 w-4 text-blue-600" />
                              <span className="font-body text-sm text-gray-700">{service}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Activities */}
                  <div className="grid grid-cols-1 md:grid-cols-5 border-b border-gray-200">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Activities & Programs</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-activities`} className="p-6 border-r border-gray-200 last:border-r-0">
                        <div className="space-y-3">
                          {facility.highlights.activities.map((activity) => (
                            <div key={activity} className="flex items-center gap-2">
                              <Activity className="h-4 w-4 text-purple-600" />
                              <span className="font-body text-sm text-gray-700">{activity}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Dining */}
                  <div className="grid grid-cols-1 md:grid-cols-5">
                    <div className="p-6 bg-gray-50 border-r border-gray-200">
                      <h4 className="font-body font-medium text-gray-900">Dining Options</h4>
                    </div>
                    {selectedFacilities.map((facility) => (
                      <div key={`${facility.id}-dining`} className="p-6 border-r border-gray-200 last:border-r-0">
                        <div className="space-y-3">
                          {facility.highlights.dining.map((option) => (
                            <div key={option} className="flex items-center gap-2">
                              <Utensils className="h-4 w-4 text-orange-600" />
                              <span className="font-body text-sm text-gray-700">{option}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </CardContent>
          </AnimatedCard>

          {/* Call to Action */}
          <AnimatedCard className="mt-8 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
            <CardContent className="p-8 text-center">
              <h3 className="font-primary text-2xl font-bold text-gray-900 mb-4">
                Ready to Visit These Facilities?
              </h3>
              <p className="font-body text-gray-600 mb-6 max-w-2xl mx-auto">
                Schedule tours with your preferred facilities to get a firsthand experience of their care and amenities.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                  <Calendar className="h-4 w-4 mr-2" />
                  Schedule Tours
                </Button>
                <Button variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white">
                  <Heart className="h-4 w-4 mr-2" />
                  Save Favorites
                </Button>
              </div>
            </CardContent>
          </AnimatedCard>
        </div>
      </div>

      <Footer />
    </div>
  )
}