"use client"

import { useState, useEffect } from 'react'
import { SiteHeader } from '@/components/site-header'
import { useFamily } from '@/context/family-context'
import { useRelationship } from '@/hooks/use-relationship'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { Check, ChevronsUpDown, Users, User } from 'lucide-react'
import { cn } from '@/lib/utils'
import { MemberNameWithStatus } from '@/components/member-name-with-status'
import { RelationshipPathDisplay } from '@/components/relationship-path-display'
import { useSession } from 'next-auth/react'
import { EmptyStateBadge } from '@/components/empty-state-badge'
import { useRouter } from 'next/navigation'

export default function RelationshipTestPage() {
  const { treeData } = useFamily()
  const { calculateRelationship, getDirectRelatives, getSiblings } = useRelationship()
  const { data: session, status } = useSession()
  const router = useRouter()
  
  const [fromId, setFromId] = useState<string>('')
  const [toId, setToId] = useState<string>('')
  const [result, setResult] = useState<any>(null)
  const [openFromCombobox, setOpenFromCombobox] = useState(false)
  const [openToCombobox, setOpenToCombobox] = useState(false)

  // 未登录时重定向到登录页
  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin')
    }
  }, [status, router])

  const members = Object.values(treeData.members)

  const handleCalculate = () => {
    if (!fromId || !toId) return
    
    const relationship = calculateRelationship(fromId, toId)
    const fromMember = treeData.members[fromId]
    const toMember = treeData.members[toId]
    
    setResult({
      from: fromMember,
      to: toMember,
      relationship
    })
  }

  // 未登录时不渲染内容（已在 useEffect 中重定向）
  if (status === 'loading' || !session) {
    return null
  }
  
  // 无数据时显示空状态
  if (members.length === 0) {
    return (
      <div className="min-h-screen flex flex-col bg-background">
        <SiteHeader />
        <main className="flex-1 flex items-center justify-center">
          <div className="text-center space-y-4">
            <div className="inline-flex items-center justify-center w-16 h-16 text-primary/80">
              <Users className="h-16 w-16" strokeWidth={1} />
            </div>
            <p className="text-base text-foreground font-light tracking-wide">关系待解</p>
          </div>
        </main>
      </div>
    )
  }

  return (
    <div className="h-screen flex flex-col bg-background">
      <SiteHeader />
      
      {/* 固定标题区域 */}
      <div className="border-b bg-background/95 backdrop-blur z-10 shrink-0">
        <div className="container mx-auto px-4 py-4">
          <div className="max-w-4xl mx-auto">
            <h1 className="text-3xl font-serif font-bold">家族关系计算器</h1>
            <p className="text-sm text-muted-foreground mt-1">
              选择两个家族成员，自动计算他们之间的亲属关系
            </p>
          </div>
        </div>
      </div>
      
      <main className="flex-1 overflow-y-auto">
        <div className="container mx-auto px-4 py-6">
          <div className="max-w-4xl mx-auto space-y-6">
            {/* 选择成员 */}
            <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
            <CardHeader className="text-center pb-4">
              <CardTitle className="text-xl font-serif font-light">选择成员</CardTitle>
              <CardDescription className="text-sm font-light">请选择要计算关系的两个成员</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">成员A</label>
                  <Popover open={openFromCombobox} onOpenChange={setOpenFromCombobox}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={openFromCombobox}
                        className="w-full justify-between"
                      >
                        {fromId
                          ? (() => {
                              const selectedMember = members.find((member) => member.id === fromId)
                              return selectedMember ? (
                                <MemberNameWithStatus 
                                  name={selectedMember.fullName}
                                  isDead={!!selectedMember.deathDate}
                                />
                              ) : "搜索或选择成员A..."
                            })()
                          : "搜索或选择成员A..."}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-full p-0" align="start">
                      <Command>
                        <CommandInput placeholder="输入姓名搜索..." />
                        <CommandList>
                          <CommandEmpty>未找到成员</CommandEmpty>
                          <CommandGroup>
                            {members.map((member) => (
                              <CommandItem
                                key={member.id}
                                value={`${member.fullName} ${member.generation}`}
                                onSelect={() => {
                                  setFromId(member.id)
                                  setOpenFromCombobox(false)
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    fromId === member.id ? "opacity-100" : "opacity-0"
                                  )}
                                />
                                <MemberNameWithStatus 
                                  name={member.fullName}
                                  isDead={!!member.deathDate}
                                /> (第{member.generation}世)
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium">成员B</label>
                  <Popover open={openToCombobox} onOpenChange={setOpenToCombobox}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={openToCombobox}
                        className="w-full justify-between"
                      >
                        {toId
                          ? (() => {
                              const selectedMember = members.find((member) => member.id === toId)
                              return selectedMember ? (
                                <MemberNameWithStatus 
                                  name={selectedMember.fullName}
                                  isDead={!!selectedMember.deathDate}
                                />
                              ) : "搜索或选择成员B..."
                            })()
                          : "搜索或选择成员B..."}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-full p-0" align="start">
                      <Command>
                        <CommandInput placeholder="输入姓名搜索..." />
                        <CommandList>
                          <CommandEmpty>未找到成员</CommandEmpty>
                          <CommandGroup>
                            {members.map((member) => (
                              <CommandItem
                                key={member.id}
                                value={`${member.fullName} ${member.generation}`}
                                onSelect={() => {
                                  setToId(member.id)
                                  setOpenToCombobox(false)
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    toId === member.id ? "opacity-100" : "opacity-0"
                                  )}
                                />
                                <MemberNameWithStatus 
                                  name={member.fullName}
                                  isDead={!!member.deathDate}
                                /> (第{member.generation}世)
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                </div>
              </div>

              <Button 
                onClick={handleCalculate} 
                disabled={!fromId || !toId}
                className="w-full h-10 bg-primary text-primary-foreground hover:bg-primary/90"
              >
                计算关系
              </Button>
            </CardContent>
          </Card>

          {/* 计算结果 */}
          {result && (
            <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
              <CardHeader className="text-center pb-4">
                <CardTitle className="text-xl font-serif font-light">计算结果</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center justify-center gap-4 p-5 bg-muted/30 rounded-lg">
                  <div className="text-center">
                    <div className="text-xl font-serif font-light mb-1">
                      <MemberNameWithStatus 
                        name={result.from.fullName}
                        isDead={!!result.from.deathDate}
                      />
                    </div>
                    <div className="text-sm text-muted-foreground font-light">
                      第{result.from.generation}世
                    </div>
                  </div>

                  <div className="flex flex-col items-center gap-1.5">
                    <Badge className="text-base px-5 py-1.5 bg-primary text-primary-foreground">
                      {result.relationship.term}
                    </Badge>
                    {result.relationship.path && (
                      <div className="text-xs text-muted-foreground">
                        <div className="mb-1">路径:</div>
                        <RelationshipPathDisplay path={result.relationship.path} />
                      </div>
                    )}
                  </div>

                  <div className="text-center">
                    <div className="text-xl font-serif font-light mb-1">
                      <MemberNameWithStatus 
                        name={result.to.fullName}
                        isDead={!!result.to.deathDate}
                      />
                    </div>
                    <div className="text-sm text-muted-foreground font-light">
                      第{result.to.generation}世
                    </div>
                  </div>
                </div>

                {result.relationship.description && (
                  <div className="p-4 bg-primary/5 rounded-lg">
                    <div className="text-sm font-light mb-2 text-center">关系说明</div>
                    <div className="text-muted-foreground font-light text-center">
                      <strong><MemberNameWithStatus name={result.from.fullName} isDead={!!result.from.deathDate} /></strong> 是 <strong><MemberNameWithStatus name={result.to.fullName} isDead={!!result.to.deathDate} /></strong> 的 <strong className="text-primary">{result.relationship.term}</strong>
                    </div>
                  </div>
                )}

                {result.relationship.success === false && (
                  <div className="p-4 bg-yellow-50 dark:bg-yellow-950 rounded-lg">
                    <div className="text-sm text-yellow-800 dark:text-yellow-200">
                      ⚠️ {result.relationship.error || '无法计算关系'}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          )}

          {/* 直系亲属信息 */}
          {(fromId || toId) && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              {fromId && (
                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-lg font-serif font-light">
                      <MemberNameWithStatus 
                        name={treeData.members[fromId]?.fullName || ''}
                        isDead={!!treeData.members[fromId]?.deathDate}
                      /> 的直系亲属
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    {(() => {
                      const relatives = getDirectRelatives(fromId)
                      if (!relatives) return null

                      return (
                        <>
                          <div className="grid grid-cols-1 gap-2">
                            {relatives.father && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">父亲</div>
                                <div className="font-medium">
                                  <MemberNameWithStatus 
                                    name={relatives.father.fullName}
                                    isDead={!!relatives.father.deathDate}
                                  />
                                </div>
                              </div>
                            )}
                            {relatives.mother && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">母亲</div>
                                <div className="font-medium">
                                  <MemberNameWithStatus 
                                    name={relatives.mother.fullName}
                                    isDead={!!relatives.mother.deathDate}
                                  />
                                </div>
                              </div>
                            )}
                            {relatives.spouses.length > 0 && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">配偶</div>
                                {relatives.spouses.map((spouse: any) => (
                                  <div key={spouse.id} className="font-medium">
                                    <MemberNameWithStatus 
                                      name={spouse.fullName}
                                      isDead={!!spouse.deathDate}
                                    />
                                  </div>
                                ))}
                              </div>
                            )}
                            {relatives.children.length > 0 && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">
                                  子女 ({relatives.children.length}人)
                                </div>
                                <div className="space-y-1">
                                  {relatives.children.slice(0, 3).map((child: any) => (
                                    <div key={child.id} className="font-medium text-sm">
                                      <MemberNameWithStatus 
                                        name={child.fullName}
                                        isDead={!!child.deathDate}
                                      />
                                    </div>
                                  ))}
                                  {relatives.children.length > 3 && (
                                    <div className="text-xs text-muted-foreground">
                                      还有 {relatives.children.length - 3} 人...
                                    </div>
                                  )}
                                </div>
                              </div>
                            )}
                          </div>

                          {(() => {
                            const siblings = getSiblings(fromId)
                            if (siblings.length === 0) return null

                            return (
                              <div className="mt-2 p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-2">
                                  兄弟姐妹 ({siblings.length}人)
                                </div>
                                <div className="flex flex-wrap gap-2">
                                  {siblings.map((sibling: any) => (
                                    <Badge key={sibling.id} variant="outline">
                                      <MemberNameWithStatus 
                                        name={sibling.fullName}
                                        isDead={!!sibling.deathDate}
                                      />
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            )
                          })()}
                        </>
                      )
                    })()}
                  </CardContent>
                </Card>
              )}

              {toId && (
                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-lg font-serif font-light">
                      {treeData.members[toId]?.fullName} 的直系亲属
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    {(() => {
                      const relatives = getDirectRelatives(toId)
                      if (!relatives) return null

                      return (
                        <>
                          <div className="grid grid-cols-1 gap-2">
                            {relatives.father && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">父亲</div>
                                <div className="font-medium">
                                  <MemberNameWithStatus 
                                    name={relatives.father.fullName}
                                    isDead={!!relatives.father.deathDate}
                                  />
                                </div>
                              </div>
                            )}
                            {relatives.mother && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">母亲</div>
                                <div className="font-medium">
                                  <MemberNameWithStatus 
                                    name={relatives.mother.fullName}
                                    isDead={!!relatives.mother.deathDate}
                                  />
                                </div>
                              </div>
                            )}
                            {relatives.spouses.length > 0 && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">配偶</div>
                                {relatives.spouses.map((spouse: any) => (
                                  <div key={spouse.id} className="font-medium">
                                    <MemberNameWithStatus 
                                      name={spouse.fullName}
                                      isDead={!!spouse.deathDate}
                                    />
                                  </div>
                                ))}
                              </div>
                            )}
                            {relatives.children.length > 0 && (
                              <div className="p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-1">
                                  子女 ({relatives.children.length}人)
                                </div>
                                <div className="space-y-1">
                                  {relatives.children.slice(0, 3).map((child: any) => (
                                    <div key={child.id} className="font-medium text-sm">
                                      <MemberNameWithStatus 
                                        name={child.fullName}
                                        isDead={!!child.deathDate}
                                      />
                                    </div>
                                  ))}
                                  {relatives.children.length > 3 && (
                                    <div className="text-xs text-muted-foreground">
                                      还有 {relatives.children.length - 3} 人...
                                    </div>
                                  )}
                                </div>
                              </div>
                            )}
                          </div>

                          {(() => {
                            const siblings = getSiblings(toId)
                            if (siblings.length === 0) return null

                            return (
                              <div className="mt-2 p-2.5 bg-muted rounded-lg">
                                <div className="text-sm text-muted-foreground mb-2">
                                  兄弟姐妹 ({siblings.length}人)
                                </div>
                                <div className="flex flex-wrap gap-2">
                                  {siblings.map((sibling: any) => (
                                    <Badge key={sibling.id} variant="outline">
                                      <MemberNameWithStatus 
                                        name={sibling.fullName}
                                        isDead={!!sibling.deathDate}
                                      />
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            )
                          })()}
                        </>
                      )
                    })()}
                  </CardContent>
                </Card>
              )}
            </div>
          )}
          </div>
        </div>
      </main>
    </div>
  )
}