"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/hooks/use-auth"
import { useRouter } from "next/navigation"
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 { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import ReviewModal from "@/components/reviews/ReviewModal"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Skeleton } from "@/components/ui/skeleton"
import { DataAPI } from "@/lib/data-api"
import { useToast } from "@/components/ui/toast"
import {
  Heart,
  Search,
  Star,
  MessageSquare,
  Calendar,
  MapPin,
  ArrowRight,
  Plus,
  Eye,
  Phone,
  Mail,
  Bell,
  Settings,
  User,
  Clock,
  TrendingUp,
  Home,
  Building2
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { motion } from "framer-motion"

export default function UserDashboard() {
  const { user, isAuthenticated, isLoading: authLoading } = useAuth()
  const router = useRouter()
  const toast = useToast()

  // State for dashboard data
  const [favorites, setFavorites] = useState<any[]>([])
  const [reviews, setReviews] = useState<any[]>([])
  const [stats, setStats] = useState({
    savedFacilities: 0,
    reviewsWritten: 0,
    facilitiesContacted: 0,
    searchSessions: 0
  })
  const [loading, setLoading] = useState(true)
  const [recentActivity, setRecentActivity] = useState<any[]>([])

  // Fetch dashboard data
  const loadDashboardData = async () => {
    if (!isAuthenticated || !user) return

    setLoading(true)
    try {
      // Fetch favorites and reviews in parallel
      const [favoritesRes, reviewsRes] = await Promise.all([
        DataAPI.favorites.me({ limit: 3 }),
        DataAPI.reviews.getReviews({ userId: user.id })
      ])

      const favoritesList = ((favoritesRes as any)?.data?.favorites || []).filter((f: any) => f)
      let reviewsList = ((reviewsRes as any)?.data?.reviews || []).filter((r: any) => r)

      // Manual filtering fallback in case backend ignores userId
      if (user.id) {
        reviewsList = reviewsList.filter((r: any) => {
          if (!r) return false
          const rUserId = (r.userId && typeof r.userId === 'object') ? (r.userId._id || r.userId.id) : r.userId
          const rUser = r.user ? (r.user._id || r.user.id) : null
          return rUserId === user.id || rUser === user.id
        })
      }

      setFavorites(favoritesList)
      setReviews(reviewsList.slice(0, 3)) // Top 3 recent reviews

      // Build recent activity from favorites and reviews
      const activities: any[] = []

      // Add favorites to activity
      favoritesList.slice(0, 2).forEach((fav: any) => {
        if (fav && fav.createdAt) {
          activities.push({
            id: `fav-${fav._id}`,
            type: 'favorite',
            message: `Saved ${fav.facility?.name || 'facility'} to favorites`,
            timestamp: fav.createdAt,
            facility: fav.facility?.name
          })
        }
      })

      // Add reviews to activity
      reviewsList.slice(0, 2).forEach((review: any) => {
        if (review && review.createdAt) {
          const facilityName = typeof review.facilityId === 'string'
            ? 'facility'
            : review.facilityId?.name || 'facility'
          activities.push({
            id: `review-${review._id || review.id}`,
            type: 'review',
            message: `Submitted review for ${facilityName}`,
            timestamp: review.createdAt,
            facility: facilityName
          })
        }
      })

      // Sort by timestamp descending
      activities.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
      setRecentActivity(activities.slice(0, 4))

      // Update stats
      setStats({
        savedFacilities: (favoritesRes as any)?.data?.total || favoritesList.length,
        reviewsWritten: reviewsList.length,
        facilitiesContacted: 0, // You can add this data when available
        searchSessions: 0 // You can add this data when available
      })
    } catch (error: any) {
      console.error('Failed to load dashboard data:', error)
      toast.error(error?.message || "Please refresh the page", { title: "Failed to load dashboard" })
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (!authLoading && !isAuthenticated) {
      router.push('/login')
    } else if (isAuthenticated) {
      loadDashboardData()
    }
  }, [isAuthenticated, authLoading, router])

  if (authLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30 flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Loading your dashboard...</p>
        </div>
      </div>
    )
  }

  if (!isAuthenticated) {
    return null // Will redirect to login
  }

  const getActivityIcon = (type: string) => {
    switch (type) {
      case "favorite":
        return <Heart className="h-4 w-4 text-red-500" />
      case "review":
        return <MessageSquare className="h-4 w-4 text-blue-500" />
      case "search":
        return <Search className="h-4 w-4 text-green-500" />
      case "contact":
        return <Phone className="h-4 w-4 text-purple-500" />
      default:
        return <Bell className="h-4 w-4 text-gray-500" />
    }
  }

  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">
          {/* Welcome Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mb-8"
          >
            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
              <div className="flex items-center gap-4">
                <Avatar className="h-16 w-16 border-2 border-white shadow-md">
                  <AvatarImage
                    src={(user as any)?.profilePicture || (user as any)?.profile?.profilePicture || ''}
                    alt="Profile"
                    className="object-cover"
                  />
                  <AvatarFallback className="bg-gradient-to-br from-[#3F5CEA] to-[#09183D] flex items-center justify-center text-white text-xl font-bold">
                    {user?.firstName?.charAt(0)}{user?.lastName?.charAt(0)}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h1 className="font-primary text-3xl md:text-4xl font-bold text-gray-900">
                    Welcome back, {user ? `${user.firstName} ${user.lastName}` : 'User'}!
                  </h1>
                  <p className="font-body text-lg text-gray-600">
                    Continue your search for the perfect senior care facility
                  </p>
                </div>
              </div>

              <div className="flex flex-col sm:flex-row gap-3">
                <Link href="/search">
                  <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                    <Search className="h-4 w-4 mr-2" />
                    Find Facilities
                  </AnimatedButton>
                </Link>
                <Link href="/profile">
                  <Button variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white">
                    <Settings className="h-4 w-4 mr-2" />
                    Settings
                  </Button>
                </Link>
              </div>
            </div>
          </motion.div>

          {/* Quick Stats */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
          >
            <Link href="/dashboard/favorites" className="block">
              <AnimatedCard className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200 hover:shadow-lg transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-body text-sm text-blue-700">Saved Facilities</p>
                      {loading ? (
                        <Skeleton className="h-9 w-12 mt-1" />
                      ) : (
                        <p className="font-primary text-3xl font-bold text-blue-900">{stats.savedFacilities}</p>
                      )}
                    </div>
                    <Heart className="h-8 w-8 text-blue-600" />
                  </div>
                </CardContent>
              </AnimatedCard>
            </Link>

            <Link href="/dashboard/reviews" className="block">
              <AnimatedCard className="bg-gradient-to-br from-green-50 to-emerald-50 border-green-200 hover:shadow-lg transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-body text-sm text-green-700">Reviews Written</p>
                      {loading ? (
                        <Skeleton className="h-9 w-12 mt-1" />
                      ) : (
                        <p className="font-primary text-3xl font-bold text-green-900">{stats.reviewsWritten}</p>
                      )}
                    </div>
                    <MessageSquare className="h-8 w-8 text-green-600" />
                  </div>
                </CardContent>
              </AnimatedCard>
            </Link>

            <AnimatedCard className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-body text-sm text-purple-700">Facilities Contacted</p>
                    {loading ? (
                      <Skeleton className="h-9 w-12 mt-1" />
                    ) : (
                      <p className="font-primary text-3xl font-bold text-purple-900">{stats.facilitiesContacted}</p>
                    )}
                  </div>
                  <Phone className="h-8 w-8 text-purple-600" />
                </div>
              </CardContent>
            </AnimatedCard>

            <Link href="/search" className="block">
              <AnimatedCard className="bg-gradient-to-br from-orange-50 to-red-50 border-orange-200 hover:shadow-lg transition-shadow cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-body text-sm text-orange-700">Search Sessions</p>
                      {loading ? (
                        <Skeleton className="h-9 w-12 mt-1" />
                      ) : (
                        <p className="font-primary text-3xl font-bold text-orange-900">{stats.searchSessions}</p>
                      )}
                    </div>
                    <TrendingUp className="h-8 w-8 text-orange-600" />
                  </div>
                </CardContent>
              </AnimatedCard>
            </Link>
          </motion.div>

          <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
            {/* Main Content */}
            <div className="lg:col-span-2 space-y-8">
              {/* Saved Facilities */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.2 }}
              >
                <AnimatedCard className="border-slate-200 shadow-sm">
                  <CardHeader className="pb-4 px-6 pt-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-red-50 rounded-lg">
                          <Heart className="h-5 w-5 text-red-500" />
                        </div>
                        <CardTitle className="font-semibold text-base text-slate-900">Your Saved Facilities</CardTitle>
                      </div>
                      <Link href="/dashboard/favorites">
                        <Button variant="ghost" size="sm" className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 font-medium text-sm">
                          View All →
                        </Button>
                      </Link>
                    </div>
                  </CardHeader>
                  <CardContent className="px-6 pb-6 pt-0">
                    {loading ? (
                      <div className="space-y-4">
                        {[...Array(3)].map((_, idx) => (
                          <div key={idx} className="flex items-center gap-3 p-4 border border-slate-100 rounded-lg bg-white">
                            <Skeleton className="w-14 h-14 rounded-lg flex-shrink-0" />
                            <div className="flex-1 space-y-2">
                              <Skeleton className="h-4 w-40" />
                              <Skeleton className="h-3 w-32" />
                              <Skeleton className="h-3 w-24" />
                            </div>
                            <div className="flex gap-1">
                              <Skeleton className="h-8 w-8 rounded-md" />
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : favorites.length === 0 ? (
                      <div className="text-center py-16 px-4">
                        <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                          <Heart className="h-8 w-8 text-slate-400" />
                        </div>
                        <h3 className="font-semibold text-base text-slate-900 mb-2">No saved facilities yet</h3>
                        <p className="text-sm text-slate-600 mb-6 max-w-xs mx-auto">Start exploring and save facilities you're interested in</p>
                        <Link href="/search">
                          <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                            <Search className="h-4 w-4 mr-2" />
                            Start Searching
                          </AnimatedButton>
                        </Link>
                      </div>
                    ) : (
                      <div className="space-y-4">
                        {favorites.map((fav) => {
                          const facility = fav.facility
                          const facilityId = facility?._id || facility?.id
                          return (
                            <Link key={fav._id} href={`/facility/${facilityId}`}>
                              <div className="group flex items-center gap-3 p-4 border border-slate-200 rounded-xl hover:border-blue-300 hover:shadow-md transition-all duration-200 bg-white cursor-pointer">
                                <div className="w-14 h-14 rounded-lg overflow-hidden bg-slate-100 flex items-center justify-center flex-shrink-0 ring-1 ring-slate-200">
                                  {facility?.images?.[0] ? (
                                    <Image
                                      src={facility.images[0]}
                                      alt={facility.name || 'Facility'}
                                      width={56}
                                      height={56}
                                      className="w-full h-full object-cover"
                                    />
                                  ) : (
                                    <Building2 className="h-6 w-6 text-slate-400" />
                                  )}
                                </div>
                                <div className="flex-1 min-w-0">
                                  <h4 className="font-semibold text-sm text-slate-900 truncate group-hover:text-blue-600 transition-colors mb-1">
                                    {facility?.name || 'Unknown Facility'}
                                  </h4>
                                  <div className="flex items-center gap-2 flex-wrap">
                                    {facility?.careType && (
                                      <span className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100">
                                        {facility.careType}
                                      </span>
                                    )}
                                    {facility?.averageRating > 0 && (
                                      <div className="flex items-center gap-1">
                                        <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
                                        <span className="text-xs font-medium text-slate-700">{facility.averageRating.toFixed(1)}</span>
                                      </div>
                                    )}
                                  </div>
                                  {facility?.address?.city && facility?.address?.state && (
                                    <div className="flex items-center gap-1 mt-1">
                                      <MapPin className="h-3 w-3 text-slate-400" />
                                      <p className="text-xs text-slate-500">
                                        {facility.address.city}, {facility.address.state}
                                      </p>
                                    </div>
                                  )}
                                </div>
                                <div className="flex items-center">
                                  <div className="p-1.5 rounded-md group-hover:bg-slate-100 transition-colors">
                                    <Eye className="h-4 w-4 text-slate-400 group-hover:text-slate-600" />
                                  </div>
                                </div>
                              </div>
                            </Link>
                          )
                        })}
                      </div>
                    )}
                  </CardContent>
                </AnimatedCard>
              </motion.div>

              {/* Recent Reviews */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.3 }}
              >
                <AnimatedCard className="border-slate-200 shadow-sm">
                  <CardHeader className="pb-4 px-6 pt-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-blue-50 rounded-lg">
                          <MessageSquare className="h-5 w-5 text-blue-500" />
                        </div>
                        <CardTitle className="font-semibold text-base text-slate-900">Your Reviews</CardTitle>
                      </div>
                      <Link href="/dashboard/reviews">
                        <Button variant="ghost" size="sm" className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 font-medium text-sm">
                          View All →
                        </Button>
                      </Link>
                    </div>
                  </CardHeader>
                  <CardContent className="px-6 pb-6 pt-0">
                    {loading ? (
                      <div className="space-y-4">
                        {[...Array(2)].map((_, idx) => (
                          <div key={idx} className="p-4 border border-slate-100 rounded-lg bg-white space-y-2">
                            <div className="flex items-start justify-between gap-2">
                              <Skeleton className="h-4 w-40" />
                              <Skeleton className="h-5 w-16 rounded-full" />
                            </div>
                            <Skeleton className="h-3 w-20" />
                            <Skeleton className="h-3 w-full" />
                            <Skeleton className="h-3 w-3/4" />
                            <Skeleton className="h-3 w-24" />
                          </div>
                        ))}
                      </div>
                    ) : reviews.length === 0 ? (
                      <div className="text-center py-16 px-4">
                        <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                          <MessageSquare className="h-8 w-8 text-slate-400" />
                        </div>
                        <h3 className="font-semibold text-base text-slate-900 mb-2">No reviews yet</h3>
                        <p className="text-sm text-slate-600 mb-6 max-w-xs mx-auto">Share your experience with facilities you've visited</p>
                        <Link href="/search">
                          <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                            <Search className="h-4 w-4 mr-2" />
                            Find Facilities
                          </AnimatedButton>
                        </Link>
                      </div>
                    ) : (
                      <div className="space-y-4">
                        {reviews.map((review) => {
                          const facilityName = typeof review.facilityId === 'string'
                            ? 'Facility'
                            : review.facilityId?.name || 'Unknown Facility'
                          const facilityId = typeof review.facilityId === 'string'
                            ? review.facilityId
                            : review.facilityId?._id || review.facilityId?.id

                          // Capitalize status
                          const statusDisplay = review.status.charAt(0).toUpperCase() + review.status.slice(1)

                          return (
                            <div key={review._id || review.id} className="group p-4 border border-slate-200 rounded-xl hover:border-blue-300 hover:shadow-md transition-all duration-200 bg-white">
                              <div className="flex items-start justify-between gap-3 mb-3">
                                <Link href={`/facility/${facilityId}`} className="flex-1 min-w-0">
                                  <h4 className="font-semibold text-sm text-slate-900 group-hover:text-blue-600 transition-colors truncate mb-1.5">
                                    {facilityName}
                                  </h4>
                                </Link>
                                <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border flex-shrink-0 ${review.status === 'approved'
                                  ? 'bg-green-50 text-green-700 border-green-200'
                                  : review.status === 'rejected'
                                    ? 'bg-red-50 text-red-700 border-red-200'
                                    : 'bg-blue-50 text-blue-700 border-blue-200'
                                  }`}>
                                  {statusDisplay}
                                </span>
                              </div>

                              <div className="flex items-center gap-1.5 mb-2">
                                {[...Array(5)].map((_, i) => (
                                  <Star
                                    key={i}
                                    className={`h-3.5 w-3.5 ${i < review.rating ? "fill-yellow-400 text-yellow-400" : "fill-slate-200 text-slate-200"
                                      }`}
                                  />
                                ))}
                                <span className="text-xs font-medium text-slate-600 ml-1">
                                  {review.rating}.0
                                </span>
                              </div>

                              {review.comment && (
                                <p className="text-sm text-slate-600 line-clamp-2 leading-relaxed mb-3">
                                  {review.comment}
                                </p>
                              )}

                              <div className="flex items-center gap-1 text-xs text-slate-500">
                                <Calendar className="h-3 w-3" />
                                {new Date(review.createdAt).toLocaleDateString('en-US', {
                                  year: 'numeric',
                                  month: 'short',
                                  day: 'numeric'
                                })}
                              </div>
                            </div>
                          )
                        })}
                      </div>
                    )}
                  </CardContent>
                </AnimatedCard>
              </motion.div>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              {/* Recent Activity */}
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6, delay: 0.4 }}
              >
                <AnimatedCard hover={false}>
                  <CardHeader>
                    <CardTitle className="font-primary text-xl text-gray-900 flex items-center gap-2">
                      <Clock className="h-5 w-5" />
                      Recent Activity
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    {loading ? (
                      <div className="space-y-3">
                        {[...Array(4)].map((_, idx) => (
                          <div key={idx} className="flex items-start gap-3">
                            <Skeleton className="h-4 w-4 mt-1" />
                            <div className="flex-1 space-y-2">
                              <Skeleton className="h-4 w-full" />
                              <Skeleton className="h-3 w-24" />
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : recentActivity.length === 0 ? (
                      <div className="text-center py-6">
                        <Clock className="h-10 w-10 text-gray-300 mx-auto mb-3" />
                        <p className="font-body text-sm text-gray-600">No recent activity</p>
                      </div>
                    ) : (
                      <div className="space-y-3">
                        {recentActivity.map((activity) => (
                          <div key={activity.id} className="flex items-start gap-3 text-sm">
                            <div className="mt-1">
                              {getActivityIcon(activity.type)}
                            </div>
                            <div className="flex-1 min-w-0">
                              <p className="font-body text-gray-900 break-words line-clamp-2">{activity.message}</p>
                              <p className="font-body text-xs text-gray-500">
                                {new Date(activity.timestamp).toLocaleDateString('en-US', {
                                  year: 'numeric',
                                  month: 'short',
                                  day: 'numeric',
                                  hour: '2-digit',
                                  minute: '2-digit'
                                })}
                              </p>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </CardContent>
                </AnimatedCard>
              </motion.div>

              {/* Quick Actions */}
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6, delay: 0.5 }}
              >
                <AnimatedCard hover={false}>
                  <CardHeader>
                    <CardTitle className="font-primary text-xl text-gray-900">Quick Actions</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <Link href="/search" className="block">
                      <Button variant="outline" className="w-full justify-start border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white">
                        <Search className="h-4 w-4 mr-2" />
                        New Search
                      </Button>
                    </Link>
                    <Link href="/dashboard/favorites" className="block">
                      <Button variant="outline" className="w-full justify-start border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
                        <Heart className="h-4 w-4 mr-2" />
                        Manage Favorites
                      </Button>
                    </Link>
                    <Link href="/dashboard/reviews" className="block">
                      <Button variant="outline" className="w-full justify-start border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
                        <MessageSquare className="h-4 w-4 mr-2" />
                        My Reviews
                      </Button>
                    </Link>
                    <Link href="/compare" className="block">
                      <Button variant="outline" className="w-full justify-start border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
                        <ArrowRight className="h-4 w-4 mr-2" />
                        Compare Facilities
                      </Button>
                    </Link>
                  </CardContent>
                </AnimatedCard>
              </motion.div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  )
}