"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { 
  Search, 
  Filter, 
  Plus, 
  Download, 
  Upload, 
  MoreHorizontal, 
  Eye, 
  Edit, 
  Trash2, 
  CheckCircle, 
  XCircle, 
  Clock, 
  Star, 
  MapPin, 
  Building, 
  Users,
  TrendingUp,
  AlertCircle,
  RefreshCw,
  FileText,
  Settings
} from "lucide-react"
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function FacilitiesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [typeFilter, setTypeFilter] = useState("all")
  const [viewMode, setViewMode] = useState("table")
  const [selectedFacilities, setSelectedFacilities] = useState<number[]>([])
  const [sortBy, setSortBy] = useState("name")
  const [sortOrder, setSortOrder] = useState("asc")
  const handleAddFacility = () => {
    alert("Add new facility form would open here")
  }

  const handleImportData = () => {
    alert("Data import functionality would be implemented here")
  }

  const handleEditFacility = (facilityId: number) => {
    alert(`Edit facility ${facilityId} form would open here`)
  }

  const handleViewFacility = (facilityId: number) => {
    window.open(`/facility/${facilityId}`, '_blank')
  }

  const handleApproveFacility = (facilityId: number) => {
    alert(`Facility ${facilityId} has been approved!`)
  }
  const facilities = [
    {
      id: 1,
      name: "Sunrise Senior Living",
      type: "Independent Living",
      location: "Austin, TX",
      status: "active",
      verified: true,
      rating: 4.8,
      reviews: 127,
      lastUpdated: "2024-01-15",
      capacity: 120,
      occupied: 95,
      priceRange: "$3,200 - $4,800",
      contact: "contact@sunrise.com",
      phone: "(512) 555-0123",
      image: "/senior-living-facility-exterior.jpg"
    },
    {
      id: 2,
      name: "Golden Years Care Center",
      type: "Assisted Living",
      location: "Dallas, TX",
      status: "pending",
      verified: false,
      rating: 4.2,
      reviews: 89,
      lastUpdated: "2024-01-14",
      capacity: 80,
      occupied: 67,
      priceRange: "$4,100 - $5,600",
      contact: "info@goldenyears.com",
      phone: "(214) 555-0456",
      image: "/memory-care-facility-garden.jpg"
    },
    {
      id: 3,
      name: "Peaceful Gardens Memory Care",
      type: "Memory Care",
      location: "Houston, TX",
      status: "active",
      verified: true,
      rating: 4.6,
      reviews: 156,
      lastUpdated: "2024-01-13",
      capacity: 60,
      occupied: 58,
      priceRange: "$4,300 - $5,800",
      contact: "care@peacefulgardens.com",
      phone: "(713) 555-0789",
      image: "/independent-living-community.jpg"
    },
    {
      id: 4,
      name: "Heritage Manor",
      type: "Skilled Nursing",
      location: "San Antonio, TX",
      status: "suspended",
      verified: true,
      rating: 3.9,
      reviews: 203,
      lastUpdated: "2024-01-12",
      capacity: 100,
      occupied: 45,
      priceRange: "$5,500 - $7,200",
      contact: "admin@heritagemanor.com",
      phone: "(210) 555-0321",
      image: "/senior-care-facility-exterior-with-family-walking-.jpg"
    },
    {
      id: 5,
      name: "Comfort Care Residence",
      type: "Assisted Living",
      location: "Fort Worth, TX",
      status: "active",
      verified: true,
      rating: 4.5,
      reviews: 74,
      lastUpdated: "2024-01-11",
      capacity: 90,
      occupied: 82,
      priceRange: "$2,950 - $4,200",
      contact: "info@comfortcare.com",
      phone: "(817) 555-0654",
      image: "/senior-living-facility-exterior.jpg"
    }
  ]

  // Filter and sort facilities
  const filteredFacilities = facilities.filter(facility => {
    const matchesSearch = facility.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         facility.location.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "all" || facility.status === statusFilter
    const matchesType = typeFilter === "all" || facility.type === typeFilter
    return matchesSearch && matchesStatus && matchesType
  }).sort((a, b) => {
    const aValue = a[sortBy as keyof typeof a]
    const bValue = b[sortBy as keyof typeof b]
    if (sortOrder === "asc") {
      return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
    } else {
      return aValue > bValue ? -1 : aValue < bValue ? 1 : 0
    }
  })

  // Statistics
  const totalFacilities = facilities.length
  const activeFacilities = facilities.filter(f => f.status === "active").length
  const pendingFacilities = facilities.filter(f => f.status === "pending").length
  const averageRating = (facilities.reduce((sum, f) => sum + f.rating, 0) / facilities.length).toFixed(1)

  const handleBulkAction = (action: string) => {
    alert(`${action} action for ${selectedFacilities.length} selected facilities`)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
      <div className="p-6 lg:p-8 space-y-6">
        {/* Header Section */}
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              Facility Management
            </h1>
            <p className="text-gray-600 mt-2">Manage and monitor all senior care facilities</p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Button onClick={handleAddFacility} className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700">
              <Plus className="h-4 w-4 mr-2" />
              Add Facility
            </Button>
            <Button variant="outline" onClick={handleImportData}>
              <Upload className="h-4 w-4 mr-2" />
              Import Data
            </Button>
            <Button variant="outline">
              <Download className="h-4 w-4 mr-2" />
              Export
            </Button>
          </div>
        </div>

        {/* Statistics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <Card className="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-blue-600 text-sm font-medium">Total Facilities</p>
                  <p className="text-2xl font-bold text-blue-900">{totalFacilities}</p>
                </div>
                <Building className="h-8 w-8 text-blue-600" />
              </div>
            </CardContent>
          </Card>
          
          <Card className="bg-gradient-to-br from-green-50 to-green-100 border-green-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-green-600 text-sm font-medium">Active</p>
                  <p className="text-2xl font-bold text-green-900">{activeFacilities}</p>
                </div>
                <CheckCircle className="h-8 w-8 text-green-600" />
              </div>
            </CardContent>
          </Card>
          
          <Card className="bg-gradient-to-br from-yellow-50 to-yellow-100 border-yellow-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-yellow-600 text-sm font-medium">Pending Review</p>
                  <p className="text-2xl font-bold text-yellow-900">{pendingFacilities}</p>
                </div>
                <Clock className="h-8 w-8 text-yellow-600" />
              </div>
            </CardContent>
          </Card>
          
          <Card className="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-purple-600 text-sm font-medium">Avg Rating</p>
                  <p className="text-2xl font-bold text-purple-900">{averageRating}</p>
                </div>
                <Star className="h-8 w-8 text-purple-600" />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Filters and Search */}
        <Card className="bg-white/50 backdrop-blur-sm border-white/20">
          <CardContent className="p-6">
            <div className="flex flex-col lg:flex-row gap-4">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                <Input
                  placeholder="Search facilities by name or location..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 bg-white/80 border-gray-200"
                />
              </div>
              
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-full lg:w-[180px] bg-white/80">
                  <SelectValue placeholder="All Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="suspended">Suspended</SelectItem>
                </SelectContent>
              </Select>
              
              <Select value={typeFilter} onValueChange={setTypeFilter}>
                <SelectTrigger className="w-full lg:w-[200px] bg-white/80">
                  <SelectValue placeholder="All Types" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="Independent Living">Independent Living</SelectItem>
                  <SelectItem value="Assisted Living">Assisted Living</SelectItem>
                  <SelectItem value="Memory Care">Memory Care</SelectItem>
                  <SelectItem value="Skilled Nursing">Skilled Nursing</SelectItem>
                </SelectContent>
              </Select>
              
              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="w-full lg:w-[160px] bg-white/80">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="name">Name</SelectItem>
                  <SelectItem value="rating">Rating</SelectItem>
                  <SelectItem value="lastUpdated">Updated</SelectItem>
                  <SelectItem value="capacity">Capacity</SelectItem>
                </SelectContent>
              </Select>
              
              <Button variant="outline" size="icon" className="bg-white/80">
                <Filter className="h-4 w-4" />
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Bulk Actions */}
        {selectedFacilities.length > 0 && (
          <Card className="bg-blue-50 border-blue-200">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <span className="text-blue-700 font-medium">
                  {selectedFacilities.length} facilities selected
                </span>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm" onClick={() => handleBulkAction("approve")}>
                    <CheckCircle className="h-4 w-4 mr-1" />
                    Approve
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => handleBulkAction("suspend")}>
                    <XCircle className="h-4 w-4 mr-1" />
                    Suspend
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => handleBulkAction("delete")}>
                    <Trash2 className="h-4 w-4 mr-1" />
                    Delete
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Facilities Table/Grid */}
        <Card className="bg-white/70 backdrop-blur-sm border-white/20">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <CardTitle className="text-xl font-semibold text-gray-900">
                Facilities ({filteredFacilities.length})
              </CardTitle>
              <Tabs value={viewMode} onValueChange={setViewMode}>
                <TabsList className="grid w-full grid-cols-2 lg:w-[200px]">
                  <TabsTrigger value="table">Table</TabsTrigger>
                  <TabsTrigger value="grid">Grid</TabsTrigger>
                </TabsList>
              </Tabs>
            </div>
          </CardHeader>
          
          <CardContent className="p-0">
            <Tabs value={viewMode} onValueChange={setViewMode}>
              <TabsContent value="table" className="m-0">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50/80 border-b">
                      <tr>
                        <th className="text-left p-4 font-semibold text-gray-900">
                          <input 
                            type="checkbox" 
                            className="rounded mr-3"
                            onChange={(e) => {
                              if (e.target.checked) {
                                setSelectedFacilities(filteredFacilities.map(f => f.id))
                              } else {
                                setSelectedFacilities([])
                              }
                            }}
                          />
                          Facility
                        </th>
                        <th className="text-left p-4 font-semibold text-gray-900">Type</th>
                        <th className="text-left p-4 font-semibold text-gray-900">Location</th>
                        <th className="text-left p-4 font-semibold text-gray-900">Status</th>
                        <th className="text-left p-4 font-semibold text-gray-900">Occupancy</th>
                        <th className="text-left p-4 font-semibold text-gray-900">Rating</th>
                        <th className="text-left p-4 font-semibold text-gray-900">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100">
                      {filteredFacilities.map((facility) => (
                        <tr key={facility.id} className="hover:bg-gray-50/50 transition-colors">
                          <td className="p-4">
                            <div className="flex items-center gap-3">
                              <input 
                                type="checkbox" 
                                className="rounded"
                                checked={selectedFacilities.includes(facility.id)}
                                onChange={(e) => {
                                  if (e.target.checked) {
                                    setSelectedFacilities([...selectedFacilities, facility.id])
                                  } else {
                                    setSelectedFacilities(selectedFacilities.filter(id => id !== facility.id))
                                  }
                                }}
                              />
                              <img 
                                src={facility.image}
                                alt={facility.name}
                                className="w-12 h-12 rounded-lg object-cover"
                              />
                              <div>
                                <p className="font-semibold text-gray-900">{facility.name}</p>
                                <div className="flex items-center gap-2 mt-1">
                                  {facility.verified && (
                                    <Badge variant="secondary" className="bg-green-100 text-green-700 text-xs">
                                      <CheckCircle className="h-3 w-3 mr-1" />
                                      Verified
                                    </Badge>
                                  )}
                                  <span className="text-sm text-gray-500">{facility.priceRange}</span>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td className="p-4">
                            <Badge variant="outline" className="font-medium">
                              {facility.type}
                            </Badge>
                          </td>
                          <td className="p-4">
                            <div className="flex items-center gap-1 text-gray-600">
                              <MapPin className="h-4 w-4" />
                              {facility.location}
                            </div>
                          </td>
                          <td className="p-4">
                            <Badge
                              variant={
                                facility.status === "active" ? "default" :
                                facility.status === "pending" ? "secondary" : "destructive"
                              }
                              className={
                                facility.status === "active" ? "bg-green-100 text-green-800 hover:bg-green-100" :
                                facility.status === "pending" ? "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" :
                                "bg-red-100 text-red-800 hover:bg-red-100"
                              }
                            >
                              {facility.status === "active" && <CheckCircle className="h-3 w-3 mr-1" />}
                              {facility.status === "pending" && <Clock className="h-3 w-3 mr-1" />}
                              {facility.status === "suspended" && <XCircle className="h-3 w-3 mr-1" />}
                              {facility.status.charAt(0).toUpperCase() + facility.status.slice(1)}
                            </Badge>
                          </td>
                          <td className="p-4">
                            <div className="flex items-center gap-2">
                              <div className="w-20 bg-gray-200 rounded-full h-2">
                                <div 
                                  className="bg-blue-600 h-2 rounded-full" 
                                  style={{ width: `${(facility.occupied / facility.capacity) * 100}%` }}
                                ></div>
                              </div>
                              <span className="text-sm text-gray-600">
                                {facility.occupied}/{facility.capacity}
                              </span>
                            </div>
                          </td>
                          <td className="p-4">
                            <div className="flex items-center gap-1">
                              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                              <span className="font-medium">{facility.rating}</span>
                              <span className="text-gray-500 text-sm">({facility.reviews})</span>
                            </div>
                          </td>
                          <td className="p-4">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="sm">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end" className="w-48">
                                <DropdownMenuItem onClick={() => handleViewFacility(facility.id)}>
                                  <Eye className="h-4 w-4 mr-2" />
                                  View Details
                                </DropdownMenuItem>
                                <DropdownMenuItem onClick={() => handleEditFacility(facility.id)}>
                                  <Edit className="h-4 w-4 mr-2" />
                                  Edit Facility
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                {facility.status === "pending" && (
                                  <DropdownMenuItem onClick={() => handleApproveFacility(facility.id)} className="text-green-600">
                                    <CheckCircle className="h-4 w-4 mr-2" />
                                    Approve
                                  </DropdownMenuItem>
                                )}
                                <DropdownMenuItem className="text-blue-600">
                                  <Settings className="h-4 w-4 mr-2" />
                                  Settings
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem className="text-red-600">
                                  <Trash2 className="h-4 w-4 mr-2" />
                                  Delete
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </TabsContent>
              
              <TabsContent value="grid" className="m-0 p-6">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                  {filteredFacilities.map((facility) => (
                    <Card key={facility.id} className="overflow-hidden hover:shadow-lg transition-all duration-300 group">
                      <div className="relative">
                        <img 
                          src={facility.image}
                          alt={facility.name}
                          className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                        />
                        <div className="absolute top-3 left-3">
                          <Badge
                            variant={
                              facility.status === "active" ? "default" :
                              facility.status === "pending" ? "secondary" : "destructive"
                            }
                            className={
                              facility.status === "active" ? "bg-green-100 text-green-800" :
                              facility.status === "pending" ? "bg-yellow-100 text-yellow-800" :
                              "bg-red-100 text-red-800"
                            }
                          >
                            {facility.status.charAt(0).toUpperCase() + facility.status.slice(1)}
                          </Badge>
                        </div>
                        <div className="absolute top-3 right-3">
                          <input 
                            type="checkbox" 
                            className="rounded bg-white/80"
                            checked={selectedFacilities.includes(facility.id)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                setSelectedFacilities([...selectedFacilities, facility.id])
                              } else {
                                setSelectedFacilities(selectedFacilities.filter(id => id !== facility.id))
                              }
                            }}
                          />
                        </div>
                      </div>
                      
                      <CardContent className="p-4">
                        <div className="space-y-3">
                          <div>
                            <h3 className="font-semibold text-gray-900 line-clamp-1">{facility.name}</h3>
                            <div className="flex items-center gap-2 mt-1">
                              <Badge variant="outline" className="text-xs">
                                {facility.type}
                              </Badge>
                              {facility.verified && (
                                <Badge variant="secondary" className="bg-green-100 text-green-700 text-xs">
                                  <CheckCircle className="h-3 w-3 mr-1" />
                                  Verified
                                </Badge>
                              )}
                            </div>
                          </div>
                          
                          <div className="flex items-center gap-1 text-gray-600 text-sm">
                            <MapPin className="h-4 w-4" />
                            {facility.location}
                          </div>
                          
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-1">
                              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                              <span className="font-medium">{facility.rating}</span>
                              <span className="text-gray-500 text-sm">({facility.reviews})</span>
                            </div>
                            <div className="text-right">
                              <div className="text-xs text-gray-500">Occupancy</div>
                              <div className="text-sm font-medium">{facility.occupied}/{facility.capacity}</div>
                            </div>
                          </div>
                          
                          <div className="flex gap-2 pt-2">
                            <Button variant="outline" size="sm" className="flex-1" onClick={() => handleViewFacility(facility.id)}>
                              <Eye className="h-4 w-4 mr-1" />
                              View
                            </Button>
                            <Button variant="outline" size="sm" className="flex-1" onClick={() => handleEditFacility(facility.id)}>
                              <Edit className="h-4 w-4 mr-1" />
                              Edit
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

        {/* Pagination */}
        <div className="flex items-center justify-between">
          <p className="text-sm text-gray-700">
            Showing {filteredFacilities.length} of {totalFacilities} facilities
          </p>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" disabled>
              Previous
            </Button>
            <Button variant="outline" size="sm" className="bg-blue-600 text-white">
              1
            </Button>
            <Button variant="outline" size="sm">
              2
            </Button>
            <Button variant="outline" size="sm">
              Next
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}