"use client"

import { useEffect, useState } from "react"
import { Header } from "@/components/ui/header"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/toast"
import { DataAPI, AuthManager } from "@/lib/data-api"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Eye, CheckCircle, XCircle, User, Calendar, Star, MessageSquare, Image as ImageIcon, AlertTriangle, Trash2, Flag } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"

export default function AdminReviewsPage() {
  const [reviews, setReviews] = useState<any[]>([])
  const [filter, setFilter] = useState<'pending'|'approved'|'rejected'|'revisions'|'flagged'>('pending')
  const [selectedReview, setSelectedReview] = useState<any>(null)
  const [showRejectDialog, setShowRejectDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [rejectionReason, setRejectionReason] = useState("")
  const [loading, setLoading] = useState(false)
  const toast = useToast()

  const load = async () => {
    setLoading(true)
    try {
      if (filter === 'revisions') {
        const res = await DataAPI.reviews.getReviews({ status: 'approved' })
        const list = (res as any)?.data?.reviews || (res as any)?.reviews || []
        setReviews(list.filter((r: any) => r.pendingRevision))
      } else if (filter === 'flagged') {
        // Get all reviews and filter flagged ones client-side
        const res = await DataAPI.reviews.getReviews({})
        const list = (res as any)?.data?.reviews || (res as any)?.reviews || []
        setReviews(list.filter((r: any) => r.flagged?.isFlagged))
      } else {
        const res = await DataAPI.reviews.getReviews({ status: filter })
        const list = (res as any)?.data?.reviews || (res as any)?.reviews || []
        setReviews(list)
      }
    } catch {
      setReviews([])
    }
    setLoading(false)
  }

  useEffect(()=>{ load() },[filter])

  const moderate = async (id: string, action: 'approve'|'reject', reason?: string) => {
    if (!id) {
      toast.error('Invalid review id')
      return
    }
    const token = AuthManager.getToken()
    const headers: any = { 'Content-Type': 'application/json' }
    if (token) headers['Authorization'] = `Bearer ${token}`
    const body: any = { action }
    if (action === 'reject' && reason) body.rejectionReason = reason
    
    const res = await fetch(`/api/admin/reviews/${encodeURIComponent(id)}`, { method: 'PUT', headers, body: JSON.stringify(body) })
    const data = await res.json()
    if (data?.success) {
      toast.success(action === 'approve' ? 'Approved successfully' : 'Rejected successfully')
      setShowRejectDialog(false)
      setRejectionReason("")
      setSelectedReview(null)
      load()
    } else {
      toast.error(data?.message, { title: 'Action failed' })
    }
  }

  const openRejectDialog = (review: any) => {
    setSelectedReview(review)
    setShowRejectDialog(true)
  }

  const deleteReview = async (id: string) => {
    if (!id) {
      toast.error('Invalid review id')
      return
    }
    const token = AuthManager.getToken()
    const headers: any = { 'Content-Type': 'application/json' }
    if (token) headers['Authorization'] = `Bearer ${token}`
    
    const res = await fetch(`/api/admin/reviews/${encodeURIComponent(id)}`, { method: 'DELETE', headers })
    const data = await res.json()
    if (data?.success) {
      toast.success("Review deleted successfully")
      setShowDeleteDialog(false)
      setSelectedReview(null)
      load()
    } else {
      toast.error(data?.message, { title: 'Delete failed' })
    }
  }

  const openDeleteDialog = (review: any) => {
    setSelectedReview(review)
    setShowDeleteDialog(true)
  }

  const getStatusBadge = (status: string) => {
    const variants: any = {
      pending: 'bg-blue-100 text-blue-700',
      approved: 'bg-green-100 text-green-700',
      rejected: 'bg-red-100 text-red-700',
      flagged: 'bg-yellow-100 text-yellow-700',
    }
    return <Badge className={`${variants[status] || 'bg-gray-100 text-gray-700'} capitalize`}>{status}</Badge>
  }

  const getUserName = (review: any) => {
    if (!review?.userId) return 'Anonymous'
    return `${review.userId.firstName || ''} ${review.userId.lastName || ''}`.trim() || 'User'
  }

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

  return (
    <div className="min-h-screen bg-slate-50">
      <Header />
      <main className="container mx-auto px-3 md:px-4 py-4 md:py-8">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4 md:mb-6">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold text-slate-900">Review Moderation</h1>
            <p className="text-sm md:text-base text-slate-600 mt-1">Manage and moderate facility reviews</p>
          </div>
          <div className="flex flex-wrap gap-2">
            {(['pending','approved','rejected','flagged','revisions'] as const).map((s)=> (
              <Button 
                key={s} 
                variant={filter===s? 'default':'outline'} 
                size="sm" 
                onClick={()=>setFilter(s)} 
                className="capitalize"
              >
                {s === 'revisions' ? 'Pending Revisions' : s === 'flagged' ? 'Flagged' : s}
              </Button>
            ))}
          </div>
        </div>

        {loading ? (
          <div className="text-center py-12 text-slate-600">Loading reviews...</div>
        ) : reviews.length === 0 ? (
          <div className="text-center py-12">
            <MessageSquare className="h-16 w-16 text-slate-300 mx-auto mb-3" />
            <h3 className="text-lg font-semibold text-slate-900 mb-1">No reviews found</h3>
            <p className="text-slate-600">No {filter} reviews at the moment.</p>
          </div>
        ) : (
          <div className="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow className="bg-slate-50">
                  <TableHead className="font-semibold">User</TableHead>
                  <TableHead className="font-semibold">Facility</TableHead>
                  <TableHead className="font-semibold">Rating</TableHead>
                  <TableHead className="font-semibold">Comment</TableHead>
                  <TableHead className="font-semibold">Media</TableHead>
                  <TableHead className="font-semibold">Status</TableHead>
                  <TableHead className="font-semibold">Date</TableHead>
                  <TableHead className="font-semibold text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {reviews.map((review) => (
                  <>
                    <TableRow key={review.id} className="hover:bg-slate-50">
                      <TableCell>
                        <div className="flex items-center gap-2">
                          {review?.userId?.profilePicture ? (
                            <img 
                              src={review.userId.profilePicture} 
                              alt={getUserName(review)}
                              className="h-8 w-8 rounded-full object-cover"
                            />
                          ) : (
                            <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-semibold">
                              {getUserName(review).substring(0, 2).toUpperCase()}
                            </div>
                          )}
                          <div>
                            <div className="font-medium text-sm">{getUserName(review)}</div>
                            {review?.userId?.email && (
                              <div className="text-xs text-slate-500">{review.userId.email}</div>
                            )}
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="text-sm">
                          {review?.facilityId?.name || 'Unknown Facility'}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-1">
                          <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
                          <span className="font-semibold">{review.rating}</span>
                          <span className="text-slate-500">/5</span>
                        </div>
                      </TableCell>
                      <TableCell className="max-w-xs">
                        {review.comment ? (
                          <div className="text-sm text-slate-700 line-clamp-2">{review.comment}</div>
                        ) : (
                          <span className="text-slate-400 text-sm italic">No comment</span>
                        )}
                      </TableCell>
                      <TableCell>
                        {review.media && review.media.length > 0 ? (
                          <div className="flex items-center gap-1 text-sm text-slate-600">
                            <ImageIcon className="h-4 w-4" />
                            <span>{review.media.length}</span>
                          </div>
                        ) : (
                          <span className="text-slate-400 text-sm">—</span>
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          {getStatusBadge(review.status)}
                          {review.flagged?.isFlagged && (
                            <Badge className="bg-yellow-100 text-yellow-800 border-yellow-300">
                              <Flag className="h-3 w-3 mr-1" />
                              Flagged
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-sm text-slate-600">
                        {formatDate(review.createdAt)}
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center justify-end gap-1">
                          <Button 
                            size="sm" 
                            variant="ghost"
                            onClick={() => setSelectedReview(review)}
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                          {filter === 'pending' && (
                            <>
                              <Button 
                                size="sm" 
                                variant="ghost"
                                className="text-green-600 hover:text-green-700 hover:bg-green-50"
                                onClick={() => moderate(review.id, 'approve')}
                              >
                                <CheckCircle className="h-4 w-4" />
                              </Button>
                              <Button 
                                size="sm" 
                                variant="ghost"
                                className="text-red-600 hover:text-red-700 hover:bg-red-50"
                                onClick={() => openRejectDialog(review)}
                              >
                                <XCircle className="h-4 w-4" />
                              </Button>
                            </>
                          )}
                          {review.flagged?.isFlagged && (
                            <Button 
                              size="sm" 
                              variant="ghost"
                              className="text-red-600 hover:text-red-700 hover:bg-red-50"
                              onClick={() => openDeleteDialog(review)}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                    
                    {/* Flagged Review Info Row */}
                    {review.flagged?.isFlagged && (
                      <TableRow className="bg-yellow-50 border-t-2 border-yellow-200">
                        <TableCell colSpan={8}>
                          <div className="py-2">
                            <div className="flex items-center gap-2 mb-2">
                              <Flag className="h-4 w-4 text-yellow-600" />
                              <span className="text-sm font-semibold text-yellow-800">FLAGGED BY OWNER</span>
                            </div>
                            <div className="text-sm">
                              <span className="text-slate-600 font-medium">Reason:</span>
                              <span className="text-slate-800 ml-2">{review.flagged.reason || 'No reason provided'}</span>
                            </div>
                            <div className="text-xs text-slate-500 mt-1">
                              Flagged on {formatDate(review.flagged.at)}
                            </div>
                          </div>
                        </TableCell>
                      </TableRow>
                    )}
                    
                    {/* Pending Revision Row */}
                    {(review as any).pendingRevision && (
                      <TableRow className="bg-yellow-50 border-t-2 border-yellow-200">
                        <TableCell colSpan={8}>
                          <div className="py-2">
                            <div className="flex items-center gap-2 mb-2">
                              <AlertTriangle className="h-4 w-4 text-yellow-600" />
                              <span className="text-sm font-semibold text-yellow-800">PENDING REVISION</span>
                            </div>
                            <div className="grid grid-cols-4 gap-4 text-sm">
                              <div>
                                <span className="text-slate-600">New Rating:</span>
                                <div className="flex items-center gap-1 mt-1">
                                  <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
                                  <span className="font-semibold">{(review as any).pendingRevision.rating}/5</span>
                                </div>
                              </div>
                              <div className="col-span-2">
                                <span className="text-slate-600">New Comment:</span>
                                <div className="mt-1 text-slate-700">
                                  {(review as any).pendingRevision.comment || <span className="text-slate-400 italic">No comment</span>}
                                </div>
                              </div>
                              <div className="flex items-end justify-end gap-2">
                                <Button 
                                  size="sm"
                                  onClick={() => moderate(review.id, 'approve')}
                                >
                                  Approve Revision
                                </Button>
                                <Button 
                                  size="sm"
                                  variant="outline"
                                  onClick={() => openRejectDialog(review)}
                                >
                                  Reject
                                </Button>
                              </div>
                            </div>
                          </div>
                        </TableCell>
                      </TableRow>
                    )}
                  </>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
      </main>

      {/* Review Details Dialog */}
      <Dialog open={!!selectedReview && !showRejectDialog} onOpenChange={(open) => !open && setSelectedReview(null)}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Review Details</DialogTitle>
          </DialogHeader>
          {selectedReview && (
            <div className="space-y-4">
              <div className="flex items-start gap-3">
                {selectedReview?.userId?.profilePicture ? (
                  <img 
                    src={selectedReview.userId.profilePicture} 
                    alt={getUserName(selectedReview)}
                    className="h-12 w-12 rounded-full object-cover"
                  />
                ) : (
                  <div className="h-12 w-12 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-semibold">
                    {getUserName(selectedReview).substring(0, 2).toUpperCase()}
                  </div>
                )}
                <div className="flex-1">
                  <h3 className="font-semibold">{getUserName(selectedReview)}</h3>
                  {selectedReview?.userId?.email && (
                    <p className="text-sm text-slate-500">{selectedReview.userId.email}</p>
                  )}
                  <div className="flex items-center gap-2 mt-1">
                    <div className="flex items-center gap-1">
                      <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
                      <span className="font-semibold">{selectedReview.rating}/5</span>
                    </div>
                    <span className="text-slate-300">•</span>
                    {getStatusBadge(selectedReview.status)}
                    <span className="text-slate-300">•</span>
                    <span className="text-sm text-slate-500">{formatDate(selectedReview.createdAt)}</span>
                  </div>
                </div>
              </div>
              
              <div>
                <h4 className="font-semibold mb-2">Facility</h4>
                <p>{selectedReview?.facilityId?.name || 'Unknown Facility'}</p>
              </div>

              {selectedReview.comment && (
                <div>
                  <h4 className="font-semibold mb-2">Comment</h4>
                  <p className="text-slate-700 whitespace-pre-wrap">{selectedReview.comment}</p>
                </div>
              )}

              {selectedReview.media && selectedReview.media.length > 0 && (
                <div>
                  <h4 className="font-semibold mb-2">Media ({selectedReview.media.length})</h4>
                  <div className="grid grid-cols-3 gap-2">
                    {selectedReview.media.map((m: any, idx: number) => (
                      <div key={idx} className="aspect-square rounded-lg overflow-hidden bg-slate-100">
                        {m.type === 'video' ? (
                          <video src={m.url} controls className="w-full h-full object-cover" />
                        ) : (
                          <img src={m.url} alt={`Media ${idx + 1}`} className="w-full h-full object-cover" />
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* Reject Dialog */}
      <Dialog open={showRejectDialog} onOpenChange={setShowRejectDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Reject Review</DialogTitle>
            <DialogDescription>
              Please provide a reason for rejecting this review. The user will be notified.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <Textarea
              placeholder="Enter rejection reason..."
              value={rejectionReason}
              onChange={(e) => setRejectionReason(e.target.value)}
              rows={4}
              className="w-full"
            />
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowRejectDialog(false)}>Cancel</Button>
            <Button
              variant="destructive"
              onClick={() => selectedReview && moderate(selectedReview.id, 'reject', rejectionReason)}
            >
              Confirm Reject
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Dialog */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Review</DialogTitle>
            <DialogDescription>
              Are you sure you want to permanently delete this flagged review? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          {selectedReview && (
            <div className="py-4 space-y-4">
              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div className="flex items-center gap-2 mb-2">
                  <Flag className="h-4 w-4 text-yellow-600" />
                  <span className="text-sm font-semibold text-yellow-800">Flagged Review</span>
                </div>
                {selectedReview.flagged?.reason && (
                  <p className="text-sm text-slate-700">
                    <span className="font-medium">Reason:</span> {selectedReview.flagged.reason}
                  </p>
                )}
              </div>
              
              <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
                <div className="flex items-center gap-2 mb-2">
                  <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
                  <span className="font-semibold">{selectedReview.rating}/5</span>
                  <span className="text-slate-500">by {getUserName(selectedReview)}</span>
                </div>
                <p className="text-sm text-slate-700 line-clamp-3">
                  {selectedReview.comment || 'No comment'}
                </p>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteDialog(false)}>Cancel</Button>
            <Button
              variant="destructive"
              onClick={() => selectedReview && deleteReview(selectedReview.id)}
            >
              <Trash2 className="h-4 w-4 mr-2" />
              Delete Permanently
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}