"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { 
  User, Phone, Calendar, Tag, History, RefreshCw, 
  Link2, BookOpen, ShoppingBag, Users, MessageCircle,
  Clock, CheckCircle, XCircle, Save, X
} from "lucide-react"

interface UserDetailModalProps {
  open: boolean
  onClose: () => void
  userId: string | null
  onUserUpdated?: () => void
}

interface UserDetail {
  id: string
  phone?: string
  nickname: string
  avatar?: string
  wechat_id?: string
  open_id?: string
  referral_code: string
  referred_by?: string
  has_full_book: boolean
  is_admin: boolean
  earnings: number
  pending_earnings: number
  referral_count: number
  created_at: string
  updated_at?: string
  // 标签相关
  tags?: string[]
  ckb_tags?: string[]
  source_tags?: string[]
  merged_tags?: string[]
  // 存客宝同步
  ckb_user_id?: string
  ckb_synced_at?: string
  // 来源信息
  source?: string
  created_by?: string
  matched_by?: string
}

interface UserTrack {
  id: string
  action: string
  actionLabel: string
  target?: string
  chapterTitle?: string
  extraData?: any
  createdAt: string
  timeAgo: string
}

export function UserDetailModal({ open, onClose, userId, onUserUpdated }: UserDetailModalProps) {
  const [user, setUser] = useState<UserDetail | null>(null)
  const [tracks, setTracks] = useState<UserTrack[]>([])
  const [referrals, setReferrals] = useState<any[]>([])
  const [loading, setLoading] = useState(false)
  const [syncing, setSyncing] = useState(false)
  const [saving, setSaving] = useState(false)
  const [activeTab, setActiveTab] = useState("info")
  
  // 可编辑字段
  const [editPhone, setEditPhone] = useState("")
  const [editNickname, setEditNickname] = useState("")
  const [editTags, setEditTags] = useState<string[]>([])
  const [newTag, setNewTag] = useState("")

  // 加载用户详情
  useEffect(() => {
    if (open && userId) {
      loadUserDetail()
    }
  }, [open, userId])

  const loadUserDetail = async () => {
    if (!userId) return
    
    setLoading(true)
    try {
      // 加载用户基础信息
      const userRes = await fetch(`/api/db/users?id=${userId}`)
      const userData = await userRes.json()
      
      if (userData.success && userData.user) {
        const u = userData.user
        setUser(u)
        setEditPhone(u.phone || "")
        setEditNickname(u.nickname || "")
        setEditTags(u.tags ? JSON.parse(u.tags) : [])
      }
      
      // 加载行为轨迹
      const trackRes = await fetch(`/api/user/track?userId=${userId}&limit=50`)
      const trackData = await trackRes.json()
      if (trackData.success) {
        setTracks(trackData.tracks || [])
      }
      
      // 加载绑定关系
      const refRes = await fetch(`/api/db/users/referrals?userId=${userId}`)
      const refData = await refRes.json()
      if (refData.success) {
        setReferrals(refData.referrals || [])
      }
      
    } catch (error) {
      console.error("Load user detail error:", error)
    } finally {
      setLoading(false)
    }
  }

  // 同步存客宝数据
  const handleSyncCKB = async () => {
    if (!user?.phone) {
      alert("用户未绑定手机号，无法同步")
      return
    }
    
    setSyncing(true)
    try {
      const res = await fetch("/api/ckb/sync", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          action: "full_sync", 
          phone: user.phone,
          userId: user.id
        })
      })
      
      const data = await res.json()
      if (data.success) {
        alert("同步成功")
        loadUserDetail()
      } else {
        alert("同步失败: " + (data.error || "未知错误"))
      }
    } catch (error) {
      console.error("Sync CKB error:", error)
      alert("同步失败")
    } finally {
      setSyncing(false)
    }
  }

  // 保存用户信息
  const handleSave = async () => {
    if (!user) return
    
    setSaving(true)
    try {
      const res = await fetch("/api/db/users", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: user.id,
          phone: editPhone || undefined,
          nickname: editNickname || undefined,
          tags: JSON.stringify(editTags)
        })
      })
      
      const data = await res.json()
      if (data.success) {
        alert("保存成功")
        loadUserDetail()
        onUserUpdated?.()
      } else {
        alert("保存失败: " + (data.error || "未知错误"))
      }
    } catch (error) {
      console.error("Save user error:", error)
      alert("保存失败")
    } finally {
      setSaving(false)
    }
  }

  // 添加标签
  const addTag = () => {
    if (newTag && !editTags.includes(newTag)) {
      setEditTags([...editTags, newTag])
      setNewTag("")
    }
  }

  // 移除标签
  const removeTag = (tag: string) => {
    setEditTags(editTags.filter(t => t !== tag))
  }

  // 获取行为图标
  const getActionIcon = (action: string) => {
    const icons: Record<string, any> = {
      'view_chapter': BookOpen,
      'purchase': ShoppingBag,
      'match': Users,
      'login': User,
      'register': User,
      'share': Link2,
      'bind_phone': Phone,
      'bind_wechat': MessageCircle,
    }
    const Icon = icons[action] || History
    return <Icon className="w-4 h-4" />
  }

  if (!open) return null

  return (
    <Dialog open={open} onOpenChange={() => onClose()}>
      <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-4xl max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-white flex items-center gap-2">
            <User className="w-5 h-5 text-[#38bdac]" />
            用户详情
            {user?.phone && (
              <Badge className="bg-green-500/20 text-green-400 border-0 ml-2">
                已绑定手机
              </Badge>
            )}
          </DialogTitle>
        </DialogHeader>
        
        {loading ? (
          <div className="flex items-center justify-center py-20">
            <RefreshCw className="w-6 h-6 text-[#38bdac] animate-spin" />
            <span className="ml-2 text-gray-400">加载中...</span>
          </div>
        ) : user ? (
          <div className="flex flex-col h-[70vh]">
            {/* 用户头部信息 */}
            <div className="flex items-center gap-4 p-4 bg-[#0a1628] rounded-lg mb-4">
              <div className="w-16 h-16 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-2xl text-[#38bdac]">
                {user.avatar ? (
                  <img src={user.avatar} className="w-full h-full rounded-full object-cover" alt="" />
                ) : (
                  user.nickname?.charAt(0) || "?"
                )}
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h3 className="text-lg font-bold text-white">{user.nickname}</h3>
                  {user.is_admin && (
                    <Badge className="bg-purple-500/20 text-purple-400 border-0">管理员</Badge>
                  )}
                  {user.has_full_book && (
                    <Badge className="bg-green-500/20 text-green-400 border-0">全书已购</Badge>
                  )}
                </div>
                <p className="text-gray-400 text-sm mt-1">
                  {user.phone ? `📱 ${user.phone}` : "未绑定手机"} 
                  {user.wechat_id && ` · 💬 ${user.wechat_id}`}
                </p>
                <p className="text-gray-500 text-xs mt-1">
                  ID: {user.id} · 推广码: {user.referral_code}
                </p>
              </div>
              <div className="text-right">
                <p className="text-[#38bdac] font-bold">¥{(user.earnings || 0).toFixed(2)}</p>
                <p className="text-gray-500 text-xs">累计收益</p>
              </div>
            </div>

            {/* 标签页 */}
            <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col overflow-hidden">
              <TabsList className="bg-[#0a1628] border border-gray-700/50 p-1 mb-4">
                <TabsTrigger value="info" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac]">
                  基础信息
                </TabsTrigger>
                <TabsTrigger value="tags" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac]">
                  标签体系
                </TabsTrigger>
                <TabsTrigger value="tracks" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac]">
                  行为轨迹
                </TabsTrigger>
                <TabsTrigger value="relations" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac]">
                  关系链路
                </TabsTrigger>
              </TabsList>

              {/* 基础信息 */}
              <TabsContent value="info" className="flex-1 overflow-auto space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label className="text-gray-300">手机号（唯一标识）</Label>
                    <Input
                      className="bg-[#0a1628] border-gray-700 text-white"
                      placeholder="输入手机号"
                      value={editPhone}
                      onChange={(e) => setEditPhone(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-gray-300">昵称</Label>
                    <Input
                      className="bg-[#0a1628] border-gray-700 text-white"
                      placeholder="输入昵称"
                      value={editNickname}
                      onChange={(e) => setEditNickname(e.target.value)}
                    />
                  </div>
                </div>

                <div className="grid grid-cols-3 gap-4">
                  <div className="p-4 bg-[#0a1628] rounded-lg">
                    <p className="text-gray-400 text-sm">推荐人数</p>
                    <p className="text-2xl font-bold text-white">{user.referral_count || 0}</p>
                  </div>
                  <div className="p-4 bg-[#0a1628] rounded-lg">
                    <p className="text-gray-400 text-sm">待提现</p>
                    <p className="text-2xl font-bold text-yellow-400">¥{(user.pending_earnings || 0).toFixed(2)}</p>
                  </div>
                  <div className="p-4 bg-[#0a1628] rounded-lg">
                    <p className="text-gray-400 text-sm">创建时间</p>
                    <p className="text-sm text-white">{user.created_at ? new Date(user.created_at).toLocaleDateString() : '-'}</p>
                  </div>
                </div>

                {/* 存客宝同步状态 */}
                <div className="p-4 bg-[#0a1628] rounded-lg">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-2">
                      <Link2 className="w-4 h-4 text-[#38bdac]" />
                      <span className="text-white font-medium">存客宝同步</span>
                    </div>
                    <Button
                      size="sm"
                      onClick={handleSyncCKB}
                      disabled={syncing || !user.phone}
                      className="bg-[#38bdac] hover:bg-[#2da396] text-white"
                    >
                      {syncing ? (
                        <><RefreshCw className="w-4 h-4 mr-1 animate-spin" /> 同步中...</>
                      ) : (
                        <><RefreshCw className="w-4 h-4 mr-1" /> 同步数据</>
                      )}
                    </Button>
                  </div>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-gray-500">同步状态：</span>
                      {user.ckb_synced_at ? (
                        <Badge className="bg-green-500/20 text-green-400 border-0 ml-1">已同步</Badge>
                      ) : (
                        <Badge className="bg-gray-500/20 text-gray-400 border-0 ml-1">未同步</Badge>
                      )}
                    </div>
                    <div>
                      <span className="text-gray-500">最后同步：</span>
                      <span className="text-gray-300 ml-1">
                        {user.ckb_synced_at ? new Date(user.ckb_synced_at).toLocaleString() : '-'}
                      </span>
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* 标签体系 */}
              <TabsContent value="tags" className="flex-1 overflow-auto space-y-4">
                {/* 系统标签 */}
                <div className="p-4 bg-[#0a1628] rounded-lg">
                  <div className="flex items-center gap-2 mb-3">
                    <Tag className="w-4 h-4 text-[#38bdac]" />
                    <span className="text-white font-medium">系统标签</span>
                  </div>
                  <div className="flex flex-wrap gap-2 mb-3">
                    {editTags.map((tag, i) => (
                      <Badge key={i} className="bg-[#38bdac]/20 text-[#38bdac] border-0 pr-1">
                        {tag}
                        <button onClick={() => removeTag(tag)} className="ml-1 hover:text-red-400">
                          <X className="w-3 h-3" />
                        </button>
                      </Badge>
                    ))}
                    {editTags.length === 0 && <span className="text-gray-500 text-sm">暂无标签</span>}
                  </div>
                  <div className="flex gap-2">
                    <Input
                      className="bg-[#162840] border-gray-700 text-white flex-1"
                      placeholder="添加新标签"
                      value={newTag}
                      onChange={(e) => setNewTag(e.target.value)}
                      onKeyDown={(e) => e.key === 'Enter' && addTag()}
                    />
                    <Button onClick={addTag} className="bg-[#38bdac] hover:bg-[#2da396]">添加</Button>
                  </div>
                </div>

                {/* 存客宝标签 */}
                <div className="p-4 bg-[#0a1628] rounded-lg">
                  <div className="flex items-center gap-2 mb-3">
                    <Link2 className="w-4 h-4 text-blue-400" />
                    <span className="text-white font-medium">存客宝标签</span>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {(user.ckb_tags ? JSON.parse(user.ckb_tags) : []).map((tag: string, i: number) => (
                      <Badge key={i} className="bg-blue-500/20 text-blue-400 border-0">{tag}</Badge>
                    ))}
                    {(!user.ckb_tags || JSON.parse(user.ckb_tags).length === 0) && (
                      <span className="text-gray-500 text-sm">同步后显示</span>
                    )}
                  </div>
                </div>

                {/* 来源标签 */}
                <div className="p-4 bg-[#0a1628] rounded-lg">
                  <div className="flex items-center gap-2 mb-3">
                    <Users className="w-4 h-4 text-orange-400" />
                    <span className="text-white font-medium">来源标签</span>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Badge className="bg-orange-500/20 text-orange-400 border-0">
                      {user.open_id ? '微信小程序' : '手动创建'}
                    </Badge>
                    {user.referred_by && (
                      <Badge className="bg-purple-500/20 text-purple-400 border-0">
                        推荐来源: {user.referred_by.slice(0, 8)}
                      </Badge>
                    )}
                  </div>
                </div>
              </TabsContent>

              {/* 行为轨迹 */}
              <TabsContent value="tracks" className="flex-1 overflow-auto">
                <div className="space-y-2">
                  {tracks.length > 0 ? (
                    tracks.map((track) => (
                      <div key={track.id} className="flex items-start gap-3 p-3 bg-[#0a1628] rounded-lg">
                        <div className="w-8 h-8 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-[#38bdac]">
                          {getActionIcon(track.action)}
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <span className="text-white font-medium">{track.actionLabel}</span>
                            {track.chapterTitle && (
                              <span className="text-gray-400 text-sm">- {track.chapterTitle}</span>
                            )}
                          </div>
                          <p className="text-gray-500 text-xs mt-1">
                            <Clock className="w-3 h-3 inline mr-1" />
                            {track.timeAgo} · {new Date(track.createdAt).toLocaleString()}
                          </p>
                        </div>
                      </div>
                    ))
                  ) : (
                    <div className="text-center py-12 text-gray-500">
                      <History className="w-12 h-12 mx-auto mb-3 opacity-30" />
                      <p>暂无行为记录</p>
                    </div>
                  )}
                </div>
              </TabsContent>

              {/* 关系链路 */}
              <TabsContent value="relations" className="flex-1 overflow-auto space-y-4">
                {/* 来源信息 */}
                <div className="p-4 bg-[#0a1628] rounded-lg">
                  <div className="flex items-center gap-2 mb-3">
                    <Users className="w-4 h-4 text-[#38bdac]" />
                    <span className="text-white font-medium">来源追溯</span>
                  </div>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-500">创建方式：</span>
                      <span className="text-gray-300">{user.open_id ? '微信授权' : '手动创建'}</span>
                    </div>
                    {user.referred_by && (
                      <div className="flex justify-between">
                        <span className="text-gray-500">推荐人：</span>
                        <span className="text-[#38bdac]">{user.referred_by}</span>
                      </div>
                    )}
                    <div className="flex justify-between">
                      <span className="text-gray-500">创建时间：</span>
                      <span className="text-gray-300">
                        {user.created_at ? new Date(user.created_at).toLocaleString() : '-'}
                      </span>
                    </div>
                  </div>
                </div>

                {/* 推荐的用户 */}
                <div className="p-4 bg-[#0a1628] rounded-lg">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-2">
                      <Link2 className="w-4 h-4 text-[#38bdac]" />
                      <span className="text-white font-medium">推荐的用户</span>
                    </div>
                    <Badge className="bg-[#38bdac]/20 text-[#38bdac] border-0">
                      共 {referrals.length} 人
                    </Badge>
                  </div>
                  <div className="space-y-2 max-h-[200px] overflow-y-auto">
                    {referrals.length > 0 ? (
                      referrals.map((ref: any) => (
                        <div key={ref.id} className="flex items-center justify-between p-2 bg-[#162840] rounded">
                          <div className="flex items-center gap-2">
                            <div className="w-6 h-6 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-xs text-[#38bdac]">
                              {ref.nickname?.charAt(0) || "?"}
                            </div>
                            <span className="text-white text-sm">{ref.nickname}</span>
                          </div>
                          <div className="flex items-center gap-2">
                            {ref.status === 'vip' && (
                              <Badge className="bg-green-500/20 text-green-400 border-0 text-xs">已购</Badge>
                            )}
                            <span className="text-gray-500 text-xs">
                              {ref.createdAt ? new Date(ref.createdAt).toLocaleDateString() : ''}
                            </span>
                          </div>
                        </div>
                      ))
                    ) : (
                      <p className="text-gray-500 text-sm text-center py-4">暂无推荐用户</p>
                    )}
                  </div>
                </div>
              </TabsContent>
            </Tabs>

            {/* 底部操作栏 */}
            <div className="flex justify-end gap-2 pt-4 border-t border-gray-700 mt-4">
              <Button
                variant="outline"
                onClick={onClose}
                className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
              >
                <X className="w-4 h-4 mr-2" />
                关闭
              </Button>
              <Button
                onClick={handleSave}
                disabled={saving}
                className="bg-[#38bdac] hover:bg-[#2da396] text-white"
              >
                <Save className="w-4 h-4 mr-2" />
                {saving ? "保存中..." : "保存修改"}
              </Button>
            </div>
          </div>
        ) : (
          <div className="text-center py-12 text-gray-500">用户不存在</div>
        )}
      </DialogContent>
    </Dialog>
  )
}