"use client"

import { SiteHeader } from "@/components/site-header"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, Users, Network, Settings, Shield, FileText } from "lucide-react"

export default function HelpPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      
      <main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-5xl mx-auto space-y-8">
          {/* 标题 */}
          <div>
            <h1 className="text-3xl font-serif font-bold mb-2">使用帮助</h1>
            <p className="text-muted-foreground">
              华夏家谱系统使用指南
            </p>
          </div>

          <Tabs defaultValue="guide" className="space-y-6">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="guide">快速入门</TabsTrigger>
              <TabsTrigger value="roles">角色权限</TabsTrigger>
              <TabsTrigger value="features">功能说明</TabsTrigger>
            </TabsList>

            {/* 快速入门 */}
            <TabsContent value="guide" className="space-y-6">
              <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <BookOpen className="h-6 w-6" />
                    </div>
                    <div>
                      <CardTitle className="text-xl font-serif font-light">使用流程</CardTitle>
                      <CardDescription className="font-light">从创建到完善的完整流程</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-4">
                    <div className="flex gap-4">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                        1
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium mb-1">注册账号</h3>
                        <p className="text-sm text-muted-foreground font-light">
                          使用邮箱注册账号，验证后即可登录系统
                        </p>
                      </div>
                    </div>

                    <div className="flex gap-4">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                        2
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium mb-1">创建家族树</h3>
                        <p className="text-sm text-muted-foreground font-light">
                          首次登录后，点击"开始记录"创建您的第一个家族树，填写家族名称和描述
                        </p>
                      </div>
                    </div>

                    <div className="flex gap-4">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                        3
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium mb-1">添加始祖</h3>
                        <p className="text-sm text-muted-foreground font-light">
                          添加家族的第一位成员（始祖），填写基本信息如姓名、生卒年月、籍贯等
                        </p>
                      </div>
                    </div>

                    <div className="flex gap-4">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                        4
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium mb-1">添加配偶和子女</h3>
                        <p className="text-sm text-muted-foreground font-light">
                          为成员添加配偶关系和子女，系统会自动建立家族关系网络
                        </p>
                      </div>
                    </div>

                    <div className="flex gap-4">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                        5
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium mb-1">完善信息</h3>
                        <p className="text-sm text-muted-foreground font-light">
                          上传照片、填写生平事迹、添加标签等，丰富家族档案
                        </p>
                      </div>
                    </div>

                    <div className="flex gap-4">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                        6
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium mb-1">邀请协作</h3>
                        <p className="text-sm text-muted-foreground font-light">
                          邀请家族成员共同编辑，一起完善家族树
                        </p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                <CardHeader>
                  <CardTitle className="text-xl font-serif font-light">温馨提示</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-muted-foreground font-light">
                    <li>• 建议先从近代祖先开始录入，逐步向上追溯</li>
                    <li>• 尽量填写完整的生卒年月和籍贯信息，便于生成统计和迁徙图</li>
                    <li>• 定期备份数据，可使用导出功能保存家族数据</li>
                    <li>• 上传的照片建议使用清晰的正面照</li>
                    <li>• 邀请家族成员协作时，建议赋予"编辑者"角色</li>
                  </ul>
                </CardContent>
              </Card>
            </TabsContent>

            {/* 角色权限 */}
            <TabsContent value="roles" className="space-y-6">
              <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <Shield className="h-6 w-6" />
                    </div>
                    <div>
                      <CardTitle className="text-xl font-serif font-light">角色说明</CardTitle>
                      <CardDescription className="font-light">不同角色的权限范围</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-6">
                    <div className="p-4 bg-primary/5 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <div className="w-2 h-2 rounded-full bg-primary"></div>
                        <h3 className="font-medium">创建者 (Owner)</h3>
                      </div>
                      <p className="text-sm text-muted-foreground font-light mb-3">
                        家族树的创建者，拥有最高权限
                      </p>
                      <div className="space-y-1 text-sm">
                        <p className="text-muted-foreground font-light">✓ 查看所有信息</p>
                        <p className="text-muted-foreground font-light">✓ 添加、编辑、删除成员</p>
                        <p className="text-muted-foreground font-light">✓ 管理协作者</p>
                        <p className="text-muted-foreground font-light">✓ 导入导出数据</p>
                        <p className="text-muted-foreground font-light">✓ 删除家族树</p>
                      </div>
                    </div>

                    <div className="p-4 bg-muted/30 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                        <h3 className="font-medium">编辑者 (Editor)</h3>
                      </div>
                      <p className="text-sm text-muted-foreground font-light mb-3">
                        可以编辑家族树内容的协作者
                      </p>
                      <div className="space-y-1 text-sm">
                        <p className="text-muted-foreground font-light">✓ 查看所有信息</p>
                        <p className="text-muted-foreground font-light">✓ 添加、编辑成员</p>
                        <p className="text-muted-foreground font-light">✓ 上传照片和文档</p>
                        <p className="text-muted-foreground font-light">✗ 删除成员</p>
                        <p className="text-muted-foreground font-light">✗ 管理协作者</p>
                      </div>
                    </div>

                    <div className="p-4 bg-muted/30 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <div className="w-2 h-2 rounded-full bg-green-500"></div>
                        <h3 className="font-medium">查看者 (Viewer)</h3>
                      </div>
                      <p className="text-sm text-muted-foreground font-light mb-3">
                        只能查看家族树信息的协作者
                      </p>
                      <div className="space-y-1 text-sm">
                        <p className="text-muted-foreground font-light">✓ 查看所有信息</p>
                        <p className="text-muted-foreground font-light">✓ 查看族谱图</p>
                        <p className="text-muted-foreground font-light">✓ 查看统计数据</p>
                        <p className="text-muted-foreground font-light">✗ 编辑任何内容</p>
                        <p className="text-muted-foreground font-light">✗ 添加或删除成员</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            {/* 功能说明 */}
            <TabsContent value="features" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                  <CardHeader>
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <Users className="h-5 w-5" />
                      </div>
                      <CardTitle className="text-lg font-serif font-light">成员管理</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm text-muted-foreground font-light">
                      <li>• 添加、编辑、删除家族成员</li>
                      <li>• 上传成员照片和文档</li>
                      <li>• 记录生平事迹和重要信息</li>
                      <li>• 设置成员标签和分类</li>
                      <li>• 搜索和筛选成员</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                  <CardHeader>
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <Network className="h-5 w-5" />
                      </div>
                      <CardTitle className="text-lg font-serif font-light">族谱图</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm text-muted-foreground font-light">
                      <li>• 可视化展示家族关系</li>
                      <li>• 支持缩放和拖拽</li>
                      <li>• 快速定位成员位置</li>
                      <li>• 导出族谱图片</li>
                      <li>• 多种视图模式</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                  <CardHeader>
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <FileText className="h-5 w-5" />
                      </div>
                      <CardTitle className="text-lg font-serif font-light">关系计算</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm text-muted-foreground font-light">
                      <li>• 自动计算成员间的亲属关系</li>
                      <li>• 显示关系路径</li>
                      <li>• 查看直系亲属信息</li>
                      <li>• 支持复杂关系计算</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                  <CardHeader>
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <Settings className="h-5 w-5" />
                      </div>
                      <CardTitle className="text-lg font-serif font-light">数据管理</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm text-muted-foreground font-light">
                      <li>• 导入已有家族数据</li>
                      <li>• 导出备份数据</li>
                      <li>• 查看修谱记录</li>
                      <li>• 统计分析功能</li>
                      <li>• 时间轴和迁徙图</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}