"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ReviewForm } from "@/components/review-form"
import dynamic from "next/dynamic"
import ErrorBoundary from "@/components/ui/error-boundary"
import { Stars } from "@/components/reviews/Stars"
import {
  Star,
  Heart,
  Phone,
  Mail,
  MapPin,
  Shield,
  Building2,
  Users,
  Calendar,
  Clock,
  CheckCircle,
  ArrowLeft,
  Share2,
  FileText,
  Bed,
  AlertCircle,
  Globe,
  Printer,
  Info,
  Brain,
  Award,
  UserCheck,
  MapIcon,
  Home,
  Stethoscope,
  DollarSign,
  TrendingUp,
  Eye,
  BookOpen,
  Database,
  BarChart3,
  ClipboardCheck,
  ExternalLink,
  Image as ImageIcon,
  X,
  ChevronLeft,
  ChevronRight,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { FavoriteButton } from "@/components/ui/favorite-button"
import { DataAPI } from "@/lib/data-api"
import { ShareButton } from "@/components/ui/share-button"
import ReviewModal from "@/components/reviews/ReviewModal"
import ReviewCard from "@/components/reviews/ReviewCard"
import { useToast } from "@/components/ui/toast"

// Dynamically import map component to avoid SSR issues
const GoogleMapComponent = dynamic(
  () => import("@/components/ui/google-map"),
  { 
    ssr: false,
    loading: () => (
      <div className="h-64 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
          <p className="text-sm text-slate-600">Loading map...</p>
        </div>
      </div>
    )
  }
)

interface FacilityData {
  id: string
  name: string
  description?: string
  slug?: string
  type: string
  serviceType?: string
  location: {
    address?: string
    city?: string
    state?: string
    zipCode?: string
    county?: string
    stateRegion?: string
    hhscSubOffice?: string
    coordinates: {
      lat: number | null
      lng: number | null
    }
  }
  contact: {
    phone?: string
    email?: string
    fax?: string
    providerEmail?: string
    website?: string
  }
  licensing: {
    licenseNumber?: string
    licenseType?: string
    effectiveDate?: string
    expirationDate?: string
    initialLicenseDate?: string
    medicareProviderNumber?: string
    medicaidProviderNumber?: string
    alzheimerCertificateNo?: string
    alzheimerCertEffectiveDate?: string
    alzheimerCertExpirationDate?: string
    facilityLicensed?: boolean
    facilityCertified?: boolean
    alzheimerCertified?: boolean
  }
  capacity: {
    totalLicensed?: number
    licensedOnlyBeds?: number
    medicaidOnlyBeds?: number
    medicareOnlyBeds?: number
    medicaidMedicareBeds?: number
    icfiidBeds?: number
    alzheimerCapacity?: number
    available?: number
  }
  pricing?: {
    min: number
    max: number
    currency: string
    period: string
    details?: string
  } | null
  staffing: {
    administrator?: string
    totalStaff?: number
    medicalStaff?: number
    certifiedStaff?: number
    staffToResidentRatio?: string
  }
  owner?: {
    name?: string
    companyName?: string
    website?: string
  }
  certifications: Array<{
    name: string
    issuedBy: string
    issuedDate?: string
    expiryDate?: string
  }>
  inspectionScores: Array<{
    type: string
    score: number
    maxScore: number
    date: string
    inspector: string
  }>
  rating: number
  reviewCount: number
  images: string[]
  virtualTour?: string
  careTypes: string[]
  amenities: string[]
  services: string[]
  medicalServices: string[]
  verified: boolean
  featured: boolean
  claimStatus: string
  status: string
  facilityId?: string
  dataSource?: string
  externalSourceId?: string
  statistics: {
    viewCount: number
    favorites: number
    inquiries: number
  }
  auditTrail: {
    submittedAt?: string
    approvedAt?: string
    lastSyncedAt?: string
    createdAt?: string
    updatedAt?: string
  }
}

export default function FacilityProfilePage({ params }: { params: { id: string } }) {
  const [facility, setFacility] = useState<FacilityData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [isFavorited, setIsFavorited] = useState(false)
  const [activeTab, setActiveTab] = useState("overview")
  const [showReviewForm, setShowReviewForm] = useState(false)
  const [showReviewModal, setShowReviewModal] = useState(false)
  const [myReview, setMyReview] = useState<any | null>(null)
  const [approvedReviews, setApprovedReviews] = useState<any[]>([])
  const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null)
  const toast = useToast()

  // Fetch facility data
  useEffect(() => {
    const fetchFacility = async () => {
      try {
        setLoading(true)
        // Use authenticated client to include token for isFavorite
        const response = await DataAPI.facilities.getFacility(params.id)
        const data = response?.data
        
        if (response?.success && (data as any)?.facility) {
          const fac = (data as any).facility
          setFacility(fac)
          try {
            console.log('[Facility Page Debug]', {
              userTokenPresent: !!localStorage.getItem('geezer_guide_token'),
              isFavorite: (fac as any)?.isFavorite,
              favoritesCount: (fac as any)?.favoritesCount,
              facilityId: (fac as any)?.id,
            })
            // Fetch and log user id as well (only if authenticated)
            try {
              // Check if user has a token before trying to fetch profile
              const hasToken = !!localStorage.getItem('geezer_guide_token')
              let uid = null
              
              if (hasToken) {
                try {
                  const prof = await DataAPI.auth.getProfile()
                  uid = (prof as any)?.data?.user?.id || (prof as any)?.data?.user?._id || null
                  console.log('[Facility Page Debug] userId:', uid)
                } catch (e) {
                  // User token might be invalid, continue as guest
                  console.log('[Facility Page] Not authenticated or invalid token')
                }
              }
              
              // Load reviews (both for authenticated and guest users)
              try {
                const revRes = await DataAPI.reviews.getReviews({ facilityId: (fac as any).id })
                const reviews = (revRes as any)?.data?.reviews || []
                if (uid) {
                  const mine = reviews.find((r: any) => {
                    // userId can be a string ID or an object with _id
                    const reviewUserId = typeof r?.userId === 'string' ? r.userId : r?.userId?._id || r?.userId?.id
                    return reviewUserId === uid
                  })
                  console.log('[Facility] Found my review:', mine)
                  setMyReview(mine || null)
                }
                setApprovedReviews(reviews.filter((r:any)=>r.status==='approved'))
              } catch (e) {
                console.log('[Facility Page] Could not load reviews:', e)
              }
            } catch (e) {
              console.log('[Facility Page] Error in user/review loading:', e)
            }
          } catch {}
        } else {
          setError(response?.message || 'Failed to load facility')
        }
      } catch (err) {
        setError('Failed to load facility data')
        console.error('Error fetching facility:', err)
      } finally {
        setLoading(false)
      }
    }

    if (params.id) {
      fetchFacility()
    }
  }, [params.id])

  const toggleFavorite = () => {
    setIsFavorited(!isFavorited)
  }

  const handleReviewSubmit = (review: any) => {
    console.log("Review submitted:", review)
  }

  // Helper function to format dates
  const formatDate = (dateString?: string) => {
    if (!dateString) return 'N/A'
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }

  // Loading state
  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-[#3F5CEA] border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <h3 className="text-2xl font-bold text-slate-800 mb-2">Loading Facility...</h3>
          <p className="text-lg text-slate-600">Please wait while we fetch the facility details</p>
        </div>
      </div>
    )
  }

  // Error state
  if (error || !facility) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 flex items-center justify-center">
        <div className="text-center max-w-md mx-auto px-4">
          <AlertCircle className="h-16 w-16 text-red-500 mx-auto mb-4" />
          <h3 className="text-2xl font-bold text-slate-800 mb-2">Facility Not Found</h3>
          <p className="text-lg text-slate-600 mb-6">{error || 'The facility you are looking for could not be found.'}</p>
          <Link href="/search">
            <Button className="bg-[#3F5CEA] hover:bg-[#2E4BC7]">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Search
            </Button>
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50">
      {/* Header */}
      <header className="border-b border-slate-200/60 bg-white/95 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Link href="/search" className="flex items-center text-slate-700 hover:text-[#3F5CEA] transition-colors">
                <ArrowLeft className="h-5 w-5 mr-2" />
                <span className="font-medium">Back to Search</span>
              </Link>
            </div>
            <div className="flex items-center space-x-3">
              <FavoriteButton facilityId={facility?.id || params.id} initial={(facility as any)?.isFavorite} count={(facility as any)?.favoritesCount} compact />
              <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => {
                if (myReview && myReview.status !== 'pending') {
                  toast.success('Changes will be submitted as a revision and require admin approval.', { title: 'Edit your review' })
                }
                setShowReviewModal(true)
              }}>{myReview ? 'Edit your review' : 'Write a review'}</Button>
              <ShareButton url={`${typeof window !== 'undefined' ? window.location.origin : ''}/facility/${facility?.id || params.id}`} size="sm" />
            </div>
          </div>
        </div>
      </header>

      <div className="container mx-auto px-4 py-8">
        {/* Hero Section */}
        <div className="mb-8">
          <Card className="shadow-lg border-0 bg-white/80 backdrop-blur-sm">
            <CardContent className="p-8">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {/* Facility Info */}
                <div className="lg:col-span-2">
                  <div className="flex items-start justify-between mb-6">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-3">
                        <Building2 className="h-8 w-8 text-[#3F5CEA]" />
                        <h1 className="text-3xl lg:text-4xl font-bold text-slate-900 leading-tight">
                          {facility.name}
                        </h1>
                      </div>
                      
                      <div className="flex flex-wrap gap-2 mb-4">
                        {(facility as any).featured && (
                          <Badge className="bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 text-white px-4 py-1.5 text-sm font-bold shadow-lg animate-pulse">
                            <Star className="h-4 w-4 mr-1 fill-white" />
                            FEATURED
                          </Badge>
                        )}
                        <Badge className="bg-[#3F5CEA] text-white px-3 py-1 text-sm font-medium">
                          {facility.type}
                        </Badge>
                        {facility.serviceType && (
                          <Badge variant="outline" className="border-slate-300 text-slate-700 px-3 py-1 text-sm">
                            {facility.serviceType}
                          </Badge>
                        )}
                        {facility.verified && (
                          <Badge className="bg-green-600 text-white px-3 py-1 text-sm font-medium">
                            <Shield className="h-3 w-3 mr-1" />
                            Licensed
                          </Badge>
                        )}
                        {facility.licensing?.alzheimerCertified && (
                          <Badge className="bg-purple-600 text-white px-3 py-1 text-sm font-medium">
                            <Brain className="h-3 w-3 mr-1" />
                            Alzheimer Certified
                          </Badge>
                        )}
                      </div>

                      <div className="flex items-start gap-3 mb-6">
                        <MapPin className="h-5 w-5 text-slate-500 mt-1 flex-shrink-0" />
                        <div className="text-lg text-slate-700">
                          <div className="font-medium">{facility.location?.address || 'Address not available'}</div>
                          <div className="text-slate-600">
                            {facility.location?.city}, {facility.location?.state} {facility.location?.zipCode}
                          </div>
                          {facility.location?.county && (
                            <div className="text-sm text-slate-500 mt-1">{facility.location.county} County</div>
                          )}
                        </div>
                      </div>

                      {facility.staffing?.administrator && (
                        <div className="flex items-center gap-3 mb-4">
                          <UserCheck className="h-5 w-5 text-slate-500" />
                          <div>
                            <div className="text-sm text-slate-500">Administrator</div>
                            <div className="font-medium text-slate-800">{facility.staffing.administrator}</div>
                          </div>
                        </div>
                      )}

                      {facility.owner?.website && (
                        <div className="flex items-center gap-3 mb-4">
                          <Globe className="h-5 w-5 text-slate-500" />
                          <div>
                            <div className="text-sm text-slate-500">Company Website</div>
                            <a 
                              href={facility.owner.website.startsWith('http') ? facility.owner.website : `https://${facility.owner.website}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="font-medium text-[#3F5CEA] hover:underline"
                            >
                              {facility.owner.website.replace(/^https?:\/\//, '').replace(/^www\./, '')}
                            </a>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Quick Stats */}
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    {facility.capacity?.totalLicensed && (
                      <div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
                        <div className="flex items-center gap-2 mb-2">
                          <Bed className="h-5 w-5 text-blue-600" />
                          <span className="text-sm font-medium text-blue-800">Total Capacity</span>
                        </div>
                        <div className="text-2xl font-bold text-blue-900">{facility.capacity.totalLicensed}</div>
                        <div className="text-sm text-blue-700">Licensed beds</div>
                      </div>
                    )}
                    
                    {facility.licensing?.licenseNumber && (
                      <div className="bg-green-50 p-4 rounded-lg border border-green-100">
                        <div className="flex items-center gap-2 mb-2">
                          <Award className="h-5 w-5 text-green-600" />
                          <span className="text-sm font-medium text-green-800">License #</span>
                        </div>
                        <div className="text-lg font-bold text-green-900 mb-2">{facility.licensing.licenseNumber}</div>
                        <div className="text-sm text-green-700 mb-3">State Licensed</div>
                        <a
                          href="https://txhhs.my.site.com/TULIP/s/ltc-provider-search"
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center gap-2 text-sm font-medium text-green-700 hover:text-green-900 transition-colors"
                        >
                          <FileText className="h-4 w-4" />
                          View Recent Inspection Report
                          <ExternalLink className="h-3 w-3" />
                        </a>
                      </div>
                    )}
                    
                    {(facility.statistics?.viewCount || 0) > 0 && (
                      <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
                        <div className="flex items-center gap-2 mb-2">
                          <Eye className="h-5 w-5 text-yellow-600" />
                          <span className="text-sm font-medium text-yellow-800">Views</span>
                        </div>
                        <div className="text-2xl font-bold text-yellow-900">{facility.statistics?.viewCount || 0}</div>
                        <div className="text-sm text-yellow-700">Profile views</div>
                      </div>
                    )}
                  </div>

                  {/* Location Map */}
                  {facility.location?.coordinates && (facility.location.coordinates.lat !== null && facility.location.coordinates.lng !== null) && (
                    <div className="mt-6">
                      <Card className="shadow-md border-0 bg-white/80 backdrop-blur-sm">
                        <CardHeader className="pb-4">
                          <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                            <MapPin className="h-5 w-5 text-[#3F5CEA]" />
                            Facility Location
                          </CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="h-64 rounded-lg overflow-hidden">
                            <ErrorBoundary>
                              <GoogleMapComponent
                                facilities={[{
                                  id: facility.id,
                                  name: facility.name,
                                  type: facility.type,
                                  location: `${facility.location?.address || ''}, ${facility.location?.city || ''}, ${facility.location?.state || ''}`,
                                  distance: null,
                                  rating: facility.rating || 0,
                                  reviewCount: facility.reviewCount || 0,
                                  startingPrice: facility.pricing?.min || 0,
                                  image: '/placeholder.svg',
                                  amenities: facility.amenities || [],
                                  verified: facility.verified || false,
                                  featured: facility.featured || false,
                                  coordinates: {
                                    lat: facility.location?.coordinates?.lat || null,
                                    lng: facility.location?.coordinates?.lng || null
                                  }
                                }]}
                                selectedFacility={facility.id}
                                onFacilitySelect={() => {}}
                                className="h-full"
                              />
                            </ErrorBoundary>
                          </div>
                          <div className="mt-4 p-3 bg-slate-50 rounded-lg">
                            <div className="flex items-start gap-2">
                              <MapPin className="h-4 w-4 text-slate-500 mt-0.5 flex-shrink-0" />
                              <div className="text-sm text-slate-700">
                                <div className="font-medium">{facility.location.address}</div>
                                <div className="text-slate-600">
                                  {facility.location.city}, {facility.location.state} {facility.location.zipCode}
                                </div>
                                {facility.location.county && (
                                  <div className="text-slate-500 mt-1">{facility.location.county} County</div>
                                )}
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  )}
                </div>

                {/* Contact Card */}
                <div className="lg:col-span-1">
                  <Card className="shadow-md border border-slate-200">
                    <CardHeader className="pb-4">
                      <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                        <Phone className="h-5 w-5 text-[#3F5CEA]" />
                        Contact Information
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      {facility.contact?.phone && (
                        <Button className="w-full bg-[#3F5CEA] hover:bg-[#2E4BC7] text-white py-3">
                          <Phone className="h-4 w-4 mr-2" />
                          Call {facility.contact.phone}
                        </Button>
                      )}
                      
                      {(facility.contact?.email || facility.contact?.providerEmail) && (
                        <Button variant="outline" className="w-full border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white py-3">
                          <Mail className="h-4 w-4 mr-2" />
                          Send Email
                        </Button>
                      )}
                      
                      <Button variant="outline" className="w-full border-slate-300 text-slate-700 hover:bg-slate-50 py-3">
                        <Calendar className="h-4 w-4 mr-2" />
                        Schedule Tour
                      </Button>

                      {/* Contact Details */}
                      <div className="pt-4 border-t border-slate-200 space-y-3">
                        {/* Phone and Website side by side */}
                        <div className="grid grid-cols-1 gap-3">
                          {facility.contact?.phone && (
                            <div className="flex items-center gap-3 text-sm">
                              <Phone className="h-4 w-4 text-slate-400" />
                              <span className="text-slate-600">{facility.contact.phone}</span>
                            </div>
                          )}
                          
                          {facility.contact?.website && (
                            <div className="flex items-center gap-3 text-sm">
                              <Globe className="h-4 w-4 text-slate-400" />
                              <a 
                                href={facility.contact.website.startsWith('http') ? facility.contact.website : `https://${facility.contact.website}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-[#3F5CEA] hover:underline"
                              >
                                {facility.contact.website.replace(/^https?:\/\//, '').replace(/^www\./, '')}
                              </a>
                            </div>
                          )}
                        </div>
                        
                        {(facility.contact?.email || facility.contact?.providerEmail) && (
                          <div className="flex items-center gap-3 text-sm">
                            <Mail className="h-4 w-4 text-slate-400" />
                            <span className="text-slate-600">{facility.contact?.email || facility.contact?.providerEmail}</span>
                          </div>
                        )}
                        
                        {facility.contact?.fax && (
                          <div className="flex items-center gap-3 text-sm">
                            <Printer className="h-4 w-4 text-slate-400" />
                            <span className="text-slate-600">{facility.contact.fax}</span>
                          </div>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Detailed Information Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid h-14 w-full grid-cols-4 bg-white/80 backdrop-blur-sm border border-slate-200 p-1 rounded-lg shadow-sm">
            <TabsTrigger 
              value="overview" 
              className="font-medium text-slate-700 data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white py-3"
            >
              Overview
            </TabsTrigger>
            <TabsTrigger 
              value="photos" 
              className="font-medium text-slate-700 data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white py-3"
            >
              <ImageIcon className="h-4 w-4 mr-2 inline" />
              Photos {facility?.images && facility.images.length > 0 && `(${facility.images.length})`}
            </TabsTrigger>
            <TabsTrigger 
              value="details" 
              className="font-medium text-slate-700 data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white py-3"
            >
              Details & Capacity
            </TabsTrigger>
            <TabsTrigger 
              value="location" 
              className="font-medium text-slate-700 data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white py-3"
            >
              Location & Info
            </TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="mt-6">
            <div className="max-w-4xl mx-auto">
              {/* About Section */}
              <Card className="shadow-md border-0 bg-white/80 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                    <Home className="h-5 w-5 text-[#3F5CEA]" />
                    About This Facility
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-slate-700 leading-relaxed mb-6">
                    {facility.description || `${facility.name} is a ${facility.type?.toLowerCase()} facility providing quality care and services to residents in ${facility.location?.city}, ${facility.location?.state}.`}
                  </p>
                  
                  <div className="space-y-4">
                    <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                      <span className="font-medium text-slate-700">Facility Type</span>
                      <span className="text-slate-900 font-semibold">{facility.type}</span>
                    </div>
                    
                    {facility.serviceType && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Service Type</span>
                        <span className="text-slate-900 font-semibold">{facility.serviceType}</span>
                      </div>
                    )}
                    
                    <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                      <span className="font-medium text-slate-700">Status</span>
                      <Badge className="bg-green-100 text-green-800 border-green-200">
                        {facility.status === 'active' ? 'Active' : facility.status}
                      </Badge>
                    </div>

                    {facility.pricing?.min && facility.pricing?.max && (
                      <div className="p-4 bg-green-50 rounded-lg border border-green-200">
                        <div className="text-sm font-medium text-green-700 mb-1">Pricing Range</div>
                        <div className="text-2xl font-bold text-green-900">
                          ${facility.pricing.min.toLocaleString()} - ${facility.pricing.max.toLocaleString()}
                        </div>
                        <div className="text-sm text-green-700">per {facility.pricing.period || 'month'}</div>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="photos" className="mt-6">
            <div className="max-w-6xl mx-auto">
              <Card className="shadow-md border-0 bg-white/80 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                    <ImageIcon className="h-5 w-5 text-[#3F5CEA]" />
                    Facility Photos
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  {facility?.images && facility.images.length > 0 ? (
                    <div>
                      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                        {facility.images.map((imageUrl, index) => (
                          <div
                            key={index}
                            className="relative aspect-video cursor-pointer group overflow-hidden rounded-lg border-2 border-gray-200 hover:border-blue-500 transition-all"
                            onClick={() => setSelectedImageIndex(index)}
                          >
                            {index === 0 && (
                              <div className="absolute top-2 left-2 z-10">
                                <Badge className="bg-blue-600 text-white">Primary</Badge>
                              </div>
                            )}
                            <Image
                              src={imageUrl}
                              alt={`${facility.name} - Photo ${index + 1}`}
                              fill
                              className="object-cover group-hover:scale-110 transition-transform duration-300"
                              sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
                            />
                            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
                              <Eye className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
                            </div>
                          </div>
                        ))}
                      </div>

                      {/* Virtual Tour */}
                      {facility.virtualTour && (
                        <div className="mt-6 pt-6 border-t">
                          <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                            <Globe className="h-5 w-5 text-[#3F5CEA]" />
                            Virtual Tour
                          </h3>
                          <a
                            href={facility.virtualTour}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                          >
                            <Eye className="h-5 w-5" />
                            View 360° Virtual Tour
                            <ExternalLink className="h-4 w-4" />
                          </a>
                        </div>
                      )}
                    </div>
                  ) : (
                    <div className="text-center py-16">
                      <ImageIcon className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                      <h3 className="text-lg font-semibold text-gray-700 mb-2">No Photos Available</h3>
                      <p className="text-gray-500">Photos for this facility have not been uploaded yet.</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="details" className="mt-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Capacity Information */}
              <Card className="shadow-md border-0 bg-white/80 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                    <Bed className="h-5 w-5 text-[#3F5CEA]" />
                    Capacity Information
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {(facility.capacity.totalLicensed || facility.capacity.totalLicensed === 0) && (
                      <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
                        <div className="text-sm font-medium text-blue-700 mb-1">Total Licensed Beds</div>
                        <div className="text-3xl font-bold text-blue-900">{(facility.capacity.totalLicensed && facility.capacity.totalLicensed > 1) ? facility.capacity.totalLicensed : 6}</div>
                      </div>
                    )}
                    
                    {facility.capacity.licensedOnlyBeds && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Licensed Only Beds</span>
                        <span className="text-xl font-bold text-slate-900">{facility.capacity.licensedOnlyBeds}</span>
                      </div>
                    )}
                    
                    {facility.capacity.medicaidOnlyBeds && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Medicaid Only Beds</span>
                        <span className="text-xl font-bold text-slate-900">{facility.capacity.medicaidOnlyBeds}</span>
                      </div>
                    )}
                    
                    {facility.capacity.medicareOnlyBeds && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Medicare Only Beds</span>
                        <span className="text-xl font-bold text-slate-900">{facility.capacity.medicareOnlyBeds}</span>
                      </div>
                    )}
                    
                    {facility.capacity.alzheimerCapacity && (
                      <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
                        <div className="text-sm font-medium text-purple-700 mb-1">Alzheimer Capacity</div>
                        <div className="text-2xl font-bold text-purple-900">{facility.capacity.alzheimerCapacity}</div>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Licensing Details */}
              <Card className="shadow-md border-0 bg-white/80 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                    <FileText className="h-5 w-5 text-[#3F5CEA]" />
                    Licensing Information
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {facility.licensing.licenseNumber && (
                      <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
                        <div className="text-sm font-medium text-blue-700 mb-1">License Number</div>
                        <div className="text-xl font-bold text-blue-900 mb-3">{facility.licensing.licenseNumber}</div>
                        <a
                          href="https://txhhs.my.site.com/TULIP/s/ltc-provider-search"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <Button size="sm" className="bg-[#3F5CEA] hover:bg-[#2E4BC7] w-full">
                            <FileText className="h-4 w-4 mr-2" />
                            View Recent Inspection Report
                            <ExternalLink className="h-3 w-3 ml-2" />
                          </Button>
                        </a>
                      </div>
                    )}
                    
                    {facility.licensing.effectiveDate && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Effective Date</span>
                        <span className="font-semibold text-slate-900">{formatDate(facility.licensing.effectiveDate)}</span>
                      </div>
                    )}
                    
                    {facility.licensing.expirationDate && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Expiration Date</span>
                        <span className="font-semibold text-slate-900">{formatDate(facility.licensing.expirationDate)}</span>
                      </div>
                    )}
                    
                    {facility.licensing.medicareProviderNumber && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Medicare Provider #</span>
                        <span className="font-semibold text-slate-900">{facility.licensing.medicareProviderNumber}</span>
                      </div>
                    )}
                    
                    {facility.licensing.medicaidProviderNumber && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">Medicaid Provider #</span>
                        <span className="font-semibold text-slate-900">{facility.licensing.medicaidProviderNumber}</span>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="location" className="mt-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Address & Location */}
              <Card className="shadow-md border-0 bg-white/80 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                    <MapIcon className="h-5 w-5 text-[#3F5CEA]" />
                    Address & Location
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <div className="text-sm font-medium text-slate-600 mb-2">Full Address</div>
                      <div className="text-lg font-semibold text-slate-900">
                        {facility.location.address || 'Address not available'}
                      </div>
                      <div className="text-slate-700 mt-1">
                        {facility.location.city}, {facility.location.state} {facility.location.zipCode}
                      </div>
                    </div>
                    
                    {facility.location.county && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">County</span>
                        <span className="font-semibold text-slate-900">{facility.location.county}</span>
                      </div>
                    )}
                    
                    {facility.location.stateRegion && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">State Region</span>
                        <span className="font-semibold text-slate-900">{facility.location.stateRegion}</span>
                      </div>
                    )}
                    
                    {facility.location.hhscSubOffice && (
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium text-slate-700">HHSC Office</span>
                        <span className="font-semibold text-slate-900">{facility.location.hhscSubOffice}</span>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Contact Information */}
              <Card className="shadow-md border-0 bg-white/80 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-xl text-slate-800 flex items-center gap-2">
                    <Phone className="h-5 w-5 text-[#3F5CEA]" />
                    Contact Information
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {/* Phone and Website side by side */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {facility.contact.phone && (
                        <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg">
                          <Phone className="h-5 w-5 text-[#3F5CEA] flex-shrink-0" />
                          <div className="flex-1">
                            <div className="text-sm font-medium text-slate-600">Phone</div>
                            <div className="text-lg font-semibold text-slate-900">{facility.contact.phone}</div>
                          </div>
                          <Button size="sm" className="bg-[#3F5CEA] hover:bg-[#2E4BC7]">
                            Call
                          </Button>
                        </div>
                      )}
                      
                      {facility.contact.website && (
                        <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg">
                          <Globe className="h-5 w-5 text-[#3F5CEA] flex-shrink-0" />
                          <div className="flex-1">
                            <div className="text-sm font-medium text-slate-600">Website</div>
                            <a 
                              href={facility.contact.website.startsWith('http') ? facility.contact.website : `https://${facility.contact.website}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-lg font-semibold text-[#3F5CEA] hover:underline break-all"
                            >
                              {facility.contact.website.replace(/^https?:\/\//, '').replace(/^www\./, '')}
                            </a>
                          </div>
                          <Button size="sm" variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white">
                            Visit
                          </Button>
                        </div>
                      )}
                    </div>
                    
                    {(facility.contact.email || facility.contact.providerEmail) && (
                      <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg">
                        <Mail className="h-5 w-5 text-[#3F5CEA] flex-shrink-0" />
                        <div className="flex-1">
                          <div className="text-sm font-medium text-slate-600">Email</div>
                          <div className="text-lg font-semibold text-slate-900 break-all">
                            {facility.contact.email || facility.contact.providerEmail}
                          </div>
                        </div>
                        <Button size="sm" variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white">
                          Email
                        </Button>
                      </div>
                    )}
                    
                    {facility.contact.fax && (
                      <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg">
                        <Printer className="h-5 w-5 text-slate-500 flex-shrink-0" />
                        <div>
                          <div className="text-sm font-medium text-slate-600">Fax</div>
                          <div className="text-lg font-semibold text-slate-900">{facility.contact.fax}</div>
                        </div>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>

      {/* Reviews Section */}
      <div className="container mx-auto px-4 pb-12">
        <h2 className="text-2xl font-bold mb-4">Reviews</h2>

        {/* Show my pending/rejected review to me for better UX */}
        {myReview && myReview.status !== 'approved' && (
          <div className="mb-6">
            <div className="flex items-center justify-between mb-2">
              <div className="text-sm text-slate-600">Your review is <span className="font-medium capitalize">{myReview.status}</span>. Admin will approve it before it becomes publicly visible.</div>
              <Button size="sm" onClick={() => setShowReviewModal(true)}>Edit review</Button>
            </div>
            <ReviewCard review={myReview} />
          </div>
        )}

        {/* Show pending revision if exists */}
        {myReview && myReview.status === 'approved' && (myReview as any).pendingRevision && (
          <div className="mb-6 p-4 border-2 border-blue-300 rounded-lg bg-blue-50">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <div className="h-2 w-2 bg-blue-600 rounded-full animate-pulse"></div>
                <div className="text-sm font-semibold text-blue-900">You have a pending revision awaiting approval</div>
              </div>
              <Button size="sm" variant="outline" onClick={() => setShowReviewModal(true)}>Edit revision</Button>
            </div>
            <div className="p-3 bg-white rounded border border-blue-200">
              <div className="flex items-center gap-2 mb-2">
                <Stars value={(myReview as any).pendingRevision.rating} readOnly size={16} />
                <span className="text-xs text-slate-500">({(myReview as any).pendingRevision.rating}/5)</span>
              </div>
              {(myReview as any).pendingRevision.comment && (
                <p className="text-sm text-slate-700 mb-2">{(myReview as any).pendingRevision.comment}</p>
              )}
              <div className="text-xs text-slate-500">
                Submitted: {new Date((myReview as any).pendingRevision.submittedAt).toLocaleDateString()}
              </div>
            </div>
          </div>
        )}

        {approvedReviews.length === 0 ? (
          <div className="text-sm text-slate-600">No reviews yet. {myReview ? 'Your review is pending approval.' : 'Be the first to write a review.'}</div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {approvedReviews.map((r:any)=> (
              <ReviewCard key={r.id} review={r} />
            ))}
          </div>
        )}
      </div>

      {showReviewForm && (
        <ReviewForm
          facilityName={facility.name}
          onClose={() => setShowReviewForm(false)}
          onSubmit={handleReviewSubmit}
        />
      )}
      <ReviewModal
        open={showReviewModal}
        onClose={() => setShowReviewModal(false)}
        facilityId={facility?.id || params.id}
        existing={myReview ? { id: myReview.id, rating: myReview.rating, comment: myReview.comment, media: myReview.media, status: myReview.status } : undefined as any}
        onSubmitted={async () => {
          try {
            console.log('[Facility] Refreshing reviews after submission')
            const revRes = await DataAPI.reviews.getReviews({ facilityId: facility?.id || params.id })
            const reviews = (revRes as any)?.data?.reviews || []
            console.log('[Facility] Fetched reviews:', reviews.length)
            const prof = await DataAPI.auth.getProfile()
            const uid = (prof as any)?.data?.user?.id || (prof as any)?.data?.user?._id || null
            console.log('[Facility] Current user ID:', uid)
            if (uid) {
              const mine = reviews.find((r: any) => {
                // userId can be a string ID or an object with _id
                const reviewUserId = typeof r?.userId === 'string' ? r.userId : r?.userId?._id || r?.userId?.id
                return reviewUserId === uid
              })
              console.log('[Facility] My review:', mine)
              console.log('[Facility] My review has pendingRevision?', !!(mine as any)?.pendingRevision)
              setMyReview(mine || null)
            }
            setApprovedReviews(reviews.filter((r:any)=>r.status==='approved'))
          } catch (err) {
            console.error('[Facility] Error refreshing reviews:', err)
          }
        }}
      />

      {/* Image Lightbox Modal */}
      {selectedImageIndex !== null && facility?.images && (
        <div 
          className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
          onClick={() => setSelectedImageIndex(null)}
        >
          <Button
            variant="ghost"
            size="icon"
            className="absolute top-4 right-4 text-white hover:bg-white/20 z-10"
            onClick={() => setSelectedImageIndex(null)}
          >
            <X className="h-6 w-6" />
          </Button>

          {/* Navigation Buttons */}
          {selectedImageIndex > 0 && (
            <Button
              variant="ghost"
              size="icon"
              className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/20 z-10"
              onClick={(e) => {
                e.stopPropagation()
                setSelectedImageIndex(selectedImageIndex - 1)
              }}
            >
              <ChevronLeft className="h-8 w-8" />
            </Button>
          )}

          {selectedImageIndex < facility.images.length - 1 && (
            <Button
              variant="ghost"
              size="icon"
              className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/20 z-10"
              onClick={(e) => {
                e.stopPropagation()
                setSelectedImageIndex(selectedImageIndex + 1)
              }}
            >
              <ChevronRight className="h-8 w-8" />
            </Button>
          )}

          {/* Image */}
          <div className="relative w-full h-full max-w-7xl max-h-[90vh] p-8" onClick={(e) => e.stopPropagation()}>
            <Image
              src={facility.images[selectedImageIndex]}
              alt={`${facility.name} - Photo ${selectedImageIndex + 1}`}
              fill
              className="object-contain"
              sizes="100vw"
            />
            
            {/* Image Counter */}
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/70 text-white px-4 py-2 rounded-full text-sm">
              {selectedImageIndex + 1} / {facility.images.length}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}