import { useState, useEffect, useCallback } from 'react'
import { reportsApi, type ReportListItem, type ReportDetail, type ReportQueryParams, type ReportStatus, type ReportTargetType } from '@/api'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { PaginationNavigator } from '@/components/ui/pagination'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import {
  Search,
  RefreshCw,
  Eye,
  Check,
  X,
  Loader2,
  Flag,
  FileText,
  MessageSquare,
  Mail,
} from 'lucide-react'
import { format } from 'date-fns'
import type { PaginatedResponse } from '@/types'

// 状态颜色映射
const statusColors: Record<ReportStatus, string> = {
  pending: 'bg-yellow-500',
  processing: 'bg-blue-500',
  resolved: 'bg-green-500',
  rejected: 'bg-gray-500',
}

// 状态文本映射
const statusText: Record<ReportStatus, string> = {
  pending: '待处理',
  processing: '处理中',
  resolved: '已确认',
  rejected: '已驳回',
}

// 目标类型图标
const targetTypeIcons: Record<ReportTargetType, React.ReactNode> = {
  post: <FileText className="h-4 w-4" />,
  comment: <MessageSquare className="h-4 w-4" />,
  message: <Mail className="h-4 w-4" />,
}

// 目标类型文本
const targetTypeText: Record<ReportTargetType, string> = {
  post: '帖子',
  comment: '评论',
  message: '消息',
}

// 举报原因文本
const reasonText: Record<string, string> = {
  spam: '垃圾广告',
  inappropriate: '违规内容',
  harassment: '辱骂/攻击',
  misinformation: '虚假信息',
  other: '其他',
}

