import type React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SiteHeader } from "@/components/site-header"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserPlus, Network, Map, Calendar, Users, ArrowRight, Clock, Search, BookOpen } from "lucide-react"

export default function DashboardPage() {
  return (
    <div className="flex min-h-screen flex-col bg-background font-sans">
      <SiteHeader />

      <main className="flex-1 container mx-auto py-8 px-4 md:px-6">
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8">
          <div>
            <h1 className="text-3xl font-serif font-bold text-foreground">李氏家族族谱</h1>
            <p className="text-muted-foreground mt-1">陇西堂 · 第 24 代传人</p>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" className="gap-2 bg-transparent">
              <Network className="h-4 w-4" />
              查看世系图
            </Button>
            <Button className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90">
              <UserPlus className="h-4 w-4" />
              添加成员
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <StatCard title="家族成员" value="1,248" subtitle="较上月新增 12 人" icon={<Users className="h-4 w-4" />} />
          <StatCard title="记录年代" value="642 年" subtitle="始于 明朝洪武年间" icon={<Clock className="h-4 w-4" />} />
          <StatCard title="繁衍代数" value="24 代" subtitle="平均代差 26.5 年" icon={<Network className="h-4 w-4" />} />
        </div>

        <Tabs defaultValue="recent" className="w-full">
          <div className="flex items-center justify-between mb-4">
            <TabsList className="bg-muted/50">
              <TabsTrigger value="recent">最近更新</TabsTrigger>
              <TabsTrigger value="anniversaries">近期纪念日</TabsTrigger>
              <TabsTrigger value="migration">迁徙记录</TabsTrigger>
            </TabsList>
            <Button variant="ghost" size="sm" className="text-muted-foreground gap-1">
              查看全部 <ArrowRight className="h-3 w-3" />
            </Button>
          </div>

          <TabsContent value="recent" className="mt-0">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <Card className="lg:col-span-2 border-none shadow-sm bg-card/50 backdrop-blur">
                <CardHeader>
                  <CardTitle className="font-serif">近期修谱动态</CardTitle>
                  <CardDescription>记录家族成员的最新变动与修订</CardDescription>
                </CardHeader>
                <CardContent>
                  <ScrollArea className="h-[400px] pr-4">
                    <div className="space-y-6">
                      {[1, 2, 3, 4, 5].map((i) => (
                        <div key={i} className="flex gap-4 group">
                          <div className="relative flex flex-col items-center">
                            <div className="h-full w-px bg-border group-last:hidden"></div>
                            <div className="absolute top-2 h-2 w-2 rounded-full bg-primary ring-4 ring-background"></div>
                          </div>
                          <div className="pb-2">
                            <div className="flex items-center gap-2 mb-1">
                              <span className="font-medium">李明远</span>
                              <span className="text-xs px-2 py-0.5 rounded-full bg-secondary/20 text-secondary-foreground">
                                第 22 世
                              </span>
                              <span className="text-xs text-muted-foreground">2小时前</span>
                            </div>
                            <p className="text-sm text-muted-foreground">
                              更新了其长子 <span className="text-foreground font-medium">李子豪</span>{" "}
                              的教育经历与职业信息。
                            </p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </CardContent>
              </Card>

              <div className="space-y-6">
                <Card className="border-none shadow-sm bg-primary/5">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-primary font-serif">
                      <Calendar className="h-5 w-5" />
                      本月祭祖/纪念
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="grid gap-4">
                    <div className="flex items-center gap-4 p-3 rounded-lg bg-background/60 border border-border/50">
                      <div className="flex flex-col items-center justify-center w-12 h-12 rounded bg-primary/10 text-primary font-serif">
                        <span className="text-xs">农历</span>
                        <span className="font-bold text-lg">十五</span>
                      </div>
                      <div>
                        <p className="font-medium">李公讳文德 诞辰</p>
                        <p className="text-sm text-muted-foreground">第 18 世祖 · 距今 120 年</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4 p-3 rounded-lg bg-background/60 border border-border/50">
                      <div className="flex flex-col items-center justify-center w-12 h-12 rounded bg-primary/10 text-primary font-serif">
                        <span className="text-xs">农历</span>
                        <span className="font-bold text-lg">廿二</span>
                      </div>
                      <div>
                        <p className="font-medium">冬至祭祖</p>
                        <p className="text-sm text-muted-foreground">全族公祭 · 陇西堂旧址</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card className="border-none shadow-sm">
                  <CardHeader>
                    <CardTitle className="font-serif">快捷入口</CardTitle>
                  </CardHeader>
                  <CardContent className="grid grid-cols-2 gap-3">
                    <Button
                      variant="outline"
                      className="h-auto py-4 flex flex-col gap-2 hover:border-primary hover:text-primary bg-transparent"
                    >
                      <Map className="h-5 w-5" />
                      <span className="text-xs">迁徙地图</span>
                    </Button>
                    <Button
                      variant="outline"
                      className="h-auto py-4 flex flex-col gap-2 hover:border-primary hover:text-primary bg-transparent"
                    >
                      <BookOpen className="h-5 w-5" />
                      <span className="text-xs">家训家规</span>
                    </Button>
                    <Button
                      variant="outline"
                      className="h-auto py-4 flex flex-col gap-2 hover:border-primary hover:text-primary bg-transparent"
                    >
                      <Search className="h-5 w-5" />
                      <span className="text-xs">字辈查询</span>
                    </Button>
                    <Button
                      variant="outline"
                      className="h-auto py-4 flex flex-col gap-2 hover:border-primary hover:text-primary bg-transparent"
                    >
                      <Users className="h-5 w-5" />
                      <span className="text-xs">关系计算</span>
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}

function StatCard({
  title,
  value,
  subtitle,
  icon,
}: { title: string; value: string; subtitle: string; icon: React.ReactNode }) {
  return (
    <Card className="border-none shadow-sm bg-card/50 backdrop-blur transition-all hover:bg-card hover:shadow-md">
      <CardContent className="p-6">
        <div className="flex items-center justify-between space-y-0 pb-2">
          <p className="text-sm font-medium text-muted-foreground">{title}</p>
          <div className="text-muted-foreground bg-muted p-2 rounded-full">{icon}</div>
        </div>
        <div className="flex flex-col mt-2">
          <span className="text-3xl font-serif font-bold text-foreground">{value}</span>
          <p className="text-xs text-muted-foreground mt-1">{subtitle}</p>
        </div>
      </CardContent>
    </Card>
  )
}