"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { AnimatedCard } from "@/components/ui/animated-card"
import { AnimatedButton } from "@/components/ui/animated-button"
import {
  Building,
  Plus,
  Search,
  Filter,
  Eye,
  Edit,
  Trash2,
  MapPin,
  Star,
  Users,
  Calendar,
  Loader2,
  AlertCircle,
  CheckCircle,
  Clock,
  ArrowRight
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { DataAPI } from "@/lib/data-api"
import { useAuth } from "@/hooks/use-auth"
import { useToast } from "@/components/ui/toast"

// Types
interface Facility {
  _id: string
  name: string
  slug: string
  description: string
  status: string
  verified: boolean
  rating: number
  reviewCount: number
  viewCount: number
  favorites: number
  inquiries: number
  location: {
    city: string
    state: string
  }
  careTypes: string[]
  images: Array<{
    url: string
    isPrimary: boolean
  }>
  createdAt: string
  updatedAt: string
}

export default function FacilitiesListPage() {
  const [facilities, setFacilities] = useState<Facility[]>([])
  const [filteredFacilities, setFilteredFacilities] = useState<Facility[]>([])
  const [loading, setLoading] = useState(true)
  const toast = useToast()
  const [error, setError] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState('')
  const [statusFilter, setStatusFilter] = useState<string>('all')
  const [deletingId, setDeletingId] = useState<string | null>(null)

  const { user, isAuthenticated } = useAuth()

  // Helper function to format location display
  const formatLocationDisplay = (facility: Facility) => {
    return `${facility.location.city}, ${facility.location.state}`
  }

  // Load facilities
  useEffect(() => {
    if (isAuthenticated && user?.role === 'facility_owner') {
      loadFacilities()
    }
  }, [isAuthenticated, user])

  // Filter facilities
  useEffect(() => {
    let filtered = facilities

    // Search filter
    if (searchTerm) {
      filtered = filtered.filter(facility =>
        facility.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        facility.location.city.toLowerCase().includes(searchTerm.toLowerCase()) ||
        facility.careTypes.some(type => type.toLowerCase().includes(searchTerm.toLowerCase()))
      )
    }

    // Status filter
    if (statusFilter !== 'all') {
      filtered = filtered.filter(facility => facility.status === statusFilter)
    }

    setFilteredFacilities(filtered)
  }, [facilities, searchTerm, statusFilter])

  const loadFacilities = async () => {
    try {
      setLoading(true)
      setError(null)

      const response = await DataAPI.facilities.getMyFacilities({ limit: 100 })

      if (response.success && response.data?.facilities) {
        setFacilities(response.data.facilities as unknown as Facility[])
      } else {
        throw new Error(response.message || 'Failed to load facilities')
      }
    } catch (error) {
      console.error('Failed to load facilities:', error)
      setError('Failed to load facilities. Please try again.')
      toast.error("Failed to load facilities. Please try again.", { title: "Error" })
    } finally {
      setLoading(false)
    }
  }

  const handleDeleteFacility = async (facilityId: string) => {
    if (!confirm('Are you sure you want to delete this facility? This action cannot be undone.')) {
      return
    }

    try {
      setDeletingId(facilityId)

      const response = await DataAPI.facilities.deleteFacility(facilityId)

      if (response.success) {
        toast.success("Facility deleted successfully.", { title: "Success" })
        // Remove from local state
        setFacilities(prev => prev.filter(f => f._id !== facilityId))
      } else {
        throw new Error(response.message || 'Failed to delete facility')
      }
    } catch (error) {
      console.error('Failed to delete facility:', error)
      toast.error(error instanceof Error ? error.message : 'Failed to delete facility. Please try again.', { title: "Error" })
    } finally {
      setDeletingId(null)
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'active':
        return <Badge className="bg-green-100 text-green-800">Active</Badge>
      case 'pending':
        return <Badge className="bg-yellow-100 text-yellow-800">Pending Review</Badge>
      case 'draft':
        return <Badge className="bg-gray-100 text-gray-800">Draft</Badge>
      case 'suspended':
        return <Badge className="bg-red-100 text-red-800">Suspended</Badge>
      case 'closed':
        return <Badge className="bg-gray-100 text-gray-800">Closed</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-[#3F5CEA]" />
          <p className="font-body text-gray-600">Loading facilities...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="text-center py-12">
        <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
        <h3 className="font-primary text-xl font-semibold text-gray-900 mb-2">
          Failed to Load Facilities
        </h3>
        <p className="font-body text-gray-600 mb-4">{error}</p>
        <Button onClick={loadFacilities} className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90">
          Try Again
        </Button>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-primary text-3xl md:text-4xl font-bold text-gray-900">
            My Facilities
          </h1>
          <p className="font-body text-xl text-gray-600 mt-2">
            Manage and monitor all your senior living facilities
          </p>
        </div>
        <Link href="/facility-owner/facilities/claim">
          <AnimatedButton className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90">
            <Plus className="h-4 w-4 mr-2" />
            Claim Facility
          </AnimatedButton>
        </Link>
      </div>

      {/* Filters */}
      <AnimatedCard>
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search facilities by name, location, or care type..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-48">
                <Filter className="h-4 w-4 mr-2" />
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="draft">Draft</SelectItem>
                <SelectItem value="suspended">Suspended</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </AnimatedCard>

      {/* Facilities Grid */}
      {filteredFacilities.length > 0 ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredFacilities.map((facility) => (
            <AnimatedCard key={facility._id} className="hover:shadow-lg transition-shadow duration-300">
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <CardTitle className="font-primary text-lg">{facility.name}</CardTitle>
                      {facility.verified && (
                        <CheckCircle className="h-4 w-4 text-green-600" />
                      )}
                    </div>
                    <div className="flex items-center gap-2 text-sm text-gray-600 mb-2">
                      <MapPin className="h-3 w-3" />
                      {formatLocationDisplay(facility)}
                    </div>
                    <div className="flex items-center gap-2">
                      {getStatusBadge(facility.status)}
                      <div className="flex items-center gap-1">
                        <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                        <span className="text-sm font-medium">{facility.rating?.toFixed(1) || '0.0'}</span>
                        <span className="text-xs text-gray-500">({facility.reviewCount || 0})</span>
                      </div>
                    </div>
                  </div>
                  {facility.images?.find(img => img.isPrimary)?.url && (
                    <Image
                      src={facility.images.find(img => img.isPrimary)!.url}
                      alt={facility.name}
                      width={60}
                      height={45}
                      className="rounded-lg object-cover"
                    />
                  )}
                </div>
              </CardHeader>

              <CardContent className="pt-0">
                <p className="font-body text-sm text-gray-600 mb-4 line-clamp-2">
                  {facility.description}
                </p>

                {/* Care Types */}
                <div className="flex flex-wrap gap-1 mb-4">
                  {facility.careTypes.slice(0, 3).map(type => (
                    <Badge key={type} variant="outline" className="text-xs">
                      {type}
                    </Badge>
                  ))}
                  {facility.careTypes.length > 3 && (
                    <Badge variant="outline" className="text-xs">
                      +{facility.careTypes.length - 3} more
                    </Badge>
                  )}
                </div>

                {/* Stats */}
                <div className="grid grid-cols-3 gap-4 mb-4 text-center">
                  <div>
                    <div className="font-primary text-lg font-semibold">{facility.viewCount || 0}</div>
                    <div className="font-body text-xs text-gray-500">Views</div>
                  </div>
                  <div>
                    <div className="font-primary text-lg font-semibold">{facility.favorites || 0}</div>
                    <div className="font-body text-xs text-gray-500">Favorites</div>
                  </div>
                  <div>
                    <div className="font-primary text-lg font-semibold">{facility.inquiries || 0}</div>
                    <div className="font-body text-xs text-gray-500">Inquiries</div>
                  </div>
                </div>

                {/* Last Updated */}
                <div className="flex items-center gap-1 text-xs text-gray-500 mb-4">
                  <Calendar className="h-3 w-3" />
                  Updated {new Date(facility.updatedAt).toLocaleDateString()}
                </div>

                {/* Actions */}
                <div className="flex gap-2">
                  <Link href={`/facility/${(facility as any).id || facility._id}`} className="flex-1">
                    <Button variant="outline" size="sm" className="w-full">
                      <Eye className="h-3 w-3 mr-1" />
                      View Public
                    </Button>
                  </Link>
                  <Link href={`/facility-owner/facilities/${facility._id}/edit`} className="flex-1">
                    <Button variant="outline" size="sm" className="w-full">
                      <Edit className="h-3 w-3 mr-1" />
                      Edit
                    </Button>
                  </Link>
                  {facility.status !== 'closed' && (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleDeleteFacility(facility._id)}
                      disabled={deletingId === facility._id}
                      className="text-red-600 hover:text-red-700 hover:bg-red-50"
                    >
                      {deletingId === facility._id ? (
                        <Loader2 className="h-3 w-3 animate-spin" />
                      ) : (
                        <Trash2 className="h-3 w-3" />
                      )}
                    </Button>
                  )}
                </div>
              </CardContent>
            </AnimatedCard>
          ))}
        </div>
      ) : (
        <AnimatedCard>
          <CardContent className="text-center py-12">
            <Building className="h-16 w-16 text-gray-400 mx-auto mb-4" />
            <h3 className="font-primary text-xl font-semibold text-gray-900 mb-2">
              No facilities found
            </h3>
            <p className="font-body text-gray-600 mb-6">
              {searchTerm || statusFilter !== 'all'
                ? 'No facilities match your current filters.'
                : 'You haven\'t claimed any facilities yet.'}
            </p>
            <Link href="/facility-owner/facilities/claim">
              <AnimatedButton className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90">
                <Plus className="h-4 w-4 mr-2" />
                Claim Your First Facility
              </AnimatedButton>
            </Link>
          </CardContent>
        </AnimatedCard>
      )}

      {/* Summary Stats */}
      {facilities.length > 0 && (
        <AnimatedCard>
          <CardHeader>
            <CardTitle className="font-primary text-lg">Summary Statistics</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
              <div>
                <div className="font-primary text-2xl font-bold text-[#3F5CEA]">{facilities.length}</div>
                <div className="font-body text-sm text-gray-600">Total Facilities</div>
              </div>
              <div>
                <div className="font-primary text-2xl font-bold text-green-600">
                  {facilities.filter(f => f.status === 'active').length}
                </div>
                <div className="font-body text-sm text-gray-600">Active</div>
              </div>
              <div>
                <div className="font-primary text-2xl font-bold text-yellow-600">
                  {facilities.filter(f => f.status === 'pending').length}
                </div>
                <div className="font-body text-sm text-gray-600">Pending</div>
              </div>
              <div>
                <div className="font-primary text-2xl font-bold text-gray-600">
                  {facilities.filter(f => f.status === 'draft').length}
                </div>
                <div className="font-body text-sm text-gray-600">Drafts</div>
              </div>
            </div>
          </CardContent>
        </AnimatedCard>
      )}
    </div>
  )
}