'use client'

import { useEffect, useMemo, useState } from 'react'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { WxUserDetailResponse } from '@/types'

interface WxUserDetailDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  user: WxUserDetailResponse | null | undefined
  isSaving?: boolean
  onSave: (levelIds: string[]) => Promise<void>
  onClearAll: () => Promise<void>
}

export function WxUserDetailDialog({
  open,
  onOpenChange,
  user,
  isSaving = false,
  onSave,
  onClearAll,
}: WxUserDetailDialogProps) {
  const [selectedLevelIds, setSelectedLevelIds] = useState<Set<string>>(new Set())
  const [keyword, setKeyword] = useState('')

  useEffect(() => {
    if (!open || !user) {
      setSelectedLevelIds(new Set())
      setKeyword('')
      return
    }

    setSelectedLevelIds(
      new Set(
        user.assignedLevels
          .filter((level) => level.completed)
          .map((level) => level.id)
      )
    )
  }, [open, user])

  const filteredLevels = useMemo(() => {
    if (!user) return []

    const search = keyword.trim().toLowerCase()
    if (!search) return user.assignedLevels

    return user.assignedLevels.filter((level) => {
      return (
        String(level.sortOrder).includes(search) ||
        level.answer.toLowerCase().includes(search) ||
        level.id.toLowerCase().includes(search)
      )
    })
  }, [keyword, user])

  const selectedCount = selectedLevelIds.size
  const totalLevels = user?.assignedLevels.length || 0
  const completedCount = user?.assignedLevels.filter((level) => level.completed).length || 0
  const hasChanges = useMemo(() => {
    if (!user) return false

    const original = new Set(
      user.assignedLevels.filter((level) => level.completed).map((level) => level.id)
    )

    if (original.size !== selectedLevelIds.size) return true

    for (const id of Array.from(selectedLevelIds)) {
      if (!original.has(id)) return true
    }

    return false
  }, [selectedLevelIds, user])

  if (!user) return null

  const toggleLevel = (levelId: string, checked: boolean) => {
    const next = new Set(selectedLevelIds)

    if (checked) {
      next.add(levelId)
    } else {
      next.delete(levelId)
    }

    setSelectedLevelIds(next)
  }

  const handleSelectAllVisible = () => {
    const next = new Set(selectedLevelIds)

    for (const level of filteredLevels) {
      next.add(level.id)
    }

    setSelectedLevelIds(next)
  }

  const handleClearVisible = () => {
    const next = new Set(selectedLevelIds)

    for (const level of filteredLevels) {
      next.delete(level.id)
    }

    setSelectedLevelIds(next)
  }

  const handleSave = async () => {
    await onSave(Array.from(selectedLevelIds))
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl h-[85vh] overflow-hidden p-0">
        <div className="grid h-full md:grid-cols-[320px_1fr]">
          <div className="border-b bg-slate-50 p-6 md:border-b-0 md:border-r">
            <DialogHeader className="text-left">
              <DialogTitle>用户通关配置</DialogTitle>
              <DialogDescription>查看用户信息，并直接维护已经通关的关卡集合。</DialogDescription>
            </DialogHeader>

            <div className="mt-6 space-y-5">
              <div className="flex items-center gap-4">
                <div className="relative h-16 w-16 overflow-hidden rounded-full bg-slate-200">
                  {user.avatarUrl ? (
                    <Image
                      src={user.avatarUrl}
                      alt={user.nickname || 'User'}
                      fill
                      sizes="64px"
                      className="object-cover"
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center text-xl font-semibold text-slate-600">
                      {user.nickname?.[0]?.toUpperCase() || 'U'}
                    </div>
                  )}
                </div>

                <div className="min-w-0">
                  <h2 className="truncate text-xl font-semibold text-slate-900">
                    {user.nickname || '匿名用户'}
                  </h2>
                  <p className="mt-1 text-sm text-slate-500">
                    注册于 {new Date(user.createdAt).toLocaleString('zh-CN')}
                  </p>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div className="rounded-xl border bg-white p-4">
                  <p className="text-xs uppercase tracking-wide text-slate-500">已通关</p>
                  <p className="mt-2 text-2xl font-semibold text-emerald-600">{completedCount}</p>
                </div>
                <div className="rounded-xl border bg-white p-4">
                  <p className="text-xs uppercase tracking-wide text-slate-500">当前选中</p>
                  <p className="mt-2 text-2xl font-semibold text-sky-600">{selectedCount}</p>
                </div>
              </div>

              <div className="space-y-3 rounded-xl border bg-white p-4">
                <div>
                  <p className="text-xs uppercase tracking-wide text-slate-500">OpenID</p>
                  <code className="mt-2 block break-all rounded-md bg-slate-100 p-3 text-xs text-slate-700">
                    {user.openid}
                  </code>
                </div>

                <div className="grid grid-cols-2 gap-3 text-sm text-slate-600">
                  <div>
                    <p className="text-xs uppercase tracking-wide text-slate-500">体力</p>
                    <p className="mt-1 font-medium text-slate-900">{user.stamina}</p>
                  </div>
                  <div>
                    <p className="text-xs uppercase tracking-wide text-slate-500">关卡总数</p>
                    <p className="mt-1 font-medium text-slate-900">{totalLevels}</p>
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <Button
                  className="w-full"
                  onClick={handleSave}
                  disabled={isSaving || !hasChanges}
                >
                  {isSaving ? '保存中...' : '保存通关配置'}
                </Button>
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={onClearAll}
                  disabled={isSaving || completedCount === 0}
                >
                  一键清空全部通关
                </Button>
              </div>
            </div>
          </div>

          <div className="flex min-h-0 flex-col p-6">
            <div className="flex flex-col gap-3 border-b pb-4 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <h3 className="text-base font-semibold text-slate-900">关卡列表</h3>
                <p className="text-sm text-slate-500">勾选后保存，即可定义该用户已通关哪些关卡。</p>
              </div>
              <Input
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                placeholder="搜索关卡序号、答案或 ID"
                className="sm:max-w-xs"
              />
            </div>

            <div className="flex items-center gap-2 py-4">
              <Button variant="outline" size="sm" onClick={handleSelectAllVisible} disabled={filteredLevels.length === 0 || isSaving}>
                全选当前结果
              </Button>
              <Button variant="outline" size="sm" onClick={handleClearVisible} disabled={filteredLevels.length === 0 || isSaving}>
                清空当前结果
              </Button>
            </div>

            <div className="min-h-0 flex-1 overflow-auto rounded-xl border">
              {filteredLevels.length === 0 ? (
                <div className="flex h-full items-center justify-center p-8 text-sm text-slate-500">
                  没有匹配的关卡
                </div>
              ) : (
                <table className="min-w-full divide-y divide-slate-200 text-sm">
                  <thead className="sticky top-0 bg-slate-50">
                    <tr>
                      <th className="w-14 px-4 py-3 text-left font-medium text-slate-500">选择</th>
                      <th className="w-24 px-4 py-3 text-left font-medium text-slate-500">序号</th>
                      <th className="px-4 py-3 text-left font-medium text-slate-500">答案</th>
                      <th className="px-4 py-3 text-left font-medium text-slate-500">状态</th>
                      <th className="px-4 py-3 text-left font-medium text-slate-500">通关时间</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 bg-white">
                    {filteredLevels.map((level) => {
                      const checked = selectedLevelIds.has(level.id)

                      return (
                        <tr key={level.id} className={checked ? 'bg-emerald-50/60' : ''}>
                          <td className="px-4 py-3 align-top">
                            <input
                              type="checkbox"
                              checked={checked}
                              onChange={(e) => toggleLevel(level.id, e.target.checked)}
                              disabled={isSaving}
                              className="h-4 w-4 rounded border-slate-300"
                            />
                          </td>
                          <td className="px-4 py-3 align-top font-mono text-slate-500">
                            #{level.sortOrder}
                          </td>
                          <td className="px-4 py-3 align-top">
                            <div className="font-medium text-slate-900">{level.answer}</div>
                            <div className="mt-1 font-mono text-xs text-slate-400">{level.id}</div>
                          </td>
                          <td className="px-4 py-3 align-top">
                            <span
                              className={checked
                                ? 'inline-flex rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700'
                                : 'inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500'}
                            >
                              {checked ? '已通关' : '未通关'}
                            </span>
                          </td>
                          <td className="px-4 py-3 align-top text-slate-500">
                            {level.completedAt
                              ? new Date(level.completedAt).toLocaleString('zh-CN')
                              : '-'}
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              )}
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}