import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card } from '@/components/ui/card'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { Star, GitFork, FileText, Edit, FolderGit2, MoreVertical, FileText as IssueIcon, Settings, Play, Trash2, RefreshCw, BookOpen, Copy, Clock, Info, Eye, Square, LinkIcon, ExternalLink, ArrowLeft } from 'lucide-react'
import { useRepoStore } from '../store'
import { useMemo, useState } from 'react'
import { useShallow } from 'zustand/shallow'
import { myOrgs } from '../store/build'
import { app } from '@/agents/app'
import { toast } from 'sonner'
import { useNavigate } from '@tanstack/react-router'
import clsx from 'clsx'

interface RepoCardProps {
  repo: any
  showReturn?: boolean
}

export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
  const [deletePopoverOpen, setDeletePopoverOpen] = useState(false)
  const store = useRepoStore(useShallow((state) => ({
    workspaceList: state.workspaceList,
    getWorkspaceDetail: state.getWorkspaceDetail,
    getList: state.getList,
    buildUpdate: state.buildUpdate,
    stopWorkspace: state.stopWorkspace,
    setSelectedSyncRepo: state.setSelectedSyncRepo,
    setSyncDialogOpen: state.setSyncDialogOpen,
    startWorkspace: state.startWorkspace,
    setEditRepo: state.setEditRepo,
    setShowEditDialog: state.setShowEditDialog,
    deleteItem: state.deleteItem,
  })));
  const workspace = useMemo(() => {
    return store.workspaceList.find(ws => ws.slug === repo.path)
  }, [store.workspaceList, repo.path])
  const isWorkspaceActive = !!workspace
  const navigate = useNavigate();
  const isKnowledge = repo?.flags === "KnowledgeBase"
  const createKnow = async () => {
    const res = await app.run({ path: 'cnb', key: 'build-knowledge-base', payload: { repo: repo.path } })
    if (res.code === 200) {
      toast.success("知识库创建中")
      store.getList({}, true)
    }
  }
  const onClone = async () => {
    const url = `git clone https://cnb.cool/${repo.path}`
    navigator.clipboard.writeText(url).then(() => {
      toast.success('克隆地址已复制到剪贴板')
    }).catch(() => {
      toast.error('复制失败')
    })
  }
  const onUpdate = async () => {
    await store.buildUpdate({ path: repo.path });
  }
  const handleIssue = (repo: any) => {
    window.open(`https://cnb.cool/${repo.path}/-/issues`)
  }
  const handleSettings = (repo: any) => {
    window.open(`https://cnb.cool/${repo.path}/-/settings`)
  }
  const openInCNB = (isDetail = true) => {
    if (!showReturn && isDetail) {
      navigate({ to: `/repo?repo=${repo.path}` })
    } else {
      window.open(`https://cnb.cool/${repo.path}`, '_blank')
    }
  }
  return (
    <>
      <Card className="relative p-0 overflow-hidden border border-neutral-200 bg-white hover:shadow-xl hover:border-neutral-300 transition-all duration-300 group pb-12 md:pb-14">
        <div className="p-4 md:p-6 space-y-3 md:space-y-4">
          <div className="flex items-start justify-between gap-2">
            <div className="flex items-center gap-2 flex-1 min-w-0">
              {showReturn && (
                <button
                  onClick={() => navigate({ to: '/' })}
                  className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors shrink-0"
                >
                  <ArrowLeft className="w-4 h-4 text-neutral-600" />
                </button>
              )}
              <div
                className="text-base md:text-lg font-bold text-neutral-900 hover:text-neutral-600 transition-colors line-clamp-1 group-hover:underline cursor-pointer"
                onClick={() => {
                  openInCNB()
                }}
              >
                {repo.path}
              </div>
              {isKnowledge && (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger
                      render={
                        <div className="shrink-0">
                          <BookOpen className="w-5 h-5 text-neutral-700" />
                        </div>
                      }
                    />
                    <TooltipContent>
                      <p>知识库</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              )}
              {isWorkspaceActive && (
                <span className="relative flex h-2.5 w-2.5 shrink-0">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
                </span>
              )}
            </div>
            <div className="flex items-center gap-1 md:gap-2 shrink-0">
              {isWorkspaceActive && (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger
                      render={
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => {
                            store.stopWorkspace(workspace)
                          }}
                          className="h-8 w-8 p-0 border-neutral-200 hover:border-red-600 hover:bg-red-600 hover:text-white transition-all cursor-pointer"
                        >
                          <Square className="w-4 h-4" />
                        </Button>
                      }
                    />
                    <TooltipContent>
                      <p>停止工作区</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              )}
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger
                    render={
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => {
                          if (!isWorkspaceActive) {
                            store.startWorkspace(repo)
                          } else {
                            store.getWorkspaceDetail(workspace)
                          }

                        }}
                        className="h-8 w-8 p-0 border-neutral-200 hover:border-neutral-900 hover:bg-neutral-900 hover:text-white transition-all cursor-pointer"
                      >
                        {isWorkspaceActive ? <Eye className="w-4 h-4" /> : <Play className="w-4 h-4" />}
                      </Button>
                    }
                  />
                  <TooltipContent>
                    <p>{isWorkspaceActive ? '查看工作区' : '启动工作区'}</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
              <DropdownMenu>
                <DropdownMenuTrigger
                  render={
                    <Button
                      size="sm"
                      variant="outline"
                      className="h-8 w-8 p-0 border-neutral-200 hover:border-neutral-900 hover:bg-neutral-900 hover:text-white transition-all cursor-pointer"
                    >
                      <MoreVertical className="w-4 h-4" />
                    </Button>
                  }
                />
                <DropdownMenuContent align="end" className="w-40">
                  <DropdownMenuItem onClick={() => {
                    window.open(repo.web_url, '_blank')
                  }} className="cursor-pointer">
                    <ExternalLink className="w-4 h-4 mr-2" />
                    访问仓库
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => {
                    store.setEditRepo(repo)
                    store.setShowEditDialog(true)
                  }} className="cursor-pointer">
                    <Edit className="w-4 h-4 mr-2" />
                    编辑
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => {
                    createKnow()
                  }} className="cursor-pointer">
                    <BookOpen className="w-4 h-4 mr-2" />
                    知识库创建
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => {
                    onUpdate()
                  }} className="cursor-pointer">
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger className={'flex gap-1 items-center'}>
                          <Clock className="w-4 h-4 mr-2" />
                          更新时间
                        </TooltipTrigger>
                        <TooltipContent side="right" className="max-w-xs">
                          <p>给仓库添加一个空白 commit 的提交，保证在仓库列表中顺序活跃在前面</p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={onClone} className="cursor-pointer">
                    <Copy className="w-4 h-4 mr-2" />
                    Clone URL
                  </DropdownMenuItem>

                  <DropdownMenuItem onClick={() => handleIssue(repo)} className="cursor-pointer">
                    <IssueIcon className="w-4 h-4 mr-2" />
                    访问问题
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => handleSettings(repo)} className="cursor-pointer">
                    <Settings className="w-4 h-4 mr-2" />
                    访问设置
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={(e) => {
                      e.preventDefault()
                      setDeletePopoverOpen(true)
                    }}
                    className="cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50"
                  >
                    <Trash2 className="w-4 h-4 mr-2" />
                    删除
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
              <Popover open={deletePopoverOpen} onOpenChange={setDeletePopoverOpen}>
                <PopoverTrigger >
                  <div style={{ display: 'none' }} />
                </PopoverTrigger>
                <PopoverContent className="w-80">
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <h4 className="font-medium text-sm">确认删除</h4>
                      <p className="text-sm text-neutral-500">
                        确定要删除仓库 <span className="font-semibold text-neutral-900">{repo.path}</span> 吗？此操作无法撤销。
                      </p>
                    </div>
                    <div className="flex justify-end gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => setDeletePopoverOpen(false)}
                      >
                        取消
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        className="bg-red-600 text-white border-red-600 hover:bg-red-700 hover:border-red-700"
                        onClick={() => {
                          if (repo.path)
                            store.deleteItem(repo.path)
                          setDeletePopoverOpen(false)
                        }}
                      >
                        确认删除
                      </Button>
                    </div>
                  </div>
                </PopoverContent>
              </Popover>
            </div>
          </div>

          <div className="flex flex-wrap gap-1.5 md:gap-2">
            {repo.topics && (<>
              {
                repo.topics.split(',').map((topic: string, idx: number) => (
                  <Badge key={idx} variant="outline" className="text-xs border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition-colors">
                    {topic.trim()}
                  </Badge>
                ))
              }
            </>
            )}
            <Badge variant="outline" className="text-xs border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition-colors">{repo.visibility_level}</Badge>
          </div>
          <div className={clsx(!showReturn && "cursor-pointer")} onClick={() => {
            { !showReturn && openInCNB(false) }
          }}>
            {repo.site && (
              <div
                className="text-xs text-neutral-500 hover:text-neutral-900 hover:underline flex transition-colors"
                onClick={(e) => {
                  window.open(repo.site, '_blank')
                  e.stopPropagation()
                }}
              >
                <LinkIcon className="w-4 h-4 shrink-0 mr-2" />
                <div className='truncate grow'>
                  {repo.site}
                </div>
              </div>
            )}
            {repo.description && (
              <p className="text-sm text-neutral-600 line-clamp-2 min-h-10">
                {repo.description}
              </p>
            )}
          </div>


          <div className="absolute bottom-0 left-0 right-0 flex items-center gap-2 md:gap-4 text-xs text-neutral-500 px-4 md:px-6 py-2 md:py-3 border-t border-neutral-100 bg-neutral-50 overflow-x-auto">
            <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
              <Star className="w-3.5 h-3.5" />
              <span className="font-medium">{repo.star_count}</span>
            </span>
            <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
              <GitFork className="w-3.5 h-3.5" />
              <span className="font-medium">{repo.fork_count}</span>
            </span>
            <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
              <FileText className="w-3.5 h-3.5" />
              <span className="font-medium">{repo.open_issue_count}</span>
            </span>
            {isWorkspaceActive && <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors cursor-pointer whitespace-nowrap"
              onClick={() => {
                store.getWorkspaceDetail(workspace)
              }}>
              <Play className="w-3.5 h-3.5" />
              <span className="font-medium">运行中</span>
            </span>}
          </div>
        </div>
      </Card>
    </>
  )
}