"use client"

import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Separator } from "@/components/ui/separator"
import { Star, MessageSquare, ThumbsUp, ThumbsDown, Edit, Trash2, MoreHorizontal } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface Review {
  id: string
  userId: string
  userName: string
  userAvatar?: string
  userDepartment: string
  rating: number
  comment: string
  createdAt: string
  updatedAt?: string
  helpful: number
  notHelpful: number
  userHelpfulVotes: string[] // user IDs who voted helpful
  userNotHelpfulVotes: string[] // user IDs who voted not helpful
}

interface ReviewSystemProps {
  appId: string
  appName: string
  currentRating: number
  onRatingUpdate: (newRating: number, reviewCount: number) => void
}

export function ReviewSystem({ appId, appName, currentRating, onRatingUpdate }: ReviewSystemProps) {
  const { user, updateAppRating } = useAuth()

  // Load reviews from localStorage
  const [reviews, setReviews] = useState<Review[]>(() => {
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem(`reviews_${appId}`)
      return saved ? JSON.parse(saved) : []
    }
    return []
  })

  const [showReviewForm, setShowReviewForm] = useState(false)
  const [newRating, setNewRating] = useState(5)
  const [newComment, setNewComment] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [editingReview, setEditingReview] = useState<string | null>(null)
  const [sortBy, setSortBy] = useState<"newest" | "oldest" | "helpful">("newest")

  const userReview = reviews.find((review) => review.userId === user?.id)
  const canReview = user && !userReview

  // Save reviews to localStorage and update app rating
  const saveReviews = (updatedReviews: Review[]) => {
    if (typeof window !== "undefined") {
      localStorage.setItem(`reviews_${appId}`, JSON.stringify(updatedReviews))
    }
    setReviews(updatedReviews)

    // Calculate new average rating and update in context
    if (updatedReviews.length > 0) {
      const avgRating = updatedReviews.reduce((sum, r) => sum + r.rating, 0) / updatedReviews.length
      const newAvgRating = Number(avgRating.toFixed(1))
      updateAppRating(appId, newAvgRating)
      onRatingUpdate(newAvgRating, updatedReviews.length)
    } else {
      updateAppRating(appId, 0)
      onRatingUpdate(0, 0)
    }
  }

  const handleSubmitReview = async () => {
    if (!user || !newComment.trim()) return

    setIsSubmitting(true)

    const review: Review = {
      id: `r${Date.now()}`,
      userId: user.id,
      userName: user.name,
      userAvatar: user.avatar,
      userDepartment: user.department,
      rating: newRating,
      comment: newComment.trim(),
      createdAt: new Date().toISOString(),
      helpful: 0,
      notHelpful: 0,
      userHelpfulVotes: [],
      userNotHelpfulVotes: [],
    }

    const updatedReviews = [...reviews, review]
    saveReviews(updatedReviews)

    setNewComment("")
    setNewRating(5)
    setShowReviewForm(false)
    setIsSubmitting(false)
  }

  const handleEditReview = async (reviewId: string) => {
    if (!user || !newComment.trim()) return

    setIsSubmitting(true)

    const updatedReviews = reviews.map((review) =>
      review.id === reviewId
        ? {
            ...review,
            rating: newRating,
            comment: newComment.trim(),
            updatedAt: new Date().toISOString(),
          }
        : review,
    )

    saveReviews(updatedReviews)

    setEditingReview(null)
    setNewComment("")
    setNewRating(5)
    setIsSubmitting(false)
  }

  const handleDeleteReview = async (reviewId: string) => {
    const updatedReviews = reviews.filter((review) => review.id !== reviewId)
    saveReviews(updatedReviews)
  }

  const handleHelpfulVote = (reviewId: string, isHelpful: boolean) => {
    if (!user) return

    const updatedReviews = reviews.map((review) => {
      if (review.id !== reviewId) return review

      const helpfulVotes = [...review.userHelpfulVotes]
      const notHelpfulVotes = [...review.userNotHelpfulVotes]

      if (isHelpful) {
        if (helpfulVotes.includes(user.id)) {
          // Remove helpful vote
          const index = helpfulVotes.indexOf(user.id)
          helpfulVotes.splice(index, 1)
        } else {
          // Add helpful vote and remove not helpful if exists
          helpfulVotes.push(user.id)
          const notHelpfulIndex = notHelpfulVotes.indexOf(user.id)
          if (notHelpfulIndex > -1) {
            notHelpfulVotes.splice(notHelpfulIndex, 1)
          }
        }
      } else {
        if (notHelpfulVotes.includes(user.id)) {
          // Remove not helpful vote
          const index = notHelpfulVotes.indexOf(user.id)
          notHelpfulVotes.splice(index, 1)
        } else {
          // Add not helpful vote and remove helpful if exists
          notHelpfulVotes.push(user.id)
          const helpfulIndex = helpfulVotes.indexOf(user.id)
          if (helpfulIndex > -1) {
            helpfulVotes.splice(helpfulIndex, 1)
          }
        }
      }

      return {
        ...review,
        helpful: helpfulVotes.length,
        notHelpful: notHelpfulVotes.length,
        userHelpfulVotes: helpfulVotes,
        userNotHelpfulVotes: notHelpfulVotes,
      }
    })

    saveReviews(updatedReviews)
  }

  const startEdit = (review: Review) => {
    setEditingReview(review.id)
    setNewRating(review.rating)
    setNewComment(review.comment)
    setShowReviewForm(true)
  }

  const cancelEdit = () => {
    setEditingReview(null)
    setNewComment("")
    setNewRating(5)
    setShowReviewForm(false)
  }

  const sortedReviews = [...reviews].sort((a, b) => {
    switch (sortBy) {
      case "oldest":
        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
      case "helpful":
        return b.helpful - a.helpful
      case "newest":
      default:
        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
    }
  })

  const getInitials = (name: string) => {
    return name.split("").slice(0, 2).join("").toUpperCase()
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("zh-TW", {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

  const renderStars = (rating: number, interactive = false, onRate?: (rating: number) => void) => {
    return (
      <div className="flex items-center space-x-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <Star
            key={star}
            className={`w-4 h-4 ${
              star <= rating ? "text-yellow-400 fill-current" : "text-gray-300"
            } ${interactive ? "cursor-pointer hover:text-yellow-400" : ""}`}
            onClick={() => interactive && onRate && onRate(star)}
          />
        ))}
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Review Summary */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <MessageSquare className="w-5 h-5" />
            <span>用戶評價</span>
          </CardTitle>
          <CardDescription>
            {reviews.length > 0 ? (
              <div className="flex items-center space-x-4">
                <div className="flex items-center space-x-2">
                  {renderStars(Math.round(currentRating))}
                  <span className="font-semibold">{currentRating}</span>
                  <span className="text-gray-500">({reviews.length} 則評價)</span>
                </div>
              </div>
            ) : (
              "尚無評價，成為第一個評價的用戶！"
            )}
          </CardDescription>
        </CardHeader>
        <CardContent>
          {/* Rating Distribution */}
          {reviews.length > 0 && (
            <div className="space-y-2 mb-6">
              {[5, 4, 3, 2, 1].map((rating) => {
                const count = reviews.filter((r) => r.rating === rating).length
                const percentage = (count / reviews.length) * 100
                return (
                  <div key={rating} className="flex items-center space-x-3">
                    <div className="flex items-center space-x-1 w-12">
                      <span className="text-sm">{rating}</span>
                      <Star className="w-3 h-3 text-yellow-400 fill-current" />
                    </div>
                    <div className="flex-1 bg-gray-200 rounded-full h-2">
                      <div
                        className="bg-yellow-400 h-2 rounded-full transition-all duration-300"
                        style={{ width: `${percentage}%` }}
                      />
                    </div>
                    <span className="text-sm text-gray-500 w-8">{count}</span>
                  </div>
                )
              })}
            </div>
          )}

          {/* Add Review Button */}
          {canReview && (
            <Button
              onClick={() => setShowReviewForm(true)}
              className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
            >
              <Star className="w-4 h-4 mr-2" />
              撰寫評價
            </Button>
          )}

          {userReview && (
            <Alert>
              <MessageSquare className="h-4 w-4" />
              <AlertDescription>您已經評價過此應用。您可以編輯或刪除您的評價。</AlertDescription>
            </Alert>
          )}
        </CardContent>
      </Card>

      {/* Review Form */}
      <Dialog open={showReviewForm} onOpenChange={setShowReviewForm}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{editingReview ? "編輯評價" : "撰寫評價"}</DialogTitle>
            <DialogDescription>分享您對 {appName} 的使用體驗</DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div>
              <label className="text-sm font-medium mb-2 block">評分</label>
              {renderStars(newRating, true, setNewRating)}
            </div>

            <div>
              <label className="text-sm font-medium mb-2 block">評價內容</label>
              <Textarea
                placeholder="請分享您的使用體驗..."
                value={newComment}
                onChange={(e) => setNewComment(e.target.value)}
                rows={4}
                maxLength={500}
              />
              <div className="text-xs text-gray-500 mt-1">{newComment.length}/500 字元</div>
            </div>

            <div className="flex space-x-3">
              <Button
                onClick={editingReview ? () => handleEditReview(editingReview) : handleSubmitReview}
                disabled={isSubmitting || !newComment.trim()}
                className="flex-1"
              >
                {isSubmitting ? "提交中..." : editingReview ? "更新評價" : "提交評價"}
              </Button>
              <Button variant="outline" onClick={cancelEdit}>
                取消
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* Reviews List */}
      {reviews.length > 0 && (
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle>所有評價 ({reviews.length})</CardTitle>
              <div className="flex items-center space-x-2">
                <span className="text-sm text-gray-500">排序：</span>
                <select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value as any)}
                  className="text-sm border rounded px-2 py-1"
                >
                  <option value="newest">最新</option>
                  <option value="oldest">最舊</option>
                  <option value="helpful">最有幫助</option>
                </select>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {sortedReviews.map((review, index) => (
                <div key={review.id}>
                  <div className="flex items-start space-x-4">
                    <Avatar className="w-10 h-10">
                      <AvatarImage src={review.userAvatar || "/placeholder.svg"} alt={review.userName} />
                      <AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                        {getInitials(review.userName)}
                      </AvatarFallback>
                    </Avatar>

                    <div className="flex-1 space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-3">
                          <span className="font-medium">{review.userName}</span>
                          <Badge variant="secondary" className="text-xs">
                            {review.userDepartment}
                          </Badge>
                          {renderStars(review.rating)}
                        </div>

                        {user?.id === review.userId && (
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="sm">
                                <MoreHorizontal className="w-4 h-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem onClick={() => startEdit(review)}>
                                <Edit className="w-4 h-4 mr-2" />
                                編輯
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => handleDeleteReview(review.id)} className="text-red-600">
                                <Trash2 className="w-4 h-4 mr-2" />
                                刪除
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        )}
                      </div>

                      <p className="text-gray-700">{review.comment}</p>

                      <div className="flex items-center justify-between text-sm text-gray-500">
                        <div className="flex items-center space-x-4">
                          <span>
                            {formatDate(review.createdAt)}
                            {review.updatedAt && " (已編輯)"}
                          </span>
                        </div>

                        {user && user.id !== review.userId && (
                          <div className="flex items-center space-x-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleHelpfulVote(review.id, true)}
                              className={`text-xs ${
                                review.userHelpfulVotes.includes(user.id)
                                  ? "text-green-600 bg-green-50"
                                  : "text-gray-500"
                              }`}
                            >
                              <ThumbsUp className="w-3 h-3 mr-1" />
                              有幫助 ({review.helpful})
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleHelpfulVote(review.id, false)}
                              className={`text-xs ${
                                review.userNotHelpfulVotes.includes(user.id)
                                  ? "text-red-600 bg-red-50"
                                  : "text-gray-500"
                              }`}
                            >
                              <ThumbsDown className="w-3 h-3 mr-1" />
                              沒幫助 ({review.notHelpful})
                            </Button>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  {index < sortedReviews.length - 1 && <Separator className="mt-6" />}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}