export default function Reports() {
  // 状态
  const [reports, setReports] = useState<ReportListItem[]>([])
  const [loading, setLoading] = useState(true)
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize] = useState(10)
  const [keyword, setKeyword] = useState('')
  const [statusFilter, setStatusFilter] = useState<string>('all')
  const [typeFilter, setTypeFilter] = useState<string>('all')

  // 批量选择
  const [selectedIds, setSelectedIds] = useState<string[]>([])
  const [isAllSelected, setIsAllSelected] = useState(false)

  // 详情对话框
  const [detailOpen, setDetailOpen] = useState(false)
  const [selectedReport, setSelectedReport] = useState<ReportDetail | null>(null)
  const [detailLoading, setDetailLoading] = useState(false)

  // 处理对话框
  const [handleOpen, setHandleOpen] = useState(false)
  const [handleReport, setHandleReport] = useState<ReportListItem | null>(null)
  const [handleAction, setHandleAction] = useState<'approve' | 'reject'>('approve')
  const [handleResult, setHandleResult] = useState('')
  const [handleLoading, setHandleLoading] = useState(false)

  // 批量操作加载状态
  const [batchLoading, setBatchLoading] = useState(false)

  // 加载举报列表
  const loadReports = useCallback(async () => {
    setLoading(true)
    try {
      const params: ReportQueryParams = {
        page,
        page_size: pageSize,
        keyword: keyword || undefined,
        status: statusFilter !== 'all' ? (statusFilter as ReportStatus) : undefined,
        target_type: typeFilter !== 'all' ? (typeFilter as ReportTargetType) : undefined,
      }
      const response = await reportsApi.getReports(params)
      const data = response.data.data as PaginatedResponse<ReportListItem>
      setReports(data.list || [])
      setTotal(data.total || 0)
    } catch (error) {
      console.error('Failed to load reports:', error)
    } finally {
      setLoading(false)
      setSelectedIds([])
      setIsAllSelected(false)
    }
  }, [page, pageSize, keyword, statusFilter, typeFilter])

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

  // 处理搜索
  const handleSearch = () => {
    setPage(1)
    loadReports()
  }

  // 处理刷新
  const handleRefresh = () => {
    loadReports()
  }

  // 全选/取消全选
  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedIds(reports.map(r => r.id))
      setIsAllSelected(true)
    } else {
      setSelectedIds([])
      setIsAllSelected(false)
    }
  }

  // 单选
  const handleSelect = (id: string, checked: boolean) => {
    if (checked) {
      setSelectedIds([...selectedIds, id])
    } else {
      setSelectedIds(selectedIds.filter(i => i !== id))
    }
    setIsAllSelected(checked && selectedIds.length === reports.length - 1)
  }

  // 查看详情
  const handleViewDetail = async (report: ReportListItem) => {
    setDetailLoading(true)
    setDetailOpen(true)
    try {
      const response = await reportsApi.getReportById(report.id)
      setSelectedReport(response.data)
    } catch (error) {
      console.error('Failed to load report detail:', error)
      setDetailOpen(false)
    } finally {
      setDetailLoading(false)
    }
  }

  // 打开处理对话框
  const openHandleDialog = (report: ReportListItem) => {
    setHandleReport(report)
    setHandleAction('approve')
    setHandleResult('')
    setHandleOpen(true)
  }

  // 提交处理
  const submitHandle = async () => {
    if (!handleReport) return
    setHandleLoading(true)
    try {
      await reportsApi.handleReport(handleReport.id, {
        action: handleAction,
        result: handleResult || undefined,
      })
      setHandleOpen(false)
      loadReports()
    } catch (error) {
      console.error('Failed to handle report:', error)
    } finally {
      setHandleLoading(false)
    }
  }

  // 批量处理
  const handleBatchAction = async (action: 'approve' | 'reject') => {
    if (selectedIds.length === 0) return
    setBatchLoading(true)
    try {
      await reportsApi.batchHandle({
        ids: selectedIds,
        action,
      })
      loadReports()
    } catch (error) {
      console.error('Failed to batch handle:', error)
    } finally {
      setBatchLoading(false)
    }
  }

  return (
    <div className="space-y-6">
      {/* 标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">举报管理</h1>
          <p className="text-muted-foreground">处理用户举报的帖子、评论和消息</p>
        </div>
        <Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
          <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
          刷新
        </Button>
      </div>

      {/* 筛选卡片 */}
      <Card>
        <CardHeader>
          <CardTitle>筛选条件</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-4">
            <div className="flex-1 min-w-[200px]">
              <Input
                placeholder="搜索举报内容..."
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              />
            </div>
            <Select value={typeFilter} onValueChange={setTypeFilter}>
              <SelectTrigger className="w-[140px]">
                <SelectValue placeholder="目标类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部类型</SelectItem>
                <SelectItem value="post">帖子</SelectItem>
                <SelectItem value="comment">评论</SelectItem>
                <SelectItem value="message">消息</SelectItem>
              </SelectContent>
            </Select>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[140px]">
                <SelectValue placeholder="处理状态" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部状态</SelectItem>
                <SelectItem value="pending">待处理</SelectItem>
                <SelectItem value="processing">处理中</SelectItem>
                <SelectItem value="resolved">已确认</SelectItem>
                <SelectItem value="rejected">已驳回</SelectItem>
              </SelectContent>
            </Select>
            <Button onClick={handleSearch}>
              <Search className="h-4 w-4 mr-2" />
              搜索
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 举报列表 */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>举报列表</CardTitle>
            <CardDescription>共 {total} 条记录</CardDescription>
          </div>
          {selectedIds.length > 0 && (
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleBatchAction('approve')}
                disabled={batchLoading}
              >
                {batchLoading ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />}
                批量确认 ({selectedIds.length})
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleBatchAction('reject')}
                disabled={batchLoading}
              >
                <X className="h-4 w-4 mr-2" />
                批量驳回
              </Button>
            </div>
          )}
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <Checkbox
                    checked={isAllSelected}
                    onCheckedChange={handleSelectAll}
                  />
                </TableHead>
                <TableHead>举报人</TableHead>
                <TableHead>目标类型</TableHead>
                <TableHead>举报原因</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>举报时间</TableHead>
                <TableHead>操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-center py-8">
                    <Loader2 className="h-6 w-6 animate-spin mx-auto" />
                    <span className="text-muted-foreground mt-2 block">加载中...</span>
                  </TableCell>
                </TableRow>
              ) : reports.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                    暂无举报记录
                  </TableCell>
                </TableRow>
              ) : (
                reports.map((report) => (
                  <TableRow key={report.id}>
                    <TableCell>
                      <Checkbox
                        checked={selectedIds.includes(report.id)}
                        onCheckedChange={(checked) => handleSelect(report.id, !!checked)}
                      />
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Avatar className="h-8 w-8">
                          <AvatarImage src={report.reporter?.avatar} />
                          <AvatarFallback>{report.reporter?.nickname?.[0] || '?'}</AvatarFallback>
                        </Avatar>
                        <span>{report.reporter?.nickname || '未知用户'}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        {targetTypeIcons[report.target_type]}
                        <span>{targetTypeText[report.target_type]}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <span>{reasonText[report.reason] || report.reason}</span>
                      {report.description && (
                        <p className="text-xs text-muted-foreground mt-1 line-clamp-1">{report.description}</p>
                      )}
                    </TableCell>
                    <TableCell>
                      <Badge className={statusColors[report.status]}>
                        {statusText[report.status]}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      {format(new Date(report.created_at), 'yyyy-MM-dd HH:mm')}
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-1">
                        <Button variant="ghost" size="sm" onClick={() => handleViewDetail(report)}>
                          <Eye className="h-4 w-4" />
                        </Button>
                        {report.status === 'pending' && (
                          <Button variant="ghost" size="sm" onClick={() => openHandleDialog(report)}>
                            <Flag className="h-4 w-4" />
                          </Button>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
          <PaginationNavigator
            currentPage={page}
            totalPages={Math.ceil(total / pageSize)}
            onPageChange={setPage}
          />
        </CardContent>
      </Card>

      {/* 详情对话框 */}
      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>举报详情</DialogTitle>
          </DialogHeader>
          {detailLoading ? (
            <div className="flex justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin" />
            </div>
          ) : selectedReport ? (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-muted-foreground">举报人</Label>
                  <div className="flex items-center gap-2 mt-1">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={selectedReport.reporter?.avatar} />
                      <AvatarFallback>{selectedReport.reporter?.nickname?.[0]}</AvatarFallback>
                    </Avatar>
                    <span>{selectedReport.reporter?.nickname}</span>
                  </div>
                </div>
                <div>
                  <Label className="text-muted-foreground">举报时间</Label>
                  <p>{format(new Date(selectedReport.created_at), 'yyyy-MM-dd HH:mm:ss')}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground">目标类型</Label>
                  <p>{targetTypeText[selectedReport.target_type]}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground">处理状态</Label>
                  <Badge className={statusColors[selectedReport.status]}>
                    {statusText[selectedReport.status]}
                  </Badge>
                </div>
                <div className="col-span-2">
                  <Label className="text-muted-foreground">举报原因</Label>
                  <p>{reasonText[selectedReport.reason] || selectedReport.reason}</p>
                </div>
                {selectedReport.description && (
                  <div className="col-span-2">
                    <Label className="text-muted-foreground">详细描述</Label>
                    <p>{selectedReport.description}</p>
                  </div>
                )}
              </div>

              {selectedReport.target_content && (
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">被举报内容</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {selectedReport.target_content.title && (
                      <p className="font-medium mb-2">{selectedReport.target_content.title}</p>
                    )}
                    <p className="text-sm text-muted-foreground">{selectedReport.target_content.content}</p>
                    {selectedReport.target_content.images && selectedReport.target_content.images.length > 0 && (
                      <div className="flex gap-2 mt-2">
                        {selectedReport.target_content.images.map((img, i) => (
                          <img key={i} src={img} alt="" className="w-16 h-16 object-cover rounded" />
                        ))}
                      </div>
                    )}
                  </CardContent>
                </Card>
              )}

              {selectedReport.handler && (
                <div>
                  <Label className="text-muted-foreground">处理人</Label>
                  <div className="flex items-center gap-2 mt-1">
                    <Avatar className="h-6 w-6">
                      <AvatarImage src={selectedReport.handler.avatar} />
                      <AvatarFallback>{selectedReport.handler.nickname?.[0]}</AvatarFallback>
                    </Avatar>
                    <span>{selectedReport.handler.nickname}</span>
                    {selectedReport.handled_at && (
                      <span className="text-muted-foreground text-sm">
                        {format(new Date(selectedReport.handled_at), 'yyyy-MM-dd HH:mm')}
                      </span>
                    )}
                  </div>
                </div>
              )}

              {selectedReport.result && (
                <div>
                  <Label className="text-muted-foreground">处理结果</Label>
                  <p>{selectedReport.result}</p>
                </div>
              )}
            </div>
          ) : null}
        </DialogContent>
      </Dialog>

      {/* 处理对话框 */}
      <Dialog open={handleOpen} onOpenChange={setHandleOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>处理举报</DialogTitle>
            <DialogDescription>请选择处理方式</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="flex gap-4">
              <Button
                variant={handleAction === 'approve' ? 'default' : 'outline'}
                className="flex-1"
                onClick={() => setHandleAction('approve')}
              >
                <Check className="h-4 w-4 mr-2" />
                确认违规
              </Button>
              <Button
                variant={handleAction === 'reject' ? 'default' : 'outline'}
                className="flex-1"
                onClick={() => setHandleAction('reject')}
              >
                <X className="h-4 w-4 mr-2" />
                驳回举报
              </Button>
            </div>
            <div>
              <Label>处理说明（选填）</Label>
              <Textarea
                value={handleResult}
                onChange={(e) => setHandleResult(e.target.value)}
                placeholder="请输入处理说明..."
                rows={3}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setHandleOpen(false)}>取消</Button>
            <Button onClick={submitHandle} disabled={handleLoading}>
              {handleLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              确认提交
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}