import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Skeleton } from '@/components/ui/skeleton'
import { Textarea } from '@/components/ui/textarea'
import { categoryService } from '@/services/categoryService'
import { Photo, photoService } from '@/services/photoService'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
  Camera,
  Edit,
  Eye,
  Folder,
  Grid,
  ImageIcon,
  List,
  MoreVertical,
  Plus,
  RefreshCw,
  Search,
  Tag,
  Trash,
} from 'lucide-react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { toast } from 'sonner'

type ViewMode = 'grid' | 'list'

interface PhotoFilters {
  search: string
  status: string
  categoryId: string
  tagId: string
  dateRange: string
}

export default function Photos() {
  const navigate = useNavigate()
  const queryClient = useQueryClient()

  // 状态管理
  const [viewMode, setViewMode] = useState<ViewMode>('grid')
  const [selectedPhotos, setSelectedPhotos] = useState<number[]>([])
  const [page, setPage] = useState(1)
  const [filters, setFilters] = useState<PhotoFilters>({
    search: '',
    status: '',
    categoryId: '',
    tagId: '',
    dateRange: '',
  })

  // 编辑对话框状态
  const [editingPhoto, setEditingPhoto] = useState<Photo | null>(null)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [editForm, setEditForm] = useState({
    title: '',
    description: '',
    status: 'draft' as 'draft' | 'published' | 'archived' | 'processing',
  })

  // 详情对话框状态
  const [viewingPhoto, setViewingPhoto] = useState<Photo | null>(null)
  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)

  // 获取照片列表
  const { data: photosData, isLoading: photosLoading } = useQuery({
    queryKey: ['photos', { page, ...filters }],
    queryFn: () =>
      photoService.getPhotos({
        page,
        limit: 20,
        search: filters.search || undefined,
        status: filters.status || undefined,
        category_id: filters.categoryId ? parseInt(filters.categoryId) : undefined,
        sort_by: 'created_at',
        sort_order: 'desc',
      }),
  })

  // 获取分类列表
  const { data: categories } = useQuery({
    queryKey: ['categories-all'],
    queryFn: () => categoryService.getCategories(),
  })

  // 删除照片
  const deletePhotoMutation = useMutation({
    mutationFn: photoService.deletePhoto,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['photos'] })
      toast.success('照片删除成功')
    },
    onError: (error: any) => {
      toast.error(error?.message || '删除失败')
    },
  })

  // 批量删除照片
  const batchDeleteMutation = useMutation({
    mutationFn: photoService.batchDelete,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['photos'] })
      setSelectedPhotos([])
      toast.success('批量删除成功')
    },
    onError: (error: any) => {
      toast.error(error?.message || '批量删除失败')
    },
  })

  // 批量更新状态
  const batchUpdateMutation = useMutation({
    mutationFn: ({ ids, status }: { ids: number[]; status: string }) =>
      photoService.batchUpdate(ids, { status }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['photos'] })
      setSelectedPhotos([])
      toast.success('状态更新成功')
    },
    onError: (error: any) => {
      toast.error(error?.message || '状态更新失败')
    },
  })

  // 编辑照片
  const editPhotoMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: any }) => photoService.updatePhoto(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['photos'] })
      setIsEditDialogOpen(false)
      setEditingPhoto(null)
      toast.success('照片更新成功')
    },
    onError: (error: any) => {
      toast.error(error?.message || '更新失败')
    },
  })

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedPhotos(photosData?.photos.map(photo => photo.id) || [])
    } else {
      setSelectedPhotos([])
    }
  }

  const handleSelectPhoto = (photoId: number, checked: boolean) => {
    if (checked) {
      setSelectedPhotos([...selectedPhotos, photoId])
    } else {
      setSelectedPhotos(selectedPhotos.filter(id => id !== photoId))
    }
  }

  const handleBatchAction = (action: string, value?: string) => {
    if (selectedPhotos.length === 0) {
      toast.error('请先选择照片')
      return
    }

    if (action === 'delete') {
      if (confirm('确定要删除选中的照片吗？')) {
        batchDeleteMutation.mutate(selectedPhotos)
      }
    } else if (action === 'status' && value) {
      batchUpdateMutation.mutate({ ids: selectedPhotos, status: value })
    }
  }

  const handleDeletePhoto = (photoId: number) => {
    if (confirm('确定要删除这张照片吗？')) {
      deletePhotoMutation.mutate(photoId)
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'published':
        return 'bg-green-100 text-green-800'
      case 'draft':
        return 'bg-yellow-100 text-yellow-800'
      case 'archived':
        return 'bg-gray-100 text-gray-800'
      case 'processing':
        return 'bg-blue-100 text-blue-800'
      default:
        return 'bg-gray-100 text-gray-800'
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case 'published':
        return '已发布'
      case 'draft':
        return '草稿'
      case 'archived':
        return '已归档'
      case 'processing':
        return '处理中'
      default:
        return status
    }
  }

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  // 处理编辑照片
  const handleEditPhoto = (photo: Photo) => {
    setEditingPhoto(photo)
    setEditForm({
      title: photo.title,
      description: photo.description,
      status: photo.status,
    })
    setIsEditDialogOpen(true)
  }

  // 处理查看照片详情
  const handleViewPhoto = (photo: Photo) => {
    setViewingPhoto(photo)
    setIsViewDialogOpen(true)
  }

  // 提交编辑
  const handleSubmitEdit = () => {
    if (!editingPhoto) return

    editPhotoMutation.mutate({
      id: editingPhoto.id,
      data: editForm,
    })
  }

  // 刷新列表
  const handleRefresh = () => {
    queryClient.invalidateQueries({ queryKey: ['photos'] })
    toast.success('列表已刷新')
  }

  return (
    <div className="container mx-auto px-4 py-8">
      {/* 页面头部 */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold">照片管理</h1>
          <p className="text-muted-foreground mt-1">共 {photosData?.total || 0} 张照片</p>
        </div>
        <Button onClick={() => navigate('/photos/upload')} className="flex items-center gap-2">
          <Plus className="h-4 w-4" />
          上传照片
        </Button>
      </div>

      {/* 工具栏 */}
      <Card className="mb-6">
        <CardContent className="pt-6">
          <div className="flex flex-col lg:flex-row gap-4">
            {/* 搜索 */}
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                placeholder="搜索照片..."
                value={filters.search}
                onChange={e => setFilters({ ...filters, search: e.target.value })}
                className="pl-10"
              />
            </div>

            {/* 过滤器 */}
            <div className="flex gap-2">
              <Select
                value={filters.status}
                onValueChange={value => setFilters({ ...filters, status: value })}
              >
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="状态" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="">全部状态</SelectItem>
                  <SelectItem value="published">已发布</SelectItem>
                  <SelectItem value="draft">草稿</SelectItem>
                  <SelectItem value="archived">已归档</SelectItem>
                  <SelectItem value="processing">处理中</SelectItem>
                </SelectContent>
              </Select>

              <Select
                value={filters.categoryId}
                onValueChange={value => setFilters({ ...filters, categoryId: value })}
              >
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="分类" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="">全部分类</SelectItem>
                  {categories?.data?.categories?.map(category => (
                    <SelectItem key={category.id} value={category.id.toString()}>
                      {category.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 视图模式 */}
            <div className="flex gap-1 border rounded-md">
              <Button
                variant={viewMode === 'grid' ? 'default' : 'ghost'}
                size="sm"
                onClick={() => setViewMode('grid')}
              >
                <Grid className="h-4 w-4" />
              </Button>
              <Button
                variant={viewMode === 'list' ? 'default' : 'ghost'}
                size="sm"
                onClick={() => setViewMode('list')}
              >
                <List className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 批量操作栏 */}
      {selectedPhotos.length > 0 && (
        <Card className="mb-6 border-primary">
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <span className="text-sm">已选择 {selectedPhotos.length} 张照片</span>
                <Button variant="outline" size="sm" onClick={() => setSelectedPhotos([])}>
                  取消选择
                </Button>
              </div>
              <div className="flex gap-2">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm">
                      更改状态
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent>
                    <DropdownMenuItem onClick={() => handleBatchAction('status', 'published')}>
                      设为已发布
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => handleBatchAction('status', 'draft')}>
                      设为草稿
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => handleBatchAction('status', 'archived')}>
                      设为已归档
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={() => handleBatchAction('delete')}
                  disabled={batchDeleteMutation.isPending}
                >
                  删除选中
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 照片列表 */}
      {photosLoading ? (
        <div
          className={
            viewMode === 'grid'
              ? 'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6'
              : 'space-y-4'
          }
        >
          {[...Array(8)].map((_, i) => (
            <Card key={i}>
              <CardContent className="p-4">
                <Skeleton
                  className={viewMode === 'grid' ? 'aspect-square mb-4' : 'h-20 w-20 mb-4'}
                />
                <Skeleton className="h-4 w-3/4 mb-2" />
                <Skeleton className="h-3 w-1/2" />
              </CardContent>
            </Card>
          ))}
        </div>
      ) : photosData?.photos?.length ? (
        <>
          {/* 全选复选框 */}
          <div className="flex items-center gap-2 mb-4">
            <Checkbox
              checked={
                selectedPhotos.length === photosData.photos.length && photosData.photos.length > 0
              }
              onCheckedChange={handleSelectAll}
            />
            <span className="text-sm text-muted-foreground">全选</span>
          </div>

          {viewMode === 'grid' ? (
            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
              {photosData.photos.map(photo => (
                <Card key={photo.id} className="group">
                  <CardContent className="p-4">
                    <div className="relative mb-4">
                      <div className="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                        <Camera className="h-12 w-12 text-gray-400" />
                      </div>

                      {/* 复选框 */}
                      <div className="absolute top-2 left-2">
                        <Checkbox
                          checked={selectedPhotos.includes(photo.id)}
                          onCheckedChange={checked =>
                            handleSelectPhoto(photo.id, checked as boolean)
                          }
                          className="bg-white"
                        />
                      </div>

                      {/* 操作按钮 */}
                      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="outline" size="sm" className="h-8 w-8 p-0 bg-white">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => handleViewPhoto(photo)}>
                              <Eye className="h-4 w-4 mr-2" />
                              查看详情
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleEditPhoto(photo)}>
                              <Edit className="h-4 w-4 mr-2" />
                              编辑
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleDeletePhoto(photo.id)}>
                              <Trash className="h-4 w-4 mr-2" />
                              删除
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </div>

                    <div>
                      <h3 className="font-medium truncate mb-2">{photo.title}</h3>
                      <div className="flex items-center justify-between mb-2">
                        <Badge className={getStatusColor(photo.status)}>
                          {getStatusText(photo.status)}
                        </Badge>
                        <span className="text-xs text-muted-foreground">
                          {formatFileSize(photo.fileSize)}
                        </span>
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {new Date(photo.createdAt).toLocaleDateString()}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : (
            <div className="space-y-4">
              {photosData.photos.map(photo => (
                <Card key={photo.id}>
                  <CardContent className="p-4">
                    <div className="flex items-center gap-4">
                      <Checkbox
                        checked={selectedPhotos.includes(photo.id)}
                        onCheckedChange={checked => handleSelectPhoto(photo.id, checked as boolean)}
                      />

                      <div className="h-16 w-16 bg-gray-100 rounded flex items-center justify-center flex-shrink-0">
                        <Camera className="h-8 w-8 text-gray-400" />
                      </div>

                      <div className="flex-1 min-w-0">
                        <h3 className="font-medium truncate">{photo.title}</h3>
                        <p className="text-sm text-muted-foreground truncate">
                          {photo.description}
                        </p>
                        <div className="flex items-center gap-4 mt-2">
                          <Badge className={getStatusColor(photo.status)}>
                            {getStatusText(photo.status)}
                          </Badge>
                          <span className="text-xs text-muted-foreground">
                            {formatFileSize(photo.fileSize)}
                          </span>
                          <span className="text-xs text-muted-foreground">
                            {new Date(photo.createdAt).toLocaleDateString()}
                          </span>
                        </div>
                      </div>

                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="outline" size="sm">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => handleViewPhoto(photo)}>
                            <Eye className="h-4 w-4 mr-2" />
                            查看详情
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleEditPhoto(photo)}>
                            <Edit className="h-4 w-4 mr-2" />
                            编辑
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleDeletePhoto(photo.id)}>
                            <Trash className="h-4 w-4 mr-2" />
                            删除
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}

          {/* 分页 */}
          {photosData.pages > 1 && (
            <div className="flex justify-center mt-8">
              <div className="flex gap-2">
                <Button variant="outline" disabled={page === 1} onClick={() => setPage(page - 1)}>
                  上一页
                </Button>
                <div className="flex items-center gap-2">
                  {[...Array(Math.min(5, photosData.pages))].map((_, i) => {
                    const pageNum = i + 1
                    return (
                      <Button
                        key={pageNum}
                        variant={page === pageNum ? 'default' : 'outline'}
                        size="sm"
                        onClick={() => setPage(pageNum)}
                      >
                        {pageNum}
                      </Button>
                    )
                  })}
                </div>
                <Button
                  variant="outline"
                  disabled={page === photosData.pages}
                  onClick={() => setPage(page + 1)}
                >
                  下一页
                </Button>
              </div>
            </div>
          )}
        </>
      ) : (
        <Card>
          <CardContent className="py-12">
            <div className="text-center">
              <div className="w-32 h-32 mx-auto mb-6 bg-gray-100 rounded-full flex items-center justify-center">
                <ImageIcon className="h-16 w-16 text-gray-300" />
              </div>
              <h3 className="text-xl font-medium mb-2">暂无照片</h3>
              <p className="text-muted-foreground mb-6">开始上传您的第一张照片，构建精美的作品集</p>
              <div className="flex justify-center gap-4">
                <Button onClick={() => navigate('/photos/upload')}>
                  <Plus className="h-4 w-4 mr-2" />
                  上传照片
                </Button>
                <Button variant="outline" onClick={handleRefresh}>
                  <RefreshCw className="h-4 w-4 mr-2" />
                  刷新
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 编辑对话框 */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>编辑照片</DialogTitle>
            <DialogDescription>修改照片的基本信息</DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div>
              <Label htmlFor="edit-title">标题</Label>
              <Input
                id="edit-title"
                value={editForm.title}
                onChange={e => setEditForm({ ...editForm, title: e.target.value })}
                placeholder="照片标题"
              />
            </div>

            <div>
              <Label htmlFor="edit-description">描述</Label>
              <Textarea
                id="edit-description"
                value={editForm.description}
                onChange={e => setEditForm({ ...editForm, description: e.target.value })}
                placeholder="照片描述"
                rows={3}
              />
            </div>

            <div>
              <Label htmlFor="edit-status">状态</Label>
              <Select
                value={editForm.status}
                onValueChange={value => setEditForm({ ...editForm, status: value as any })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="draft">草稿</SelectItem>
                  <SelectItem value="published">已发布</SelectItem>
                  <SelectItem value="archived">已归档</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
              取消
            </Button>
            <Button onClick={handleSubmitEdit} disabled={editPhotoMutation.isPending}>
              {editPhotoMutation.isPending ? '保存中...' : '保存'}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 详情查看对话框 */}
      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>{viewingPhoto?.title}</DialogTitle>
            <DialogDescription>照片详细信息</DialogDescription>
          </DialogHeader>

          {viewingPhoto && (
            <div className="space-y-4 py-4">
              <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
                <ImageIcon className="h-16 w-16 text-gray-400" />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-sm font-medium">状态</Label>
                  <Badge className={getStatusColor(viewingPhoto.status)}>
                    {getStatusText(viewingPhoto.status)}
                  </Badge>
                </div>

                <div>
                  <Label className="text-sm font-medium">文件大小</Label>
                  <p className="text-sm text-muted-foreground">
                    {formatFileSize(viewingPhoto.fileSize)}
                  </p>
                </div>

                <div>
                  <Label className="text-sm font-medium">创建时间</Label>
                  <p className="text-sm text-muted-foreground">
                    {new Date(viewingPhoto.createdAt).toLocaleString()}
                  </p>
                </div>

                <div>
                  <Label className="text-sm font-medium">更新时间</Label>
                  <p className="text-sm text-muted-foreground">
                    {new Date(viewingPhoto.updatedAt).toLocaleString()}
                  </p>
                </div>
              </div>

              {viewingPhoto.description && (
                <div>
                  <Label className="text-sm font-medium">描述</Label>
                  <p className="text-sm text-muted-foreground mt-1">{viewingPhoto.description}</p>
                </div>
              )}

              {viewingPhoto.categories && viewingPhoto.categories.length > 0 && (
                <div>
                  <Label className="text-sm font-medium">分类</Label>
                  <div className="flex flex-wrap gap-2 mt-1">
                    {viewingPhoto.categories.map(category => (
                      <Badge key={category.id} variant="secondary">
                        <Folder className="h-3 w-3 mr-1" />
                        {category.name}
                      </Badge>
                    ))}
                  </div>
                </div>
              )}

              {viewingPhoto.tags && viewingPhoto.tags.length > 0 && (
                <div>
                  <Label className="text-sm font-medium">标签</Label>
                  <div className="flex flex-wrap gap-2 mt-1">
                    {viewingPhoto.tags.map(tag => (
                      <Badge key={tag.id} variant="outline">
                        <Tag className="h-3 w-3 mr-1" />
                        {tag.name}
                      </Badge>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

          <div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => setIsViewDialogOpen(false)}>
              关闭
            </Button>
            <Button onClick={() => viewingPhoto && handleEditPhoto(viewingPhoto)}>
              <Edit className="h-4 w-4 mr-2" />
              编辑
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
