"use client"

import { useState, useEffect, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { X, Upload, Image as ImageIcon, Plus, ZoomIn, Edit2, Video, Play } from "lucide-react"
import { useDialog } from "@/components/ui/alert-dialog-custom"
import imageCompression from "browser-image-compression"
import type { FamilyPhoto } from "@/types/family"
import { format } from "date-fns"
import { zhCN } from "date-fns/locale"

interface PhotoGalleryProps {
  photos?: FamilyPhoto[]
  photoIds?: string[] // 兼容旧格式
  onChange: (photos: FamilyPhoto[]) => Promise<void> | void
  readonly?: boolean
}

export function PhotoGallery({ photos: propPhotos = [], photoIds = [], onChange, readonly = false }: PhotoGalleryProps) {
  const { showAlert, showConfirm, showPrompt } = useDialog()
  const [photos, setPhotos] = useState<FamilyPhoto[]>([])
  const [selectedPhoto, setSelectedPhoto] = useState<FamilyPhoto | null>(null)
  const [isUploading, setIsUploading] = useState(false)
  const [editingPhoto, setEditingPhoto] = useState<FamilyPhoto | null>(null)
  const [editCaption, setEditCaption] = useState("")
  const [pendingVisibilityUrl, setPendingVisibilityUrl] = useState<string | null>(null)

  // 加载照片 - 兼容新旧格式
  useEffect(() => {
    // 优先使用新格式 photos
    if (propPhotos && propPhotos.length > 0) {
      const normalized = propPhotos.map(photo => ({
        ...photo,
        visibleInOverview: photo.visibleInOverview ?? false,
        adminVisibleOverride: photo.adminVisibleOverride ?? true,
      }))
      setPhotos(normalized)
    } else if (photoIds && photoIds.length > 0) {
      // 兼容旧格式：将 string[] 转换为 FamilyPhoto[]
      const convertedPhotos: FamilyPhoto[] = photoIds.map(url => ({
        url,
        uploadedAt: new Date().toISOString(), // 旧数据没有时间，用当前时间
        visibleInOverview: false,
        adminVisibleOverride: true,
      }))
      setPhotos(convertedPhotos)
    } else {
      setPhotos([])
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(propPhotos), JSON.stringify(photoIds)])

  // 判断是否为视频文件
  const isVideoFile = useCallback((url: string) => {
    const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv']
    return videoExtensions.some(ext => url.toLowerCase().endsWith(ext))
  }, [])

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return

    setIsUploading(true)
    try {
      const newPhotos: FamilyPhoto[] = []

      for (const file of Array.from(files)) {
        const isImage = file.type.startsWith('image/')
        const isVideo = file.type.startsWith('video/')
        
        if (!isImage && !isVideo) continue

        let fileToUpload: File | Blob = file

        // 只对图片进行压缩
        if (isImage) {
          const options = {
            maxSizeMB: 2,
            maxWidthOrHeight: 1920,
            useWebWorker: true,
          }
          fileToUpload = await imageCompression(file, options)
        }
        
        // 上传到服务器
        const formData = new FormData()
        // 对于视频文件，保留原始文件名；对于压缩后的图片，使用原始文件名
        formData.append('file', fileToUpload, file.name)
        
        const response = await fetch('/api/upload', {
          method: 'POST',
          body: formData,
        })

        if (!response.ok) {
          const errorData = await response.json()
          throw new Error(errorData.error || '上传失败')
        }

        const { url } = await response.json()
        newPhotos.push({
          url,
          uploadedAt: new Date().toISOString(),
          visibleInOverview: false,
          adminVisibleOverride: true,
        })
      }

      // 更新照片列表
      onChange([...photos, ...newPhotos])
    } catch (error: any) {
      console.error('上传文件失败:', error)
      await showAlert(error.message || '上传文件失败', '错误')
    } finally {
      setIsUploading(false)
      e.target.value = ''
    }
  }

  const handleDelete = async (photo: FamilyPhoto) => {
    const confirmed = await showConfirm('确定要删除这张照片吗？', '删除照片')
    if (confirmed) {
      onChange(photos.filter(p => p.url !== photo.url))
    }
  }

  const handleToggleOverview = async (photo: FamilyPhoto, value: boolean) => {
    if (readonly) return
    setPendingVisibilityUrl(photo.url)
    const previous = photos
    const updatedPhotos = photos.map(p =>
      p.url === photo.url ? { ...p, visibleInOverview: value } : p
    )
    setPhotos(updatedPhotos)
    try {
      await onChange(updatedPhotos)
    } catch (error) {
      console.error('更新照片展示状态失败:', error)
      setPhotos(previous)
      await showAlert('更新照片展示状态失败，请重试', '错误')
    } finally {
      setPendingVisibilityUrl(null)
    }
  }

  const handleEditCaption = (photo: FamilyPhoto) => {
    setEditingPhoto(photo)
    setEditCaption(photo.caption || "")
  }

  const handleSaveCaption = async () => {
    if (!editingPhoto) return
    const updatedPhotos = photos.map(p => 
      p.url === editingPhoto.url 
        ? { ...p, caption: editCaption.trim() || undefined }
        : p
    )
    
    try {
      await onChange(updatedPhotos)
      setEditingPhoto(null)
      setEditCaption("")
    } catch (error) {
      console.error("保存说明失败:", error)
      await showAlert("保存说明失败，请重试", "错误")
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-medium">媒体库 ({photos.length})</h3>
        {!readonly && (
          <label>
            <input
              type="file"
              multiple
              accept="image/*,video/*"
              className="hidden"
              onChange={handleUpload}
              disabled={isUploading}
            />
            <Button
              type="button"
              variant="outline"
              size="sm"
              disabled={isUploading}
              asChild
            >
              <span>
                <Plus className="mr-2 h-4 w-4" />
                {isUploading ? '上传中...' : '添加照片/视频'}
              </span>
            </Button>
          </label>
        )}
      </div>

      {photos.length > 0 ? (
        <div className="space-y-6">
          {/* 按月份分组显示 */}
          {(() => {
            // 按月份分组
            const sortedPhotos = [...photos].sort((a, b) => 
              new Date(b.uploadedAt).getTime() - new Date(a.uploadedAt).getTime()
            )
            const groupedByMonth: Record<string, FamilyPhoto[]> = {}
            sortedPhotos.forEach(photo => {
              const monthKey = format(new Date(photo.uploadedAt), 'yyyy年MM月', { locale: zhCN })
              if (!groupedByMonth[monthKey]) {
                groupedByMonth[monthKey] = []
              }
              groupedByMonth[monthKey].push(photo)
            })
            
            return Object.entries(groupedByMonth).map(([month, monthPhotos]) => (
              <div key={month}>
                <h4 className="text-sm font-medium text-muted-foreground mb-3 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-primary"></span>
                  {month}
                  <span className="text-xs text-muted-foreground/70">({monthPhotos.length})</span>
                </h4>
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                  {monthPhotos.map((photo, index) => {
                    const isVideo = isVideoFile(photo.url)
                    return (
                      <div key={photo.url + index} className="relative group">
                        <div className="aspect-square">
                          {isVideo ? (
                            <div 
                              className="w-full h-full bg-black rounded-t-lg border border-border cursor-pointer hover:opacity-90 transition-opacity flex items-center justify-center relative"
                              onClick={() => setSelectedPhoto(photo)}
                            >
                              <video
                                src={photo.url}
                                className="w-full h-full object-cover rounded-t-lg"
                                muted
                                preload="metadata"
                              />
                              <div className="absolute inset-0 flex items-center justify-center bg-black/30">
                                <div className="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center">
                                  <Play className="h-6 w-6 text-black ml-1" />
                                </div>
                              </div>
                              <div className="absolute top-2 left-2 bg-black/70 text-white text-xs px-2 py-1 rounded flex items-center gap-1">
                                <Video className="h-3 w-3" />
                                视频
                              </div>
                            </div>
                          ) : (
                            <img
                              src={photo.url}
                              alt={photo.caption || "家族照片"}
                              className="w-full h-full object-cover rounded-t-lg border border-border cursor-pointer hover:opacity-90 transition-opacity"
                              onClick={() => setSelectedPhoto(photo)}
                            />
                          )}
                        </div>
                        {/* 媒体信息区域 */}
                        <div className="p-2 bg-muted/50 rounded-b-lg border border-t-0 border-border text-xs">
                          <div className="text-muted-foreground">
                            {format(new Date(photo.uploadedAt), 'MM-dd HH:mm', { locale: zhCN })}
                          </div>
                          {photo.caption && (
                            <div className="text-foreground mt-1 line-clamp-2">{photo.caption}</div>
                          )}
                          <div className="mt-2 flex items-center justify-between gap-2 text-[11px] text-muted-foreground">
                            <span>展示到总览</span>
                            <Switch
                              checked={photo.visibleInOverview ?? false}
                              onCheckedChange={(checked) => handleToggleOverview(photo, checked)}
                              disabled={readonly || pendingVisibilityUrl === photo.url}
                            />
                          </div>
                        </div>
                        {/* 操作按钮 */}
                        {!readonly && (
                          <>
                            <Button
                              type="button"
                              variant="destructive"
                              size="icon"
                              className="absolute top-2 right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
                              onClick={() => handleDelete(photo)}
                            >
                              <X className="h-3 w-3" />
                            </Button>
                            <Button
                              type="button"
                              variant="secondary"
                              size="icon"
                              className="absolute top-2 right-10 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
                              onClick={() => handleEditCaption(photo)}
                              title="编辑说明"
                            >
                              <Edit2 className="h-3 w-3" />
                            </Button>
                          </>
                        )}
                        <Button
                          type="button"
                          variant="secondary"
                          size="icon"
                          className="absolute bottom-12 right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
                          onClick={() => setSelectedPhoto(photo)}
                        >
                          {isVideo ? <Play className="h-3 w-3" /> : <ZoomIn className="h-3 w-3" />}
                        </Button>
                      </div>
                    )
                  })}
                </div>
              </div>
            ))
          })()}
        </div>
      ) : (
        <div className="text-center py-8 text-muted-foreground text-sm border border-dashed rounded-lg">
          暂无照片或视频
        </div>
      )}

      {/* 媒体预览对话框 */}
      <Dialog open={!!selectedPhoto} onOpenChange={() => setSelectedPhoto(null)}>
        <DialogContent className="max-w-4xl" aria-describedby="photo-preview-desc">
          <DialogHeader>
            <DialogTitle>
              {selectedPhoto?.caption || (selectedPhoto && isVideoFile(selectedPhoto.url) ? "视频预览" : "照片预览")}
            </DialogTitle>
            <DialogDescription id="photo-preview-desc" className="sr-only">
              家族媒体预览弹窗，可查看大图或播放视频
            </DialogDescription>
          </DialogHeader>
          {selectedPhoto && (
            <div className="space-y-2">
              {isVideoFile(selectedPhoto.url) ? (
                <video
                  src={selectedPhoto.url}
                  controls
                  autoPlay
                  className="w-full h-auto max-h-[70vh] object-contain bg-black rounded-lg"
                />
              ) : (
                <img
                  src={selectedPhoto.url}
                  alt={selectedPhoto.caption || "照片预览"}
                  className="w-full h-auto max-h-[70vh] object-contain"
                />
              )}
              <div className="text-sm text-muted-foreground">
                上传于 {format(new Date(selectedPhoto.uploadedAt), 'yyyy年MM月dd日', { locale: zhCN })}
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 编辑说明对话框 */}
      <Dialog open={!!editingPhoto} onOpenChange={() => setEditingPhoto(null)}>
        <DialogContent aria-describedby="photo-edit-desc">
          <DialogHeader>
            <DialogTitle>编辑照片说明</DialogTitle>
            <DialogDescription id="photo-edit-desc" className="sr-only">
              修改当前照片的备注文字并保存
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="caption">照片说明（选填）</Label>
              <Input
                id="caption"
                value={editCaption}
                onChange={(e) => setEditCaption(e.target.value)}
                placeholder="输入照片说明..."
                maxLength={200}
              />
              <p className="text-xs text-muted-foreground">{editCaption.length}/200</p>
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setEditingPhoto(null)}>
                取消
              </Button>
              <Button onClick={handleSaveCaption}>
                保存
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}