"use client"

import { SiteHeader } from "@/components/site-header"
import { useFamily } from "@/context/family-context"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Download, Upload, AlertTriangle, RefreshCw, FileText, Bell, History, Database, User as UserIcon, Settings, User, Users } from "lucide-react"
import Link from "next/link"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { useRef, useState, useEffect } from "react"
import { exportToGedcom, importFromGedcom } from "@/lib/gedcom"
import { ActivityLogViewer } from "@/components/settings/activity-log-viewer"
import { ErrorBoundary } from "@/components/error-boundary"
import { useSession } from "next-auth/react"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ChangePassword } from "@/components/settings/change-password"
import { useDialog } from "@/components/ui/alert-dialog-custom"
import { permissions } from "@/lib/permissions"
import { EmptyStateBadge } from "@/components/empty-state-badge"
import { useRouter } from "next/navigation"

interface UserProfile {
  id: string
  email: string
  name: string | null
  isAdmin: boolean
  createdAt: string
  updatedAt: string
  ownedTreesCount: number
  collaborations: Array<{
    treeId: string
    treeName: string
    role: string
  }>
}

export default function SettingsPage() {
  const { treeData, currentTree, loadData, resetData } = useFamily()
  const role = currentTree?.currentUserRole
  const { data: session, status } = useSession()
  const { showAlert, showConfirm } = useDialog()
  const router = useRouter()
  const [importStatus, setImportStatus] = useState<string>("")
  const [gedcomStatus, setGedcomStatus] = useState<string>("")
  const [userProfile, setUserProfile] = useState<UserProfile | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const gedcomInputRef = useRef<HTMLInputElement>(null)
  
  // 未登录时重定向到登录页
  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin')
    }
  }, [status, router])
  
  const getUserInitial = () => {
    if (session?.user?.name) {
      return session.user.name.charAt(0).toUpperCase()
    }
    if (session?.user?.email) {
      return session.user.email.charAt(0).toUpperCase()
    }
    return "U"
  }

  // 获取用户资料
  useEffect(() => {
    if (session?.user?.id) {
      fetch('/api/user/profile')
        .then(res => res.json())
        .then(data => {
          if (data.user) {
            setUserProfile(data.user)
          }
        })
        .catch(err => console.error('获取用户资料失败:', err))
    }
  }, [session?.user?.id])

  const getRoleText = (role: string) => {
    const roleMap: Record<string, string> = {
      'OWNER': '所有者',
      'EDITOR': '编辑者',
      'VIEWER': '查看者'
    }
    return roleMap[role] || role
  }

  const getRoleBadgeColor = (role: string) => {
    const colorMap: Record<string, string> = {
      'OWNER': 'bg-purple-100 text-purple-700 border-purple-200',
      'EDITOR': 'bg-blue-100 text-blue-700 border-blue-200',
      'VIEWER': 'bg-gray-100 text-gray-700 border-gray-200'
    }
    return colorMap[role] || 'bg-gray-100 text-gray-700'
  }

  // 未登录时不渲染内容（已在 useEffect 中重定向）
  if (status === 'loading' || !session) {
    return null
  }

  return (
    <div className="h-screen bg-background flex flex-col font-sans overflow-hidden">
      <SiteHeader />
      <main className="container mx-auto py-8 px-4 md:px-6 flex-1 max-w-6xl flex flex-col overflow-hidden">
        <div className="flex items-center justify-between mb-8 flex-shrink-0">
          <h1 className="text-3xl font-serif font-bold">系统设置</h1>
          {userProfile?.isAdmin && (
            <Link href="/admin">
              <Button variant="outline" className="gap-2">
                <Users className="h-4 w-4" />
                用户管理
              </Button>
            </Link>
          )}
        </div>

        <div className="space-y-6 overflow-y-auto flex-1 pb-8">
          {/* 用户信息和密码修改 - 两列布局 */}
          {session && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <UserIcon className="h-5 w-5" /> 系统设置
                  </CardTitle>
                  <CardDescription>您的账号信息和角色</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center gap-4">
                    <Avatar className="h-16 w-16 border-2 border-border">
                      <AvatarFallback className="text-2xl">{getUserInitial()}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold">{session.user?.name || "用户"}</h3>
                      <p className="text-sm text-muted-foreground">{session.user?.email}</p>
                      <p className="text-xs text-muted-foreground mt-1">
                        用户 ID: {session.user?.id}
                      </p>
                    </div>
                  </div>

                  {userProfile && (userProfile.ownedTreesCount > 0 || userProfile.collaborations.length > 0) && (
                    <div className="space-y-3 pt-3 border-t">
                      <p className="text-sm font-medium">我的家族树</p>
                      <div className="space-y-2">
                        {/* 显示拥有的家族树（所有者） */}
                        {userProfile.ownedTreesCount > 0 && (
                          <div className="text-sm text-muted-foreground">
                            <span className={`inline-flex items-center px-2 py-1 rounded-full border text-xs ${getRoleBadgeColor('OWNER')}`}>
                              {getRoleText('OWNER')}
                            </span>
                            <span className="ml-2">{userProfile.ownedTreesCount} 个家族树</span>
                          </div>
                        )}
                        
                        {/* 显示协作的家族树 */}
                        {userProfile.collaborations.length > 0 && (
                          <div className="space-y-2">
                            {userProfile.collaborations.map((collab) => (
                              <div key={collab.treeId} className="flex items-center justify-between text-sm p-2 rounded-md bg-muted/50">
                                <span className="text-muted-foreground truncate flex-1">{collab.treeName}</span>
                                <span className={`text-xs px-2 py-1 rounded-full border ${getRoleBadgeColor(collab.role)}`}>
                                  {getRoleText(collab.role)}
                                </span>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                  )}

                  <div className="pt-3 border-t">
                    <p className="text-sm font-medium text-destructive mb-2 flex items-center gap-2">
                      <AlertTriangle className="h-4 w-4" /> 危险区域
                    </p>
                    {permissions.canClearData(role) && (
                      <Button
                      variant="destructive"
                      size="sm"
                      className="w-full"
                      onClick={async () => {
                        const confirmed = await showConfirm("确定要重置吗？所有更改将丢失。", "重置数据", "destructive")
                        if (confirmed) {
                          await resetData()
                          await showAlert("数据已重置为演示状态。", "成功")
                        }
                        }}
                      >
                        重置所有数据
                      </Button>
                    )}
                  </div>
                </CardContent>
              </Card>
              
              <ChangePassword />
            </div>
          )}
          
          {/* 数据管理和 GEDCOM - 两列布局 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Database className="h-5 w-5" /> 数据管理
                </CardTitle>
                <CardDescription>备份和恢复家族树数据。</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* 备份部分 */}
                <div className="space-y-2">
                  <h3 className="text-sm font-medium flex items-center gap-2">
                    <Download className="h-4 w-4" /> 数据备份
                  </h3>
                  <p className="text-sm text-muted-foreground">将家族数据导出为 JSON 文件进行本地保存。</p>
                  {permissions.canExport(role) && (
                    <Button
                      onClick={() => {
                      const dataStr = JSON.stringify(treeData, null, 2)
                      const blob = new Blob([dataStr], { type: "application/json" })
                      const url = URL.createObjectURL(blob)
                      const link = document.createElement("a")
                      link.href = url
                      link.download = `family_tree_backup_${new Date().toISOString().split("T")[0]}.json`
                      document.body.appendChild(link)
                      link.click()
                      document.body.removeChild(link)
                      }}
                    >
                      导出数据 (Export JSON)
                    </Button>
                  )}
                </div>

                <div className="border-t" />

                {/* 恢复部分 */}
                <div className="space-y-4">
                  <div>
                    <h3 className="text-sm font-medium flex items-center gap-2">
                      <Upload className="h-4 w-4" /> 数据恢复
                    </h3>
                    <p className="text-sm text-muted-foreground mt-1">从 JSON 备份文件恢复数据。这将覆盖当前数据。</p>
                  </div>
                  
                  {permissions.canImport(role) && (
                    <div className="flex items-center gap-4">
                      <input
                      type="file"
                      ref={fileInputRef}
                      className="hidden"
                      accept=".json"
                      onChange={async (e) => {
                        const file = e.target.files?.[0]
                        if (!file) return

                        const confirmed = await showConfirm("恢复数据将覆盖当前所有数据，确定继续吗？", "恢复数据", "destructive")
                        if (!confirmed) {
                          if (fileInputRef.current) fileInputRef.current.value = ""
                          return
                        }

                        const reader = new FileReader()
                        reader.onload = async (event) => {
                          try {
                            const jsonStr = event.target?.result as string
                            const data = JSON.parse(jsonStr)
                            await loadData(data)
                            setImportStatus("导入成功！")
                            if (fileInputRef.current) fileInputRef.current.value = ""
                          } catch (err) {
                            console.error(err)
                            setImportStatus("错误：无法解析 JSON 文件")
                          }
                        }
                        reader.readAsText(file)
                      }}
                      />
                      <Button variant="outline" onClick={() => fileInputRef.current?.click()}>
                        选择备份文件...
                      </Button>
                      <span className="text-sm text-muted-foreground">{importStatus}</span>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <FileText className="h-5 w-5" /> GEDCOM 格式
                </CardTitle>
                <CardDescription>导入/导出标准 GEDCOM 格式，兼容其他家谱软件（如 Ancestry、MyHeritage）。</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex flex-col gap-4">
                  {permissions.canExport(role) && (
                    <Button
                      variant="outline"
                      className="justify-start"
                      onClick={() => {
                      const gedcomText = exportToGedcom(treeData)
                      const blob = new Blob([gedcomText], { type: "text/plain;charset=utf-8" })
                      const url = URL.createObjectURL(blob)
                      const link = document.createElement("a")
                      link.href = url
                      link.download = `family_tree_${new Date().toISOString().split("T")[0]}.ged`
                      document.body.appendChild(link)
                      link.click()
                        document.body.removeChild(link)
                      }}
                    >
                      <Download className="mr-2 h-4 w-4" />
                      导出 GEDCOM
                    </Button>
                  )}
                  
                  {permissions.canImport(role) && (
                    <div className="flex items-center gap-2">
                    <input
                      type="file"
                      ref={gedcomInputRef}
                      className="hidden"
                      accept=".ged,.gedcom"
                      onChange={(e) => {
                        const file = e.target.files?.[0]
                        if (!file) return

                        const reader = new FileReader()
                        reader.onload = async (event) => {
                          try {
                            const gedcomText = event.target?.result as string
                            const importedData = importFromGedcom(gedcomText)
                            await loadData(importedData)
                            setGedcomStatus("导入成功！")
                            if (gedcomInputRef.current) gedcomInputRef.current.value = ""
                          } catch (err) {
                            console.error(err)
                            setGedcomStatus("错误：无法解析文件")
                          }
                        }
                        reader.readAsText(file)
                      }}
                    />
                    <Button variant="outline" className="justify-start" onClick={() => gedcomInputRef.current?.click()}>
                      <Upload className="mr-2 h-4 w-4" />
                        导入 GEDCOM
                      </Button>
                      {gedcomStatus && <span className="text-sm text-muted-foreground">{gedcomStatus}</span>}
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* 操作日志 - 全宽 */}
          <ErrorBoundary>
            <ActivityLogViewer />
          </ErrorBoundary>
        </div>
      </main>
    </div>
  )
}