"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import { Button } from "@/components/ui/button"
import { DataAPI } from "@/lib/data-api"
import { useToast } from "@/components/ui/toast"
import { MessageSquare, Star, Calendar, Building2, Edit, Trash2, Eye, AlertCircle, ExternalLink } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"
import ReviewModal from "@/components/reviews/ReviewModal"
import { useAuth } from "@/hooks/use-auth"
import { useRouter } from "next/navigation"

export default function MyReviewsPage() {
  const [reviews, setReviews] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [deleting, setDeleting] = useState(false)
  const [deletingReviewId, setDeletingReviewId] = useState<string | null>(null)
  const [selectedReview, setSelectedReview] = useState<any>(null)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [showReviewModal, setShowReviewModal] = useState(false)
  const [editingReview, setEditingReview] = useState<any>(null)
  const { user, isAuthenticated, isLoading: authLoading } = useAuth()
  const router = useRouter()
  const toast = useToast()

  const loadReviews = async () => {
    if (!user) return
    setLoading(true)
    try {
      // Call API to get only current user's reviews
      const res = await DataAPI.reviews.getReviews({ userId: user.id })
      let allReviews = ((res as any)?.data?.reviews || []).filter((r: any) => r)

      // Manual filtering fallback
      allReviews = allReviews.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
      })

      setReviews(allReviews)
    } catch (error: any) {
      console.error('Failed to load reviews:', error)
      toast.error(error?.message, { title: "Failed to load reviews" })
    } finally {
      setLoading(false)
    }
  }

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

  const handleDelete = async () => {
    if (!selectedReview) return

    setDeleting(true)
    setDeletingReviewId(selectedReview.id)

    try {
      const res = await DataAPI.reviews.deleteReview?.(selectedReview.id)

      if (res?.success) {
        toast.success("Your review has been removed successfully.", {
          title: "Review deleted",
          duration: 3000
        })
        setShowDeleteDialog(false)
        // Optimistically remove from UI with a slight delay for smooth transition
        setReviews(prev => prev.filter(r => r.id !== selectedReview.id))
        setSelectedReview(null)
      } else {
        throw new Error((res as any)?.message || 'Failed to delete review')
      }
    } catch (error: any) {
      console.error('Delete review error:', error)
      toast.error(error?.message || "Please try again.", {
        title: "Failed to delete review",
        duration: 4000
      })
    } finally {
      setDeleting(false)
      setDeletingReviewId(null)
    }
  }

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

  const openEditModal = (review: any) => {
    setEditingReview(review)
    setShowReviewModal(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',
    }
    return <Badge className={`${variants[status] || 'bg-gray-100 text-gray-700'} capitalize`}>{status}</Badge>
  }

  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-gradient-to-br from-slate-50 via-white to-blue-50/30">
      <Header />
      <main className="container mx-auto px-4 py-10">
        <div className="flex items-center justify-between mb-6 pb-4 border-b border-slate-200">
          <div className="flex items-center space-x-3">
            <div className="p-2 bg-blue-100 rounded-full">
              <MessageSquare className="h-6 w-6 text-blue-600" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-900">My Reviews</h1>
              <p className="text-slate-600">Manage your facility reviews</p>
            </div>
          </div>
          {reviews.length > 0 && (
            <span className="text-lg font-medium text-slate-600">{reviews.length} review{reviews.length !== 1 ? 's' : ''}</span>
          )}
        </div>

        {loading ? (
          <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">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>
                {[...Array(5)].map((_, idx) => (
                  <TableRow key={idx}>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Skeleton className="h-4 w-4 rounded" />
                        <Skeleton className="h-4 w-40" />
                      </div>
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-4 w-16" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-4 w-48" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-4 w-12" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-6 w-20 rounded-full" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-4 w-32" />
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center justify-end gap-1">
                        <Skeleton className="h-8 w-8 rounded" />
                        <Skeleton className="h-8 w-8 rounded" />
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        ) : reviews.length === 0 ? (
          <div className="text-center py-12">
            <MessageSquare className="h-16 w-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-900 mb-2">No reviews yet</h3>
            <p className="text-gray-600 mb-6">
              Start sharing your experiences by reviewing facilities you've visited.
            </p>
            <Link href="/search">
              <Button className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                <Building2 className="h-4 w-4 mr-2" />
                Browse Facilities
              </Button>
            </Link>
          </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">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) => {
                  const isDeleting = deletingReviewId === review.id
                  return (
                    <>
                      <TableRow
                        key={review.id}
                        className={`hover:bg-slate-50 transition-opacity ${isDeleting ? 'opacity-50 pointer-events-none' : ''}`}
                      >
                        <TableCell>
                          {review?.facilityId ? (
                            <Link
                              href={`/facility/${typeof review.facilityId === 'string'
                                ? review.facilityId
                                : review.facilityId._id?.toString() || review.facilityId.id || review.facilityId.slug
                                }`}
                              className="flex items-center gap-2 hover:text-blue-600 transition-colors"
                            >
                              <Building2 className="h-4 w-4" />
                              <div>
                                <div className="font-medium text-sm">
                                  {typeof review.facilityId === 'string' ? 'Facility' : (review.facilityId.name || 'Unknown Facility')}
                                </div>
                              </div>
                            </Link>
                          ) : (
                            <span className="text-slate-400 text-sm">Unknown Facility</span>
                          )}
                        </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">
                              <Eye className="h-4 w-4" />
                              <span>{review.media.length}</span>
                            </div>
                          ) : (
                            <span className="text-slate-400 text-sm">—</span>
                          )}
                        </TableCell>
                        <TableCell>
                          {getStatusBadge(review.status)}
                        </TableCell>
                        <TableCell className="text-sm text-slate-600">
                          {formatDate(review.createdAt)}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center justify-end gap-1">
                            {review?.facilityId && (
                              <Link href={`/facility/${typeof review.facilityId === 'string'
                                ? review.facilityId
                                : review.facilityId._id?.toString() || review.facilityId.id || review.facilityId.slug
                                }`}>
                                <Button
                                  size="sm"
                                  variant="ghost"
                                  title="View Facility"
                                >
                                  <ExternalLink className="h-4 w-4" />
                                </Button>
                              </Link>
                            )}
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => setSelectedReview(review)}
                              title="View Details"
                            >
                              <Eye className="h-4 w-4" />
                            </Button>
                            {(review.status === 'pending' || review.status === 'rejected') && (
                              <Button
                                size="sm"
                                variant="ghost"
                                className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                                onClick={() => openEditModal(review)}
                                title="Edit Review"
                              >
                                <Edit className="h-4 w-4" />
                              </Button>
                            )}
                            <Button
                              size="sm"
                              variant="ghost"
                              className="text-red-600 hover:text-red-700 hover:bg-red-50"
                              onClick={() => openDeleteDialog(review)}
                              title="Delete Review"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>

                      {/* Rejection Reason Row */}
                      {review.status === 'rejected' && review.rejectionReason && (
                        <TableRow className="bg-red-50 border-t-2 border-red-200">
                          <TableCell colSpan={7}>
                            <div className="py-2 flex items-start gap-2">
                              <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
                              <div>
                                <span className="text-sm font-semibold text-red-800">Rejection Reason:</span>
                                <p className="text-sm text-red-700 mt-1">{review.rejectionReason}</p>
                              </div>
                            </div>
                          </TableCell>
                        </TableRow>
                      )}

                      {/* Pending Revision Row */}
                      {review.status === 'approved' && (review as any).pendingRevision && (
                        <TableRow className="bg-blue-50 border-t-2 border-blue-200">
                          <TableCell colSpan={7}>
                            <div className="py-2 flex items-start gap-2">
                              <AlertCircle className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0 animate-pulse" />
                              <div>
                                <span className="text-sm font-semibold text-blue-800">Pending Revision</span>
                                <p className="text-sm text-blue-700 mt-1">
                                  Your changes are awaiting admin approval. New rating: {(review as any).pendingRevision.rating}/5
                                  {(review as any).pendingRevision.comment && ` • ${(review as any).pendingRevision.comment}`}
                                </p>
                              </div>
                            </div>
                          </TableCell>
                        </TableRow>
                      )}
                    </>
                  )
                })}
              </TableBody>
            </Table>
          </div>
        )}
      </main>
      <Footer />

      {/* Review Details Dialog */}
      <Dialog open={!!selectedReview && !showDeleteDialog} 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>
                <h4 className="font-semibold mb-2">Facility</h4>
                {selectedReview?.facilityId ? (
                  <Link
                    href={`/facility/${typeof selectedReview.facilityId === 'string'
                      ? selectedReview.facilityId
                      : selectedReview.facilityId._id?.toString() || selectedReview.facilityId.id || selectedReview.facilityId.slug
                      }`}
                    className="text-blue-600 hover:underline flex items-center gap-1"
                  >
                    <Building2 className="h-4 w-4" />
                    {typeof selectedReview.facilityId === 'string' ? 'Facility' : (selectedReview.facilityId.name || 'Unknown Facility')}
                  </Link>
                ) : (
                  <span className="text-slate-400">Unknown Facility</span>
                )}
              </div>

              <div className="flex items-center gap-4">
                <div>
                  <h4 className="font-semibold mb-1">Rating</h4>
                  <div className="flex items-center gap-1">
                    <Star className="h-5 w-5 text-yellow-500 fill-yellow-500" />
                    <span className="font-semibold text-lg">{selectedReview.rating}/5</span>
                  </div>
                </div>
                <div>
                  <h4 className="font-semibold mb-1">Status</h4>
                  {getStatusBadge(selectedReview.status)}
                </div>
                <div>
                  <h4 className="font-semibold mb-1">Date</h4>
                  <div className="flex items-center gap-1 text-sm text-slate-600">
                    <Calendar className="h-4 w-4" />
                    {formatDate(selectedReview.createdAt)}
                  </div>
                </div>
              </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>
              )}

              {selectedReview.status === 'rejected' && selectedReview.rejectionReason && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
                  <h4 className="font-semibold text-red-800 mb-1">Rejection Reason</h4>
                  <p className="text-sm text-red-700">{selectedReview.rejectionReason}</p>
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <Dialog open={showDeleteDialog} onOpenChange={(open) => !deleting && setShowDeleteDialog(open)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertCircle className="h-5 w-5 text-red-600" />
              Delete Review
            </DialogTitle>
            <DialogDescription className="pt-2">
              {selectedReview?.status === 'approved' ? (
                <span className="text-red-600 font-medium">
                  Warning: This is an approved review that is publicly visible. Deleting it will remove it from the facility page and recalculate the facility's rating. This action cannot be undone.
                </span>
              ) : (
                <span>
                  Are you sure you want to delete this review? This action cannot be undone.
                </span>
              )}
            </DialogDescription>
          </DialogHeader>
          {selectedReview && (
            <div className="py-4 space-y-3">
              {selectedReview.status === 'approved' && (
                <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start gap-2">
                  <AlertCircle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
                  <div className="text-sm text-amber-800">
                    <span className="font-semibold">Public Review:</span> This review is currently visible to all users browsing the facility.
                  </div>
                </div>
              )}
              <div className="flex items-center gap-2 text-sm">
                <Building2 className="h-4 w-4 text-slate-500" />
                <span className="font-medium">
                  {typeof selectedReview.facilityId === 'string'
                    ? 'Facility'
                    : (selectedReview.facilityId?.name || 'Unknown Facility')}
                </span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
                <span>{selectedReview.rating}/5</span>
                <Badge className={`ml-2 ${selectedReview.status === 'approved' ? 'bg-green-100 text-green-700' :
                  selectedReview.status === 'pending' ? 'bg-blue-100 text-blue-700' :
                    'bg-red-100 text-red-700'
                  }`}>
                  {selectedReview.status}
                </Badge>
              </div>
              {selectedReview.comment && (
                <div className="text-sm text-slate-600 mt-2 p-3 bg-slate-50 rounded border border-slate-200">
                  <p className="line-clamp-3">{selectedReview.comment}</p>
                </div>
              )}
            </div>
          )}
          <DialogFooter className="gap-2">
            <Button
              variant="outline"
              onClick={() => setShowDeleteDialog(false)}
              disabled={deleting}
            >
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={handleDelete}
              disabled={deleting}
              className="min-w-[120px]"
            >
              {deleting ? (
                <>
                  <div className="h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
                  Deleting...
                </>
              ) : (
                <>
                  <Trash2 className="h-4 w-4 mr-2" />
                  Delete Review
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Edit Review Modal */}
      {showReviewModal && editingReview && (
        <ReviewModal
          open={showReviewModal}
          onClose={() => {
            setShowReviewModal(false)
            setEditingReview(null)
          }}
          facilityId={editingReview.facilityId?._id || editingReview.facilityId}
          existing={{
            id: editingReview.id,
            rating: editingReview.rating,
            comment: editingReview.comment,
            media: editingReview.media,
            status: editingReview.status
          }}
          onSubmitted={async () => {
            setShowReviewModal(false)
            setEditingReview(null)
            // Reload reviews to get updated data
            await loadReviews()
          }}
        />
      )}
    </div>
  )
}