'use client'

import { useState, useRef, useEffect, useMemo } from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Spinner } from '@/components/ui/spinner'
import { FolderOpen, Trash2, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react'
import Image from 'next/image'
import { uploadToCos } from '@/lib/cos-client'
import { apiFetch } from '@/lib/api'

interface BatchImportDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSuccess: () => void
}

type ItemStatus = 'pending' | 'uploading' | 'creating' | 'done' | 'error'

interface ParsedItem {
  id: string // riddle_id 或文件夹名，仅用于 React key
  folderName: string
  // 本地文件引用
  referenceFile?: File
  riddleFile?: File
  // 预览 URL（本地 blob URL）
  referencePreview?: string
  riddlePreview?: string
  // 从 metadata.json 提取
  anchorText: string
  answer: string
  punchline: string
  hint1: string
  hint2: string
  hint3: string
  // 解析警告/错误信息
  parseError?: string
  // 上传/创建过程状态
  status: ItemStatus
  statusMessage?: string
}

interface FileWithPath extends File {
  webkitRelativePath: string
}

interface RiddleMetadata {
  plan?: {
    riddle_id?: string
    anchor_text?: string
    answer?: string
    hints?: string[]
    riddle?: {
      homophone_explanation?: string
    }
  }
}

function truncate(s: string | undefined, max: number): string {
  if (!s) return ''
  return s.length > max ? s.slice(0, max) : s
}

async function parseFolders(files: FileList): Promise<ParsedItem[]> {
  // 按第一层目录名分组
  const groups = new Map<string, FileWithPath[]>()
  for (let i = 0; i < files.length; i += 1) {
    const f = files[i] as FileWithPath
    const rel = f.webkitRelativePath
    if (!rel) continue
    const parts = rel.split('/')
    if (parts.length < 2) continue
    // 用倒数第二层作为关卡目录名：e.g. riddles/68f1.../metadata.json
    // 但通常用户选的根目录就是 riddles，第一层就是关卡目录
    // 我们取「包含 metadata.json 的那个目录」作为分组 key
    const folderKey = parts.slice(0, -1).join('/')
    if (!groups.has(folderKey)) groups.set(folderKey, [])
    groups.get(folderKey)!.push(f)
  }

  const items: ParsedItem[] = []

  for (const [folderKey, groupFiles] of Array.from(groups.entries())) {
    const metadata = groupFiles.find((f) => f.name === 'metadata.json')
    const reference = groupFiles.find((f) => f.name === 'reference.webp')
    const riddle = groupFiles.find((f) => f.name === 'riddle.webp')
    // 只有同时存在 metadata.json + reference.webp + riddle.webp 的目录才视为关卡
    if (!metadata || !reference || !riddle) continue

    const folderName = folderKey.split('/').pop() || folderKey

    const item: ParsedItem = {
      id: folderKey,
      folderName,
      referenceFile: reference,
      riddleFile: riddle,
      referencePreview: URL.createObjectURL(reference),
      riddlePreview: URL.createObjectURL(riddle),
      anchorText: '',
      answer: '',
      punchline: '',
      hint1: '',
      hint2: '',
      hint3: '',
      status: 'pending',
    }

    try {
      const text = await metadata.text()
      const json = JSON.parse(text) as RiddleMetadata
      const plan = json.plan || {}
      item.anchorText = truncate(plan.anchor_text, 500)
      item.answer = (plan.answer || '').trim()
      item.punchline = (plan.riddle?.homophone_explanation || '').trim()
      const hints = Array.isArray(plan.hints) ? plan.hints : []
      item.hint1 = (hints[0] || '').trim()
      item.hint2 = (hints[1] || '').trim()
      item.hint3 = (hints[2] || '').trim()

      if (!item.answer) {
        item.parseError = '未解析到 answer'
      } else if (item.answer.length > 4) {
        item.parseError = `答案超过 4 字（${item.answer.length}）`
      }
    } catch (e) {
      item.parseError = `解析 metadata.json 失败: ${
        e instanceof Error ? e.message : String(e)
      }`
    }

    items.push(item)
  }

  // 稳定排序：按文件夹名
  items.sort((a, b) => a.folderName.localeCompare(b.folderName))
  return items
}

