/**
 * 插件统计组件
 * 显示点赞、点踩、评分和下载量
 */

import { useState, useEffect } from 'react'
import { ThumbsUp, ThumbsDown, Star, Download } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { useToast } from '@/hooks/use-toast'
import {
  getPluginStats,
  likePlugin,
  dislikePlugin,
  ratePlugin,
  type PluginStatsData,
} from '@/lib/plugin-stats'

interface PluginStatsProps {
  pluginId: string
  compact?: boolean // 紧凑模式（只显示数字）
}

export function PluginStats({ pluginId, compact = false }: PluginStatsProps) {
  const [stats, setStats] = useState<PluginStatsData | null>(null)
  const [loading, setLoading] = useState(true)
  const [userRating, setUserRating] = useState(0)
  const [userComment, setUserComment] = useState('')
  const [isRatingDialogOpen, setIsRatingDialogOpen] = useState(false)
  const { toast } = useToast()

  // 加载统计数据
  const loadStats = async () => {
    setLoading(true)
    const data = await getPluginStats(pluginId)
    if (data) {
      setStats(data)
    }
    setLoading(false)
  }

  useEffect(() => {
    loadStats()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pluginId])

  // 处理点赞
  const handleLike = async () => {
    const result = await likePlugin(pluginId)

    if (result.success) {
      toast({ title: '已点赞', description: '感谢你的支持！' })
      loadStats() // 重新加载统计数据
    } else {
      toast({
        title: '点赞失败',
        description: result.error || '未知错误',
        variant: 'destructive',
      })
    }
  }

  // 处理点踩
  const handleDislike = async () => {
    const result = await dislikePlugin(pluginId)

    if (result.success) {
      toast({ title: '已反馈', description: '感谢你的反馈！' })
      loadStats()
    } else {
      toast({
        title: '操作失败',
        description: result.error || '未知错误',
        variant: 'destructive',
      })
    }
  }

  // 提交评分
  const handleSubmitRating = async () => {
    if (userRating === 0) {
      toast({
        title: '请选择评分',
        description: '至少选择 1 颗星',
        variant: 'destructive',
      })
      return
    }

    const result = await ratePlugin(pluginId, userRating, userComment || undefined)

    if (result.success) {
      toast({ title: '评分成功', description: '感谢你的评价！' })
      setIsRatingDialogOpen(false)
      setUserRating(0)
      setUserComment('')
      loadStats()
    } else {
      toast({
        title: '评分失败',
        description: result.error || '未知错误',
        variant: 'destructive',
      })
    }
  }

  if (loading) {
    return (
      <div className="flex items-center gap-4 text-sm text-muted-foreground">
        <div className="flex items-center gap-1">
          <Download className="h-4 w-4" />
          <span>-</span>
        </div>
        <div className="flex items-center gap-1">
          <Star className="h-4 w-4" />
          <span>-</span>
        </div>
      </div>
    )
  }

  if (!stats) {
    return null
  }

  // 紧凑模式
  if (compact) {
    return (
      <div className="flex items-center gap-4 text-sm text-muted-foreground">
        <div className="flex items-center gap-1" title={`下载量: ${stats.downloads.toLocaleString()}`}>
          <Download className="h-4 w-4" />
          <span>{stats.downloads.toLocaleString()}</span>
        </div>
        <div className="flex items-center gap-1" title={`评分: ${stats.rating.toFixed(1)} (${stats.rating_count} 条评价)`}>
          <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
          <span>{stats.rating.toFixed(1)}</span>
        </div>
        <div className="flex items-center gap-1" title={`点赞数: ${stats.likes}`}>
          <ThumbsUp className="h-4 w-4" />
          <span>{stats.likes}</span>
        </div>
      </div>
    )
  }

  // 完整模式
  return (
    <div className="space-y-4">
      {/* 统计数字 */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div className="flex flex-col items-center p-3 rounded-lg border bg-card">
          <Download className="h-5 w-5 text-muted-foreground mb-1" />
          <span className="text-2xl font-bold">{stats.downloads.toLocaleString()}</span>
          <span className="text-xs text-muted-foreground">下载量</span>
        </div>

        <div className="flex flex-col items-center p-3 rounded-lg border bg-card">
          <Star className="h-5 w-5 text-yellow-400 mb-1 fill-yellow-400" />
          <span className="text-2xl font-bold">{stats.rating.toFixed(1)}</span>
          <span className="text-xs text-muted-foreground">{stats.rating_count} 条评价</span>
        </div>

        <div className="flex flex-col items-center p-3 rounded-lg border bg-card">
          <ThumbsUp className="h-5 w-5 text-green-500 mb-1" />
          <span className="text-2xl font-bold">{stats.likes}</span>
          <span className="text-xs text-muted-foreground">点赞</span>
        </div>

        <div className="flex flex-col items-center p-3 rounded-lg border bg-card">
          <ThumbsDown className="h-5 w-5 text-red-500 mb-1" />
          <span className="text-2xl font-bold">{stats.dislikes}</span>
          <span className="text-xs text-muted-foreground">点踩</span>
        </div>
      </div>

      {/* 操作按钮 */}
      <div className="flex items-center gap-2">
        <Button variant="outline" size="sm" onClick={handleLike}>
          <ThumbsUp className="h-4 w-4 mr-1" />
          点赞
        </Button>

        <Button variant="outline" size="sm" onClick={handleDislike}>
          <ThumbsDown className="h-4 w-4 mr-1" />
          点踩
        </Button>

        <Dialog open={isRatingDialogOpen} onOpenChange={setIsRatingDialogOpen}>
          <DialogTrigger asChild>
            <Button variant="default" size="sm">
              <Star className="h-4 w-4 mr-1" />
              评分
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>为插件评分</DialogTitle>
              <DialogDescription>分享你的使用体验，帮助其他用户</DialogDescription>
            </DialogHeader>

            <div className="space-y-4 py-4">
              {/* 星级评分 */}
              <div className="flex flex-col items-center gap-2">
                <div className="flex gap-2">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <button
                      key={star}
                      onClick={() => setUserRating(star)}
                      className="focus:outline-none"
                    >
                      <Star
                        className={`h-8 w-8 transition-colors ${
                          star <= userRating
                            ? 'fill-yellow-400 text-yellow-400'
                            : 'text-muted-foreground hover:text-yellow-300'
                        }`}
                      />
                    </button>
                  ))}
                </div>
                <span className="text-sm text-muted-foreground">
                  {userRating === 0 && '点击星星进行评分'}
                  {userRating === 1 && '很差'}
                  {userRating === 2 && '一般'}
                  {userRating === 3 && '还行'}
                  {userRating === 4 && '不错'}
                  {userRating === 5 && '非常好'}
                </span>
              </div>

              {/* 评论 */}
              <div>
                <label htmlFor="plugin-rating-comment" className="text-sm font-medium mb-2 block">评论（可选）</label>
                <Textarea
                  value={userComment}
                  id="plugin-rating-comment"
                  onChange={(e) => setUserComment(e.target.value)}
                  placeholder="分享你的使用体验..."
                  rows={4}
                  maxLength={500}
                />
                <div className="text-xs text-muted-foreground mt-1 text-right">
                  {userComment.length} / 500
                </div>
              </div>
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={() => setIsRatingDialogOpen(false)}>
                取消
              </Button>
              <Button onClick={handleSubmitRating} disabled={userRating === 0}>
                提交评分
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      {/* 最近评价 */}
      {stats.recent_ratings && stats.recent_ratings.length > 0 && (
        <div className="space-y-2">
          <h4 className="text-sm font-semibold">最近评价</h4>
          <div className="space-y-3">
            {stats.recent_ratings.map((rating, index) => (
              <div key={index} className="p-3 rounded-lg border bg-muted/50">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex gap-1">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <Star
                        key={star}
                        className={`h-3 w-3 ${
                          star <= rating.rating
                            ? 'fill-yellow-400 text-yellow-400'
                            : 'text-muted-foreground'
                        }`}
                      />
                    ))}
                  </div>
                  <span className="text-xs text-muted-foreground">
                    {new Date(rating.created_at).toLocaleDateString()}
                  </span>
                </div>
                {rating.comment && (
                  <p className="text-sm text-muted-foreground">{rating.comment}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}