"use client"

import { useState, useMemo, useEffect } from "react"
import { SiteHeader } from "@/components/site-header"
import { useFamily } from "@/context/family-context"
import { useRouter } from "next/navigation"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Search, Plus, Filter, X } from "lucide-react"
import Link from "next/link"
import { AvatarDisplay } from "@/components/ui/avatar-display"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export default function MembersPage() {
  const { treeData, searchMembers, setHighlightedMemberId } = useFamily()
  const router = useRouter()
  const [query, setQuery] = useState("")
  const [showFilters, setShowFilters] = useState(false)
  
  // 从 URL 参数读取搜索关键词
  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const searchParam = params.get('search')
    if (searchParam) {
      setQuery(searchParam)
    }
  }, [])

  // Filter States
  const [selectedSurname, setSelectedSurname] = useState<string>("all")
  const [selectedHome, setSelectedHome] = useState<string>("all")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [generationRange, setGenerationRange] = useState<[number, number]>([1, 100])

  // Derived Data
  const allMembers = useMemo(() => Object.values(treeData.members), [treeData])

  const { uniqueSurnames, uniqueHomes, minGen, maxGen } = useMemo(() => {
    const surnames = new Set<string>()
    const homes = new Set<string>()
    let min = 1000
    let max = 0

    allMembers.forEach((m) => {
      if (m.surname) surnames.add(m.surname)
      if (m.ancestralHome) homes.add(m.ancestralHome)
      if (m.generation) {
        if (m.generation < min) min = m.generation
        if (m.generation > max) max = m.generation
      }
    })

    return {
      uniqueSurnames: Array.from(surnames).sort(),
      uniqueHomes: Array.from(homes).sort(),
      minGen: min === 1000 ? 1 : min,
      maxGen: max === 0 ? 100 : max,
    }
  }, [allMembers])

  // Initialize slider when data loads
  useMemo(() => {
    if (minGen !== 1000 && maxGen !== 0) {
      // Only update if range is default
      // This is a bit tricky, for now let's just rely on user adjustment or default wide range
      // Ideally we sync this once.
    }
  }, [minGen, maxGen])

  const filteredMembers = useMemo(() => {
    let result = allMembers

    // 1. Search Query
    if (query) {
      const lowerQuery = query.toLowerCase()
      result = result.filter(
        (m) =>
          m.fullName.toLowerCase().includes(lowerQuery) ||
          m.courtesyName?.toLowerCase().includes(lowerQuery) ||
          m.artName?.toLowerCase().includes(lowerQuery),
      )
    }

    // 2. Surname Filter
    if (selectedSurname !== "all") {
      result = result.filter((m) => m.surname === selectedSurname)
    }

    // 3. Home Filter
    if (selectedHome !== "all") {
      result = result.filter((m) => m.ancestralHome === selectedHome)
    }

    // 4. Status Filter
    if (statusFilter !== "all") {
      if (statusFilter === "living") {
        result = result.filter((m) => !m.deathDate)
      } else if (statusFilter === "deceased") {
        result = result.filter((m) => !!m.deathDate)
      }
    }

    // 5. Generation Filter
    result = result.filter((m) => m.generation >= generationRange[0] && m.generation <= generationRange[1])

    // Sort
    return result.sort((a, b) => a.generation - b.generation || (a.birthDate || "").localeCompare(b.birthDate || ""))
  }, [allMembers, query, selectedSurname, selectedHome, statusFilter, generationRange])
  
  // 按世代分组
  const membersByGeneration = useMemo(() => {
    const groups = new Map<number, typeof filteredMembers>()
    
    filteredMembers.forEach(member => {
      const gen = member.generation
      if (!groups.has(gen)) {
        groups.set(gen, [])
      }
      groups.get(gen)!.push(member)
    })
    
    // 转换为数组并排序
    return Array.from(groups.entries())
      .sort((a, b) => a[0] - b[0])
      .map(([generation, members]) => ({
        generation,
        members
      }))
  }, [filteredMembers])

  const clearFilters = () => {
    setSelectedSurname("all")
    setSelectedHome("all")
    setStatusFilter("all")
    setGenerationRange([1, 100]) // Reset to wide range
    setQuery("")
  }

  const activeFilterCount =
    (selectedSurname !== "all" ? 1 : 0) +
    (selectedHome !== "all" ? 1 : 0) +
    (statusFilter !== "all" ? 1 : 0) +
    (generationRange[0] > 1 || generationRange[1] < 100 ? 1 : 0)

  return (
    <div className="min-h-screen bg-background flex flex-col font-sans">
      <SiteHeader />
      <main className="container mx-auto py-8 px-4 md:px-6 flex-1">
        <div className="flex flex-col gap-6 mb-8">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <h1 className="text-3xl font-serif font-bold">家族成员列表</h1>
            <div className="flex items-center gap-2 w-full md:w-auto">
              <div className="relative flex-1 md:w-80">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="搜索姓名、字号..."
                  className="pl-9"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                />
              </div>
              <Button
                variant={showFilters || activeFilterCount > 0 ? "secondary" : "outline"}
                size="icon"
                onClick={() => setShowFilters(!showFilters)}
                className="relative"
              >
                <Filter className="h-4 w-4" />
                {activeFilterCount > 0 && (
                  <span className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-primary border-2 border-background" />
                )}
              </Button>
              <Link href="/members/new">
                <Button className="gap-2 bg-primary text-primary-foreground">
                  <Plus className="h-4 w-4" />
                  新增成员
                </Button>
              </Link>
            </div>
          </div>

          {/* Filter Bar */}
          {showFilters && (
            <div className="bg-muted/30 p-4 rounded-lg border border-border space-y-4 animate-in slide-in-from-top-2">
              <div className="flex items-center justify-between">
                <h3 className="font-medium text-sm text-muted-foreground">高级筛选</h3>
                <Button variant="ghost" size="sm" onClick={clearFilters} className="h-8 text-xs">
                  <X className="mr-1 h-3 w-3" /> 重置筛选
                </Button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <Label className="text-xs">姓氏 (Surname)</Label>
                  <Select value={selectedSurname} onValueChange={setSelectedSurname}>
                    <SelectTrigger>
                      <SelectValue placeholder="全部" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">全部 (All)</SelectItem>
                      {uniqueSurnames.map((s) => (
                        <SelectItem key={s} value={s}>
                          {s}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label className="text-xs">籍贯 (Ancestral Home)</Label>
                  <Select value={selectedHome} onValueChange={setSelectedHome}>
                    <SelectTrigger>
                      <SelectValue placeholder="全部" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">全部 (All)</SelectItem>
                      {uniqueHomes.map((h) => (
                        <SelectItem key={h} value={h}>
                          {h}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label className="text-xs">状态 (Status)</Label>
                  <Select value={statusFilter} onValueChange={setStatusFilter}>
                    <SelectTrigger>
                      <SelectValue placeholder="全部" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">全部 (All)</SelectItem>
                      <SelectItem value="living">在世 (Living)</SelectItem>
                      <SelectItem value="deceased">已故 (Deceased)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between">
                    <Label className="text-xs">世系范围 (Generation)</Label>
                    <span className="text-xs text-muted-foreground">
                      {generationRange[0]} - {generationRange[1]} 世
                    </span>
                  </div>
                  <Slider
                    defaultValue={[1, 100]}
                    value={generationRange}
                    min={1}
                    max={100} // Can be dynamic based on maxGen
                    step={1}
                    onValueChange={(val) => setGenerationRange(val as [number, number])}
                    className="py-4"
                  />
                </div>
              </div>
            </div>
          )}
        </div>

        {filteredMembers.length === 0 ? (
          <div className="text-center py-12 text-muted-foreground">
            没有找到匹配的成员。
          </div>
        ) : (
          <div className="space-y-8">
            {membersByGeneration.map(({ generation, members }) => (
              <div key={generation}>
                <div className="flex items-center gap-3 mb-4">
                  <h2 className="text-xl font-serif font-bold text-foreground">第 {generation} 世</h2>
                  <span className="text-sm text-muted-foreground">共 {members.length} 人</span>
                  <div className="flex-1 h-px bg-border"></div>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                  {members.map((member) => (
                    <div key={member.id} className="relative group">
                      <Link href={`/members/${member.id}`}>
                        <Card className="hover:border-primary transition-colors cursor-pointer h-full">
                        <CardContent className="p-3 flex items-start gap-2.5">
                          <AvatarDisplay
                            imageId={member.avatarImageId}
                            fallbackUrl={member.avatarUrl}
                            fallbackText={member.surname}
                            gender={member.gender}
                            className="h-10 w-10 border border-border"
                          />
                          <div className="flex-1 min-w-0">
                            <div className="flex items-baseline justify-between gap-1.5">
                              <h3 className="text-base font-bold font-serif truncate">
                                {member.fullName}
                                {member.courtesyName && (
                                  <span className="text-[11px] font-normal text-muted-foreground ml-1">
                                    字 {member.courtesyName}
                                  </span>
                                )}
                              </h3>
                            </div>
                            <p className="text-[11px] text-muted-foreground mt-0.5 truncate">
                              {member.generationName ? `字辈: ${member.generationName}` : "未录入字辈"}
                            </p>
                            <p className="text-[11px] text-muted-foreground truncate">{member.ancestralHome || "籍贯未知"}</p>
                            {(member.deathDate || member.tags?.length) && (
                              <div className="mt-1.5 flex flex-wrap gap-1">
                                {member.deathDate && (
                                  <span className="text-[9px] bg-neutral-100 text-neutral-600 px-1 py-0.5 rounded border border-neutral-200">
                                    已故
                                  </span>
                                )}
                                {member.tags?.map((tag) => (
                                  <span
                                    key={tag}
                                    className="text-[9px] bg-primary/10 text-primary px-1 py-0.5 rounded border border-primary/20"
                                  >
                                    {tag}
                                  </span>
                                ))}
                              </div>
                            )}
                          </div>
                        </CardContent>
                      </Card>
                    </Link>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0"
                      onClick={() => {
                        setHighlightedMemberId(member.id)
                        router.push('/tree')
                      }}
                      title="在族谱图中定位"
                    >
                      <Search className="h-3 w-3" />
                    </Button>
                  </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}