"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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { CheckCircle, XCircle, Clock, Building2, User, MapPin, Phone, Mail, DollarSign, Users, Loader2, AlertCircle } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useToast } from "@/components/ui/toast"
import { DataAPI } from "@/lib/data-api"

interface PendingUser {
  _id: string
  firstName: string
  lastName: string
  email: string
  phone?: string
  facilityOwner?: {
    companyName: string
    businessLicense: string
    verified: boolean
  }
  createdAt: string
}

interface PendingFacility {
  _id: string
  name: string
  description: string
  ownerId: {
    _id: string
    firstName: string
    lastName: string
    email: string
    phone?: string
  }
  location: {
    address: string
    city: string
    state: string
    zipCode: string
  }
  contact: {
    phone: string
    email: string
    website?: string
  }
  careTypes: string[]
  capacity: {
    total: number
    available?: number
  }
  pricing: {
    min: number
    max: number
    currency: string
    period: string
  }
  amenities: string[]
  medicalServices: string[]
  licenses: Array<{
    type: string
    number: string
    issuedBy: string
  }>
  createdAt: string
}

export default function AdminPendingFacilitiesPage() {
  const toast = useToast()
  const [pendingUsers, setPendingUsers] = useState<PendingUser[]>([])
  const [pendingFacilities, setPendingFacilities] = useState<PendingFacility[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [processingId, setProcessingId] = useState<string | null>(null)
  const [selectedFacility, setSelectedFacility] = useState<PendingFacility | null>(null)
  const [rejectionReason, setRejectionReason] = useState("")
  const [error, setError] = useState("")

  useEffect(() => {
    loadPendingFacilities()
  }, [])

  const loadPendingFacilities = async () => {
    try {
      setIsLoading(true)
      setError("")

      // Note: This would need proper admin authentication
      // For demo purposes, we'll simulate the API call
      const response = await fetch('/api/admin/facilities/pending', {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('geezer_guide_token')}`
        }
      })

      if (response.ok) {
        const data = await response.json()
        setPendingUsers(data.data.users || [])
        setPendingFacilities(data.data.facilities || [])
      } else {
        throw new Error('Failed to load pending facilities')
      }
    } catch (error: any) {
      console.error('Load pending facilities error:', error)
      setError(error.message || 'Failed to load pending facilities')
    } finally {
      setIsLoading(false)
    }
  }

  const handleApprove = async (userId: string, facilityId: string) => {
    try {
      setProcessingId(facilityId)

      const response = await fetch('/api/admin/facilities/approve', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('geezer_guide_token')}`
        },
        body: JSON.stringify({
          userId,
          facilityId,
          approved: true
        })
      })

      const data = await response.json()

      if (data.success) {
        toast.success("The facility has been approved and is now active.", { title: "Facility Approved!" })

        // Remove from pending lists
        setPendingUsers(prev => prev.filter(u => u._id !== userId))
        setPendingFacilities(prev => prev.filter(f => f._id !== facilityId))
      } else {
        throw new Error(data.message || 'Approval failed')
      }
    } catch (error: any) {
      console.error('Approve facility error:', error)
      toast.error(error.message || "Failed to approve facility. Please try again.", { title: "Approval Failed" })
    } finally {
      setProcessingId(null)
    }
  }

  const handleReject = async (userId: string, facilityId: string, reason: string) => {
    try {
      setProcessingId(facilityId)

      const response = await fetch('/api/admin/facilities/approve', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('geezer_guide_token')}`
        },
        body: JSON.stringify({
          userId,
          facilityId,
          approved: false,
          reason
        })
      })

      const data = await response.json()

      if (data.success) {
        toast.success("The facility has been rejected and the owner has been notified.", { title: "Facility Rejected" })

        // Remove from pending lists
        setPendingUsers(prev => prev.filter(u => u._id !== userId))
        setPendingFacilities(prev => prev.filter(f => f._id !== facilityId))
        setRejectionReason("")
        setSelectedFacility(null)
      } else {
        throw new Error(data.message || 'Rejection failed')
      }
    } catch (error: any) {
      console.error('Reject facility error:', error)
      toast.error(error.message || "Failed to reject facility. Please try again.", { title: "Rejection Failed" })
    } finally {
      setProcessingId(null)
    }
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }

  if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="flex items-center justify-center h-64">
          <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
          <span className="ml-2 text-lg">Loading pending facilities...</span>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="font-heading text-3xl text-foreground mb-2">Pending Facility Approvals</h1>
          <p className="text-slate-600">Review and approve facility owner registrations</p>
        </div>
        <Badge variant="secondary" className="text-lg px-4 py-2">
          <Clock className="mr-2 h-4 w-4" />
          {pendingFacilities.length} Pending
        </Badge>
      </div>

      {error && (
        <Alert variant="destructive" className="mb-6">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {pendingFacilities.length === 0 ? (
        <Card>
          <CardContent className="text-center py-12">
            <CheckCircle className="mx-auto h-16 w-16 text-green-500 mb-4" />
            <h3 className="font-heading text-xl text-foreground mb-2">All Caught Up!</h3>
            <p className="text-slate-600">No pending facility approvals at this time.</p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-6">
          {pendingFacilities.map((facility) => {
            const owner = facility.ownerId
            const isProcessing = processingId === facility._id

            return (
              <Card key={facility._id} className="overflow-hidden">
                <CardHeader className="bg-slate-50">
                  <div className="flex items-start justify-between">
                    <div className="flex items-start space-x-4">
                      <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <Building2 className="h-6 w-6 text-blue-600" />
                      </div>
                      <div>
                        <CardTitle className="text-xl font-heading">{facility.name}</CardTitle>
                        <p className="text-slate-600 mt-1">
                          Submitted {formatDate(facility.createdAt)}
                        </p>
                      </div>
                    </div>
                    <Badge variant="outline" className="text-orange-600 border-orange-200">
                      <Clock className="mr-1 h-3 w-3" />
                      Pending Review
                    </Badge>
                  </div>
                </CardHeader>

                <CardContent className="p-6">
                  {/* Owner Information */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div className="space-y-3">
                      <h4 className="font-semibold text-foreground flex items-center">
                        <User className="mr-2 h-4 w-4" />
                        Owner Information
                      </h4>
                      <div className="space-y-2 text-sm">
                        <p><strong>Name:</strong> {owner.firstName} {owner.lastName}</p>
                        <p className="flex items-center">
                          <Mail className="mr-2 h-3 w-3" />
                          {owner.email}
                        </p>
                        {owner.phone && (
                          <p className="flex items-center">
                            <Phone className="mr-2 h-3 w-3" />
                            {owner.phone}
                          </p>
                        )}
                      </div>
                    </div>

                    <div className="space-y-3">
                      <h4 className="font-semibold text-foreground flex items-center">
                        <MapPin className="mr-2 h-4 w-4" />
                        Location
                      </h4>
                      <div className="text-sm">
                        <p>{facility.location.address}</p>
                        <p>{facility.location.city}, {facility.location.state} {facility.location.zipCode}</p>
                      </div>
                    </div>
                  </div>

                  {/* Facility Details */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    <div className="bg-slate-50 p-3 rounded-lg">
                      <div className="flex items-center text-sm font-medium text-slate-600 mb-1">
                        <Users className="mr-1 h-3 w-3" />
                        Capacity
                      </div>
                      <p className="text-lg font-semibold">{facility.capacity.total} beds</p>
                      {facility.capacity.available && (
                        <p className="text-sm text-slate-600">{facility.capacity.available} available</p>
                      )}
                    </div>

                    <div className="bg-slate-50 p-3 rounded-lg">
                      <div className="flex items-center text-sm font-medium text-slate-600 mb-1">
                        <DollarSign className="mr-1 h-3 w-3" />
                        Pricing Range
                      </div>
                      <p className="text-lg font-semibold">
                        ${facility.pricing.min.toLocaleString()} - ${facility.pricing.max.toLocaleString()}
                      </p>
                      <p className="text-sm text-slate-600">per month</p>
                    </div>

                    <div className="bg-slate-50 p-3 rounded-lg">
                      <div className="flex items-center text-sm font-medium text-slate-600 mb-1">
                        <Building2 className="mr-1 h-3 w-3" />
                        Care Types
                      </div>
                      <p className="text-sm">{facility.careTypes.join(", ")}</p>
                    </div>
                  </div>

                  {/* Description */}
                  <div className="mb-6">
                    <h4 className="font-semibold text-foreground mb-2">Description</h4>
                    <p className="text-sm text-slate-700 leading-relaxed">{facility.description}</p>
                  </div>

                  {/* Licenses */}
                  {facility.licenses.length > 0 && (
                    <div className="mb-6">
                      <h4 className="font-semibold text-foreground mb-2">Licenses</h4>
                      <div className="space-y-2">
                        {facility.licenses.map((license, index) => (
                          <div key={index} className="text-sm bg-slate-50 p-2 rounded">
                            <strong>{license.type}:</strong> {license.number} (Issued by: {license.issuedBy})
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Action Buttons */}
                  <div className="flex items-center justify-end space-x-3 pt-4 border-t">
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button 
                          variant="outline" 
                          disabled={isProcessing}
                          onClick={() => setSelectedFacility(facility)}
                          className="text-red-600 border-red-200 hover:bg-red-50"
                        >
                          <XCircle className="mr-2 h-4 w-4" />
                          Reject
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Reject Facility Application</DialogTitle>
                        </DialogHeader>
                        <div className="space-y-4">
                          <p className="text-sm text-slate-600">
                            Please provide a reason for rejecting this facility application:
                          </p>
                          <div className="space-y-2">
                            <Label htmlFor="reason">Rejection Reason</Label>
                            <Textarea
                              id="reason"
                              placeholder="Enter the reason for rejection..."
                              value={rejectionReason}
                              onChange={(e) => setRejectionReason(e.target.value)}
                              className="min-h-24"
                            />
                          </div>
                          <div className="flex justify-end space-x-3">
                            <Button variant="outline" onClick={() => setRejectionReason("")}>
                              Cancel
                            </Button>
                            <Button 
                              variant="destructive"
                              onClick={() => handleReject(owner._id, facility._id, rejectionReason)}
                              disabled={!rejectionReason.trim() || isProcessing}
                            >
                              {isProcessing ? (
                                <>
                                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  Rejecting...
                                </>
                              ) : (
                                "Reject Application"
                              )}
                            </Button>
                          </div>
                        </div>
                      </DialogContent>
                    </Dialog>

                    <Button 
                      onClick={() => handleApprove(owner._id, facility._id)}
                      disabled={isProcessing}
                      className="bg-green-600 hover:bg-green-700"
                    >
                      {isProcessing ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Approving...
                        </>
                      ) : (
                        <>
                          <CheckCircle className="mr-2 h-4 w-4" />
                          Approve
                        </>
                      )}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </div>
  )
}