export function BatchImportDialog({
  open,
  onOpenChange,
  onSuccess,
}: BatchImportDialogProps) {
  const folderInputRef = useRef<HTMLInputElement>(null)
  const [items, setItems] = useState<ParsedItem[]>([])
  const [isParsing, setIsParsing] = useState(false)
  const [isRunning, setIsRunning] = useState(false)
  const [globalError, setGlobalError] = useState('')

  // 关闭后清理预览 URL 并重置
  useEffect(() => {
    if (!open) {
      items.forEach((it) => {
        if (it.referencePreview) URL.revokeObjectURL(it.referencePreview)
        if (it.riddlePreview) URL.revokeObjectURL(it.riddlePreview)
      })
      setItems([])
      setGlobalError('')
      setIsRunning(false)
      setIsParsing(false)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open])

  const stats = useMemo(() => {
    const total = items.length
    const done = items.filter((i) => i.status === 'done').length
    const error = items.filter((i) => i.status === 'error').length
    const invalid = items.filter((i) => i.parseError).length
    return { total, done, error, invalid }
  }, [items])

  const canSubmit =
    items.length > 0 &&
    !isRunning &&
    items.some((i) => i.status !== 'done' && !i.parseError)

  const handleSelectFolder = () => {
    folderInputRef.current?.click()
  }

  const handleFolderChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return
    setIsParsing(true)
    setGlobalError('')
    try {
      const parsed = await parseFolders(files)
      if (parsed.length === 0) {
        setGlobalError(
          '未在所选目录中找到任何有效关卡。请确保每个子目录同时包含 metadata.json、reference.webp、riddle.webp'
        )
      }
      setItems(parsed)
    } catch (err) {
      setGlobalError(
        err instanceof Error ? err.message : '解析失败'
      )
    } finally {
      setIsParsing(false)
      // 允许重新选择同一目录
      if (folderInputRef.current) folderInputRef.current.value = ''
    }
  }

  const updateItem = (id: string, patch: Partial<ParsedItem>) => {
    setItems((prev) =>
      prev.map((it) => {
        if (it.id !== id) return it
        const next = { ...it, ...patch }
        // 每次编辑后重新评估答案的校验
        if (patch.answer !== undefined) {
          if (!next.answer) next.parseError = '未填写答案'
          else if (next.answer.length > 4)
            next.parseError = `答案超过 4 字（${next.answer.length}）`
          else next.parseError = undefined
        }
        return next
      })
    )
  }

  const removeItem = (id: string) => {
    setItems((prev) => {
      const target = prev.find((i) => i.id === id)
      if (target) {
        if (target.referencePreview) URL.revokeObjectURL(target.referencePreview)
        if (target.riddlePreview) URL.revokeObjectURL(target.riddlePreview)
      }
      return prev.filter((i) => i.id !== id)
    })
  }

  const handleRun = async () => {
    setIsRunning(true)
    setGlobalError('')

    // 使用函数式 setItems 取到最新列表
    const snapshot = items
    for (const it of snapshot) {
      if (it.status === 'done') continue
      if (it.parseError) continue
      if (!it.referenceFile || !it.riddleFile) continue

      try {
        updateItem(it.id, { status: 'uploading', statusMessage: '上传图片…' })

        const [image1Url, image2Url] = await Promise.all([
          uploadToCos(it.referenceFile, it.referenceFile.name),
          uploadToCos(it.riddleFile, it.riddleFile.name),
        ])

        updateItem(it.id, { status: 'creating', statusMessage: '创建关卡…' })

        const payload = {
          image1Url,
          image1Description: it.anchorText || '',
          image2Url,
          image2Description: '',
          answer: it.answer,
          punchline: it.punchline || '',
          hint1: it.hint1 || '',
          hint2: it.hint2 || '',
          hint3: it.hint3 || '',
        }

        const res = await apiFetch('/api/levels', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        })
        if (!res.ok) {
          const err = await res.json().catch(() => ({}))
          throw new Error(err.error || `HTTP ${res.status}`)
        }
        updateItem(it.id, { status: 'done', statusMessage: '已创建' })
      } catch (e) {
        updateItem(it.id, {
          status: 'error',
          statusMessage: e instanceof Error ? e.message : '失败',
        })
      }
    }

    setIsRunning(false)
    // 触发列表刷新
    onSuccess()
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle>批量导入关卡</DialogTitle>
          <DialogDescription>
            选择包含多个关卡子文件夹的目录。每个子文件夹须含 metadata.json、
            reference.webp、riddle.webp。
          </DialogDescription>
        </DialogHeader>

        {globalError && (
          <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
            {globalError}
          </div>
        )}

        <div className="flex items-center gap-3">
          <Button
            type="button"
            variant="outline"
            onClick={handleSelectFolder}
            disabled={isParsing || isRunning}
          >
            <FolderOpen className="h-4 w-4 mr-2" />
            {items.length > 0 ? '重新选择目录' : '选择目录'}
          </Button>
          {isParsing && (
            <span className="flex items-center gap-2 text-sm text-muted-foreground">
              <Spinner size="sm" /> 解析中…
            </span>
          )}
          {items.length > 0 && (
            <span className="text-sm text-muted-foreground">
              共 {stats.total} 个关卡 · 成功 {stats.done} · 失败 {stats.error}
              {stats.invalid > 0 && ` · 待修正 ${stats.invalid}`}
            </span>
          )}

          {/* 隐藏的文件夹选择 input：webkitdirectory 让浏览器选择目录 */}
          <input
            ref={folderInputRef}
            type="file"
            className="hidden"
            multiple
            onChange={handleFolderChange}
            {...({
              webkitdirectory: '',
              directory: '',
            } as Record<string, string>)}
          />
        </div>

        <div className="flex-1 overflow-y-auto -mx-6 px-6">
          {items.length === 0 ? (
            <div className="text-center py-16 text-muted-foreground text-sm">
              {isParsing ? '解析中…' : '尚未选择目录'}
            </div>
          ) : (
            <div className="space-y-4">
              {items.map((it, idx) => (
                <ItemCard
                  key={it.id}
                  index={idx + 1}
                  item={it}
                  disabled={isRunning}
                  onChange={(patch) => updateItem(it.id, patch)}
                  onRemove={() => removeItem(it.id)}
                />
              ))}
            </div>
          )}
        </div>

        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isRunning}
          >
            {stats.done > 0 ? '关闭' : '取消'}
          </Button>
          <Button type="button" onClick={handleRun} disabled={!canSubmit}>
            {isRunning ? (
              <>
                <Spinner size="sm" className="mr-2" />
                创建中…
              </>
            ) : (
              `确认创建 (${items.filter((i) => i.status !== 'done' && !i.parseError).length})`
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

interface ItemCardProps {
  index: number
  item: ParsedItem
  disabled: boolean
  onChange: (patch: Partial<ParsedItem>) => void
  onRemove: () => void
}

function ItemCard({ index, item, disabled, onChange, onRemove }: ItemCardProps) {
  const statusNode = (() => {
    switch (item.status) {
      case 'uploading':
      case 'creating':
        return (
          <span className="flex items-center gap-1 text-blue-600 text-xs">
            <Spinner size="sm" /> {item.statusMessage}
          </span>
        )
      case 'done':
        return (
          <span className="flex items-center gap-1 text-green-600 text-xs">
            <CheckCircle2 className="h-4 w-4" /> 已创建
          </span>
        )
      case 'error':
        return (
          <span className="flex items-center gap-1 text-red-600 text-xs">
            <XCircle className="h-4 w-4" /> {item.statusMessage}
          </span>
        )
      default:
        if (item.parseError) {
          return (
            <span className="flex items-center gap-1 text-amber-600 text-xs">
              <AlertTriangle className="h-4 w-4" /> {item.parseError}
            </span>
          )
        }
        return (
          <span className="text-muted-foreground text-xs">待创建</span>
        )
    }
  })()

  return (
    <div className="border rounded-lg p-4 space-y-3 bg-card">
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-3 min-w-0">
          <span className="text-sm font-medium text-muted-foreground">
            #{index}
          </span>
          <span className="text-sm truncate" title={item.folderName}>
            {item.folderName}
          </span>
          {statusNode}
        </div>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className="h-8 w-8 text-red-600 hover:bg-red-50"
          onClick={onRemove}
          disabled={disabled || item.status === 'done'}
        >
          <Trash2 className="h-4 w-4" />
        </Button>
      </div>

      <div className="grid grid-cols-[auto,1fr] gap-4">
        {/* 左侧：图片预览 */}
        <div className="flex gap-2">
          <div className="space-y-1">
            <div className="relative w-32 h-32 rounded border bg-gray-50 overflow-hidden">
              {item.referencePreview && (
                <Image
                  src={item.referencePreview}
                  alt="图片1"
                  fill
                  className="object-contain"
                  sizes="128px"
                  unoptimized
                />
              )}
            </div>
            <p className="text-[11px] text-center text-muted-foreground">图1 · reference</p>
          </div>
          <div className="space-y-1">
            <div className="relative w-32 h-32 rounded border bg-gray-50 overflow-hidden">
              {item.riddlePreview && (
                <Image
                  src={item.riddlePreview}
                  alt="图片2"
                  fill
                  className="object-contain"
                  sizes="128px"
                  unoptimized
                />
              )}
            </div>
            <p className="text-[11px] text-center text-muted-foreground">图2 · riddle</p>
          </div>
        </div>

        {/* 右侧：可编辑字段 */}
        <div className="grid grid-cols-2 gap-3">
          <div className="col-span-2 space-y-1">
            <Label className="text-xs">图片1 描述（anchor_text）</Label>
            <Textarea
              value={item.anchorText}
              onChange={(e) => onChange({ anchorText: e.target.value })}
              rows={2}
              disabled={disabled}
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">答案 *</Label>
            <Input
              value={item.answer}
              onChange={(e) => onChange({ answer: e.target.value })}
              maxLength={4}
              disabled={disabled}
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">谐音梗说明</Label>
            <Input
              value={item.punchline}
              onChange={(e) => onChange({ punchline: e.target.value })}
              disabled={disabled}
            />
          </div>

          <div className="col-span-2 grid grid-cols-3 gap-2">
            <div className="space-y-1">
              <Label className="text-xs">提示 1</Label>
              <Input
                value={item.hint1}
                onChange={(e) => onChange({ hint1: e.target.value })}
                disabled={disabled}
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">提示 2</Label>
              <Input
                value={item.hint2}
                onChange={(e) => onChange({ hint2: e.target.value })}
                disabled={disabled}
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">提示 3</Label>
              <Input
                value={item.hint3}
                onChange={(e) => onChange({ hint3: e.target.value })}
                disabled={disabled}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}